web-design

Web design

An excellent website says what it offers and for whom within five seconds, proves it with specifics, makes the next step obvious, loads fast on a mid-range phone, works for everyone, and can be found. Its look comes from the chosen direction and brand tokens, never from the template every other site uses.

Defaults

Decision	Default	Change when
Breakpoints	Mobile-first min-width at sm 640, md 768, lg 1024, xl 1280, 2xl 1536px (token contract)	Content breaks earlier: add a component-level container query, not a new global breakpoint
Containers	Page max --container-xl (1280px); text at --measure-body (66ch); side padding --gutter	Editorial or luxury: wider canvas with narrower text
Body text	16-18px, line-height 1.5-1.65 (--line-height-normal to --line-height-relaxed)	Long-form articles: 18-21px
Fluid type	clamp() with rem + vw; max size no more than 2.5x min so 200% zoom still works	Fixed sizes for UI controls
Section rhythm	Vertical padding clamp(var(--space-12), 2rem + 5vw, var(--space-24)) (48px at 320 to 96px at 1280)	Dense product pages: --space-8 to --space-16
Hero	Headline of 6-12 words naming the outcome, one supporting sentence, one primary CTA, real product or proof visual	Brand campaigns: image-led hero with a short line
CTAs	One primary goal per page; verb + outcome labels ("Start free trial"); 44-48px tall	Content pages: soft secondary CTA (newsletter) only
Core Web Vitals (p75, field)	LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less; design for LCP 2.0 s to keep margin	Never relax
Budgets (starting points)	JS 150 KB compressed on marketing pages; LCP image 200 KB or less; 2 font families, 4 font files or fewer	App-like pages: JS up to about 300 KB, split by route
Images	AVIF with WebP fallback in picture, srcset + sizes, explicit width/height, lazy below the fold, fetchpriority="high" on the LCP image	Logos and icons: SVG
SEO	Unique title (about 50-60 characters), meta description (about 120-160), one h1, JSON-LD for Organization and page type, canonical, XML sitemap	Noindex utility and thin pages
Accessibility	WCAG 2.2 AA; axe plus keyboard plus one screen reader before launch	Public sector and EU services: add an accessibility statement
Stack	Astro for marketing and content sites; Next.js for app-like sites; WordPress, Webflow or Framer when the client edits without developers	See stack selection
Consent	No non-essential cookies or tags before consent in the EU and UK; "Reject all" as prominent as "Accept all"	Cookieless, consent-exempt analytics where the jurisdiction allows
Social cards	Open Graph and Twitter card per page, image 1200x630

Workflow

Paths in commands are relative to this skill's directory; resolve them to absolute paths before running.

1. Brief and discovery. Goal and KPI per site and per page, audiences and their top tasks, traffic sources, competitors, existing analytics and Search Console data. For a redesign, audit content, SEO, Core Web Vitals field data and accessibility first.
2. Direction. If the look is not set, run the design-director skill. Query the atlas: python3 ../../library/scripts/atlas.py query "<industry, market, audience, tier> marketing website" and read the channel.marketing-website entry.
3. Structure. Sitemap, page types and content model with ux-design information architecture; messaging hierarchy per page.
4. Page architecture. Wireframe each page type section by section with real copy using page architecture and conversion.
5. Visual design. Apply the direction's tokens; design at 375px and 1440px, then specify behavior at every breakpoint with responsive and fluid. Components and states come from ui-design.
6. Choose the stack and CMS with stack selection, including hosting, consent and analytics.
7. Build semantic HTML on the kit tokens (../../library/tokens/dist/tokens.css), the image pipeline, fluid type, and performance budgets per performance; SEO per SEO. For a cinematic landing page, hero or single-file showpiece, follow the cinematic landing workflow (decide, calibrate, media, spec, build from the technique recipes, look and fix, deliver); for a prompt to Lovable, Bolt, v0 or another builder, use builder prompts.
8. Render and inspect. Screenshot every page type at 375, 768, 1280 and 1440px in light and dark; review with the design-critique skill (add --early 350 to render_review.mjs to catch a white first paint and broken media); run Lighthouse on mobile and axe on every template; fix before showing anyone.
9. Launch with the launch checklist; recheck field Core Web Vitals and Search Console after 28 days.

Decisions that change the answer

