1# Design Mappings & Descriptors
2 
3Use these mappings to transform vague user requests into precise, high-fidelity design instructions.
4 
5## UI/UX Keyword Refinement
6 
7| Vague Term | Enhanced Professional Terminology |
8|:---|:---|
9| "menu at the top" | "sticky navigation bar with logo and list items" |
10| "big photo" | "high-impact hero section with full-width imagery" |
11| "list of things" | "responsive card grid with hover states and subtle elevations" |
12| "button" | "primary call-to-action button with micro-interactions" |
13| "form" | "clean form with labeled input fields, validation states, and submit button" |
14| "picture area" | "hero section with focal-point image or video background" |
15| "sidebar" | "collapsible side navigation with icon-label pairings" |
16| "popup" | "modal dialog with overlay and smooth entry animation" |
17 
18## Atmosphere & "Vibe" Descriptors
19 
20Add these adjectives to set the mood and aesthetic philosophy:
21 
22| Basic Vibe | Enhanced Design Description |
23|:---|:---|
24| "Modern" | "Clean, minimal, with generous whitespace and high-contrast typography." |
25| "Professional" | "Sophisticated, trustworthy, utilizing subtle shadows and a restricted, premium palette." |
26| "Fun / Playful" | "Vibrant, organic, with rounded corners, bold accent colors, and bouncy micro-animations." |
27| "Dark Mode" | "Electric, high-contrast accents on deep slate or near-black backgrounds." |
28| "Luxury" | "Elegant, spacious, with fine lines, serif headers, and a focus on high-fidelity photography." |
29| "Tech / Cyber" | "Futuristic, neon accents, glassmorphism effects, and technological monospaced typography." |
30 
31## Geometry & Shape Translation
32 
33Convert technical values into physical descriptions for Stitch:
34 
35- **Pill-shaped**: Used for `rounded-full` elements (buttons, tags).
36- **Softly rounded**: Used for `rounded-xl` (12px) or `rounded-2xl` (16px) containers.
37- **Sharp/Precise**: Used for `rounded-none` or `rounded-sm` elements.
38- **Glassmorphism**: Semi-transparent surfaces with background blur and thin borders.
39 
40## Depth & Elevation
41 
42- **Flat**: No shadows, focus on color blocking and borders.
43- **Whisper-soft**: Diffused, light shadows for subtle lift.
44- **Floating**: High-offset, soft shadows for elements that appear high above the surface.
45- **Inset**: Inner shadows for pressable or nested elements.
46