Premium Web Design

Premium Web Design — AI Workflow

Triggers: premium website, build a site, web design workflow, stitch mockup, google stitch, nano banana, 21st.dev, ux skill pack, design blueprint, mockup to code

4-TOOL STACK

1. Google Stitch MCP → pixel-perfect mockup from prompt
2. Nano Banana/2 → shadows, textures, depth refinement
3. GitHub UX/UI Pack → 12px grid, H1/H2, 1.5x line-height auto-applied
4. 21st.dev → 3D widgets + reactive components (copy HTML/CSS)

WORKFLOW

1. Brief: colors (hex), font, 3 screen sizes, sections, tone
2. Stitch prompt: "Create mockup for [PRODUCT]. Layout: 12-col grid. Colors: [HEX]. H1=24pt H2=18pt. Export 2x PNG+SVG"
3. Refine in Nano: shadows 8px/20%, depth, contrast
4. Claude build prompt: "Use mockup as blueprint. Apply Pro UX spacing. Build React/Next.js/Tailwind. Import 21st.dev components: [URLS]"
5. Visual diff vs mockup before delivery

RATE: $200 generic → $1,500-4,000 with this workflow

QA: color≤4 shades · 12px grid · 8px radius · 3 breakpoints · visual diff