diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 06bc3b3..214e12f 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -297,4 +297,7 @@ Program](https://bughunters.google.com/open-source-security). ## License -Apache 2.0 — see [LICENSE](LICENSE) for details. \ No newline at end of file +Apache 2.0 — see [LICENSE](LICENSE) for details. +## Examples + +- [Design Iteration Workflow](./examples/design-iteration/): Agent Skill demonstrating iterative generation and refinement of designs. diff --git a/packages/sdk/examples/design-iteration/README.md b/packages/sdk/examples/design-iteration/README.md new file mode 100644 index 0000000..4fbe9c5 --- /dev/null +++ b/packages/sdk/examples/design-iteration/README.md @@ -0,0 +1,9 @@ +# Design Iteration + +This example demonstrates an Agent Skill for iteratively generating and refining UI designs using the Stitch SDK. + +Agents can read the `SKILL.md` file in this directory to learn how to: +- Generate an initial screen. +- Use `screen.getImage()` to evaluate the current design. +- Use `screen.edit()` for targeted modifications. +- Use `screen.variants()` to explore different design directions. diff --git a/packages/sdk/examples/design-iteration/SKILL.md b/packages/sdk/examples/design-iteration/SKILL.md new file mode 100644 index 0000000..818386d --- /dev/null +++ b/packages/sdk/examples/design-iteration/SKILL.md @@ -0,0 +1,12 @@ +# Agent Skill: Design Iteration + +This skill teaches you how to iteratively improve a generated design by evaluating its output and using the SDK's edit and variants capabilities. + +## Workflow + +1. **Generate Initial Screen:** Use `project.generate(prompt)` to create a starting point. +2. **Evaluate Output:** Fetch the generated image using `screen.getImage()`. Inspect the visual output to decide what needs improvement. +3. **Iterate:** + - **Refine Specifics:** If you need specific changes (e.g., "make the button blue"), use `screen.edit("make the button blue")`. + - **Explore Options:** If the general direction is wrong, use `screen.variants("Try different color schemes", { variantCount: 3, creativeRange: "EXPLORE", aspects: ["COLOR_SCHEME", "LAYOUT"] })`. +4. **Repeat:** Evaluate the new outputs and repeat step 3 until the design meets the user's intent.