google-stitch
OfficialDesign to code, instantly.
Authorsalafidurus
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between design mockups and functional UI code, automating the conversion of visual designs into implementation-ready code that adheres to project standards.
Core Features & Use Cases
- Image-to-Code Generation: Leverages Google Stitch to transform design images into baseline UI code.
- Repository Standards Adaptation: Automatically refactors generated code to match the project's architecture, styling, and guardrails.
- Use Case: A designer uploads a Figma screenshot of a new landing page. This Skill converts the image into React code for the
apps/webdirectory, ensuring it uses the project's existing component library and adheres to the defined spacing and color tokens.
Quick Start
Use the google-stitch skill to convert the attached design image into a Next.js component.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: google-stitch Download link: https://github.com/salafidurus/salafi-audios/archive/main.zip#google-stitch Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.