What are the prerequisites for using these skills?

You need to configure and run the Stitch MCP server in your agent environment, and follow the official documentation to register the server and set up environment variables and credentials.

How do I use these skills in OpenCode?

OpenCode does not support the npx plugins/skills commands. You must manually copy the skill folders to a discoverable path such as .opencode/skills and add a remote MCP entry in opencode.json. Skill names should be converted to lowercase kebab-case.

Can I install only some of the skills?

Yes, you can selectively install them using the npx skills add command. However, skills often depend on each other, so make sure all required dependencies are included when installing selectively.

September 26, 2026

Stitch Design Skills

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

Design, build, and utility Agent Skills for AI coding agents to use with the Stitch MCP server.

Apache-2.0Claude CodeCursorText InputImage InputCode Output

Skill广场 Skill Packaging

安装 / 调用方式bash

Codex:
codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities

Claude Code:
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

Cursor:
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

Selective install:
npx skills add google-labs-code/stitch-skills

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code · Cursor
License: Apache-2.0
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

Stitch Design Skills is a skill library following the open Agent Skills standard, designed for use with the Stitch MCP server. It works with AI coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode (manual installation required). The repository organizes skills into three plugin packages: - **stitch-design**: Core design workflows, including converting frontend code into Stitch designs, generating new interfaces from text or images, managing design systems, extracting DESIGN.md, extracting static HTML, and uploading local assets to Stitch projects. - **stitch-build**: Code generation and framework integration, supporting conversion of Stitch interfaces into React components and React Native components, generating demo videos with Remotion, integrating shadcn/ui, and building React + Vite dashboards. - **stitch-utilities**: Auxiliary utility skills. Before use, you must configure and run the Stitch MCP server in your agent environment. Installation varies by host tool: Codex can add the marketplace via CLI or UI; Claude Code and Cursor use the `npx plugins add` command to install into the project or workspace respectively; OpenCode requires manually copying the skill folders and configuring a remote MCP entry in `opencode.json`. You can also selectively install specific skills via `npx skills add`, but note that skills may depend on each other.

Key features

code-to-design: Convert frontend code (React, Vue, etc.) into Stitch designs via HTML extraction and design systems.
generate-design: Generate new interfaces from text or images, edit existing ones, and create design variants.
manage-design-system: Manage design systems in Stitch, upload DESIGN.md, and apply themes to interfaces.
extract-design-md: Extract complete DESIGN.md files directly from frontend source code.
extract-static-html: Extract self-contained static HTML with inline CSS and images from running web apps.
upload-to-stitch: Upload local assets (images, mockups, HTML) to Stitch projects.
react-components: Convert Stitch interfaces into React component systems with auto-validation and design token consistency.
react-native: Convert Stitch HTML designs into React Native components with StyleSheet and platform-specific code.
remotion: Generate demo videos with smooth transitions and zoom effects from Stitch projects using Remotion.
shadcn-ui: Guidance for integrating and building apps with shadcn/ui components.
react-vite-dashboard: Convert Stitch interfaces into React + Vite dashboards combining TanStack Query and DESIGN.md tokens.

Releases

Notify me

Initial · Stitch Design Skills

September 26, 2026

Q&A

Which AI coding agents are compatible with Stitch Design Skills?AI-generated: Compatible with Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode (manual installation required).
What are the prerequisites for using these skills?AI-generated: You need to configure and run the Stitch MCP server in your agent environment, and follow the official documentation to register the server and set up environment variables and credentials.
How do I use these skills in OpenCode?AI-generated: OpenCode does not support the npx plugins/skills commands. You must manually copy the skill folders to a discoverable path such as .opencode/skills and add a remote MCP entry in opencode.json. Skill names should be converted to lowercase kebab-case.
Can I install only some of the skills?AI-generated: Yes, you can selectively install them using the npx skills add command. However, skills often depend on each other, so make sure all required dependencies are included when installing selectively.