ck:stitch

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

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-stitch-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/stitch
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-stitch-hidonguyen

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 UI requests into exportable design artifacts to eliminate manual mockup work and speed design-to-code handoffs, reducing iteration time and mismatched implementation details.

Core Features & Use Cases

  • Prompt-driven generation: Produce high-fidelity UI screens from text prompts with optional device targeting and variant generation.
  • Export artifacts: Output semantic HTML with Tailwind classes, screenshot images, and an agent-readable DESIGN.md that captures colors, typography, spacing, and components.
  • Quota-aware workflows: Local quota tracking, pre-checks, and a fallback path to text-based design when Stitch credits are exhausted.
  • Orchestration & handoff: Designed to plug into a design-to-code pipeline where implementation skills consume DESIGN.md for component generation and style token extraction.

Quick Start

Generate a Tailwind HTML export and an agent-readable DESIGN.md for the prompt: Create 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 Tailwind HTML from natural language prompts?▼

To generate Tailwind HTML from natural language prompts, use this Skill with the Stitch SDK to produce high-fidelity UI screens, exporting semantic HTML and a design specification file. It requires an STITCH_API_KEY.

What is an agent-readable DESIGN.md file for design-to-code handoffs?▼

An agent-readable DESIGN.md is a design specification file that captures colors, typography, spacing, and components. It bridges design-to-code handoffs by allowing implementation skills to consume the file for component generation and style token extraction.

Do I need an STITCH_API_KEY to export UI designs to HTML?▼

Yes, you need an STITCH_API_KEY to export UI designs to HTML because the Skill uses the @google/stitch-sdk for generation and export. This key is required for authenticating requests and managing your generation quota.

Can I target specific device types when generating UI prototypes?▼

Yes, you can target specific device types when generating UI prototypes. The Skill supports optional device targeting and variant generation alongside its prompt-driven high-fidelity UI screen creation capabilities.

What happens when Stitch API credits are exhausted during UI generation?▼

When Stitch API credits are exhausted during UI generation, the Skill triggers local quota tracking and a fallback path. This fallback generates text-based designs instead of failing, ensuring continuous design exploration.

How do I extract style tokens from a generated UI design?▼

To extract style tokens from a generated UI design, parse the agent-readable DESIGN.md file output by this Skill. This file captures colors, typography, spacing, and components for direct use in design-to-code pipelines.