skills.rest
xbghc
xbghcCOMMUNITY
Explore all skills by this author →
GitHub

stitch-ui

Generate UI designs and verified code using Stitch MCP with Playwright.

Updated Mar 4, 2026
Search Tags:#code generation#prototyping#playwright#ui design#ux#stitch mcp
One-click install
npx skills add https://github.com/xbghc/claude-plugins --skill stitch-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-ui
Source: https://github.com/xbghc/claude-plugins/tree/main/plugins/ghm-skills/skills/stitch-ui
Command: npx skills add https://github.com/xbghc/claude-plugins --skill stitch-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the UI design process by generating visual mockups and then producing verified code, streamlining the transition from concept to implementation.

Core Features & Use Cases

  • AI-Powered Design Generation: Creates UI designs based on user requirements using Stitch MCP.
  • Two-Phase Delivery: Delivers designs first as screenshots for review, then generates and verifies code upon approval.
  • Use Case: A product manager needs a new dashboard. They describe the requirements, the skill generates a visual mockup for feedback, and upon approval, generates the front-end code that is then tested with Playwright.

Quick Start

Use the stitch-ui skill to generate a login screen based on the description: "A clean login page with fields for email and password, and a prominent login button."

Frequently Asked Questions about stitch-ui

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

FAQPage Schema
How do I generate UI designs and front-end code from text descriptions?▼

To generate UI designs and front-end code, describe your layout requirements to trigger AI-powered design generation via Stitch MCP, which produces visual mockups for review before outputting verified code.

What is the process for turning a UI mockup into verified code?▼

The process for turning a UI mockup into verified code uses a two-phase delivery system: it first generates screenshot mockups for user review, then produces and validates the code using Playwright upon approval.

Do I need a Stitch MCP server and Playwright to automate UI design generation?▼

Yes, you need Stitch MCP server access to handle the AI-powered UI design and prototyping, and Playwright to automate the verification of the generated front-end code.

Can I review and approve UI layouts before the code generation starts?▼

Yes, you can review and approve UI layouts before code generation starts, because the two-phase delivery process explicitly outputs screenshot mockups first and waits for your approval before generating code.

What's the best way to manage Stitch projects and page layouts for prototyping?▼

The best way to manage Stitch projects and page layouts for prototyping is to use the stitch-ui Skill, which handles both visual mockup generation and project management within the Stitch MCP environment.

Related Skills

Explore More Design & Creative Skills→
babamba2babamba2
46

sc4sap:mcp-setup

Install and configure the abap-mcp-adt-powerup MCP server for SAP connectivity.

Community
Advanced
aresbitaresbit
7

webapp-building

Create React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced