skills.rest
mafvietnam
mafvietnamCOMMUNITY
Explore all skills by this author →
GitHub

ck:stitch

Generate UI designs from text prompts using Google Stitch.

Updated Mar 30, 2026
Search Tags:#mcp#tailwind#ui-design#export#stitch#ai-design#design-pipeline
One-click install
npx skills add https://github.com/mafvietnam/mafapp --skill ck-stitch-mafvietnam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/mafvietnam/mafapp/tree/main/.claude/skills/stitch
Command: npx skills add https://github.com/mafvietnam/mafapp --skill ck-stitch-mafvietnam

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Google Stitch helps transform text prompts into high-fidelity UI designs, reducing iteration time and accelerating prototypes.

Core Features & Use Cases

  • Generate UI designs from natural language prompts
  • Export Tailwind/HTML, DESIGN.md, and preview images for handoff
  • Orchestrate a design-to-code pipeline with optional MCP context for ClaudeCode

Quick Start

Prompt Stitch to generate a UI design from a text prompt and export HTML, DESIGN.md, and a preview image for implementation.

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, this skill uses Google Stitch to transform natural language descriptions into high-fidelity UI prototypes, reducing iteration time for rapid design exploration.

What's the best way to export Tailwind HTML from AI UI designs?▼

The best way to export Tailwind HTML from AI UI designs is using Stitch, which generates handoff-ready outputs including Tailwind/HTML, DESIGN.md, and preview images directly from your text prompts.

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

Yes, you need a Stitch API key to generate UI prototypes. This skill requires the key to authenticate requests and apply Google Stitch for rapid prototyping and design exploration.

Can I orchestrate a design-to-code pipeline with MCP context for ClaudeCode?▼

Yes, you can orchestrate a design-to-code pipeline with optional MCP context for ClaudeCode. This setup allows you to integrate AI-generated UI designs directly into your development workflow.

What file formats are supported when exporting AI design outputs?▼

Supported file formats for exporting AI design outputs include Tailwind HTML, DESIGN.md documentation, and preview screenshots, ensuring handoff-ready outputs for frontend implementation teams.

Related Skills

Explore More Design & Creative Skills→
Cissou34730Cissou34730

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into single HTML files.

Community
Advanced
quanganh208quanganh208

ck:stitch

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

Community
Intermediate
Envy-7zEnvy-7z

figma

Converts Figma designs to code and generates missing assets and markup.

Community
Intermediate
jieni777jieni777
1

component-gen

Generate React components from plain English descriptions with optional TypeScript and Tailwind.

Community
Intermediate