---
name: awwwards-style-web-design
description: >-
  Independent community skill for designing, redesigning, reviewing, and
  polishing original Awwwards-style, award-caliber experiential websites:
  immersive portfolios, agency sites, editorial microsites, campaign pages,
  cinematic launches, scroll narratives, WebGL/Three.js/R3F scenes, GSAP/Motion
  interactions, tactile transitions, typography, art direction, media,
  accessibility, performance, and UI polish. Trigger for explicit Awwwards, Site
  of the Day, Site of the Year, award-caliber, experiential, immersive,
  cinematic, experimental, motion-led, WebGL-heavy web design, or portfolio,
  agency, luxury, fashion, music, campaign, launch, editorial, interactive,
  storytelling, or narrative work paired with high-craft/experiential intent.
  Skip ordinary SaaS, admin, docs, CRUD, backend-only, and ordinary
  portfolio/campaign/launch work unless experiential treatment is requested.
  Community guidance; not affiliated with Awwwards and not permission to clone
  winners or nominees.
metadata:
  author:
    github: joe-simo
    x: "@joesimo"
    website: https://joesimo.com
  community: true
  official: false
  short-description: Original Awwwards-style experiential web design for high-craft interactive sites
  sources:
    - https://www.awwwards.com/websites/sites_of_the_year/
    - https://www.awwwards.com/about-evaluation/
    - https://www.awwwards.com/about-status/
    - https://www.awwwards.com/developer-award/
    - https://www.awwwards.com/mobile-excellence-guidelines.pdf
    - https://www.awwwards.com/terms/
    - https://www.awwwards.com/privacy-policy/
---

# 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:

| Task mode | Required references |
|---|---|
| Concept/spec | `references/source-and-originality-gate.md`, `references/experiential-foundations.md`, `references/visual-and-layout-system.md`, `references/craft-pattern-library.md` |
| Visual implementation | Concept refs plus `references/implementation-and-performance.md`, `references/accessibility-and-inclusive-experience.md` |
| Motion/3D/media | Visual implementation refs plus `references/tool-and-stack-routing.md`, `references/motion-interaction-and-3d.md` |
| Final verification | `references/award-readiness-and-verification.md`, `references/accessibility-and-inclusive-experience.md`, `references/source-and-originality-gate.md`, plus touched domain refs |
| Simple critique | `references/source-and-originality-gate.md`, `references/visual-and-layout-system.md`; add `references/award-readiness-and-verification.md` for pass/fail readiness |

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.