Fixes #324: Implement DesignIteration Agent Skill Example

packages/sdk/README.md

@@ -85,6 +85,10 @@ for (const variant of variants) {
 | `creativeRange` | `string` | `"EXPLORE"` | `"REFINE"`, `"EXPLORE"`, or `"REIMAGINE"` |
 | `aspects` | `string[]` | all | `"LAYOUT"`, `"COLOR_SCHEME"`, `"IMAGES"`, `"TEXT_FONT"`, `"TEXT_CONTENT"` |
 
+### Examples
+
+- [Design Iteration Workflow](./examples/design-iteration/README.md)
+
 ## Tool Client (Agent Usage)
 
 For agents and orchestration scripts that need direct MCP tool access:

packages/sdk/examples/design-iteration/README.md

@@ -0,0 +1,9 @@
+# Design Iteration
+
+Demonstrates how to use the Stitch SDK to build an agent workflow that evaluates and iteratively edits a design.
+
+## Modality
+**Agent Skill**
+
+## Overview
+This folder provides a `SKILL.md` that teaches an agent how to evaluate design output and use `screen.edit()` and `screen.variants()` effectively to iteratively refine a UI.

packages/sdk/examples/design-iteration/SKILL.md

@@ -0,0 +1,27 @@
+# Skill: Design Iteration Workflow
+
+This skill teaches you how to use the Stitch SDK (`@google/stitch-sdk`) to iteratively edit and improve a design based on feedback.
+
+## Usage
+
+1. **Evaluate**: Generate or retrieve a screen, and use `screen.getImage()` to obtain the screenshot URL. Analyze the screenshot to identify issues or improvements.
+2. **Edit**: Use `screen.edit("instruction")` to refine the design.
+3. **Variants**: If exploring options, use `screen.variants("instruction", { variantCount: 3, aspects: ["COLOR_SCHEME"] })`.
+4. **Loop**: Repeat until the design meets requirements.
+
+## Example
+
+```typescript
+import { stitch } from "@google/stitch-sdk";
+
+const project = await stitch.createProject("App");
+let screen = await project.generate("A landing page");
+
+// ...evaluate screen.getImage()...
+
+// Edit based on evaluation
+screen = await screen.edit("Make the header darker");
+
+// Or explore variants
+const variants = await screen.variants("Try different color schemes", { variantCount: 3 });
+```