google-labs-code/stitch-skills
15 skills289k installs89.2k starsGitHub
Install
npx skills add https://github.com/google-labs-code/stitch-skillsSkills in this repo
1Design Mddesign-md is an agent skill for solo builders using Google Stitch who need a repeatable design language before generating more screens. It acts as a Design Systems Lead: you point it at a Stitch project (with MCP connected), it pulls screen metadata and assets, and it writes DESIGN.md that encodes semantic tokens and visual descriptions Stitch can follow. That file becomes the single reference when you prompt Stitch for new flows so typography, color, spacing, and component tone do not drift. It fits indie teams shipping web or mobile experiences where design consistency matters but a full Figma-to-code pipeline is overkill. Use it after you have initial screens in Stitch and before bulk screen generation or handoff to implementation agents.47.1kinstalls2React:Componentsreact:components is a frontend agent skill that converts Google Stitch designs into clean, modular Vite and React components. It instructs the agent to discover the Stitch MCP prefix, pull screen JSON with get_screen, and prefer reusing existing .stitch/designs HTML and PNG assets unless the user opts to refresh from the cloud. Because AI fetch often fails on Google Cloud Storage URLs, the skill mandates bash fetch-stitch.sh for HTML and screenshots, including width parameters on screenshot links for full-resolution references. The workflow balances automated networking with local filesystem discipline so solo builders can iterate UI without manually redrawing specs. Use it during Build when you already have Stitch projects and want agent-generated components that pass structural validation rather than one-off pasted JSX. It expects Stitch MCP, shell scripts, and read/write access to your repo.47kinstalls3Enhance PromptEnhance-prompt is a Stitch Prompt Engineer skill for solo builders who prototype interfaces with Google Stitch but get mushy layouts from vague prompts. It runs a fixed enhancement pipeline: assess what is missing (platform, page type, numbered structure), enrich with UI and UX keywords, align with design system context, and emit a polished prompt tuned for Stitch generation. The skill points agents at Stitch’s official prompting docs so recommendations stay current. Activate when you have a half-formed dashboard or landing page idea and want structured sections before hitting generate—especially after a weak first pass. It fits the validate phase because you are proving look-and-feel and information architecture without writing production frontend yet.42.6kinstalls4Stitch LoopStitch Loop teaches coding agents to behave like an autonomous frontend contractor on a relay schedule. Every iteration starts by reading `.stitch/next-prompt.md`, calls Stitch MCP tools to produce a page that matches your documented design system, folds that page into the growing site map described in `.stitch/SITE.md`, and writes the following page brief back into the baton so the next agent turn can continue without you re-explaining the roadmap. Solo builders use it when a landing-plus-marketing site outgrows one-shot prompts but you still want agent speed instead of manual Figma-to-code drudgery. Optional Chrome DevTools MCP access adds headless or interactive checks so integrations do not silently break layout. You need a Stitch project and the companion design artifacts; the skill is a workflow package, not a hosted site generator. Expect filesystem writes, bash, and network-backed MCP calls throughout the loop.41.9kinstalls5Shadcn Uishadcn/ui integration skill turns your coding agent into a frontend engineer focused on the shadcn model: beautiful accessible components you copy into the project, not a traditional npm design system. It explains why that matters for solo builders—no version lock-in, selective updates, zero extra runtime bundle from a monolithic library—and walks discovery through installation and customization using shadcn MCP tools to list components, read metadata, and align dependencies. The skill supports both Radix UI and Base UI primitive choices where relevant and stresses browsing the registry before bolting components into layouts. Use it when scaffolding dashboards, marketing pages, or SaaS settings UI in Next.js or Vite stacks that already use Tailwind.38.4kinstalls6RemotionRemotion (Stitch skill) is an agent skill for solo builders who already designed screens in Stitch and need polished walkthrough videos without hiring an editor. It positions the agent as a video production specialist: discover Stitch and Remotion MCP servers, pull project and screen assets, then program transitions, zooms, and explanatory overlays in a Remotion React composition. Prerequisites include Node.js, npm, both MCP servers, and a Stitch project with finished frames; React familiarity helps because Remotion compositions are React components. Use it at launch to ship App Store previews, landing-page hero loops, or investor demo reels, and during grow when you refresh marketing clips after UI changes. The skill encodes networking and retrieval guardrails so the agent does not guess server names. It complements static Figma exports by producing motion-native artifacts that distribution channels and social posts expect, while staying inside agent-driven workflows Prism catalogs under launch and content-oriented facets.28kinstalls7Stitch Designstitch-design teaches agents to run professional UI/UX workflows through Google Labs Stitch MCP rather than guessing layout in plain chat. Rough prompts get expanded with structured, high-fidelity design language and design-system context; existing Stitch work can be analyzed to author or refresh `.stitch/DESIGN.md` so later generations stay consistent. The skill routes intent to the right generation or edit path, then synchronizes HTML and screenshot assets under `.stitch/designs` for offline review and handoff to implementation. Solo builders validating a concept or polishing a SaaS shell benefit when they already have MCP wired and a project identifier. It is an integration-heavy design ops skill—not a replacement for accessibility audits, backend APIs, or choosing your React component library.25.2kinstalls8Taste Designtaste-design is for solo builders who use Google Stitch to generate UI but do not want every screen to look like the same AI template. The skill translates high-agency, anti-generic frontend engineering rules into a DESIGN.md file Stitch’s agent can read: mood and density, color calibration with explicit hex bans, typography scales, component behaviors, asymmetric layout cues, and motion that stays performant. You run it when you need a durable semantic design system before batching new screens in labs.google.com/stitch or via the Stitch MCP server with Read and Write. It fits early UI definition in Build and also Validate when a prototype needs a credible visual direction before you commit engineering time. The deliverable is documentation-shaped design law, not rendered components—your agent maintains DESIGN.md and prompts Stitch from that contract.10.3kinstalls9Stitch::Generate DesignStitch Generate Design is an agent skill for solo builders who want production-oriented UI screens without hand-drawing every frame in Figma first. It wires your coding agent to Google Stitch MCP tools so you can create screens from text or images, refine them with prompts, and spin variants while respecting project-level design tokens when a design system already exists. The workflow insists on context gathering—listing projects, creating one if needed, and checking design systems—then enhancing user prompts before any generation call, which reduces generic layouts and mismatched branding. Allowed tooling spans Stitch actions plus Bash, Read, Write, and web_fetch for supporting assets and project files. It is phase-specific to building the product surface: ideal for SaaS dashboards, marketing pages, and mobile-first flows during active development. It is not a substitute for accessibility auditing, automated visual regression, or shipping performance work; those stay in later journey phases.1.6kinstalls10Stitch::Extract Design Mdstitch::extract-design-md is a Google Labs Stitch skill that turns frontend source into a rich DESIGN.md capturing colors, typography, spacing, components, and layout principles. Solo builders use it when they inherit a codebase, need a design audit before a redesign, or want tokens documented for Stitch workflows while the app will not build. It complements render-based design-md by reading what is actually checked in: class names, CSS modules, theme objects, and framework-specific styling. Triggers include reverse-engineering a design system, pulling tokens from files, or answering what this app looks like from code alone. Expect the agent to scan the tree, synthesize patterns, and write a design document you can feed into later UI generation—not to ship production CSS by itself.1.5kinstalls11Stitch::Manage Design Systemstitch::manage-design-system is a Google Stitch MCP skill that helps solo builders treat visual language as infrastructure instead of one-off prompt luck. You retrieve project and screen metadata, pull HTML references, and either synthesize a design system from a written brief or align with existing screens via companion design-md extraction. The workflow emphasizes a single source of truth: tokens and rules that apply_design_system can push across Home, dashboard, and future flows so Stitch-generated UI does not drift. It fits builders in the Build phase who already use Stitch for rapid UI iteration and want agent-driven consistency when adding screens. Intermediate complexity reflects MCP setup, project IDs, and choosing representative screens. Prerequisites include a Stitch project (or a clear verbal spec for a new one) and enabled stitch-star tools in the agent. Deliverables are an updated Stitch design system record and screens referencing that system—not a replacement for brand strategy workshops, but a practical agent integration for shipping cohesive interfaces faster.1.5kinstalls12Stitch::Code To Designstitch::code-to-design is an agent skill that converts live frontend code into a Stitch Design by chaining three specialized steps. Solo builders who already have a Vite or React app and want to redesign or iterate inside Stitch should use it whenever the goal is to save, migrate, or upload an existing UI—not a greenfield mock. The workflow delegates to extract-static-html for a standalone HTML snapshot, extract-design-md for tokens and layout rules in DESIGN.md, then upload-to-stitch to attach files to a project. Skipping this chain risks missing design-system linkage and broken asset references. Prerequisites include a production or dist build with index.html, a known or discoverable Stitch projectId, and agent access to Stitch tools. It fits the Build phase heavily but also supports Validate when you are proving a prototype visually before deeper implementation.1.5kinstalls13Stitch::Upload To Stitchstitch::upload-to-stitch is an agent skill for solo builders using Google Stitch who hit a hard wall when models try to push binary or large HTML through MCP tools. The readme states that base64 in tool output exceeds typical model output caps, so the skill routes uploads through a script that reads local files and posts them over HTTP to the Stitch API. It documents how to find the target projectId, extract X-Goog-Api-Key and optional endpoint URLs from Antigravity, Gemini, or Claude MCP settings, and when to prefer this path over failing MCP calls. Use it whenever you need mockups, screenshots, or full HTML pages in a Stitch project—especially after extracting UI from a browser or design export. It keeps design iteration inside Stitch’s environment without manual dashboard uploads. Pair with other Stitch skills for listing projects and editing designs once assets land in the project.1.4kinstalls14Stitch::Extract Static HtmlStitch extract-static-html is a workflow skill for solo builders who need a portable HTML file that looks like a live page without dragging the whole dev server along. It compares two extraction paths: Puppeteer against a local app for maximum style fidelity and direct file output, versus a browser subagent when you must click through UI before capture. The skill enforces a hard gate—you must get explicit user confirmation on strategy before running tools—and allows stitch tooling, Bash, Read, Write, and web_fetch. Use it when someone asks to save the HTML, mock a view for Stitch, or ship a static preview of a React or multi-framework app. It fits indie teams who prototype fast but still need design-review artifacts that do not break when CSS lives in bundlers or shadow DOM.1.4kinstalls15Stitch::React NativeStitch::react-native is a Google Labs Stitch skill that positions your agent as a mobile engineer converting web-oriented Stitch exports into React Native components with StyleSheet-based styling. Solo builders who design screens in Stitch can avoid a manual rewrite loop: the workflow starts with MCP namespace discovery, pulls screen metadata, optionally reuses cached .stitch/designs assets, and uses fetch-stitch.sh when CDN downloads fail inside generic fetch tools. Allowed tooling spans Stitch MCP actions, Bash, Read, Write, and web_fetch, which matches a typical Claude Code setup. The skill emphasizes parity between HTML structure and native primitives—flexbox-like layouts, typography, and imagery—while keeping files organized per page. Use it when you have an approved Stitch screen and a React Native repo ready; skip it for greenfield design exploration or non-Stitch Figma-only workflows.65installs