google-stitch

Name: google-stitch
Availability: InStock
Author: salafidurus

Convert design images into repository-compliant UI code using Google Stitch.

1|Updated Jan 19, 2026

Search Tags:#react #figma #nextjs #react native #design to code #google stitch #ui generation

Ready to run

npx skills add https://github.com/salafidurus/salafi-audios --skill google-stitch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: google-stitch
Source: https://github.com/salafidurus/salafi-audios/tree/main/.opencode/skills/google-stitch
Command: npx skills add https://github.com/salafidurus/salafi-audios --skill google-stitch

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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/web directory, 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.

Frequently Asked Questions about google-stitch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert a Figma design image into React code?▼

To convert Figma design images into React code, you can use a design-to-code workflow that processes the screenshot and generates repository-compliant UI components. This approach automatically adapts the generated code to match your project's architecture and styling tokens.

Can I turn a landing page screenshot into a Next.js component?▼

Yes, you can turn a landing page screenshot into a Next.js component by processing the image through a UI generation workflow. The system converts the visual mockup into baseline code and refactors it to fit your specific Web or Next.js repository standards.

Does design-to-code generation work for React Native as well as Web?▼

Design-to-code generation works for both React Native and Web platforms by triggering skill stacking for the target environment. After converting the design image into baseline UI code, it adapts the output specifically for Mobile or Web repository standards.

What is the best way to ensure generated UI code matches my existing component library?▼

The best way to ensure generated UI code matches your existing component library is to use a conversion process that includes repository standards adaptation. This automatically refactors the initial UI generation output to adhere to your defined spacing, color tokens, and architectural guardrails.

How do I process a design mockup to create implementation-ready UI code?▼

You process a design mockup into implementation-ready UI code by feeding the image into a Stitch-first workflow. This mechanism handles image-based UI requests and screenshot-to-code conversions, bridging the gap between visual designs and functional code.

What are the limitations when recreating a UI from a screenshot?▼

When recreating a UI from a screenshot, the limitation is that the input must be an image-based design mockup. The conversion relies on the visual clarity of the screenshot to generate baseline code, which then requires adaptation to match complex repository guardrails.