skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:stitch

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

1|Updated Mar 6, 2026
Search Tags:#tailwind#quota#ui-design#generate#export#design-to-code#stitch
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-stitch-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/stitch
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-stitch-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Turn natural language design ideas into exportable UI artifacts without manual mockups or designer bandwidth, accelerating prototyping and design-to-code handoffs.

Core Features & Use Cases

  • AI-driven Generation: Create high-fidelity screens from text prompts with optional device targeting and variants.
  • Export & Handoff: Produce Tailwind-flavored HTML, preview images, and an agent-readable DESIGN.md for implementation skills to consume.
  • Quota-aware Workflow: Local quota tracking, edit/variant flows, and fallback routing to text-based UI skills for continuity.
  • Use Case: Generate a checkout page, export design.html and DESIGN.md, then hand the artifacts to a frontend implementation skill to produce components.

Quick Start

Use the ck:stitch skill to generate a checkout page design by sending the 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 and export Tailwind HTML?▼

To generate UI designs from text prompts, provide a natural language description of your desired screen. The system outputs high-fidelity Tailwind-flavored HTML, preview PNGs, and an agent-readable DESIGN.md for immediate design-to-code handoff.

Can I create design variants and edit generated UI prototypes directly?▼

Yes, you can create design variants and edit generated UI prototypes directly. The workflow supports generating multiple variants from a single text prompt, applying optional device targeting, and refining outputs through local edit flows.

Does this design-to-code workflow produce artifacts for implementation skills to consume?▼

Yes, this design-to-code workflow produces an agent-readable DESIGN.md containing extracted design tokens. Implementation skills can consume this file alongside the exported Tailwind HTML to automatically generate frontend components.

What happens when I hit the local daily quota for UI generation?▼

When you hit the local daily quota for UI generation, the workflow includes local quota tracking and fallback routing. It automatically redirects to text-based UI skills to ensure continuity in your rapid prototyping and design exploration process.

What is the best way to turn natural language design ideas into frontend code without manual mockups?▼

The best way to turn natural language design ideas into frontend code is using an AI-driven generation pipeline. It eliminates manual mockups and designer bandwidth constraints by directly producing exportable Tailwind HTML artifacts from your text prompts.

Do I need the stitch-sdk to manage project handling and UI exports?▼

Yes, you need the stitch-sdk to manage project handling and UI exports. The sdk handles local quota tracking, variant generation, edit flows, and the final export of Tailwind HTML and preview images.

Related Skills

Explore More Design & Creative Skills→
hidonguyenhidonguyen

ck:stitch

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

Community
Advanced
Thanh-aperoThanh-apero
1

ck:stitch

Generate UI designs from text prompts and export as Tailwind, HTML, or DESIGN.md.

Community
Advanced
jangtrinhjangtrinh

ck:stitch

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

Community
Intermediate
phoenicisfphoenicisf

stitch-design

Generate UI screens from design briefs and route Stitch MCP workflows.

Community
Advanced