# stitch-skills | Google Labs Code | Knowledge Base | Instagit

A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.

GitHub Stars: 7k

Repository: https://github.com/google-labs-code/stitch-skills

---

## Articles

### [How to Maintain Design Token Consistency Across Multiple Converted Pages in Stitch Skills](/google-labs-code/stitch-skills/maintaining-design-token-consistency-across-multiple-converted-pages)

Ensure design token consistency across converted Stitch Skills pages. Learn how a central DESIGN.md and validation gates maintain synchronization, preventing conversion errors.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Structure Prompts for Stitch Design Generation vs. Editing](/google-labs-code/stitch-skills/structuring-prompts-for-stitch-design-generation-vs-editing)

Master Stitch prompts for design generation and editing. Learn how to structure layout content hierarchy for generation and utilize precise styling for targeted edits.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Handle Inter-Skill Dependencies When Installing Skills Selectively in Stitch Skills](/google-labs-code/stitch-skills/handling-inter-skill-dependencies-when-installing-skills-selectively)

Learn how Stitch Skills automatically resolves inter-skill dependencies by building a DAG from SKILL.md manifests. Ensure transitive dependencies are installed for seamless skill execution.

- Tags: how-to-guide
- Published: 2026-07-18

### [Common Anti-Patterns to Avoid with the react-components Skill: A Complete Guide](/google-labs-code/stitch-skills/common-anti-patterns-to-avoid-with-react-components-skill)

Learn common anti-patterns to avoid with the react-components skill. Prevent validation failures and create maintainable React components.

- Tags: best-practices
- Published: 2026-07-18

### [How to Generate Walkthrough Videos from Stitch Projects Using Remotion](/google-labs-code/stitch-skills/generating-walkthrough-videos-from-stitch-projects-using-remotion)

Effortlessly generate walkthrough videos from Stitch projects with Remotion. Extract screen assets, add animations, and create polished video guides. Learn how today.

- Tags: how-to-guide
- Published: 2026-07-18

### [Integrating shadcn/ui Components with Generated Stitch Designs: From Mock-Up to Production](/google-labs-code/stitch-skills/integrating-shadcn-ui-components-with-generated-stitch-designs)

Effortlessly integrate shadcn/ui components with generated Stitch designs. Transform AI mockups into type-safe React interfaces with shared CSS variables for faster development. Learn how!

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Convert Stitch Designs to React Native with Platform-Specific Code](/google-labs-code/stitch-skills/how-to-convert-stitch-designs-to-react-native-with-platform-specific-code)

Convert Stitch designs to React Native effortlessly. Learn how to generate platform-specific code using the stitch-skills repository for production-ready components.

- Tags: how-to-guide
- Published: 2026-07-18

### [Difference Between Generate from Text and Generate from Image Flows in Stitch](/google-labs-code/stitch-skills/difference-between-generate-from-text-and-generate-from-image-flows-in-stitch)

Explore the differences between Stitch's generate from text and generate from image flows. Learn how to create designs using text prompts or image uploads for efficient HTML conversion.

- Tags: deep-dive
- Published: 2026-07-18

### [Validating React Components Using AST-Based Validators in Stitch-Skills](/google-labs-code/stitch-skills/validating-react-components-using-ast-validator-in-react-components-skill)

Learn to validate React components with Stitch-Skills AST-based validators. Enforce architectural standards like naming and theme adherence using static analysis powered by @swc/core.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Generate Multi-Page Websites from a Single Prompt Using stitch-loop](/google-labs-code/stitch-skills/generating-multi-page-websites-from-single-prompt-using-stitch-loop)

Learn how to generate multi-page websites from a single prompt using stitch-loop. Discover the autonomous baton-passing workflow for efficient site creation.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Upload Local Assets to a Stitch Project: A Complete Guide](/google-labs-code/stitch-skills/how-to-upload-local-assets-to-stitch-project)

Learn how to upload local assets to a Stitch project using the upload-to-stitch skill. Easily send images HTML and Markdown files directly to your Stitch project.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Add Dark Mode Support When Converting Stitch Designs to React Components](/google-labs-code/stitch-skills/adding-dark-mode-support-when-converting-stitch-designs-to-react-components)

Learn to add dark mode support when converting Stitch designs to React. Capture designs with a dark class, configure Tailwind, and apply dark variants for seamless dark mode integration.

- Tags: tutorial
- Published: 2026-07-18

