# Premium Web Design

> Premium Web Design — AI Workflow

- Skill: `hmzainjamil/premium-web-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add hmzainjamil/premium-web-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hmzainjamil/premium-web-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: hmzainjamil (https://skillmd.com/u/hmzainjamil)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/hmzainjamil/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