# Stitch::generate Design

Generate new screens from text prompts or images, edit existing screens with prompts...

- Repository: https://github.com/google-labs-code/stitch-skills (8654 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-08-17
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add google-labs-code/stitch-skills --skill stitch::generate-design -g -a claude-code -y`
Codex: `npx skills add google-labs-code/stitch-skills --skill stitch::generate-design -g -a codex -y`
Cursor: `npx skills add google-labs-code/stitch-skills --skill stitch::generate-design -g -a cursor -y`
Gemini CLI: `npx skills add google-labs-code/stitch-skills --skill stitch::generate-design -g -a gemini-cli -y`

## Description

Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Generate Design

Create new design screens from text descriptions, images, or mockups, edit
existing screens with prompts and design system tokens, and generate design
variants using Stitch MCP.

> [!NOTE]
> Refer to your system prompt for instruction on handling MCP tool prefixes for
> all tools mentioned in this skill (e.g., `list_projects`,
> `generate_screen_from_text`, `edit_screens`).

## 🎨 Prompt Enhancement Pipeline

Before calling any Stitch generation or editing tool, you MUST enhance the
user's prompt.

### 1. Analyze Context

- **Project**: Use `list_projects` to find the correct `projectId`. If no
  suitable project exists, create one using `create_project`.
- **Design System**: Check if a design system exists for the project via
  `list_design_systems`. If one exists, design tokens (colors, fonts, roundness)
  are already applied at the project level, do NOT include any color, font, or
  theme instructions in the generation prompt. If none exists, delegate to the
  **manage-design-system** skill first before generating screens.

### 2. Refine UI/UX Terminology

Consult [Design Mappings](references/design-mappings.md) to replace vague terms.

- Vague: "Make a nice header"
- Professional: "Sticky navigation bar with glassmorphism effect and centered
  logo"

Use [Prompting Keywords](references/prompt-keywords.md) for component names,
adjective palettes, color roles, and shape descriptions.

### 3. Structure the Final Prompt

Format the enhanced prompt for Stitch. Focus exclusively on **layout, content,
and structure**, never include colors, fonts, or theme instructions (these are
handled by the manage-design-system skill at the project level).

For **new screens**, use this template:

```markdown
[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

The rest: https://github.com/google-labs-code/stitch-skills/blob/HEAD/plugins/stitch-design/skills/generate-design/SKILL.md