Can I integrate my existing design system documentation?

Absolutely. If a DESIGN.md file is present, the skill will reference it to ensure that extracted tokens align with your project's pre-defined design standards.

How does it handle complex UI layouts?

The skill follows a hierarchical decomposition principle, breaking down complex screens into primitives (buttons, inputs), patterns (cards, badges), and blocks (headers, heroes).

What is the Stitch React skill for Claude Code?

It is a specialized skill that allows Claude to transform Stitch design tool exports into structured, reusable React components and design tokens.

Does it support TypeScript and Tailwind CSS?

Yes, the skill generates TypeScript-ready code and utilizes Tailwind CSS classes along with class-variance-authority for styling and variants.

Stitch React Transform

Name: Stitch React Transform
Author: jh941213

byjh941213

•

设计工具

Converts Stitch design screens into production-ready, modular React component systems with automated design token extraction.

This skill automates the transition from Stitch-generated HTML exports to a structured, scalable React architecture. It intelligently analyzes static HTML to extract design tokens for colors, typography, and spacing while decomposing code into reusable primitives, patterns, and layout blocks. By leveraging TypeScript and class-variance-authority (CVA), it ensures type safety and consistent styling across your codebase, making it an essential tool for developers bridging the gap between design prototypes and production frontend implementations.

主要功能

0197 GitHub stars

02Full TypeScript support with auto-generated Props definitions

03Intelligent component decomposition into primitives, patterns, and blocks

04Automated design token extraction for consistent UI systems

05DESIGN.md integration for cross-referencing existing design standards

06Integrated validation for syntax, types, and linting

使用场景

01Rapidly prototyping React applications from high-fidelity Stitch design exports

02Establishing a standardized design system based on extracted design tokens

03Refactoring static HTML layouts into modular, maintainable React component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jh941213/my-claude-code-asset stitch-react

For use in Claude.ai and ChatGPT

Download Skill