2.3 KiB
2.3 KiB
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-fullelements (buttons, tags). - Softly rounded: Used for
rounded-xl(12px) orrounded-2xl(16px) containers. - Sharp/Precise: Used for
rounded-noneorrounded-smelements. - 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.