How does it handle styling tokens?

The skill extracts inline Tailwind configurations and style blocks from the Stitch export and maps them to your project's existing design tokens (tokens.ts).

What happens if the design deviates from my code standards?

The skill triggers a Conflict Resolution workflow, presenting you with options to follow the new design, stick to the existing pattern, or update your project's standard.

What file types does this skill process?

It specifically processes HTML and PNG pairs exported from Google Stitch, extracting structure from the HTML and visual reference from the PNG files.

Can it work with custom UI frameworks?

Yes. It scans your project's /design-intent/patterns/ directory to detect if you are using Fluent UI, Material UI, or a custom internal design system.

Stitch to React Component Converter

Name: Stitch to React Component Converter
Author: joaquimscosta

byjoaquimscosta

•

设计工具

Transforms Google Stitch design exports into production-ready React components with full design system integration.

This skill automates the transition from design to development by converting Google Stitch HTML and PNG exports into structured, maintainable React components. It moves beyond simple code generation by analyzing your project's specific 'Constitution' and existing design patterns to ensure architectural consistency. The skill intelligently decomposes complex screens into reusable sub-components, maps Tailwind tokens to your project's design system (such as Fluent UI or Material UI), and provides a structured workflow for resolving conflicts between design exports and established code standards.

主要功能

01Automated verification and scanning of HTML/PNG export pairs

02Intelligent decomposition of screens into composable React components

03Interactive conflict resolution for design system discrepancies

046 GitHub stars

05Automatic mapping of Tailwind CSS configurations to established themes

06Deep integration with project-specific design tokens and constitutions

使用场景

01Rapidly converting high-fidelity Google Stitch prototypes into functional React UI

02Automating the breakdown of complex UI mocks into modular TypeScript components

03Ensuring design system compliance when importing new visual components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins stitch-to-react

For use in Claude.ai and ChatGPT

主要功能

01Automated verification and scanning of HTML/PNG export pairs

02Intelligent decomposition of screens into composable React components

03Interactive conflict resolution for design system discrepancies

046 GitHub stars

05Automatic mapping of Tailwind CSS configurations to established themes

06Deep integration with project-specific design tokens and constitutions

使用场景

01Rapidly converting high-fidelity Google Stitch prototypes into functional React UI

02Automating the breakdown of complex UI mocks into modular TypeScript components

03Ensuring design system compliance when importing new visual components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins stitch-to-react

For use in Claude.ai and ChatGPT