stitch-sdklisted
Install: claude install-skill tomerhayundev/skills
# Stitch SDK: AI-Powered UI Generation
Generate production-quality UI screens from text prompts using `@google/stitch-sdk`. Extract HTML and screenshots programmatically. Works standalone, in agent pipelines, or with Vercel AI SDK.
## When to Use
- Generating UI screens/pages from text descriptions
- Editing or iterating on generated designs
- Creating design variants (color, layout, fonts)
- Extracting HTML or screenshot URLs from generated screens
- Building AI agents that create UI autonomously
- Prototyping UI flows without manual design tools
## When NOT to Use
- Static HTML/CSS coding by hand (no generation needed)
- Design systems that don't involve AI generation
- Image generation (Stitch generates UI, not arbitrary images)
## Prerequisites
```bash
npm install -g @google/stitch-sdk
```
Set your API key:
```bash
export STITCH_API_KEY="your-api-key"
```
Get your API key from [stitch.withgoogle.com](https://stitch.withgoogle.com): go to your account settings to generate one.
## Core Pattern: Generate → Edit → Extract
```ts
import { stitch } from "@google/stitch-sdk";
// 1. Create a project (container for screens)
const project = await stitch.createProject("My App");
// 2. Generate a screen from a text prompt
const screen = await project.generate("A login page with email and password fields");
// 3. Edit the screen iteratively
const edited = await screen.edit("Make the background dark and add a sidebar");
// 4. Extract outputs
const html = await edited.getH