Help us improve
Share bugs, ideas, or general feedback.
From stitch-design
Upload a wireframe, screenshot, or sketch to Google Stitch for digitization into a clean UI. Use when user provides an image file and asks to convert it to UI or digitize a sketch.
npx claudepluginhub kyzdes/claude-stitch-design --plugin stitch-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-design:stitch-uploadThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Upload an image (wireframe, screenshot, sketch) to Google Stitch to create an editable UI screen from it. The uploaded image serves as a starting point that Stitch interprets and converts into clean HTML with Tailwind CSS.
Creates p5.js generative art with seeded randomness, noise fields, and interactive parameter exploration. Use for algorithmic art, flow fields, or particle systems.
Share bugs, ideas, or general feedback.
Upload an image (wireframe, screenshot, sketch) to Google Stitch to create an editable UI screen from it. The uploaded image serves as a starting point that Stitch interprets and converts into clean HTML with Tailwind CSS.
Identify the image the user wants to upload:
Save a copy to ./stitch-design/references/ for tracking.
Ask the user:
Project management:
./stitch-design/context-map.md — check for active projectcreate_project, IMMEDIATELY write ID to context-map.md before uploadTell the user: "Uploading and processing image (~1 min)..."
upload_screens_from_images(projectId: "...", images: [{ filePath: "<path>", mimeType: "image/png" }])
If the call succeeds → proceed to Step 4.
If ECONNRESET / timeout / fetch failed:
list_screens(projectId) — check for new screensIf the user wants modifications from the original, use edit with the same fire-and-poll protocol:
edit_screens(projectId: "...", screenIds: ["<screenId>"], prompt: "<refinement prompt>")
Use human-readable paths:
node ${CLAUDE_PLUGIN_ROOT}/scripts/download.mjs "<html-url>" "./stitch-output/{project-slug}/{screen-slug}/index.html"
node ${CLAUDE_PLUGIN_ROOT}/scripts/download.mjs "<image-url>" "./stitch-output/{project-slug}/{screen-slug}/preview.png"
Inline preview: Read the PNG file via Read tool — displays the image inline in chat.
Open in browser:
open ./stitch-output/{project-slug}/{screen-slug}/index.html
ECONNRESET / timeout: Use fire-and-poll protocol (Step 3). The upload usually completes server-side.
All MCP calls failing: Ask user to check API key and restart Claude Code. Do not attempt workarounds.
Max retries: 2 per upload/edit operation.