generate-designlisted

# 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] > In Claude Code, Stitch MCP tools are named `mcp__stitch__<tool>` (e.g. > `mcp__stitch__list_projects`). This skill refers to them by bare name > (`list_projects`, `generate_screen_from_text`, `edit_screens`). > `<SKILL_DIR>` means this skill's own directory inside the installed plugin. ## 🎨 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 r