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

Ready to run

npx skills add https://github.com/quanganh208/cookmate --skill ck-stitch-quanganh208

💬 Prompt for ChatGPT / Claude Chat▼

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.