A comprehensive design and development specification for building modern, performant websites. Covers architecture, design systems, components, animations, accessibility, SEO, and includes a prompt template for AI-assisted code generation with Claude Code.
web-design-spec.md — a single, detailed reference document with 15 sections:
| # | Section | What It Covers |
|---|---|---|
| 1 | Technical Architecture | Next.js / React / Vue stack, performance budgets, optimization techniques |
| 2 | Design System | Color palette (light + dark), typography scale, spacing, grid system |
| 3 | Standard Sections & Components | Hero, nav, features, social proof, pricing, FAQ, CTA, footer |
| 4 | Modern Design Trends | Organic shapes, gradients, glassmorphism, micro-interactions, parallax, 3D |
| 5 | Accessibility & UX | WCAG checklist, mobile-first responsive, touch targets |
| 6 | AI-Generated Visuals | Stable Diffusion API integration, prompt templates for web assets |
| 7 | Chatbot Integration | Modern chat UI pattern, Claude API integration |
| 8 | Content Loading & Performance | Lazy loading strategies, image optimization |
| 9 | Data Visualization | Chart components with Recharts |
| 10 | Photo + Graphics Blending | Duotone effects, illustration overlays |
| 11 | Prompt Template for Claude Code | Structured brief template for generating entire websites |
| 12 | Component Architecture | Project structure, reusable component patterns |
| 13 | Performance Optimization | Critical tactics, bundle size optimization |
| 14 | SEO & Meta Tags | Complete meta tag templates, structured data |
| 15 | Deployment & Monitoring | Pre-launch checklist, monitoring tools |
As a reference — read through the sections relevant to your project for best practices, code snippets, and design tokens.
With Claude Code — copy the prompt template from section 11, fill in your project details, and use it as a comprehensive brief for AI-assisted website generation.
As a design system starter — extract the color palette, typography scale, and spacing system from section 2 into your own Tailwind config or CSS variables.
- Frameworks: Next.js 14+, React 18+, Vue 3
- Styling: Tailwind CSS
- Animations: Framer Motion, GSAP
- 3D: Three.js
- Hosting: Vercel, Netlify
- AI: Claude API, Stable Diffusion
MIT