stitch

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)

1. Invoke the Stitch subagent using the template below.
2. Persistence: The skill automatically loads the STITCH_API_KEY from the project's .env file.
3. 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.