skills.rest
snake-dev-team
snake-dev-teamOFFICIAL
Explore all skills by this author →
GitHub

ck:stitch

Generate UI designs from text prompts using Google Stitch.

Updated Apr 23, 2026
Search Tags:#tailwind css#ui design#design-to-code#google stitch#text-to-ui
One-click install
npx skills add https://github.com/snake-dev-team/snake-backlink-forge --skill ck-stitch-snake-dev-team
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:stitch
Source: https://github.com/snake-dev-team/snake-backlink-forge/tree/main/.claude/skills/stitch
Command: npx skills add https://github.com/snake-dev-team/snake-backlink-forge --skill ck-stitch-snake-dev-team

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of manually designing UI components, providing a streamlined solution to generate high-fidelity UI designs from text prompts and automate the design-to-code process.

Core Features & Use Cases

  • Text-to-UI Design: Convert text descriptions into UI designs.
  • Export Formats: Outputs designs as HTML, Tailwind CSS, and DESIGN.md files.
  • Design-to-Code Pipeline: Facilitates the transition from design to code, supporting integration with other implementation skills.
  • Use Case: A designer can use this Skill to quickly create a UI design for a checkout page based on a text description, then export the design for further development.

Quick Start

Generate a UI design for a checkout page with payment form and cart summary using the ck:stitch skill.

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 using Google Stitch?▼

To generate UI designs from text prompts using Google Stitch, you provide a text description of your desired interface. The Skill then processes your prompt to output high-fidelity designs in HTML, Tailwind CSS, and DESIGN.md file formats.

What file formats are exported when converting text to UI design?▼

When converting text to UI design, the export formats include HTML, Tailwind CSS, and DESIGN.md files. These outputs facilitate the design-to-code pipeline by providing structured markup and styling for immediate development.

Do I need a Google Stitch API key to generate Tailwind CSS designs?▼

Yes, you need a Google Stitch API key and MCP server setup to generate Tailwind CSS designs. This Skill relies on the @google/stitch-sdk dependency to process text prompts and execute the design-to-code pipeline.

Can I integrate generated UI designs with other implementation skills?▼

Yes, you can integrate generated UI designs with other implementation skills. This Skill supports design-to-code pipelines by exporting HTML and DESIGN.md formats, allowing seamless orchestration with other ClaudeKit skills for full implementation.

What is the best way to automate the design-to-code pipeline for Tailwind CSS?▼

The best way to automate the design-to-code pipeline for Tailwind CSS is using text-to-UI generation that exports HTML and DESIGN.md files. You can then orchestrate these outputs with other implementation skills for full code integration.

Related Skills

Explore More Design & Creative Skills→
wasintohwasintoh
90

ui-first-builder

Generate Next.js 14 UI with Tailwind and shadcn/ui from descriptive prompts.

Community
Intermediate
NITRR-OfficialNITRR-Official
4

frontend

Build UI/UX designs, React/Next.js apps, Tailwind CSS components, and 3D web experiences.

Official
Advanced
KaimingWanKaimingWan
103

omk-stitch

Convert Stitch design assets into React, Vite, and Astro UI components from design.md tokens.

Community
Advanced
hoainam183hoainam183

rayden-code

Generate React and Tailwind CSS code using Rayden UI components.

Community
Intermediate