From aadf7ad16df1c8337631852b39a358c43d7417ed Mon Sep 17 00:00:00 2001
From: davideast <4570265+davideast@users.noreply.github.com>
Date: Thu, 23 Apr 2026 04:23:16 +0000
Subject: [PATCH] feat: Implement DesignIteration Agent Skill Example

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 packages/sdk/README.md                        |  4 +++
 .../sdk/examples/design-iteration/README.md   |  9 +++++++
 .../sdk/examples/design-iteration/SKILL.md    | 27 +++++++++++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 packages/sdk/examples/design-iteration/README.md
 create mode 100644 packages/sdk/examples/design-iteration/SKILL.md

diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 06bc3b3..a6f7a81 100644
--- a/packages/sdk/README.md
+++ b/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:
diff --git a/packages/sdk/examples/design-iteration/README.md b/packages/sdk/examples/design-iteration/README.md
new file mode 100644
index 0000000..c67e1df
--- /dev/null
+++ b/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.
diff --git a/packages/sdk/examples/design-iteration/SKILL.md b/packages/sdk/examples/design-iteration/SKILL.md
new file mode 100644
index 0000000..4a6a039
--- /dev/null
+++ b/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 });
+```