lucasilverentand 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
- Identify the site's job, audience, decision cost, proof needs, and primary conversion or comprehension goal.
- Read the relevant strategy, page-pattern, website-type, and visual-system references before proposing structure or UI.
- Start with content hierarchy and information architecture. Do not begin with decoration, trends, component libraries, or generic hero sections.
- Choose the page sequence, navigation model, proof placement, calls to action, trust signals, responsive behavior, and non-happy-path states.
- Load technical-quality and implementation references before building or reviewing code.
- 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:
- Audience, job, success measure, and page/site goal.
- Information architecture and page sequence.
- Content hierarchy, section-by-section message, proof, and CTA plan.
- Visual system choices for layout, type, color, imagery, motion, and brand distinctiveness.
- Responsive, accessibility, performance, SEO, privacy, and localization requirements.
- State handling for forms, loading, errors, empty/no-results pages, offline/degraded behavior, and consent.
- Launch or audit findings when reviewing an existing site.