• Site type. Single-goal landing page: minimal navigation, one CTA repeated. Corporate multi-page: audience routing from the homepage. Content or editorial: reading comfort, search, related content. Commerce: product detail and checkout patterns from ui-design flows. Docs: search, versioning, code samples.
• Traffic source. Paid traffic: message match between ad and page. Organic: depth of content and internal linking. Direct and returning: fast paths to sign-in and top tasks.
• Industry and market. Atlas entries set trust signals, regulation and conventions; for a regulated industry, read its entry before laying out the first view (for a prescription drug site, pharma-biotech: fair balance, ISI in the first view, indication and Prescribing Information links). Market changes language and hreflang, legal pages (an Impressum in Germany and Austria), consent rules, payment methods and type support for the script.
• Audience. audience.low-bandwidth-entry-devices: halve the budgets and test on a low-end Android device. audience.older-adults: 18px+ body, high contrast, no hover-only content. audience.b2b-buying-committee: pages for each role, pricing transparency, security and procurement content.
• Price tier. Luxury: slower pacing, larger imagery, fewer words, but the same LCP budget. Value: price and proof up front, dense comparison.
• Who edits after launch. Developers only: Astro or Next.js with Markdown or a headless CMS. Marketers daily: a visual CMS or a no-code builder with locked design tokens.

Common failures

• The generic AI site: centered headline over a purple gradient blob, three icon cards, a logo strip and "Unlock your potential". Fix: a specific value proposition, real product proof, the direction's layout logic and copy with numbers.
• A perfect Lighthouse score with poor field INP from tag managers and chat widgets. Fix: judge by CrUX or RUM at p75; facade or defer third parties.
• Lazy-loading the hero image. Fix: eager load, fetchpriority="high", preload if discovered late.
• Autoplaying hero video with no pause control. Fix: poster image, muted, a visible pause button (WCAG 2.2.2), no autoplay under reduced motion.
• Cookie banners that hide "Reject", cover the CTA or trap focus. Fix: equal-weight buttons, bottom placement that does not obscure focus.
• Eight "Learn more" buttons. Fix: one primary CTA per section with a specific label; descriptive links.
• Staging noindex shipped to production, or no redirect map after a migration. Fix: the launch checklist.
• Pure vw font sizes that do not scale with zoom. Fix: clamp() with a rem component.
• Fake countdown timers and "Only 2 left" when untrue. Fix: the dark-pattern rules in conversion.

References

• Page architecture: landing page anatomy, section patterns, homepage, product, pricing, about, blog, CTA design.
• Conversion: value proposition, social proof, friction, ethical persuasion, dark-pattern rules (FTC, EU DSA, UCPD, UK DMCC).
• Responsive and fluid: breakpoints, fluid type and space, container queries, responsive images, AVIF/WebP, art direction, aspect ratio.
• Performance: Core Web Vitals thresholds, budgets, image, font and third-party strategy, lab versus field data.
• SEO: semantic HTML, titles, meta descriptions, headings, JSON-LD, sitemaps, canonicals, hreflang, Open Graph.
• Stack selection: Astro, Next.js, WordPress, Webflow, Framer, headless CMS criteria, hosting, consent and privacy.
• Launch checklist: browsers, accessibility, performance, SEO, analytics, legal pages, redirects, 404, favicons, OG images, security headers.
• Cinematic landing: the seven-step workflow for media-led landing pages and heroes, with a look-and-fix loop.
• Landing spec template: the build spec wired to tokens and the atlas; also the body of a builder prompt.
• Cinematic craft: taste rules for media-led pages and a table of where they differ from kit defaults.
• Builder prompts: adapting the spec for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio and Kimi.
• Reference-first and component libraries: evidence before layout, named React libraries instead of hand-built components, one showpiece per page.
• Web technique recipes: 58 working recipes (video heroes, glass, type motion, scroll, 3D) with pinned libraries and licenses.
• Atlas: python3 ../../library/scripts/atlas.py query "boutique hotel website in Japan, luxury"; show channel.marketing-website for channel specs.
• Working code: Astro motion example (Astro, Vue, Tailwind 4, GSAP, Headless UI) and the Astro build skill.
• Deep process for client projects, by lifecycle stage (website workflow):
  • Discover and plan: discovery, audit, migration, content strategy.
  • Structure: information architecture, page architecture, page templates, site search.
  • Design: art direction, responsive, media, system assembly, conversion, forms, copy fit, storytelling, visual review.
  • Build: frontend, Astro, motion library, CMS, platform adapters, integrations, privacy and consent.
  • Verify: fidelity, accessibility, performance, SEO, browser QA, analytics.
  • Launch and run: release, maintenance.
  • Site types, when relevant: commerce, accounts, localization, directories and marketplaces, editorial, booking.
• Related skills: design-director (direction), ux-design (research, IA, content), ui-design (components, forms, flows), typography, color, layout, imagery, motion, design-critique.

Catalog IDs covered: web-discovery, web-audit, web-migration, web-content-strategy, web-information-architecture, web-page-architecture, web-page-templates, web-search, web-art-direction, web-responsive, web-media, web-system-assembly, web-conversion, web-forms, web-copy-fit, web-storytelling, web-visual-review, web-frontend, web-astro, web-motion-library, web-cms, web-platform-adapters, web-integrations, web-privacy, web-fidelity, web-accessibility, web-performance, web-seo, web-browser-qa, web-analytics, web-release, web-maintenance, web-commerce, web-accounts, web-localization, web-directory, web-editorial, web-booking