### [Architectural Rules for Modular React Component Generation from Stitch Designs: The Complete Guide](/google-labs-code/stitch-skills/architectural-rules-for-modular-react-component-generation-from-stitch-designs)

Discover architectural rules for generating modular React components from Stitch designs. Learn to create production-ready codebases with Vite, Tailwind, and React Router.

- Tags: architecture
- Published: 2026-07-18

### [Handling Navigation Links When Converting Stitch HTML to React Router](/google-labs-code/stitch-skills/handling-navigation-links-when-converting-stitch-html-to-react-router)

Convert Stitch HTML to React Router seamlessly. Swap a tags for Link components, maintain external links, and create routes for smooth client-side navigation.

- Tags: how-to-guide
- Published: 2026-07-18

### [How to Set Up the Stitch MCP Server for Agent Environment Integration](/google-labs-code/stitch-skills/how-to-set-up-stitch-mcp-server-for-agent-environment)

Integrate your AI agent with the Stitch ecosystem by setting up the Stitch MCP server. Learn how this bridge exposes essential tools for seamless agent interaction.

- Tags: how-to-guide
- Published: 2026-07-18

### [Workflow for Syncing React Components with Stitch Design Updates: The 4-Phase Automated Pipeline](/google-labs-code/stitch-skills/workflow-for-syncing-react-components-with-stitch-design-updates)

Automate syncing React components with Stitch design updates. Discover the 4-phase pipeline for seamless synchronization and style consistency without manual effort. Learn more now.

- Tags: how-to-guide
- Published: 2026-07-18

### [How the Prompt Enhancement Pipeline Improves Stitch Design Generation Results](/google-labs-code/stitch-skills/how-does-prompt-enhancement-pipeline-improve-stitch-design-generation-results)

Discover how the prompt enhancement pipeline refines Stitch design generation. Learn how it converts vague UI concepts into structured instructions for consistent, high-fidelity outputs.

- Tags: performance
- Published: 2026-07-18

### [How to Sync Existing React Components with Stitch Design Updates](/google-labs-code/stitch-skills/how-to-sync-existing-react-components-with-stitch-design-updates)

Sync existing React components with Stitch design updates effortlessly. The stitch::react-components skill automates retrieval, style extraction, and validation for seamless synchronization.

- Tags: how-to-guide
- Published: 2026-07-17

### [Causes of Fetch Errors When Downloading Stitch Designs and How to Fix URL Quoting Issues](/google-labs-code/stitch-skills/fetch-errors-downloading-stitch-designs-fix-url-quoting)

Fix Stitch design fetch errors caused by URL quoting with this guide. Learn to resolve network failures, redirect loops, and malformed URLs for successful downloads.

- Tags: how-to-guide
- Published: 2026-07-16

### [Causes of Validation Failures for Missing React Props Interface in Stitch Skills](/google-labs-code/stitch-skills/validation-failures-missing-react-props-interface)

Discover why React components in stitch-skills fail validation due to missing TypeScript Props interfaces. Learn how the validator identifies these errors.

- Tags: how-to-guide
- Published: 2026-07-16

### [Why Move Static Content to `mockData.ts` Instead of Hardcoding in Stitch Skills](/google-labs-code/stitch-skills/static-content-mockdata-ts-vs-hardcoding)

Learn why moving static content to mockData.ts in Stitch Skills is better than hardcoding. Improve maintenance, testing, and asset handling.

- Tags: best-practices
- Published: 2026-07-16

### [How Custom Hooks Isolate Business Logic from UI Components in React](/google-labs-code/stitch-skills/custom-hooks-isolate-business-logic-ui-components)

Learn how React custom hooks isolate business logic from UI components. Keep your presentation layers clean and reusable for better code organization.

- Tags: how-to-guide
- Published: 2026-07-16

### [How to Generate Remotion Walkthrough Videos from Stitch Projects: A Complete Workflow](/google-labs-code/stitch-skills/generate-remotion-walkthrough-videos-stitch-projects)

Learn the Stitch + Remotion workflow to transform Stitch design screens into engaging video walkthroughs. Master asset retrieval, project setup, and animation composition.

- Tags: how-to-guide
- Published: 2026-07-16

### [How Code-to-Design Converts Frontend Code to Stitch Designs: A Complete Technical Guide](/google-labs-code/stitch-skills/code-to-design-frontend-code-to-stitch-designs)

