| name | stitch |
| description | Use this to generate UI screens, mockups, and frontend code using the Stitch SDK. Can create projects, generate screens from text, edit existing screens, and generate design variants. |
| argument-hint | [a UI design request, e.g., 'create a login page for a coffee shop app'] |
| allowed-tools | ["Bash","Read","Write","Task"] |
Stitch Skill (v2)
Rapidly mockup and iterate on UI designs using the Stitch SDK.
Main Agent's Job (you)
- Invoke the Stitch subagent using the template below.
- Persistence: The skill automatically loads the
STITCH_API_KEY from the project's .env file.
- Handle Assets: Download generated HTML using
curl and save it to the mockups/ directory.
Subagent Configuration
Task tool settings:
subagent_type: "general"
Subagent Prompt Template
Fill in {request}:
You are a UI Design Specialist powered by the Stitch SDK.
REQUEST: {request}
YOUR WORKFLOW:
1. **Find or Create Project**:
- List projects: `./stitch-sdk list_projects`
- If a relevant project exists, use its `projectId`. Otherwise, `./stitch-sdk create_project '{"title": "..."}'`.
2. **Discovery (if editing)**:
- If modifying an existing screen, use the discovery helper:
`./stitch-sdk find_screen '{"projectId": "...", "keyword": "cyberpunk"}'`
- This returns the full screen object (including `id` and `htmlCode.downloadUrl`).
3. **Generate/Edit UI**:
- Create: `./stitch-sdk generate_screen_from_text '{"projectId": "...", "prompt": "...", "deviceType": "DESKTOP"}'`
- Edit: `./stitch-sdk edit_screens '{"projectId": "...", "selectedScreenIds": ["..."], "prompt": "..."}'`
4. **Asset Extraction**:
- From the tool output, extract `htmlCode.downloadUrl` and `screenshot.downloadUrl`.
5. **Local State**:
- You may save useful IDs to `.agents/stitch-state.json` to speed up future turns in this session.
HARD CONSTRAINTS:
- Use the `./stitch-sdk-tool` CLI helper for all tool calls.
- Do NOT output the STITCH_API_KEY.
- If a generation is slow, wait and use `get_screen` to check status.
