{"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 uses the local toolkit at `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}` instead of a Stitch MCP tool.\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## 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.\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.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (3,142 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-04-24T01:03:50.995Z","embedding":null,"createdAt":"2026-04-23T19:06:51.147Z","updatedAt":"2026-04-24T01:03:50.995Z","lastSeenAt":"2026-04-24T01:03:50.995Z","tsv":"'/.env':108 '/runs':117,463 '/runs/latest-screen.json':131 '1':221,408 '2':235,411 '3':256,281,417 '4':270,420 '5':283 '6':295 '7':306 'action':403,422 'alreadi':239,288 'alway':296 'api':99,312 'artifact':41,346,468 'ask':265 'assess':477 'audienc':389 'base':214 'best':480 'better':378 'bodi':416 'brief':3,151,191,323 'carri':250 'chang':199 'chosen':336 'clear':264 'cli':485 'cli-usag':484 'close':289 'codebas':242 'command':225,342,440 'compar':34 'complet':343 'compon':433 'content':316,413,419 'context':7,245,252 'core':219 'creat':56 'dashboard':415 'default':260 'densiti':432 'design':12,40,65,159,196,208,233,329,374,476 'desktop':258 'desktop/mobile':392 'detail':424 'direct':36,211,426 'download':473 'edit':30,168,207,291,338 'edit-design':206 'env':315,449 'exist':32,62,202 'expect':102 'explor':26,275 'export':68,179 'expos':310 'file':303 'first':248,273,393 'first-pass':272 'folder':356,457 'footer':421 'friend':16 'full':293 'generat':64,148,171,278,337 'goal':395 'good':318 'header':409 'hero':414 'high':444 'home/.agents/stitch-starter':84,98,107,116,130,462 'html':17,70,176,465 'id':352,354,454 'idea':155 'imag':467 'implement':162 'includ':350 'inspect':246 'instead':85 'intent':387 'key':100,313 'keyword':367,490 'languag':45,375 'latest':119 'level':445 'like':321,381 'local':39,69,78,91,180,347 'look':320 'main':412 'matter':404 'mcp':89 'md':383 'mobil':267 'mockup':4 'multipl':210 'natur':44 'natural-languag':43 'navig':410 'never':307 'new':28,58,185 'next':361,481 'one':63,213,277 'output':109,319,355,456 'overal':384 'page':394,406 'palett':427 'pass':274 'path':469 'platform':390 'plus':280 'prefer':257,276,290 'primari':402 'print':308 'product':6,386 'project':351,451 'prompt':189,234,255,330,362,366,380,489 'prompt-keyword':365,488 'read':192,205,216 'refer':483 'references/cli-usage.md':487 'references/prompt-keywords.md':368,491 'refin':60 'regener':294 'report':438 'request':229,372 'respons':349 'result':123,302 'review':182 'rewrit':226 'rewritten':325 'right':332 'role':428 'root':83,94,97,106,115,129,461 'rough':154 'rout':184 'rule':220 'run':436 'save':38,111,305,345 'say':137 'screen':11,29,33,59,122,147,172,186,204,215,279,286,353,398,453 'screenshot':19,72,178 'secondari':418 'secret':448 'setup':92 'shape':363 'short':475 'singl':121 'single-screen':120 'skill':50 'skill-stitchflow' 'source-yshishenya' 'space':431 'spec':152 'starter':82,96,105,114,128,460 'step':482 'stitch':9,74,81,88,95,104,113,127,140,203,224,311,333,376,437,459 'stitchflow':1,47,142 'stronger':232,328 'structur':379,407 'style':434 'support':423 'tablet':269 'tailwind':15 'tailwind-friend':14 'target':166,198 'tell':297 'text':194 'text-to-design':193 'tone':430 'tool':90 'toolkit':79,93 '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':125 'translat':370 'turn':2 'typographi':429 'ui':10,244 'understand':377 'unless':261 'usag':486 'use':20,48,76,134,139,364,441 'user':23,53,136,144,157,164,174,228,238,263,299 'vagu':371 'variant':13,66,160,217,282,340 'vibe':385 'visual':35,167,425 'want':24,54,145,158,165,175 'web/mobile':391 'workflow':183,334 'workflows/edit-design.md':209 'workflows/text-to-design.md':197 'workflows/variants.md':218","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-04-24T01:03:50.995Z"}],"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":9,"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-03-20T03:16:24Z","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":"e6a4b6db2b59490c77242d09db89ccb4da8905ba","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 the local stitch-starter toolkit installed by this repository."},"skills_sh_url":"https://skills.sh/yshishenya/stitchflow/stitchflow"},"updatedAt":"2026-04-24T01:03:50.995Z"}}