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.

referencesdesign-mappings.md

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

Design Mappings & Descriptors

Use these mappings to transform vague user requests into precise, high-fidelity design instructions.

UI/UX Keyword Refinement

Vague Term Enhanced Professional Terminology
"menu at the top" "sticky navigation bar with logo and list items"
"big photo" "high-impact hero section with full-width imagery"
"list of things" "responsive card grid with hover states and subtle elevations"
"button" "primary call-to-action button with micro-interactions"
"form" "clean form with labeled input fields, validation states, and submit button"
"picture area" "hero section with focal-point image or video background"
"sidebar" "collapsible side navigation with icon-label pairings"
"popup" "modal dialog with overlay and smooth entry animation"

Atmosphere & "Vibe" Descriptors

Add these adjectives to set the mood and aesthetic philosophy:

Basic Vibe Enhanced Design Description
"Modern" "Clean, minimal, with generous whitespace and high-contrast typography."
"Professional" "Sophisticated, trustworthy, utilizing subtle shadows and a restricted, premium palette."
"Fun / Playful" "Vibrant, organic, with rounded corners, bold accent colors, and bouncy micro-animations."
"Dark Mode" "Electric, high-contrast accents on deep slate or near-black backgrounds."
"Luxury" "Elegant, spacious, with fine lines, serif headers, and a focus on high-fidelity photography."
"Tech / Cyber" "Futuristic, neon accents, glassmorphism effects, and technological monospaced typography."

Geometry & Shape Translation

Convert technical values into physical descriptions for Stitch:

  • Pill-shaped: Used for rounded-full elements (buttons, tags).
  • Softly rounded: Used for rounded-xl (12px) or rounded-2xl (16px) containers.
  • Sharp/Precise: Used for rounded-none or rounded-sm elements.
  • Glassmorphism: Semi-transparent surfaces with background blur and thin borders.

Depth & Elevation

  • Flat: No shadows, focus on color blocking and borders.
  • Whisper-soft: Diffused, light shadows for subtle lift.
  • Floating: High-offset, soft shadows for elements that appear high above the surface.
  • Inset: Inner shadows for pressable or nested elements.

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 3 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.