gabelulCommunity·35 Agent Skills Included

stitch-kit

Text-to-UI design generation and multi-framework code conversion

Generates polished UI screens from plain-English prompts through Google Stitch, then converts them into production-ready Next.js, React, Svelte, SwiftUI, React Native, or plain HTML code. Eliminates bland default layouts, broken API ID formats, and manual design-to-code handoffs. Includes design token extraction, dark mode, accessibility audits, and animations so every screen ships consistent and accessible.

38|5

↗

npx skills add gabelul/stitch-kit --all -g -y

Available:

Tells your coding agent how the 36 Stitch skills are organized, which skill to route each design request to, and how to install and configure the Stitch MCP connection.

All Skills in This Repository (35)

Pure Emerald Level Indicators

📦 In Repo

gabelul

stitch-mcp-update-design-system

Update existing Stitch design system assets via the update_design_system MCP tool.

stitch-ui-design-variants

Generate three distinct Stitch prompts for A/B testing UI design variants.

stitch-mcp-list-projects

List Stitch projects with titles and last modified timestamps via MCP.

stitch-nextjs-components

Convert Google Stitch design screens into Next.js 15 App Router components.

stitch-mcp-list-screens

Parse Stitch project screen list responses to extract numeric screen IDs.

stitch-html-components

Convert Google Stitch design outputs into semantic HTML5 and CSS.

stitch-mcp-edit-screens

Modify existing Stitch UI screens via targeted text prompts.

stitch-animate

Add tiered motion layers to Stitch-generated UI components with reduced-motion compliance.

stitch-setup

Configure Google Stitch MCP server and install stitch-kit plugin for AI coding agents.

stitch-mcp-apply-design-system

Apply a Stitch design system to multiple screens in one operation.

stitch-mcp-generate-variants

Generate alternative design variants of existing Stitch UI screens.

stitch-shadcn-ui

Replace raw HTML elements in Stitch-generated React apps with shadcn/ui components.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install stitch-kit?▼

Run `npx skills add gabelul/stitch-kit --all -g -y` in your terminal to install all skills globally. You also need a free Stitch API key from stitch.withgoogle.com/settings to generate designs.

What does stitch-kit do?▼

It turns text descriptions into polished UI screens via Google Stitch, then converts those designs into production-ready components for Next.js, React, Svelte, SwiftUI, React Native, or plain HTML with dark mode and accessibility built in.

Can I convert existing HTML without a Stitch account?▼

Yes. Every conversion skill accepts a local HTML file or a URL as input, so you can turn any existing markup into clean framework components with no Google account required.

Does stitch-kit work with Claude Code and Codex?▼

Yes. It follows the universal SKILL.md standard and runs in Claude Code, Codex CLI, OpenCode, Cursor, and other compatible clients, with an installer that auto-detects your setup.

How do I keep multiple generated screens visually consistent?▼

Use the design system skills to extract colors, fonts, and spacing into reusable tokens, then apply that design system to every new screen so the whole project shares one visual identity.