skills.rest
jangtrinh
jangtrinhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:stitch

Generate UI designs from text prompts via Google Stitch and export HTML with DESIGN.md.

Updated Apr 9, 2026
Search Tags:#design-to-code#quota management#design spec#google stitch#ui generation#tailwind html#variant exploration
One-click install
npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-stitch-jangtrinh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/jangtrinh/demo-Lam/tree/main/.claude/skills/stitch
Command: npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-stitch-jangtrinh

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Google Stitch API usage can be complex to orchestrate for fast UI ideation, previewing, and exporting into design specs that other skills can implement. This Skill streamlines the end-to-end flow from prompt to exportable HTML/Tailwind and an agent-readable DESIGN.md.

Core Features & Use Cases

  • Generate UI screens from prompts: Turns natural-language UI requests into high-fidelity design screens and preview images, including optional device targeting and variant exploration.
  • Export designs into implementation-ready artifacts: Downloads generated HTML (Tailwind-based) and produces DESIGN.md by extracting tokens and structure from the exported HTML.
  • Orchestrate quota-aware design-to-code pipelines: Tracks daily credits locally, warns on low quota, and supports a fallback workflow when exhausted.
  • Use cases: Rapid prototyping of product pages, iterating on landing page variants, and creating a design spec that downstream implementation skills can consume to build real UI.

Quick Start

Generate a checkout UI design from this prompt: "A checkout page with payment form and cart summary".

Frequently Asked Questions about ck:stitch

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

FAQPage Schema
How do I generate UI designs from text prompts for rapid prototyping?▼

Generating UI designs from text prompts uses Google Stitch to transform natural-language requests into high-fidelity design screens and preview images. This approach accelerates rapid prototyping workflows by allowing quick iteration on product pages and landing page variants before writing any code.

How do I export design-to-code artifacts like Tailwind HTML and design specs?▼

Exporting design-to-code artifacts produces implementation-ready Tailwind HTML alongside an agent-readable DESIGN.md file. The DESIGN.md file extracts design tokens and structural information from the generated HTML, enabling downstream implementation tasks to consume the spec and build real UI.

Can I use Google Stitch for device-targeted UI generation and variant exploration?▼

Google Stitch supports device-targeted UI generation and variant exploration through optional project, device, and variant parameters. You can target specific web product contexts or landing pages, generating multiple design variants from a single text prompt to compare different UI directions.

Do I need an API key to generate high-fidelity UI screens with Google Stitch?▼

Generating high-fidelity UI screens with Google Stitch requires STITCH_API_KEY authentication. The environment also tracks daily credits locally to manage quota usage, warns you when quota is low, and supports a fallback workflow when your daily credits are exhausted.

What are the limitations of using text-to-UI generation for web products?▼

Limitations of text-to-UI generation include dependency on daily API credits and the need for STITCH_API_KEY authentication. When the local quota tracker indicates exhausted credits, users must switch to a fallback workflow, meaning generation throughput is constrained by quota availability.

What is the best way to orchestrate a design-to-code pipeline with Google Stitch?▼

The best way to orchestrate a design-to-code pipeline with Google Stitch is to generate UI screens from prompts, export the resulting Tailwind HTML, and produce a DESIGN.md spec. This quota-aware workflow ensures downstream skills can consume the extracted design tokens to build the final UI.

Related Skills

Explore More Design & Creative Skills→
hidonguyenhidonguyen

ck:stitch

Generate Tailwind HTML and DESIGN.md from natural language UI prompts.

Community
Advanced
quanganh208quanganh208

ck:stitch

Generate UI designs from natural language into HTML, PNGs, and DESIGN.md.

Community
Intermediate
dthuy62dthuy62

ck:stitch

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

Community
Advanced
DatTran26DatTran26

ck:stitch

Convert natural-language UI prompts into HTML/Tailwind and DESIGN.md artifacts via Google Stitch.

Community
Advanced