skills.rest
maplin-co
maplin-coOFFICIAL
Explore all skills by this author →
GitHub

stitch

Generate UI code and screens from Google Stitch designs via MCP.

Updated Jan 9, 2026
Search Tags:#code generation#mcp#google cloud#ui design#ai design#stitch
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill stitch-maplin-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/stitch
Command: npx skills add https://github.com/maplin-co/ai-course --skill stitch-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables seamless interaction with Google Stitch, an AI-powered UI design tool, allowing for the extraction of design context, generation of code from designs, and creation of new screens from textual descriptions.

Core Features & Use Cases

  • Design Context Extraction: Retrieve colors, typography, and spacing information from Stitch designs.
  • Code Generation: Produce production-ready code directly from visual designs.
  • AI-driven Screen Creation: Generate new UI screens based on natural language prompts.
  • Use Case: A developer can use this Skill to quickly generate the front-end code for a mobile app screen based on a design mockup in Stitch, or to create a new login screen by simply describing its desired elements.

Quick Start

Use the stitch skill to generate a new mobile login screen from the prompt 'Create a modern login page with email and password fields, social login buttons, and a forgot password link'.

Frequently Asked Questions about stitch

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

FAQPage Schema
How do I generate UI code from a design mockup?▼

You can generate UI code from design mockups by submitting visual designs to the Stitch MCP. This Skill processes the mockups and outputs production-ready front-end code, automating the design-to-code workflow.

Can I create new UI screens from text prompts?▼

Yes, you can create new UI screens from text prompts. This Skill uses the Stitch MCP to translate natural language descriptions into generated UI screens, enabling rapid prototyping from text inputs.

What is design context extraction and how does it work?▼

Design context extraction retrieves colors, typography, and spacing from Stitch designs. This Skill queries the Stitch MCP to pull these specifications, ensuring generated UI code matches your visual style guidelines.

Do I need Google Cloud authentication to use the Stitch MCP?▼

Yes, using the Stitch MCP requires Google Cloud authentication. This Skill requires Bearer tokens and project ID headers to authorize requests and integrate with your Google Cloud projects.

Does this tool work with my existing Google Cloud projects?▼

Yes, this tool integrates with existing Google Cloud projects. It requires your project ID headers during authentication, ensuring the Stitch MCP design generation and context extraction align with your cloud environment.

Related Skills

Explore More Design & Creative Skills→
fabnfabn
1

datadog:setup

Configure Datadog credentials and verify MCP server connectivity.

Community
Intermediate
reservelabreservelab
1

ReserveLabs

Detect design inconsistencies, component duplication, and accessibility gaps in front-end codebases.

Community
Intermediate
slashwhyslashwhy
5

styling

Enforce CSS variables, BEM naming, and responsive design in Vue.js components.

Official
Basic
KhoiwallKhoiwall

stitch

Access and manipulate Google Stitch UI designs via MCP.

Community
Intermediate