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.

referencesprompt-keywords.md

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

UI/UX Keywords Reference

Progressive disclosure reference for common UI terminology and adjective palettes.

Component Keywords

Navigation

  • navigation bar, nav menu, header
  • breadcrumbs, tabs, sidebar
  • hamburger menu, dropdown menu
  • back button, close button

Content Containers

  • hero section, hero banner
  • card, card grid, tile
  • modal, dialog, popup
  • accordion, collapsible section
  • carousel, slider

Forms

  • input field, text input
  • dropdown, select menu
  • checkbox, radio button
  • toggle switch
  • date picker, time picker
  • search bar, search input
  • submit button, form actions

Calls to Action

  • primary button, secondary button
  • ghost button, text link
  • floating action button (FAB)
  • icon button

Feedback

  • toast notification, snackbar
  • alert banner, warning message
  • loading spinner, skeleton loader
  • progress bar, step indicator

Layout

  • grid layout, flexbox
  • sidebar layout, split view
  • sticky header, fixed footer
  • full-width, contained width
  • centered content, max-width container

Adjective Palettes

Minimal / Clean

  • minimal, clean, uncluttered
  • generous whitespace, breathing room
  • subtle, understated, refined
  • simple, focused, distraction-free

Professional / Corporate

  • sophisticated, polished, trustworthy
  • corporate, business-like, formal
  • subtle shadows, clean lines
  • structured, organized, hierarchical

Playful / Fun

  • vibrant, colorful, energetic
  • rounded corners, soft edges
  • bold, expressive, dynamic
  • friendly, approachable, warm

Premium / Luxury

  • elegant, luxurious, high-end
  • dramatic, bold contrasts
  • sleek, modern, cutting-edge
  • exclusive, boutique, curated

Dark Mode

  • dark theme, night mode
  • high-contrast accents
  • soft glows, subtle highlights
  • deep backgrounds, muted surfaces

Organic / Natural

  • earthy tones, natural colors
  • warm, inviting, cozy
  • textured, tactile, handcrafted
  • flowing, organic shapes

Interaction & Behavior Keywords

Animations

  • smooth entry animation, slide-in
  • fade transition, cross-fade
  • micro-interaction, bounce effect
  • skeleton loader, shimmer effect

Responsiveness

  • responsive layout, adaptive grid
  • mobile-first, desktop-first
  • breakpoint, viewport
  • stacked layout, side-by-side

User Flows

  • progressive disclosure, step indicator
  • expandable section, collapsible panel
  • infinite scroll, pagination
  • drag and drop, swipe gesture

Shape Descriptions

Technical Natural Language
rounded-none sharp, squared-off edges
rounded-sm slightly softened corners
rounded-md gently rounded corners
rounded-lg generously rounded corners
rounded-xl very rounded, pillow-like
rounded-full pill-shaped, circular

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.