{"id":"d68c6855-16c0-477d-b205-4f4e3a15bee0","shortId":"EWKXBT","kind":"skill","title":"stitchflow","tagline":"Turn briefs, mockups, and product context into Stitch UI screens, design variants, Tailwind-friendly HTML, and screenshots. Use when the user wants to explore a new screen, edit an existing screen, compare visual directions, or save local design artifacts from natural-language in","description":"# StitchFlow\n\nUse this skill when the user wants to create a new screen, refine an existing one, generate design variants, or export local HTML and screenshots through Stitch.\n\nIt prefers native Stitch MCP tools when they are available in the current agent session, and falls back to the local toolkit at `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}` when they are not.\n\n## Local setup\n\n- Toolkit root: `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}`\n- API key is expected in `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env`\n- Outputs are saved to `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs`\n- The latest single-screen result is tracked in `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/latest-screen.json`\n\n## Native MCP setup\n\nIf the current client exposes Stitch MCP tools such as `create_project`, `generate_screen_from_text`, `generate_variants`, and `get_screen`, use those tools first. Native MCP avoids local SDK transport issues and is the most reliable path in Codex after the client has been restarted with the Stitch MCP server configured.\n\nFor Codex, a minimal MCP config looks like this:\n\n```toml\n[mcp_servers.stitch]\nurl = \"https://stitch.googleapis.com/mcp\"\nenabled = true\n\n[mcp_servers.stitch.http_headers]\n\"X-Goog-Api-Key\" = \"<your Stitch API key>\"\n```\n\nRestart the client after changing MCP config so the `stitch` tools are loaded into the session.\n\n## When to use\n\n- The user says to use Stitch or StitchFlow\n- The user wants a screen generated from a brief, spec, or rough idea\n- The user wants design variants before implementation\n- The user wants targeted visual edits to a generated screen\n- The user wants HTML and screenshots exported locally for review\n\n## Workflow routing\n\n- New screen from a prompt or brief:\n  Read [text-to-design](workflows/text-to-design.md)\n- Targeted changes to an existing Stitch screen:\n  Read [edit-design](workflows/edit-design.md)\n- Multiple directions from one base screen:\n  Read [variants](workflows/variants.md)\n\n## Core rules\n\n1. Before any Stitch command, rewrite the user request into a stronger design prompt.\n2. If the user already has a codebase or UI context, inspect it first and carry that context into the prompt.\n3. Prefer `DESKTOP` by default unless the user clearly asks for mobile or tablet.\n4. For first-pass exploration, prefer one generated screen plus `3` variants.\n5. If a screen is already close, prefer `edit` over full regeneration.\n6. Always tell the user where the resulting files were saved.\n7. Never print or expose `STITCH_API_KEY` or `.env` contents.\n8. When native MCP returns `downloadUrl` values, save the HTML and screenshot locally into the normal `runs/` artifact layout before reporting completion.\n\n## What good output looks like\n\n- the brief is rewritten into a stronger design prompt\n- the right Stitch workflow is chosen: generate, edit, or variants\n- the command completes and saves artifacts locally\n- the response includes project id, screen id, output folder, and what to do next\n\n## Prompt shaping\n\nUse [prompt-keywords](references/prompt-keywords.md) to translate vague requests into design language Stitch understands better.\n\nStructure prompts like this:\n\n```md\n[overall vibe, product intent, and audience]\n\nPlatform: [web/mobile], [desktop/mobile]-first\n\nPage goal:\n- what the screen is for\n- what primary action matters most\n\nPage structure:\n1. Header / navigation\n2. Main content / hero / dashboard body\n3. Secondary content\n4. Footer / actions / supporting detail\n\nVisual direction:\n- palette roles\n- typography tone\n- spacing density\n- component style\n```\n\n## After running Stitch\n\nReport:\n\n- the command used at a high level, not the secret env\n- the project and screen ids\n- the output folder under `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs`\n- the HTML and image artifact paths if they were downloaded\n- a short design assessment and the best next step\n\n## References\n\n- [cli-usage](references/cli-usage.md)\n- [prompt-keywords](references/prompt-keywords.md)","tags":["stitchflow","yshishenya","agent-skills","agentic-skills","claude-code","claude-skills","codex","codex-cli","design-engineering","design-generation","design-iteration","design-variants"],"capabilities":["skill","source-yshishenya","skill-stitchflow","topic-agent-skills","topic-agentic-skills","topic-claude-code","topic-claude-skills","topic-codex","topic-codex-cli","topic-design-engineering","topic-design-generation","topic-design-iteration","topic-design-variants","topic-gemini-cli","topic-github-copilot"],"categories":["stitchflow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/yshishenya/stitchflow/stitchflow","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add yshishenya/stitchflow","source_repo":"https://github.com/yshishenya/stitchflow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (4,046 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:11.512Z","embedding":null,"createdAt":"2026-04-23T19:06:51.147Z","updatedAt":"2026-05-18T19:08:11.512Z","lastSeenAt":"2026-05-18T19:08:11.512Z","tsv":"'/.env':123 '/mcp':216 '/runs':132,595 '/runs/latest-screen.json':146 '1':331,540 '2':345,543 '3':366,391,549 '4':380,552 '5':393 '6':405 '7':416 '8':427 'action':535,554 'agent':88 'alreadi':349,398 'alway':406 'api':114,224,422 'artifact':41,444,478,600 'ask':375 'assess':609 'audienc':521 'avail':84 'avoid':177 'back':92 'base':324 'best':612 'better':510 'bodi':548 'brief':3,261,301,455 'carri':360 'chang':230,309 'chosen':468 'clear':374 'cli':617 'cli-usag':616 'client':153,192,228 'close':399 'codebas':352 'codex':189,203 'command':335,474,572 'compar':34 'complet':448,475 'compon':565 'config':207,232 'configur':201 'content':426,545,551 'context':7,355,362 'core':329 'creat':56,160 'current':87,152 'dashboard':547 'default':370 'densiti':564 'design':12,40,65,269,306,318,343,461,506,608 'desktop':368 'desktop/mobile':524 'detail':556 'direct':36,321,558 'download':605 'downloadurl':432 'edit':30,278,317,401,470 'edit-design':316 'enabl':217 'env':425,581 'exist':32,62,312 'expect':117 'explor':26,385 'export':68,289 'expos':154,420 'fall':91 'file':413 'first':174,358,383,525 'first-pass':382 'folder':488,589 'footer':553 'friend':16 'full':403 'generat':64,162,166,258,281,388,469 'get':169 'goal':527 'good':450 'goog':223 'header':220,541 'hero':546 'high':576 'home/.agents/stitch-starter':101,113,122,131,145,594 'html':17,70,286,436,597 'id':484,486,586 'idea':265 'imag':599 'implement':272 'includ':482 'inspect':356 'intent':519 'issu':181 'key':115,225,423 'keyword':499,622 'languag':45,507 'latest':134 'layout':445 'level':577 'like':209,453,513 'load':238 'local':39,69,95,106,178,290,439,479 'look':208,452 'main':544 'matter':536 'mcp':79,148,156,176,199,206,231,430 'mcp_servers.stitch':212 'mcp_servers.stitch.http':219 'md':515 'minim':205 'mobil':377 'mockup':4 'multipl':320 'nativ':77,147,175,429 'natur':44 'natural-languag':43 'navig':542 'never':417 'new':28,58,295 'next':493,613 'normal':442 'one':63,323,387 'output':124,451,487,588 'overal':516 'page':526,538 'palett':559 'pass':384 'path':187,601 'platform':522 'plus':390 'prefer':76,367,386,400 'primari':534 'print':418 'product':6,518 'project':161,483,583 'prompt':299,344,365,462,494,498,512,621 'prompt-keyword':497,620 'read':302,315,326 'refer':615 'references/cli-usage.md':619 'references/prompt-keywords.md':500,623 'refin':60 'regener':404 'reliabl':186 'report':447,570 'request':339,504 'respons':481 'restart':195,226 'result':138,412 'return':431 'review':292 'rewrit':336 'rewritten':457 'right':464 'role':560 'root':100,109,112,121,130,144,593 'rough':264 'rout':294 'rule':330 'run':443,568 'save':38,126,415,434,477 'say':247 'screen':11,29,33,59,137,163,170,257,282,296,314,325,389,396,485,530,585 'screenshot':19,72,288,438 'sdk':179 'secondari':550 'secret':580 'server':200 'session':89,241 'setup':107,149 'shape':495 'short':607 'singl':136 'single-screen':135 'skill':50 'skill-stitchflow' 'source-yshishenya' 'space':563 'spec':262 'starter':99,111,120,129,143,592 'step':614 'stitch':9,74,78,98,110,119,128,142,155,198,235,250,313,334,421,465,508,569,591 'stitch.googleapis.com':215 'stitch.googleapis.com/mcp':214 'stitchflow':1,47,252 'stronger':342,460 'structur':511,539 'style':566 'support':555 'tablet':379 'tailwind':15 'tailwind-friend':14 'target':276,308 'tell':407 'text':165,304 'text-to-design':303 'toml':211 'tone':562 'tool':80,157,173,236 'toolkit':96,108 'topic-agent-skills' 'topic-agentic-skills' 'topic-claude-code' 'topic-claude-skills' 'topic-codex' 'topic-codex-cli' 'topic-design-engineering' 'topic-design-generation' 'topic-design-iteration' 'topic-design-variants' 'topic-gemini-cli' 'topic-github-copilot' 'track':140 'translat':502 'transport':180 'true':218 'turn':2 'typographi':561 'ui':10,354 'understand':509 'unless':371 'url':213 'usag':618 'use':20,48,171,244,249,496,573 'user':23,53,246,254,267,274,284,338,348,373,409 'vagu':503 'valu':433 'variant':13,66,167,270,327,392,472 'vibe':517 'visual':35,277,557 'want':24,54,255,268,275,285 'web/mobile':523 'workflow':293,466 'workflows/edit-design.md':319 'workflows/text-to-design.md':307 'workflows/variants.md':328 'x':222 'x-goog-api-key':221","prices":[{"id":"4ca2d309-e18d-4b35-b566-a928c505882d","listingId":"d68c6855-16c0-477d-b205-4f4e3a15bee0","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"yshishenya","category":"stitchflow","install_from":"skills.sh"},"createdAt":"2026-04-23T19:06:51.147Z"}],"sources":[{"listingId":"d68c6855-16c0-477d-b205-4f4e3a15bee0","source":"github","sourceId":"yshishenya/stitchflow/stitchflow","sourceUrl":"https://github.com/yshishenya/stitchflow/tree/main/skills/stitchflow","isPrimary":false,"firstSeenAt":"2026-04-23T19:06:51.147Z","lastSeenAt":"2026-05-18T19:08:11.512Z"}],"details":{"listingId":"d68c6855-16c0-477d-b205-4f4e3a15bee0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"yshishenya","slug":"stitchflow","github":{"repo":"yshishenya/stitchflow","stars":11,"topics":["agent-skills","agentic-skills","claude-code","claude-skills","codex","codex-cli","design-engineering","design-generation","design-iteration","design-variants","gemini-cli","github-copilot","openclaw","prompt-to-html","skill-md","stitch","stitch-sdk","tailwindcss","ui-design","ui-prototyping"],"license":"apache-2.0","html_url":"https://github.com/yshishenya/stitchflow","pushed_at":"2026-05-07T15:34:16Z","description":"StitchFlow turns prompts into UI directions, Tailwind-friendly HTML, and screenshots across Codex, Claude Code, OpenClaw, GitHub Copilot, and Gemini CLI.","skill_md_sha":"91aad60525949ca9df3b33d36c1aad4f35351f1b","skill_md_path":"skills/stitchflow/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/yshishenya/stitchflow/tree/main/skills/stitchflow"},"layout":"multi","source":"github","category":"stitchflow","frontmatter":{"name":"stitchflow","description":"Turn briefs, mockups, and product context into Stitch UI screens, design variants, Tailwind-friendly HTML, and screenshots. Use when the user wants to explore a new screen, edit an existing screen, compare visual directions, or save local design artifacts from natural-language input.","compatibility":"Requires Node.js 22+, a configured STITCH_API_KEY, and either native Stitch MCP tools or the local stitch-starter toolkit installed by this repository."},"skills_sh_url":"https://skills.sh/yshishenya/stitchflow/stitchflow"},"updatedAt":"2026-05-18T19:08:11.512Z"}}