Awwwards Style Web Design

Awwwards-Style Web Design

Use this skill for original award-caliber experiential web work. Treat Awwwards-style as nominative inspiration for craft and ambition, never as affiliation, endorsement, cloning permission, template authority, or a promised award outcome.

Reference Loading Contract

Load only task-relevant references, but do not skip required gates:

Use references/tool-and-stack-routing.md before selecting or changing packages, advanced animation, 3D/WebGL/canvas, media, performance, or verification tooling.

Trigger Policy

Trigger for rendered web UI when the user explicitly asks for Awwwards, Site of the Year, award-winning, award-caliber, experiential, immersive, cinematic, experimental, WebGL-heavy, or motion-led design. Also trigger when category terms such as portfolio, agency, luxury, culture, music, fashion, campaign, launch, editorial, interactive, storytelling, or narrative are paired with a clear high-craft, immersive, experimental, motion-led, WebGL-heavy, award-caliber, or experiential intent. Skip ordinary product UI, dashboards, admin, docs, tables, forms, CRUD, backend-only, behavior-only fixes, and ordinary portfolio/campaign/launch work unless the user asks for an experiential treatment.

If another final visual system is explicit, that system owns the visual language. Preserve project-local product primitives and use this skill only for the requested experiential surface such as a hero, campaign page, launch page, portfolio story, or 3D showcase.

Operating Loop

1. Identify the surface, audience, real content, constraints, primary action, asset availability, and production validation commands.
2. Inspect the project before designing: framework, styling system, component library, routing, asset pipeline, animation libraries, fonts, validation commands, and existing visual language.
3. Load the required references above before design decisions.
4. Calibrate against 3-5 relevant benchmark references using abstract principles only: concept, craft level, interaction pattern, content density, responsive behavior, technical polish, and what must not be copied.
5. Generate at least three materially distinct concept directions before implementation: refined/safe, expressive/memorable, and high-risk/art-led. Each must include thesis, first viewport, primary mechanic, visual system, motion grammar, content needs, risks, and fallback strategy. Capture them as an explicit concept-direction table, not private reasoning.
6. Run a creative-director selection pass: reject generic, derivative, infeasible, inaccessible, or content-thin concepts; combine only the strongest original moves into one chosen direction.
7. Create a scene/flow map before screen detail: entry, orientation, navigation, primary interaction, content reveal, conversion/action, fallback, loading, and error states.
8. Implement through shared tokens, reusable components, real content, properly licensed assets, local packages, accessible primitives, reduced-motion fallbacks, and progressive enhancement.
9. Run taste review and verification across viewports, interactions, motion states, performance, accessibility, originality, and responsive behavior.
10. After the first browser screenshot pass, run a second creative-director critique against the chosen thesis, revise any dimension below strong, then re-check affected surfaces before final response.

Design Spec Mode

When the user asks for a concept, direction, design, or plan without implementation, still produce the concept brief, concept-direction table, chosen direction, first viewport, content spine, visual thesis, motion grammar, media/3D/audio decisions, accessibility/performance gates, and validation plan. Label browser evidence and production verification as not run.

Maximum-Ambition Interpretation

When the user asks for an Awwwards-winning, Site of the Day, Site of the Year, or similar outcome, interpret the request as: produce the strongest honest award-caliber candidate possible inside the project's constraints. Increase creative ambition, critique depth, benchmark calibration, craft, and verification. Do not guarantee, predict, or imply an official result.

If real content, rights-cleared media, brand material, technical budget, or runtime verification is missing, say that plainly and design the best original candidate the available inputs can support. Do not hide missing substance with fake awards, fake clients, copied reference material, or decorative spectacle.

Non-Negotiables

Do not clone, recreate, closely imitate, or make lookalike versions of any Awwwards winner, nominee, layout, art direction, animation sequence, copy, code, brand system, logo, product identity, trade dress, screenshot, video, or protected campaign concept.

Do not install, fork, clone, or copy from templates, starters, boilerplates, demo apps, unofficial source code, or generated template code as the implementation path for this skill. This is a design skill, not a plugin or template installer. Build within the user's actual project using original implementation decisions and official library docs.

Do not present generated work as an Awwwards winner, nominee, submission, official review, or endorsed Awwwards output. Use Awwwards, Site of the Year, winner names, agency names, and brand names only for brief nominative reference when necessary to discuss inspiration.

Use real project content and honest empty/loading/error states. Do not invent sample data, fake clients, fake metrics, fake press, fake awards, fake testimonials, or placeholder substance to make the page look complete.

The first viewport must show the actual brand, object, product, artwork, story, or interactive experience. Do not start with a generic SaaS hero unless the user explicitly asked for a marketing landing page.

Experiential does not mean unusable. Preserve semantic HTML, readable text, keyboard access, focus states, hit targets, reduced motion, back/forward behavior, mobile ergonomics, accessibility, privacy, and performance.

Use known packages for specialized behavior instead of hand-rolling fragile engines. Prefer Three.js/R3F for 3D, GSAP for complex timelines or scroll choreography, framework-native/CSS animation for simple transitions, Rive or Lottie for authored vector motion, and existing project primitives for accessible UI behavior. Do not use CDN-hosted Tailwind, Monaco, fonts, or runtime libraries in production work.

No skill, checklist, prompt, benchmark, or review loop can guarantee an Awwwards nomination, Site of the Day, Site of the Year, jury score, or award. The honest target is a strong local candidate: original, high-craft, production-ready work with evidence-backed revision.

Final responses must use candidate language, not guarantee language. Prefer strong local candidate, award-caliber direction, or stronger submission candidate. Do not say Awwwards-winning, guaranteed to win, Awwwards-approved, or imply an official judging outcome.

Final responses for triggered visual work must state the verified scope, benchmarks used or blockers, official docs evidence, viewports checked, interaction/motion states checked, performance/accessibility results, taste review outcome, creative-director revisions, award honesty note, and any whole app not verified limitation.