Setting the file. One moment.
Skill 09 · Stitch::generate Design
Subchapter 9.1
references/design-mappings.mdMarkdown2 KBView on GitHub
Use these mappings to transform vague user requests into precise, high-fidelity design instructions.
| 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” |
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.” |
Convert technical values into physical descriptions for Stitch:
rounded-full elements (buttons, tags).rounded-xl (12px) or rounded-2xl (16px) containers.rounded-none or rounded-sm elements.