Learn how stitch code-to-design automates frontend code migration to Stitch designs. This guide explains static HTML extraction, design system analysis, and upload management.

- Tags: how-to-guide
- Published: 2026-07-16

### [How to Upload Local Assets to a Stitch Project: A Complete Guide](/google-labs-code/stitch-skills/upload-local-assets-stitch-project)

Learn how to upload local assets to a Stitch project using the Stitch Design plugin and BatchCreateScreens API. Easily send images and files to Stitch via base-64 encoding and direct REST calls.

- Tags: how-to-guide
- Published: 2026-07-16

### [Apply Design System Tokens at Project Level vs. Generation Prompts in Stitch](/google-labs-code/stitch-skills/design-system-tokens-project-level-vs-generation-prompts)

Apply design system tokens at the project level in Stitch for visual consistency reduce LLM costs and simplify prompts. Learn why this approach beats generation prompts.

- Tags: best-practices
- Published: 2026-07-16

### [How to Use `generate_variants` with Creative Range Options in Stitch Skills](/google-labs-code/stitch-skills/use-generate_variants-creativerange-options)

Learn how to use generate_variants with creativeRange options REFINE EXPLORE or REIMAGINE for precise control over screen variations in Stitch Skills. Optimize your content generation today.

- Tags: how-to-guide
- Published: 2026-07-16

### [AST-Based Validation for React Components in Stitch-Skills: Rules and Implementation](/google-labs-code/stitch-skills/ast-validator-react-component-validation)

Discover AST based validation in stitch-skills for React components. Enforce naming conventions, prevent hard coded styles, and ensure platform constraints with @swc/core.

- Tags: how-to-guide
- Published: 2026-07-16

### [How to Convert href=# Placeholder Links to React Router Link in Stitch-Generated React Components](/google-labs-code/stitch-skills/convert-href-placeholder-links-stitch-html-react-router-link)

Convert Stitch HTML href=# placeholder links to React Router Link using the react-components skill in stitch-build. Ensure seamless navigation in your React applications.

- Tags: tutorial
- Published: 2026-07-16

### [How to Extract Tailwind Design Tokens from Stitch HTML for style-guide.json](/google-labs-code/stitch-skills/extract-tailwind-design-tokens-stitch-html-style-guide-json)

Extract Tailwind design tokens from Stitch HTML to style-guide.json with this simple two-step process. Automatically detect configurations for colors, spacing, and typography.

- Tags: how-to-guide
- Published: 2026-07-16

### [Workflow to Sync React Components with Stitch Design Updates: 4-Phase Pipeline](/google-labs-code/stitch-skills/sync-react-components-with-stitch-design-updates)

Automate syncing React components with Stitch design updates using a 4-phase pipeline covering retrieval, style extraction, architectural enforcement, and validation. Keep your codebase synchronized effortlessly.

- Tags: how-to-guide
- Published: 2026-07-16

### [How fetch-stitch.sh Handles Google Cloud Storage Redirects](/google-labs-code/stitch-skills/fetch-stitch-sh-gcs-redirects)

See how fetch-stitch.sh automatically handles Google Cloud Storage redirects using curl -L for seamless resource access. Learn more about this efficient script.

- Tags: how-to-guide
- Published: 2026-07-16

### [How to Configure the Stitch MCP Server for Stitch Skills](/google-labs-code/stitch-skills/stitch-mcp-server-configuration-for-skills)

Configure the Stitch MCP server for Stitch skills by setting environment variables for URL and credentials. Enable automatic skill discovery of the server's namespace.

- Tags: how-to-guide
- Published: 2026-07-16

### [How to Generate Premium Anti-Generic UI Standards with Taste-Design](/google-labs-code/stitch-skills/how-to-generate-premium-anti-generic-ui-standards-with-taste-design)

Generate premium anti-generic UI standards with taste-design. Learn how to ban generic fonts and neon colors to create unique UIs using the stitch-utilities plugin.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Create Custom Skills Following the Agent Skills Standard](/google-labs-code/stitch-skills/how-to-create-custom-skills-following-agent-skills-standard)

Learn to create custom skills following the Agent Skills standard. Structure your skill with a SKILL.md file, scripts, and examples in the stitch-skills repository.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Debug Fetch Errors When Downloading Stitch Designs: A Complete Guide](/google-labs-code/stitch-skills/how-to-debug-fetch-errors-when-downloading-stitch-designs)

