skills.rest
Simon-YHKim
Simon-YHKimCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design-flow

Generates Safe, Bold, and Wild Google Stitch design prompts from a DESIGN.md file.

Updated Apr 5, 2026
Search Tags:#branding#prompt generation#wireframe#design.md#design prompts#google stitch#ui mockup
One-click install
npx skills add https://github.com/Simon-YHKim/eject-button --skill stitch-design-flow-simon-yhkim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design-flow
Source: https://github.com/Simon-YHKim/eject-button/tree/main/.claude/skills/stitch-design-flow
Command: npx skills add https://github.com/Simon-YHKim/eject-button --skill stitch-design-flow-simon-yhkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Turning a product's brand definition into usable AI mockup prompts is slow and inconsistent. This Skill reads an existing DESIGN.md and produces three strategically different, paste-ready prompts for Google Stitch, so you can compare design directions before committing. ## Core Features & Use Cases - Three-variant prompt generation: Produces Safe (Stripe/Linear), Bold (Figma/Arc), and Wild (Raycast/experimental) prompts for every key screen defined in DESIGN.md. - Automated parsing script: A bundled bash script extracts product name, pitch, audience, tone, colors, fonts, and screens from DESIGN.md and writes dated output to docs/design/. - Industry prompt recipes: Reference guides for SaaS, e-commerce, fintech, real estate, education, AI products, and more, with Korean-market constraints like bilingual copy. - Use Case: You have a Korean SaaS product with a DESIGN.md. Run the skill to get 3 prompts per screen, paste each into stitch.withgoogle.com, save the images, then hand off to design review or HTML conversion skills. ## Quick Start Ask the assistant to generate Stitch design prompts from the DESIGN.md in the repository root.

Frequently Asked Questions about stitch-design-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Google Stitch design prompts from a DESIGN.md?▼

Run the bundled script with bash scripts/generate-prompts.sh DESIGN.md. It parses the six brand inputs (product, pitch, audience, tone, colors, fonts) and writes Safe, Bold, and Wild prompt variants per screen to docs/design/stitch-prompts-<date>.md.

What is the difference between Safe, Bold, and Wild design prompt variants?▼

Safe follows proven conventions like Stripe and Linear, Bold picks a strong visual voice like Figma or Arc, and Wild pushes experimental territory like Raycast or Awwwards winners. Generating all three forces comparison of tradeoffs before committing to a direction.

Does Google Stitch have an API or MCP server for automation?▼

No. Stitch is a web UI only at stitch.withgoogle.com with no public API, MCP, or CLI. This skill produces text prompts that you paste manually into the Stitch web interface, one prompt at a time.

What happens if DESIGN.md is missing or uses a non-standard structure?▼

The skill stops and asks you to run a design consultation first, since it cannot invent brand directions. If parsing fails on a non-standard file, fall back to manually applying the template in references/prompt-template.md.

Can I paste multiple Stitch prompts at once to save time?▼

No. Stitch processes one prompt at a time, and concatenated prompts produce mangled output. Paste one variant, wait for the image, save it as docs/design/stitch-output-<variant>-<screen>.png, then continue.

Related Skills

Explore More Design & Creative Skills→
steffenpharaisteffenpharai

design-consultation

Audit product goals and audience to generate a DESIGN.md design system.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

Official
Advanced
Owl-ListenerOwl-Listener
2.5k

critique-color

Audit a screen's colour contrast, palette coherence, and semantic meaning against WCAG standards.

Community
Intermediate
wuji-technologywuji-technology

ui-prototype

Create interactive Figma prototypes from product descriptions, screenshots, and wireframes.

Official
Advanced