stitch-ui

Name: stitch-ui
Availability: InStock
Author: xbghc

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

Ready to run

npx skills add https://github.com/xbghc/claude-plugins --skill stitch-ui

💬 Prompt for ChatGPT / Claude Chat▼

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.