Debug Stitch design fetch errors by enabling verbose JSON output and checking Puppeteer browser logs. Learn how to resolve these non-fatal warnings efficiently.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Validate TypeScript Compilation for Generated Components: A Complete Guide](/google-labs-code/stitch-skills/how-to-validate-typescript-compilation-for-generated-components)

Learn how to validate TypeScript compilation for generated components. Stitch-build react-components skill uses SWC and AST parsing for error detection and convention enforcement. Ensure valid components with status 0.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Manage and Apply Design Systems in Stitch: A Complete Workflow Guide](/google-labs-code/stitch-skills/how-to-manage-and-apply-design-systems-in-stitch)

Learn to manage and apply design systems in Stitch with this workflow guide. Master asset retrieval, token synthesis, DESIGN.md uploads, and screen application.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Extract Static HTML from Running Web Applications](/google-labs-code/stitch-skills/how-to-extract-static-html-from-running-web-applications)

Learn to extract static HTML from running web apps with stitch. This skill uses Puppeteer to capture rendered pages, inline CSS and images, and remove dev scripts for self-contained files.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Enhance Vague UI Prompts for Better Stitch Results](/google-labs-code/stitch-skills/how-to-enhance-vague-ui-prompts-for-better-stitch-results)

Learn to enhance vague UI prompts for better Stitch results with the enhance-prompt skill. Transform ambiguous descriptions into structured, Stitch-ready prompts using design tokens and clear component keywords.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Create Multi-Page Websites from a Single Prompt with stitch-loop](/google-labs-code/stitch-skills/how-to-create-multi-page-websites-from-single-prompt-with-stitch-loop)

Learn to build multi-page websites from single prompts using stitch-loop! This skill uses autonomous agents and a Baton System for iterative page generation and publishing. Explore the google-labs-code/stitch-skills repo today.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Implement Dark Mode in Stitch-to-React Conversion: A Complete Guide](/google-labs-code/stitch-skills/how-to-implement-dark-mode-in-stitch-to-react-conversion)

Learn to implement dark mode in Stitch-to-React conversion. Capture designs with a dark class, configure Tailwind, and apply dark variants to components with this complete guide.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Upload Local Assets and Mockups to Stitch Projects: Complete Guide](/google-labs-code/stitch-skills/how-to-upload-local-assets-and-mockups-to-stitch-projects)

Learn how to upload local assets and mockups to Stitch projects easily. Bypass token limits and send large files directly to Stitch using the stitch::upload-to-stitch skill.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Extract Design Systems from Existing Codebases into DESIGN.md](/google-labs-code/stitch-skills/how-to-extract-design-systems-from-existing-codebase-into-design-md)

Easily extract design systems from your codebase into DESIGN.md. Our tool scans source files to compile colors, typography, components, and layout rules automatically.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Validate React Components Against Stitch Design Specifications](/google-labs-code/stitch-skills/how-to-validate-react-components-against-stitch-design-specifications)

Validate React components against Stitch design specifications using SWC parsing of TypeScript/TSX files. Enforce strict typing and Tailwind styling for seamless design system alignment.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Generate Walkthrough Videos from Stitch Projects Using Remotion](/google-labs-code/stitch-skills/how-to-generate-walkthrough-videos-from-stitch-projects-using-remotion)

Learn to generate walkthrough videos from Stitch projects using Remotion. Extract screen assets, compose sequences, and add animated transitions for professional demos.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Extract Design Tokens and Style Guides from Stitch HTML](/google-labs-code/stitch-skills/how-to-extract-design-tokens-and-style-guides-from-stitch-html)

Extract design tokens and style guides from Stitch HTML with a two-step workflow. This method generates a semantic DESIGN.md style guide by parsing Tailwind CSS and theme configurations.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Convert Frontend Code (React/Vue) to Stitch Designs: A Complete Guide](/google-labs-code/stitch-skills/how-to-convert-frontend-code-react-vue-to-stitch-designs)

Convert React or Vue frontend code to Stitch designs effortlessly. Learn how Stitch skills automate this process using a powerful three-stage pipeline for seamless integration.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Sync Existing React Components with Updated Stitch Designs](/google-labs-code/stitch-skills/how-to-sync-existing-react-components-with-updated-stitch-designs)

Automate syncing React components with Stitch designs. Learn how the stitch::react-components skill transforms your workflow, extracts tokens, and validates changes.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Set Up and Configure the Stitch MCP Server](/google-labs-code/stitch-skills/how-to-set-up-and-configure-stitch-mcp-server)

Easily set up and configure the Stitch MCP server. Register an endpoint, export environment variables, and verify connectivity with simple commands.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Convert Stitch Designs to React Components with Vite](/google-labs-code/stitch-skills/how-to-convert-stitch-designs-to-react-components-with-vite)

Convert Stitch designs to React components using Vite. Run the stitch::react-components skill to generate Atomic Design components and integrate them into your Vite project.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Handle Dark Mode with Tailwind dark: Variants in Stitch](/google-labs-code/stitch-skills/how-do-i-handle-dark-mode-with-tailwind-dark-variants-in-stitch)

Learn to enable Tailwind dark mode in Stitch. Inject the dark class into your HTML element using the --html-class flag for seamless dark: variant activation during static HTML generation.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Batch Apply a Design System Across All Project Screens in Stitch](/google-labs-code/stitch-skills/how-do-i-batch-apply-a-design-system-across-all-project-screens-in-stitch)

Learn how to batch apply a design system to all Stitch project screens with a DESIGN.md file and script. Streamline your workflow efficiently. Get started now!

- Tags: how-to-guide
- Published: 2026-07-12

### [Where to Find Design Mappings for Professional UI Terminology in Stitch](/google-labs-code/stitch-skills/where-can-i-find-design-mappings-for-professional-ui-terminology-in-stitch)

Discover design mappings for UI terminology in Stitch. Find the reference file in the stitch-design plugin to ensure consistent professional language.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Run the AST-Based Validator for React Components in Stitch Skills](/google-labs-code/stitch-skills/how-do-i-run-the-ast-based-validator-for-react-components)

Learn to run the AST-based validator for React components in Stitch Skills using Node or the stitch command. Ensure `@swc/core` is installed for effective validation and code quality.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Extract and Sync Tailwind.config Tokens to style-guide.json](/google-labs-code/stitch-skills/how-do-i-extract-and-sync-tailwind-config-tokens-to-style-guide-json)

Learn how to extract and sync Tailwind.config tokens to style-guide.json with the Stitch Skills workflow. Automate design token management for your React components.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Replace href='#' Placeholders with React Router Links in Stitch-Skills](/google-labs-code/stitch-skills/how-do-i-replace-href-placeholders-with-react-router-links)

Learn to replace href='#' with React Router Links in Stitch-Skills. Enable seamless client-side navigation and boost your app's performance.

- Tags: how-to-guide
- Published: 2026-07-12

### [Phase 1 Retrieval and Networking in stitch::react-components: The 6-Step Gated Workflow](/google-labs-code/stitch-skills/what-is-phase-1-retrieval-and-networking-in-stitch-react-components)

Understand Phase 1 retrieval and networking in stitch::react-components. Learn the 6-step gated workflow for downloading and auditing Stitch designs before React code generation.

- Tags: deep-dive
- Published: 2026-07-12

### [Agent Skills Open Standard File Structure: Complete Specification for AI-Ready Skills](/google-labs-code/stitch-skills/what-is-the-agent-skills-open-standard-file-structure)

Explore the Agent Skills open standard file structure, detailing the mandatory SKILL.md scripts resources and examples directories for AI-ready skills development. Get the complete specification.

- Tags: api-reference
- Published: 2026-07-12

### [How to Generate Walkthrough Videos Using the Remotion Skill: A Complete Guide](/google-labs-code/stitch-skills/how-do-i-generate-walkthrough-videos-using-the-remotion-skill)

Learn how to generate walkthrough videos with the Remotion skill. This guide explains how Remotion transforms Stitch designs into polished videos.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Customize shadcn/ui Components for a Stitch Project: Complete Guide](/google-labs-code/stitch-skills/how-do-i-customize-shadcn-ui-components-for-a-stitch-project)

Customize shadcn/ui components in Stitch projects using CSS variables, Tailwind config, and cva variants. Learn to modify components without touching node_modules for your Stitch skills.

- Tags: how-to-guide
- Published: 2026-07-12

### [How the extract-static-html Skill Handles CSS Inlining: A Complete Technical Guide](/google-labs-code/stitch-skills/how-does-the-extract-static-html-skill-handle-css-inlining)

Learn how the extract-static-html skill inlines CSS with a custom parser and end-to-start replacement strategy for self-contained HTML documents. Discover its technical approach.

