skills.rest
taewook486
taewook486COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-platform-stitch

Generate UI designs from text and export HTML/CSS/JS code via Google Stitch MCP.

Updated Jan 28, 2026
Search Tags:#code generation#design system#ux design#ui design#ai design#stitch
One-click install
npx skills add https://github.com/taewook486/vibe-shop --skill moai-platform-stitch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-platform-stitch
Source: https://github.com/taewook486/vibe-shop/tree/main/.claude/skills/moai-platform-stitch
Command: npx skills add https://github.com/taewook486/vibe-shop --skill moai-platform-stitch

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines UI/UX design workflows by enabling AI-driven generation of designs from text, extraction of design context from existing screens, and export of production-ready code and images.

Core Features & Use Cases

  • AI Design Generation: Create new UI screens from detailed text descriptions.
  • Design Context Extraction: Analyze existing screens to capture design tokens (colors, typography, spacing).
  • Code & Image Export: Download functional HTML/CSS/JS code and high-resolution screenshots of designs.
  • Project Management: Organize and manage design projects and screens within Stitch.
  • Use Case: Generate a complete e-commerce product listing page with consistent branding by first extracting design tokens from your existing homepage, then prompting Stitch to create the new page based on those tokens.

Quick Start

Use the moai-platform-stitch skill to generate a new login screen from a text description.

Frequently Asked Questions about moai-platform-stitch

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

FAQPage Schema
How do I generate UI design from text descriptions?▼

To generate UI design from text, this Skill integrates with Google Stitch MCP to translate detailed text descriptions into new UI screens. You simply provide the text prompt for the desired interface, and it outputs the corresponding AI-generated design.

Can I extract design tokens like colors and typography from an existing screen?▼

Yes, you can extract design tokens such as colors, typography, and spacing from existing screens. This design context extraction feature analyzes your current UI to capture its design DNA for maintaining visual consistency across new pages.

What is the best way to export production-ready code for a UI design?▼

The best way to export production-ready code for a UI design is using the Stitch export functionality. It allows you to download functional HTML, CSS, and JS code directly from your generated screens, alongside high-resolution image screenshots.

Do I need a Google Stitch account to manage AI-generated design projects?▼

Yes, you need a Google Stitch account because this Skill connects directly to the Stitch MCP. This integration is required to manage your design projects, organize screens, and execute AI-driven UI generation tasks.

How do I keep branding consistent when creating a new e-commerce product listing page?▼

To keep branding consistent when creating an e-commerce product listing page, first extract design tokens from your existing homepage. Then, use those extracted tokens as context to prompt Stitch to generate the new page with matching branding.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

stitch-planner

Sequence prompt enhancement, screen generation, and design token extraction for Google Stitch prototyping workflows.

Official
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-stitch-design-sync

Extract and normalize design tokens from Stitch HTML/CSS into a frontend-ready token set.

Community
Advanced
JongHyunLee84JongHyunLee84

factory-ui-design

Generate UI specifications with screen layouts and component hierarchies from technical architecture.

Community
Advanced