web-design

name

web-design

description

Designs, reviews, and implements modern public-facing websites with strong content, hierarchy, conversion, accessibility, performance, and visual quality. Use for marketing sites, campaign landing pages, homepages, pricing pages, product pages, portfolio sites, editorial sites, ecommerce/catalog pages, service websites, nonprofit/government/healthcare/education sites, event pages, hospitality/restaurant pages, personal brand sites, and similar website content surfaces. Trigger when the user asks for web design, landing page design, marketing website UX, homepage structure, website copy hierarchy, responsive site layout, conversion-focused page design, website audit, or modern website visual direction.

Web Design

Use this skill for content-led website design: public pages that need to explain, persuade, build trust, help visitors navigate, and convert without sacrificing usability, accessibility, or performance.

For dashboard-like products, admin consoles, operational tools, or dense internal UI, prefer $dashboard-design unless the task is specifically about public website presentation.

Core Workflow

1. Identify the site's job, audience, decision cost, proof needs, and primary conversion or comprehension goal.
2. Read the relevant strategy, page-pattern, website-type, and visual-system references before proposing structure or UI.
3. Start with content hierarchy and information architecture. Do not begin with decoration, trends, component libraries, or generic hero sections.
4. Choose the page sequence, navigation model, proof placement, calls to action, trust signals, responsive behavior, and non-happy-path states.
5. Load technical-quality and implementation references before building or reviewing code.
6. Review the result against the launch checklist and 100-point audit when finishing substantial website work.

Reference Routing

Need	Read
Handbook scope, table of contents, and source map	references/00-handbook-map.md
Site strategy, audience, jobs to be done, content hierarchy, IA, visual composition	references/01-strategy-content-ia.md
Layout, grids, typography, color, imagery, icons, depth, brand distinctiveness	references/02-visual-system.md
Navigation, search, forms, CTAs, states, motion, data, trust, ethical conversion	references/03-interaction-conversion.md
Responsive design and accessibility	references/04-responsive-accessibility.md
Performance, SEO, localization, privacy, security, resilience, and consent	references/05-performance-discoverability-privacy.md
Design tokens, components, CSS architecture, CMS/content models, handoff, QA	references/06-systems-implementation.md
SaaS/AI, enterprise/B2B, ecommerce, marketplace, portfolio, creative studio, editorial, and documentation sites	references/07-website-types-technology-commerce.md
Dashboard/product, community, nonprofit, government, healthcare, education, finance, and travel sites	references/08-website-types-sectors.md
Restaurant, event, real estate, local service, media, entertainment, personal brand, membership, campaign, luxury/fashion, legal, and utility sites	references/09-website-types-local-campaigns.md
Page patterns for homepages, landing pages, pricing, product detail, listings, articles, about, case studies, contact, checkout, help, and error/offline pages	references/10-page-pattern-playbooks.md
Current 2026 aesthetic directions, trend filters, and anti-patterns	references/11-aesthetic-directions-antipatterns.md
Semantic page shell, CSS foundations, skip links, layout utilities, buttons, forms, dialogs, disclosures, and responsive images	references/12-cookbook-page-components.md
Fonts, theming, motion, reveal, status announcements, tables, media, async stability, decorative atmosphere, feature detection, focus, 3D, structured data, security, print, and component readiness	references/13-cookbook-interaction-quality.md
Launch checklists	references/14-launch-checklists.md
100-point quality audit, reference library, and closing principle	references/15-quality-audit-reference-library.md

Website Defaults

• Treat content as the design foundation. Establish message hierarchy, proof, scanning structure, and conversion logic before styling.
• Make the first viewport identify the offer, audience relevance, and next action without hiding all downstream context.
• Use visual ambition deliberately: a site can be expressive, but every image, animation, layout move, and trend should support the page's job.
• Prefer clear navigation, plain labels, strong information scent, real product or subject matter imagery, and proof near the claims it supports.
• Design for scanning and depth: headlines carry meaning, sections have clear jobs, and visitors can skim or inspect without losing orientation.
• Keep conversion ethical. Avoid false urgency, hidden costs, manipulative defaults, inaccessible forms, and proof that cannot be verified.
• Preserve technical quality as part of design: responsive behavior, accessibility, performance, SEO, localization, privacy, and resilience are acceptance criteria.

Expected Outputs

For advisory work, return the website brief, recommended page structure, key content hierarchy, proof and CTA strategy, visual direction, open questions, and next decision.

For design or implementation work, produce or build:

1. Audience, job, success measure, and page/site goal.
2. Information architecture and page sequence.
3. Content hierarchy, section-by-section message, proof, and CTA plan.
4. Visual system choices for layout, type, color, imagery, motion, and brand distinctiveness.
5. Responsive, accessibility, performance, SEO, privacy, and localization requirements.
6. State handling for forms, loading, errors, empty/no-results pages, offline/degraded behavior, and consent.
7. Launch or audit findings when reviewing an existing site.