From f475ab291cdb2273522196e75b3362751b990b71 Mon Sep 17 00:00:00 2001 From: davideast <4570265+davideast@users.noreply.github.com> Date: Thu, 23 Apr 2026 04:21:20 +0000 Subject: [PATCH] Fixes #323 Implemented the DesignToReact Agent Skill example. Added SKILL.md, extract-assets.ts script, and README.md under packages/sdk/examples/design-to-react/. Updated SDK README to point to the new example. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> --- packages/sdk/README.md | 6 +- .../sdk/examples/design-to-react/README.md | 28 +++++++ .../sdk/examples/design-to-react/SKILL.md | 74 +++++++++++++++++++ .../design-to-react/scripts/extract-assets.ts | 60 +++++++++++++++ 4 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 packages/sdk/examples/design-to-react/README.md create mode 100644 packages/sdk/examples/design-to-react/SKILL.md create mode 100644 packages/sdk/examples/design-to-react/scripts/extract-assets.ts diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 06bc3b3..1f34d0e 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -297,4 +297,8 @@ 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 + +Check out the [examples/](examples/) directory for practical workflows and agent skills: +- [Design to React Component](examples/design-to-react/) — An Agent Skill demonstrating how to convert Stitch designs into modular React components. diff --git a/packages/sdk/examples/design-to-react/README.md b/packages/sdk/examples/design-to-react/README.md new file mode 100644 index 0000000..dc1722b --- /dev/null +++ b/packages/sdk/examples/design-to-react/README.md @@ -0,0 +1,28 @@ +# Design to React Component + +This is an **Agent Skill** example. It demonstrates how an AI agent can use the Stitch SDK to generate a UI design and then convert that raw HTML/Tailwind output into a clean, modular React component. + +Converting raw design output to React requires intelligence—interpreting the semantic structure of the HTML, extracting the Tailwind configuration, and mapping it to JSX props. Because it requires judgment, this workflow is best suited for an Agent Skill rather than a static script. + +## Files + +- `SKILL.md` — Instructions you can give to an LLM agent to teach it this workflow. +- `scripts/extract-assets.ts` — A deterministic helper script the agent can run to extract the HTML and design tokens. + +## Prerequisites + +1. A valid `STITCH_API_KEY` set in your environment. +2. Install the required dependencies from the root directory: `bun install`. + +## How to run + +Since this is an Agent Skill, you don't "run" it directly. Instead, you point an agent at the `SKILL.md` file. + +To test the helper script directly: + +```bash +cd packages/sdk/examples/design-to-react +bun scripts/extract-assets.ts +``` + +This will generate a design, download the HTML, and parse out the Tailwind configuration and Google Fonts. diff --git a/packages/sdk/examples/design-to-react/SKILL.md b/packages/sdk/examples/design-to-react/SKILL.md new file mode 100644 index 0000000..86da206 --- /dev/null +++ b/packages/sdk/examples/design-to-react/SKILL.md @@ -0,0 +1,74 @@ +# Skill: Design to React Component + +This skill teaches you how to use the Stitch SDK to generate a UI design from a prompt, and then convert that raw HTML and Tailwind output into a clean, reusable React component. + +## Context + +The Stitch SDK outputs raw HTML that includes: +- Inline Tailwind CSS classes. +- A Tailwind configuration object embedded in a `