skilld
All skills
google-labs-code avatar

/generate-design

@681a283 official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

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.

  • 4 files
  • 17.4 KB
  • Updated 5 months ago
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/generate-design

This session only. Nothing lands on disk.

examplesenhanced-prompt.md

≈426 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Example: Prompt Enhancement

User Input (Vague)

"Make a landing page for my fitness app called 'Pulse'. It should have a place for features and a hero section."

Enhanced Prompt (Stitch-Optimized)

[!NOTE] This prompt contains NO colors, fonts, or theme instructions — those are handled by the project's design system. The prompt focuses exclusively on layout, structure, and content.

Overall Purpose: A high-energy, modern landing page for 'Pulse', a fitness tracking application. The page should feel powerful, motivating, and high-performance.

PLATFORM: Web, Desktop-first

PAGE STRUCTURE:

  1. Header: Minimalist navigation with Pulse logo (left) and "Start Training" primary call-to-action button (right).
  2. Hero Section: Large, emotive fitness photography background. Headline: "Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness goals with Pulse." Primary CTA button: "Get Started".
  3. Feature Grid: Three-column responsive card grid highlighting:
    • Real-time Tracking: Live stats from your wearable.
    • AI Coaching: Personalized workouts based on your performance.
    • Community Challenges: Compete with friends and stay motivated.
  4. Social Proof Section: Horizontal slider showing "Trusted by 500,000+ athletes" with partner logos.
  5. Footer: Quick links (Training, Pricing, Support), social icons, and legal text.

💡 Tip: Notice how the enhanced prompt describes structure and content without specifying hex codes, font families, or color roles. The design system (created via the manage-design-system skill) handles all visual theming at the project level.

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at 681a283. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 5 months ago

Capability

What it can do
Runs commands Reads files Edits files
All 5 allowed tools
stitch*:*BashReadWriteweb_fetch

Topics

  • Design
  • MCP
  • stitch
  • ui
  • generative-design
  • screen-generation
  • design-system
  • prototyping
  • web-design

README badge

README badge for google-labs-code/stitch-skills/generate-design

What it does

Generates and edits UI screens from text descriptions, images, or mockups using Stitch MCP, with an emphasis on prompt enhancement, design system token integration, and iterative refinement. Includes workflow for creating new screens, editing existing ones, and generating layout or color variants without duplicating design tokens already applied at the project level.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with existing design systems?
Yes. If a design system exists for your project, the skill applies design tokens (colors, fonts, roundness) automatically and excludes them from generation prompts. If none exists, you must set one up via the manage-design-system skill first.
Can I upload an image or mockup to generate a design from it?
Yes. Use the Generate from Image flow to upload a screenshot or mockup, then refine it with edit prompts. The skill delegates image upload to the upload-to-stitch skill.
What should I include in generation prompts?
Focus on layout, content, and structure only. Never include hex codes, font names, colors, or theme instructions in generation prompts—these are handled by the design system. For edits, hex codes are acceptable for precise adjustments.
Does this skill generate code or just design files?
It generates design screens with HTML and screenshot outputs that are downloaded to the .stitch/designs directory. The skill operates within the Stitch design tool, not a code generation context.
Can I create multiple design variations at once?
Yes. The Generate Variants flow lets you explore 1-5 alternative layouts, color schemes, or other aspects with different creative ranges (REFINE, EXPLORE, or REIMAGINE).

Generated from the current SKILL.md. These answers refresh after source changes.