Can I export designs to my existing code stack?

Absolutely. The skill supports exporting generated designs into clean HTML/CSS, Tailwind CSS, and React components, as well as Figma-compatible formats.

Does this skill require a Google Cloud account?

Yes, using this skill requires a Google Cloud project with the Stitch API enabled, billing active, and appropriate owner or editor permissions.

What is Google Stitch?

Google Stitch is an AI-powered UI design tool from Google Labs that converts natural language and images into complex UI designs and frontend code using Gemini 2.5 Pro.

Can I use images as input for UI generation?

Yes, the skill supports image-to-UI generation, allowing you to upload sketches or reference screenshots for Claude to interpret and recreate as functional code.

What is 'Design DNA' extraction?

It is a feature that scans existing UI screens to identify color palettes, typography, and structural patterns, ensuring newly generated screens match your current design system.

Google Stitch Expert

Name: Google Stitch Expert
Author: willsigmon

bywillsigmon

•

デザインツール

Generates professional UI designs and frontend code from natural language prompts or sketches using Google's AI design engine.

This skill integrates Google Stitch into Claude Code, enabling developers to bridge the gap between initial concepts and functional frontend code. By leveraging Gemini 2.5 Pro, users can transform text descriptions or hand-drawn sketches into high-fidelity interfaces, maintain visual consistency by extracting design patterns from existing screenshots, and export production-ready code in Tailwind CSS or React. It is particularly effective for rapid prototyping, creating multi-screen application flows, and streamlining the design-to-development handoff process within an automated workflow.

主な機能

01Text-to-UI and Image-to-UI generation powered by Gemini 2.5 Pro

027 GitHub stars

03Figma-compatible exports for seamless design-to-dev collaboration

04Multi-screen application flow generation and management

05Production-ready Tailwind CSS and React component code export

06Automated 'Design DNA' extraction for consistent branding and styles

ユースケース

01Converting whiteboard sketches and low-fidelity wireframes into functional frontend components

02Rapidly prototyping complex SaaS dashboards and mobile interfaces from text descriptions

03Ensuring brand consistency across new features by analyzing existing UI design patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add willsigmon/sigstack stitch-expert

For use in Claude.ai and ChatGPT

Download Skill