- Tags: tech-deep-dive
- Published: 2026-07-12

### [How to Configure the Stitch MCP Server with Environment Variables](/google-labs-code/stitch-skills/how-do-i-configure-the-stitch-mcp-server-with-environment-variables)

Learn how to configure Stitch MCP server with environment variables. Set STITCH_MCP_URL and STITCH_MCP_API_KEY for seamless authentication across your MCP-enabled skills.

- Tags: how-to-guide
- Published: 2026-07-12

### [Generate From Text vs. Edit Flows in Stitch: What's the Difference?](/google-labs-code/stitch-skills/what-is-the-difference-between-generate-from-text-and-edit-flows-in-stitch)

Understand the difference between Stitch's Generate From Text and Edit flows. Learn how to create new UI screens from text or precisely modify existing ones with component-level changes.

- Tags: comparison
- Published: 2026-07-12

### [Required Parameters for Uploading Assets to a Stitch Project](/google-labs-code/stitch-skills/what-are-the-required-parameters-for-uploading-assets-to-a-stitch-project)

Learn the required parameters for uploading assets to a Stitch project. Discover the mandatory `--project-id`, `--file-path`, and `--api-key` arguments for the stitch upload script.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Extract DESIGN.md from Existing Frontend Source Code](/google-labs-code/stitch-skills/what-is-the-process-for-extracting-design-md-from-existing-frontend-source-code)

Extract DESIGN.md from frontend source code automatically. This skill reverse-engineers your design system from manifests, stylesheets, and configs, generating a structured DESIGN.md without build or runtime.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Apply Design System Tokens to Multiple Screens Using manage-design-system](/google-labs-code/stitch-skills/how-do-i-apply-design-system-tokens-to-multiple-screens-using-manage-design-system)

Learn how to apply design system tokens to multiple screens with the manage-design-system skill. Propagate tokens efficiently across your project using apply_design_system and screen IDs.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Use the Prompt Enhancement Pipeline in Stitch: A Complete Guide to UI/UX Keywords](/google-labs-code/stitch-skills/what-is-the-prompt-enhancement-pipeline-and-how-do-i-use-ui-ux-keywords)

Learn to use the prompt enhancement pipeline in Stitch. Transform UI descriptions into design-system-ready prompts with UI/UX keywords for deterministic generation. Read our guide.

- Tags: how-to-guide
- Published: 2026-07-12

### [How stitch::stitch-loop Generates Multi-Page Websites From a Single Prompt](/google-labs-code/stitch-skills/how-does-stitch-stitch-loop-generate-multi-page-websites-from-a-single-prompt)

Discover how stitch::stitch-loop creates multi-page websites from one prompt. Learn about its baton-passing workflow, persistent context, and iterative page generation.

- Tags: how-to-guide
- Published: 2026-07-12

### [Platform-Specific Considerations for Converting Stitch Designs to React Native](/google-labs-code/stitch-skills/what-are-platform-specific-considerations-for-converting-stitch-designs-to-react-native)

Learn platform specific considerations for converting Stitch designs to React Native. Map web components, translate CSS, handle platform code, bundle assets, and validate output.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Navigate the 4-Phase Conversion Process in stitch::react-components](/google-labs-code/stitch-skills/how-do-i-navigate-the-4-phase-conversion-process-in-stitch-react-components)

Master the 4 phase conversion process in stitch::react-components. Learn to generate production-ready React code efficiently by understanding each phase and its critical gates.

- Tags: how-to-guide
- Published: 2026-07-12

### [How to Convert React Code to Stitch Designs Using `stitch::code-to-design`](/google-labs-code/stitch-skills/what-is-the-workflow-for-converting-react-code-to-stitch-designs-using-stitch-code-to-design)

Convert React code to Stitch designs with stitch::code-to-design. Learn the workflow to extract HTML, generate DESIGN.md, and upload to your Stitch project.

- Tags: how-to-guide
- Published: 2026-07-12

### [How the generate_screen_from_text MCP Tool Works in stitch::generate-design](/google-labs-code/stitch-skills/how-does-the-generate-screen-from-text-mcp-tool-work-in-stitch-generate-design)

Discover how the generate_screen_from_text MCP tool in stitch::generate-design transforms UI text into Stitch screens. Learn about prompts, project IDs, and design systems.

- Tags: how-to-guide
- Published: 2026-07-12