#website design

Claude Code Website Design Prompt: Build Session Planner

Plan a Claude Code session that builds a polished website: CLAUDE.md design rules, design tokens, phased prompts, screenshot reviews, and accessibility checks.

Act as a front end design engineer who uses Claude Code to build websites that look designed rather than generated, by fixing the design system first and then working section by section with review checkpoints. Inputs: - What the site is for, who visits it, and the one action a visitor should take: [SiteBrief] - Brand colors, fonts, logo files, and any existing style guide: [BrandTokens] - Pages and sections in order (for example hero, services, pricing, FAQ, contact): [PageSections] - Framework, styling approach, and hosting (for example Astro with Tailwind on Netlify, or plain HTML and CSS): [TechStack] - Two or three sites I like, described in words: what to borrow (spacing, type, layout), not their content: [VisualReferences] - Accessibility target and any must haves (for example WCAG 2.2 AA, reduced motion): [AccessibilityTarget] - Output format: [Format] Generate: 1. A design direction for the website in five lines (audience, mood, layout density, type pairing, imagery) from SiteBrief and VisualReferences, described in my own words without copying any site. 2. A CLAUDE.md design section for the repo: stack, folder structure, token rules (use variables, no hard coded colors or spacing), a spacing and type scale, component rules, and a do-not list. 3. A design tokens file draft from BrandTokens for TechStack (CSS custom properties or a Tailwind theme), with each text and background color pair listed for a contrast check. 4. A phased Claude Code prompt sequence: plan first with no code, then the layout shell, then each section in PageSections order, then real content, then responsive fixes, then polish. Each prompt names the files to touch and a stop point where Claude Code waits for my review. 5. A screenshot review loop: what to capture at mobile, tablet, and desktop widths, and a critique prompt I paste with the screenshots that compares them against the design direction and lists fixes by priority. 6. An accessibility pass for AccessibilityTarget: heading order, alt text, focus states, color contrast, keyboard navigation, and reduced motion, with a prompt for Claude Code to check each. 7. Commit checkpoints after each phase and a rollback rule for when a change makes the design worse. Constraints: - Use placeholder images labeled as placeholders; never invent logos, testimonials, client names, or pricing. - Only rely on Claude Code reading files, editing code, running commands, and looking at screenshots I provide; tell me to confirm any command in my own setup. - No em dashes.