skills.rest
tranhoainam298
tranhoainam298COMMUNITY
Explore all skills by this author →
GitHub

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

1|Updated Jun 27, 2026
Search Tags:#mcp#ui design#mockup#stitch#prompt enhancement#screen generation#design variants
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-generate-design-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::generate-design
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-design/skills/generate-design
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-generate-design-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning vague design ideas into structured, professional UI screens requires design expertise and iterative refinement. This Skill converts text descriptions, images, or mockups into generated screens via Stitch MCP, handling prompt enhancement, design system coordination, and asset downloads. ## Core Features & Use Cases - Prompt Enhancement Pipeline: Transforms vague requests into structured prompts with professional UI/UX terminology, keeping theme tokens out of generation prompts since design systems handle styling at the project level. - Four Generation Flows: Create screens from text, recreate designs from uploaded images or mockups, edit existing screens with targeted prompts, and generate layout/color/content variants with configurable creative range. - Asset Management: Downloads generated HTML and screenshots to a local .stitch/designs directory and updates project metadata after edits. - Use Case: Describe a landing page for a fitness app, and the Skill enhances the prompt with proper page structure (header, hero, feature grid, footer), generates the screen in the correct Stitch project, and saves the HTML and screenshot locally. ## Quick Start Ask the assistant to generate a new landing page screen for your project from a text description using Stitch.

Frequently Asked Questions about stitch::generate-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI screen from a text description with Stitch?▼

Provide a text description of the page, and the Skill enhances it into a structured prompt covering platform, header, hero, content sections, and footer. It then calls the generate_screen_from_text tool with the project ID and device type (MOBILE, DESKTOP, or TABLET).

How do I recreate a design from an image or mockup in Stitch?▼

The image is uploaded to the Stitch project via the upload-to-stitch skill, creating a new screen. The edit_screens tool then refines it with a descriptive prompt explaining the intent, such as recreating a dashboard with a data table and sidebar navigation.

Why should generation prompts avoid hex codes and font names?▼

Design tokens like colors, fonts, and roundness are applied at the project level by the manage-design-system skill. Including them in a generation prompt causes conflicts with the project design system. Hex codes are only acceptable in edit prompts for precise color adjustments.

Can I generate multiple design variants of an existing screen?▼

Yes, the generate_variants tool creates 1 to 5 variants of a selected screen. You control the creative range (REFINE, EXPLORE, or REIMAGINE) and focus aspects such as LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, or TEXT_CONTENT.

Where are generated design files saved after screen creation?▼

Generated HTML and screenshot URLs from the output components are downloaded to a local .stitch/designs directory using curl. Files are named with the screen ID or a descriptive slug, and edits overwrite previous versions.

Related Skills

Explore More Design & Creative Skills→
bdarcusbdarcus
1

design-md

Synthesize a semantic DESIGN.md from Stitch project assets.

Community
Advanced
alguaritoalguarito

frontend-design

Design and build custom frontend interfaces using HTML/CSS/JS or React/Vue.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

Official
Advanced
SatangThevalueSatangThevalue

sketch

Generate self-contained HTML design variants with inline CSS and per-variant READMEs.

Community
Intermediate