skills.rest
dthuy62
dthuy62COMMUNITY
Explore all skills by this author →
GitHub

ck:stitch

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

Updated May 10, 2026
Search Tags:#design system#ui design#prompt generation#design handoff#tailwind export#quota tracking
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-stitch-dthuy62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/stitch
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-stitch-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the friction of turning a UI idea into a concrete visual design by generating high-fidelity screens, exportable assets, and implementation-ready design specs.

Core Features & Use Cases

  • Prompt-to-Design Generation: Create polished interface concepts from a natural-language product or layout prompt.
  • Export for Implementation: Produce HTML, Tailwind-based output, screenshots, and DESIGN.md handoff specs for downstream coding.
  • Design Exploration and Refinement: Generate variants, edit existing screens, and manage quota-aware iterative design sessions.
  • Use Case: A product designer can describe a checkout flow, review several visual directions, export the preferred version, and hand it to an implementation workflow.

Quick Start

Use the stitch skill to generate a mobile app login screen from my prompt and export the result as HTML and DESIGN.md.

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?▼

To generate UI designs from text prompts, you provide a natural-language layout description and the tool produces high-fidelity interface screens. You can then export these generated screens as HTML and DESIGN.md files for implementation.

Can I export Tailwind code from a generated UI design?▼

Yes, you can export Tailwind-based output from a generated UI design. The tool produces implementation-ready artifacts including HTML, Tailwind code, screenshots, and DESIGN.md handoff specs for downstream coding workflows.

Do I need a Stitch API key to generate UI screens?▼

Yes, you need a Stitch API key to generate UI screens. The workflow also requires project and device targeting configurations to properly orchestrate interface creation and manage local quota tracking through scripts.

What is the best way to handle design-to-code handoff for a checkout flow?▼

The best way to handle design-to-code handoff is to generate the checkout flow UI, review visual directions, and export the preferred version as HTML and a DESIGN.md spec. This provides developers with implementation-ready assets.

How do I manage quota tracking during iterative design exploration?▼

You manage quota tracking during iterative design exploration through built-in local scripts. The tool supports quota-aware workflow orchestration, allowing you to generate variants and edit existing screens across multiple design sessions.

Why does prompt-to-design generation require device targeting?▼

Prompt-to-design generation requires device targeting to ensure the resulting high-fidelity UI screens are formatted correctly for the intended platform. This allows the exported HTML and Tailwind output to match specific project constraints.

Related Skills

Explore More Design & Creative Skills→
gabelulgabelul
38

stitch-setup

Configure Google Stitch MCP server and install stitch-kit plugin for AI coding agents.

Community
Intermediate
hotriluanhotriluan

ck:stitch

Generate UI designs from natural language prompts and export Tailwind/HTML with DESIGN.md.

Community
Advanced
VIethoangnguyenleVIethoangnguyenle

stitch-design

Generates high-fidelity UI designs and design system documentation via Stitch MCP workflows.

Community
Intermediate
sebc-devsebc-dev

prototype

Create disposable terminal apps and UI variations for design validation.

Community
Intermediate