skills.rest
Dozyboy
DozyboyCOMMUNITY
Explore all skills by this author →
GitHub

hs:stitch

Generate UI designs from text prompts via Google Stitch and export Tailwind HTML.

Updated Jul 19, 2026
Search Tags:#prototyping#ui design#tailwind#design-to-code#design generation#google stitch#html export
One-click install
npx skills add https://github.com/Dozyboy/VSF --skill hs-stitch-dozyboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hs:stitch
Source: https://github.com/Dozyboy/VSF/tree/main/Day2_VSF/Demo1/harness/plugins/hs/disabled-skills/stitch
Command: npx skills add https://github.com/Dozyboy/VSF --skill hs-stitch-dozyboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/stitch-sdk, tsx, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating UI designs from scratch requires design expertise and manual mockup work. This Skill generates high-fidelity UI designs from plain-text prompts using Google Stitch, then exports them as Tailwind HTML and a DESIGN.md spec that implementation skills can convert directly into code. ## Core Features & Use Cases - Prompt-Based Design Generation: Create UI screens for mobile, desktop, or tablet from natural-language descriptions, with optional design variants for exploration. - Export Pipeline: Export generated screens as semantic HTML with Tailwind classes, PNG screenshots, and an auto-generated DESIGN.md containing extracted colors, typography, spacing, and component tokens. - Quota Management: Track the 400 daily free-tier credits locally with warnings, auto-reset at midnight UTC, and a fallback path to text-based design when exhausted. - Use Case: Describe a checkout page with payment form and cart summary, review the generated preview, export the design artifacts, and hand DESIGN.md to a frontend implementation skill to produce React components. ## Quick Start Set your STITCH_API_KEY environment variable, run npm install in the scripts directory, then ask the AI to generate a UI design from your prompt using the stitch-generate script.

Frequently Asked Questions about hs:stitch

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

FAQPage Schema
How do I generate a UI design from a text prompt with Google Stitch?▼

Run the stitch-generate.ts script with your design prompt, optionally specifying device type (mobile, desktop, tablet) and variant count. The script returns a screen ID and preview image URL, and automatically tracks credit usage against your daily quota.

How do I export a Stitch design as HTML and Tailwind CSS?▼

Run stitch-export.ts with the screen ID and --format all to download design.html with Tailwind classes, a design.png screenshot, and an auto-generated DESIGN.md containing extracted colors, typography, spacing, and component tokens.

What is the Google Stitch free tier quota limit?▼

The free tier provides 400 generation credits per day plus 15 redesign credits per day, resetting at midnight UTC. The skill tracks usage locally in ~/.sdlc-harness/.stitch-quota.json and warns when remaining credits drop below 20 percent.

Can Google Stitch export React or Vue components directly?▼

No, Stitch exports HTML with Tailwind CSS only. To get framework components, hand the exported DESIGN.md to an implementation skill such as hs:frontend-design, which converts the Tailwind HTML into React, Vue, or Svelte components.

What happens when the Stitch daily quota is exhausted?▼

The quota check returns exit code 2 and the skill suggests falling back to hs:ui-ux, which generates a text-based design spec without any external API. You can then proceed with implementation using that spec until the quota resets at midnight UTC.

How do I set up the Stitch MCP server in Claude Code?▼

Add a stitch entry to .claude/.mcp.json that runs npx @_davideast/stitch-mcp proxy with your STITCH_API_KEY in the env block. After restarting Claude Code, tools like create_project, generate_screen, and export_html become available natively.

Related Skills

Explore More Design & Creative Skills→
nam3886nam3886

ck:stitch

Generate UI designs from text prompts and export Tailwind/HTML/DESIGN.md artifacts.

Community
Advanced
reason-machinesreason-machines
4

figma-design-system-to-design-md

Convert Figma design tokens into structured design.md documentation for AI coding tools.

Official
Intermediate
agwacomagwacom

plan-design-review

Analyze design plans to surface missing decisions and validate UI choices.

Official
Advanced
next-safe-actionnext-safe-action
3.1k

frontend-design

Generate distinctive frontend interfaces with HTML, CSS, and JavaScript.

Official
Advanced