Loading source

Preparing the source view

Pulling the file list, source metadata, and syntax-aware rendering for this listing.

Source from repo

Stitch Design Expert

Expert UI design skill for Stitch MCP: enhances prompts, generates high-fidelity screens, and maintains design system consistency.

google-labs-codeGitHub google-labs-codeSource repo Original GitHub link Publisher page

Files

11

Skill

n/a

Size

20.5 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/design-mappings.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown46 linesFree

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.