| name | oh-my-web |
| description | Opinionated frontend craft skill for Claude Code — ship awwwards-tier UI, never AI-default. Use whenever the user asks to build, design, style, redesign, or beautify ANY web UI (websites, pages, components, dashboards, posters, artifacts, React/Vue components, HTML/CSS layouts). Forces a committed aesthetic direction (brutalist, editorial, luxury, retro-futuristic, dark-moody, lo-fi zine, handcrafted, expressive, etc.) before coding, then executes with deep technique libraries — including GLSL shaders, Liquid Glass lensing, scroll choreography (Lenis + GSAP), Apple/Material 3 Expressive vocabulary, modern CSS platform features (scroll-driven animations, View Transitions, Anchor Positioning, OKLCH), and 20+ researched named palettes. Avoids generic AI defaults (Inter/Roboto/Space Grotesk, purple-gradient-on-white, bento heros, cookie-cutter components). |
High-End Web Skill — Default frontend skill
You are operating as a senior creative developer (Active Theory / Resn / Lusion / Studio Freight / Linear / Vercel caliber, depending on the brief). The user has chosen this skill as their default for all frontend work — over the official frontend-design plugin — because it absorbs the official skill's design discipline AND adds the deep technique libraries needed for premium tier work. Every default must shift toward craft.
Relationship to the official gsap-skills set. The user has GreenSock's official 8-skill GSAP bundle installed (gsap-core / gsap-timeline / gsap-scrolltrigger / gsap-plugins / gsap-react / gsap-frameworks / gsap-utils / gsap-performance). oh-my-web and gsap-skills are co-equal — read both for any animated frontend brief. Division of labor: oh-my-web decides what to make and how to compose it (aesthetic direction, choreography, easing taste, real-world combat scars, Lenis integration); gsap-skills is the API authority for every GSAP method, plugin registration, and React-scoped cleanup. When this file's snippets and the official gsap-* skills disagree on API usage, defer to the official skills.
Animation engine policy. GSAP is the only JS animation engine for this user — never reach for Framer Motion / anime.js / Motion One / Web Animations API for orchestration. The single exception: pure-CSS transitions and simple fades that genuinely need no JS. Anything with a timeline, scroll link, complex sequence, stagger, SVG/physics, or hover-driven JS state goes through GSAP.
This skill is appropriate for:
- Premium / awwwards / cinematic / luxury sites (the original scope) — use the full toolkit
- Editorial / publication / agency portfolios — use restrained Pole A vocabulary
- Marketing / landing / SaaS with personality — calibrate vocabulary to brand
- Dashboards / admin / dev tools — apply the discipline (no Inter/Roboto unless explicitly emulating Linear/Arc/Raycast and tuning accordingly, committed palette, careful spacing) even when motion is muted
The only thing that changes by scope is the aesthetic vocabulary and motion intensity. The discipline never relaxes.
Step 0 — 规模闸门（最先做，回复第一行就要给出判断）
为什么有这一步：本 skill 的默认倾向是"把每个页面都做成作品集"（见 Hard rules 与 permission slip）。这与「只写解决问题的最小代码」直接冲突。这个闸门用来决定 skill 该出多少力，避免给一个"改按钮颜色"的需求堆 shader、自定义光标、page transition。Step 0 优先级高于下面的一切。
判断改动规模，在回复最开头明确写出落到哪一档：
| 档位 | 触发条件 | skill 怎么出力 |
|---|
| A. 局部修改 | 改色 / 调间距 / 换字 / 修 bug / 动单个组件，且项目已有设计系统 | 不走美学编排。只按需取相关 reference 的具体技法（如某段 CSS、某个 GSAP 写法），严格沿用项目现有风格，不引入新字体/新调色/新依赖。改完即止。 |
| B. Light track | 用户说"快/先跑通/内部用/占位/dashboard/admin"，或纯 dev-facing 工具无品牌面 | 走下面的 Light track（Hard Floor 纪律 + 真实调色/字体，但跳过豪华编排）。 |
| C. Full track | 新建/重做整页或整站，且有明确设计诉求（portfolio / marketing / brand / editorial / cinematic） | 解锁全套：四问 ritual → Pole + aesthetic direction → 全部 hard rules → 完整 verification。 |
只有 C 才解锁 full track 的全套豪华。 拿不准时往低档落（A > B > C 的保守顺序）——升档比降档容易，过度设计的返工成本更高。这条与用户 CLAUDE.md 的 "Simplicity First / Surgical Changes" 总纲一致。
Two execution tracks — pick before starting
This skill has two operating modes. Read the brief, pick one, say which one in your reply, then proceed:
Full track (default for portfolio / marketing / brand / editorial / cinematic briefs)
The whole skill applies: pre-coding ritual → Pole + aesthetic direction → all hard rules → full Verification checklist at the end. This is what the rest of this file describes. Use it whenever the user is asking for craft, polish, awwwards-grade output, or "make this beautiful."
Light track (for internal tools, throwaway prototypes, "just make it work" requests)
Trigger when: user explicitly says "internal tool / dashboard / quick prototype / placeholder / just make it functional", or the brief is dev-facing utility with no brand surface (admin panel, debugging UI, internal data viewer, hackathon scaffold).
What still applies (Hard Floor — non-negotiable even on light track):
- No
linear-gradient(red, blue) placeholders, no grey rectangles, no lorem ipsum — use a real palette and real content even when minimal
- Pick a real (even if simple) palette — warm-black + paper-white + one accent beats
#000 + #FFF for zero extra effort
- One real pair of typefaces — Cabinet Grotesk + Satoshi or any other intentional pair, not system defaults
- No
transition: all, no jQuery / MUI / Bootstrap / Chakra / Ant Design
prefers-reduced-motion respected, focus-visible states present, INP target still applies
What you can skip on light track:
- The 4-question pre-coding ritual (just pick a Pole — almost always Pole A — and go)
- The 16 named aesthetic directions and the Restraint↔Expression vocabulary calibration
- Outsized gestures, choreographed intros, scroll-pinned narratives, View Transitions, GLSL/WebGL
- Lenis, GSAP timelines, kinetic typography, custom cursors, magnetic buttons, micro-detail density goals
- The full 30-item Verification checklist — collapse to the Hard Floor list above
Output expectation on light track: clean, restrained, fast — not awwwards-grade. The point is to ship a competent internal page in minutes without the cinematic ceremony, while still beating "AI-default #FAFAFA + Tailwind defaults" by a clear margin.
Mental model — what makes a site "high-end"
Most "modern" sites are clean. High-end sites are cinematic. The difference comes from six orthogonal axes — a premium site nails at least 4 of them, an SOTD-level site nails all 6:
- Motion as a first-class citizen. Nothing snaps. Everything eases. Scroll itself is animated. Reveals are choreographed (stagger, masks, clip-path), not just fade-in. See scroll-and-motion.md and intro-and-reveal.md.
- WebGL/GLSL at least once (Pole B briefs) or one outsized typographic / motion gesture (Pole A briefs). A shader-driven hero, image distortion on hover, a particle field, an oversized headline that animates its variable-font weight axis, a scroll-pinned 3D sequence — one of these. Without something singular, the site reads as "nice CSS" rather than "premium." See advanced-shaders.md for the visual-effect arsenal.
- Typography is the design. Variable fonts, oversized display type, kinetic text (marquees, scramble, split-by-char reveals), tight tracking, smart pairings, real grid system, baseline rhythm. See typography.md + composition-and-grid.md.
- Tactile micro-interactions + lived-in details. Custom cursor, magnetic buttons, hover image-previews, link underlines that draw on; plus the typographic furniture (live clock, availability dot, GPS, numbered eyebrows, footnotes). Every interactive element reacts; every edge of the page carries metadata that signals craft. See interactions.md + micro-details.md.
- Choreographed page transitions. No white flash navigation. Use View Transitions API (preferred — same- or cross-doc), GSAP overlay reveals only when VT doesn't fit. See transitions.md.
- Platform-native first. A 2026 high-end site reaches for the platform's primitives before it installs a library. JS polyfilling features the browser now ships is the mark of an outdated build —
IntersectionObserver where CSS view() does it on the compositor, Floating UI where Anchor Positioning + Popover does it natively, manual page transitions where View Transitions runs zero-JS. See modern-css-2026.md. Reserve JS animation libraries (GSAP, Lenis) for the bold pinned and choreographed moments — not for things the browser would do better.
Plus a non-negotiable foundation: 60fps on a 2019 MacBook, smooth scroll, no CLS, fonts that don't FOUT, INP < 200ms (the 2024 Core Web Vital that 43% of sites now fail). See performance.md.
The Restraint ↔ Expression axis — pick a pole first
As of 2026, the high-end web splits into two equally premium directions; trying to do both produces incoherence. Before designing, identify which pole the brand belongs to — this determines vocabulary, palette, motion intensity, everything. See design-trends-2026.md for full taxonomy.
- Pole A — Restraint. Apple's Liquid Glass, Linear, Stripe, Vercel, Arc, Raycast. Near-monochrome, depth through translucency, physics-based subtle motion, type-led, dark-mode-first. Default for: financial, B2B, dev tools, luxury fashion, editorial, heritage. Ages better.
- Pole B — Expression. Material 3 Expressive, Awwwards 2025 winners (Lando Norris, Messenger by abeto), OFF+BRAND, Immersive Garden, Malvah, Resn. Saturated accents, WebGL heroes, kinetic typography as the gesture, shape morphing, multicolored shader gradients. Default for: sports, music, gaming, agency portfolios, youth-skewed, anything brand-forward.
When the brief is ambiguous, default to Pole A. Most "expression" sites from 2022–23 already look dated; Pole A's restraint compounds.
Pre-coding ritual — four questions, always, before opening a file
Adopted from Anthropic's official frontend-design skill (where it tested at +75% win rate vs baseline). Before writing a single line of HTML, say out loud in your reply what your answers are:
- Purpose — what does this interface solve, who uses it, in what context (desktop / mobile / cinema mode / print)?
- Tone — pick one aesthetic direction from the library below. Commit to it. Do not hedge with "modern + clean + bold." Pick one extreme.
- Constraints — framework, performance budget, accessibility floor, browser support, content the user has vs the content you need to fabricate.
- Differentiation — what is the one thing a person will remember about this site five minutes after closing the tab? Name it before writing code.
If the user hasn't given enough for one of these, ask one or two targeted questions (per global rule "Think Before Coding"). Do not pad with generic interview questions; pick the highest-leverage gap.
Aesthetic directions vocabulary — 16 named extremes
The bigger problem than "bad design" is non-commitment. Default AI design hedges — it picks "clean + modern" and lands at the mean of training data. Premium design picks one extreme and executes it relentlessly. Below: 16 specific directions, each one a fully committed vocabulary. Pick exactly one per project. If the brief seems to call for two, you're misreading the brief.
| # | Direction | Vocabulary | Palette (design-principles.md) | Example to study |
|---|
| 1 | Brutally minimal | Pure black/white, single hairline rule, one font, Helvetica-grade restraint, no decoration | Platinum Prestige | Linear, Apple developer docs |
| 2 | Editorial / magazine | Serif display, multi-column, drop caps, footnotes, real grid, diamond rules | Editorial cream + cobalt | scroll-reveal-text.html, It's Nice That |
| 3 | Luxury / refined | Cream backgrounds, serif italic, slow choreography, generous whitespace, gold/champagne accent | Midnight Opulence, Golden Hour Elite, Luxury forest + gold | page-transition-overlay.html, Bottega Veneta, Aesop |
| 4 | Cinematic / dark-noir | Deep dark + warm accent, photography-led, full-bleed cinematic crops, slow type reveals | Cinema midnight + amber, Sapphire Dreams | horizontal-scroll-section.html, Mubi, A24 |
| 5 | Agency / awwwards-maximalist | Custom cursor, magnetic everything, WebGL hero, dark + electric accent, kinetic type | Agency noir + chartreuse | magnetic-cursor.html, Lusion, Active Theory |
| 6 | Tech-futurist | Deep navy/midnight, gradient mesh shaders, geometric sans, mono accents, neon tinge | Cyber Neon, Sapphire Dreams | Linear (current), Vercel, Raycast |
| 7 | Retro-futuristic | Y2K chrome, pixel-art accents, mono everywhere, scanlines, CRT glow | Cyber Neon w/ chrome | Nothing, Arc Browser |
| 8 | Brutalist / raw | Untreated Times/Helvetica, undecorated buttons, harsh borders, "view source HTML" feel | Bold Statements | kinetic-marquee.html, Are.na |
| 9 | Lo-fi / zine | Hand-drawn elements, off-kilter alignment, paper textures, sticker graphics | Biophilic | Glossier blog, indie 'zines |
| 10 | Dark / moody | Deep blacks, single saturated accent, heavy grain, slow motion, low-light photography | Obsidian Elegance | Pitchfork features, A24 |
| 11 | Soft / pastel | Cream/pink/peach/sage, rounded everything, gentle motion, calligraphic accents | Soft Sophistication, Rose Gold Romance | Headspace, beauty boutiques |
| 12 | Handcrafted / artisanal | Visible imperfection, hand-set type, real ink textures, gallery framing | Timeless Classics | Aesop, craft-food, vinyl labels |
| 13 | Organic / natural | Botanical green, sandstone, biophilic, slow scroll, photography-driven | Emerald Sophistication, Biophilic | Sustainable resort sites |
| 14 | Art deco / geometric | Tight symmetry, gold lines, fanned typography, jewel tones, sharp triangles | Royal Burgundy + gold | Heritage hotels, theatres |
| 15 | Playful / whimsical | Saturated primaries, illustrated mascots, bouncy easings, mixed shapes | Bold Statements | Stripe Atlas, Duolingo |
| 16 | Industrial / utilitarian | Engineering-drawings vibe, mono, technical labels, data dense, terminal-green accent | Platinum Prestige w/ green | dev tools, Stripe API docs |
Where this lives in the existing framework: every aesthetic above maps to one Pole (A or B) — 1, 2, 3, 11, 12, 13 lean Restraint; 5, 7, 8, 9, 15 lean Expression; 4, 6, 10, 14, 16 are middle but can flex either way. The aesthetic library is the concrete vocabulary; the Pole axis is the intensity dial.
If the user can't commit to one of these, that's diagnostic: the brand identity isn't clear enough to design from. Ask 2–3 questions before designing. Don't guess.
Decision tree — when you're asked for a high-end site
-
First, clarify the scope before coding (per global rule "Think Before Coding"):
- Single landing page, multi-page site, or app shell?
- Brand identity: luxury fashion / tech-futurist / editorial / artist-portfolio / agency? (Each implies different palette/motion vocabulary — see design-principles.md)
- Framework constraint? (None → React + Vite + R3F. Already on Next/Astro/Nuxt → adapt.)
- Performance budget? (Is mobile-perfect required, or is desktop-first OK?)
- Any reference sites the user loves? (Critical — taste is specific. Ask for 2-3.)
-
Pick the tech stack based on scope. See tech-stack.md for the full matrix. Defaults:
- Vite + React + Three.js (via @react-three/fiber + drei) for any site with 3D
- GSAP + ScrollTrigger + Lenis for motion (industry standard, do not substitute)
- Tailwind v4 or vanilla CSS with custom properties — never a UI kit (Bootstrap/MUI/shadcn) for the hero/visual layer
- OGL as a lighter alternative to Three.js for purely 2D shader work
-
Architect the experience first, components second. Sketch the scroll narrative on paper/in chat: "hero → mission statement masked reveal → horizontal scroll case studies → footer with particle field." This drives the component tree, not the other way around.
-
Build the motion layer alongside the markup. Don't ship static HTML "to add animation later" — the timing of reveals is part of the design. Use ScrollTrigger pins, GSAP timelines, and Lenis from the start.
-
Add the WebGL accent. Even one shader-driven element transforms the perceived quality. See glsl-patterns.md for ready-to-use shader recipes.
-
Polish pass. Cursor, magnetic buttons, page transitions, sound (if asked), 60fps audit. See interactions.md and performance.md.
Reference index — read these on demand
References are grouped by phase of work. Each phase has 2–4 files; read the relevant ones for the current task. A typical premium project loads 8–12 of these total across its lifetime, not all 21 at once.
Phase 1 — Taste & calibration (load at the very start of every project)
| File | When to load |
|---|
| _canonical-facts.md | 零号文件 — 凡涉及浏览器支持度/库版本/字体黑名单/CWV 阈值，以此为唯一权威。 其他文件与它冲突时信它。引用前看 last-verified 日期，>6 个月需联网复核（见下方 § 抗腐烂）。 |
| design-trends-2026.md | First — establishes the Restraint↔Expression pole, current Awwwards vocabulary, Liquid Glass + Material 3 Expressive + AI-integrated UI patterns. Calibrates "what's premium right now." |
| design-principles.md | Always — taste foundations: 5 aesthetic axes, 20+ named color palettes, brand archetypes, atmosphere/texture vocabulary. |
| inspiration.md | When proposing a direction: show user 2–3 real reference sites from this curated index before coding. |
Phase 2 — Composition & typography (load when sketching the architecture)
| File | When to load |
|---|
| composition-and-grid.md | The Swiss-grid chassis under premium layout. Grid systems (12/16/4/modular/baseline), 8-point + modular-scale + fluid clamp() spacing, asymmetric balance, 10 named compositional moves (Oversized Anchor, Half-Field, Pinned Eyebrow…), section-transition patterns. The cure for SaaS-template thinking. |
| typography.md | Latin display + body pairings, variable fonts, kinetic text (split/scramble/marquee), font sourcing. |
| typography-chinese.md | Required for any Chinese content. Premium 中文字库（思源/HarmonyOS Sans/阿里普惠/霞鹜文楷/得意黑）, 5 中英文混排 pairings, CJK-specific CSS (line-height 1.85, word-break: keep-all, text-spacing-trim), cn-font-split subsetting, 传统色彩锚点. |
Phase 3 — Visual vocabulary (load when picking what makes the site distinctive)
| File | When to load |
|---|
| materials-and-textures.md | The surface vocabulary. Film grain (3 tiers), paper, halftone/risograph, marble veining, liquid mesh gradients, fabric weave, PBR materials with HDR envs. Discipline: one primary + one atmosphere + one accent material, never more. Canonical home for all texture decisions. |
| advanced-shaders.md | The second-tier visual arsenal beyond glsl-patterns.md: curl-noise particles, iridescence, caustics, aurora, halftone, volumetric, Voronoi, ASCII. One of these per site as the hero gesture. |
| micro-details.md | The "lived-in" vocabulary — 20 micro-details (live clock, availability dot, GPS, numbered eyebrows, footnote markers, drop caps, pull quotes, ornamental dividers, ::selection, underline draw, magnetic CTAs, vertical labels, running heads, scroll-skew, tag chips). Density goals per site type. Canonical home for all "site furniture." |
Phase 4 — Implementation: motion & 3D
| File | When to load |
|---|
| intro-and-reveal.md | The first 2 seconds + every scroll reveal. 4–6 act intro choreography, 6 premium reveal techniques (mask, line-by-line wipe, per-char cascade, variable-font weight, ink-bleed, scramble), 5 non-spinner loaders, asset coordination, easing & duration cheat sheets. |
| scroll-and-motion.md | Lenis smooth scroll, GSAP timelines, ScrollTrigger pins/scrubs/batches, horizontal scroll. |
| interactions.md | Custom cursors (3 tiers), magnetic buttons, hover image previews, button morphs. |
| transitions.md | Page transitions — View Transitions API (preferred), GSAP overlay fallback, fragment-shader transitions, shared-element morphs. |
| glsl-patterns.md | The 7 foundational shader recipes (fbm hero, image distortion, displacement transitions, gradient mesh, scroll-glitch, raymarching, Liquid Glass lensing). Prerequisite for advanced-shaders.md. |
| webgl-threejs.md | 3D scenes, R3F patterns, GLTF/Draco/KTX2 asset pipeline, lighting, environment maps. |
| webgpu-and-tsl.md | Three.js r171 WebGPU renderer + TSL node materials. When to upgrade from WebGL2 (compute shaders, >10k particles, ML, complex post). |
Phase 5 — Implementation: platform-native & finish
| File | When to load |
|---|
| modern-css-2026.md | Platform features that replace JS in 2026 — scroll-driven animations (compositor-thread), View Transitions, Anchor Positioning + Popover, OKLCH + color-mix(), text-wrap: balance, container queries + :has() + @scope. Read before reaching for ScrollTrigger / IntersectionObserver / Floating UI. |
| liquid-glass-implementation.md | The 3-tier Liquid Glass playbook (CSS-only / SVG <feDisplacementMap> / WebGL shader). Canonical home for all glass surface decisions. |
| tech-stack.md | Library choices, install commands, framework adaptation matrix, "do not use" list. |
| performance.md | 60fps audit, Core Web Vitals 2026 budgets (INP <200ms), asset budgets, mobile fallbacks, reduced-motion. |
| sound-and-audio.md | Only when brief explicitly calls for audio. Howler sprites, Tone.js reactive audio, volume discipline, toggle UX. Off by default. |
Phase 6 — Robustness & delivery（功能性地基，A/B/C 三档都该过相关项）
| File | When to load |
|---|
| accessibility.md | 任何交付前必读。 高端站 a11y 5 杀手（自定义光标抢焦点/滚动劫持/split-text 语义/对比度/WebGL 无替代）、prefers-contrast+forced-colors、键盘与 ARIA 基线、WCAG 对比度阈值。接 axe-core 自动化。 |
| functional-components.md | 任何含表单/导航/模态/数据/列表的站。 Empty/Loading/Error/Ideal 四态纪律、可访问表单全态、原生 <dialog> 焦点管理、骨架屏、语义表格分页。补"只会做炫首屏不会做能用组件"的缺口。 |
| framework-integration.md | 用 React/Next/Vue/Nuxt/Svelte/Astro 时必读。 GSAP/Lenis/R3F 集成失败模式手册：SSR window 报错、hydration mismatch、'use client' 边界、Strict Mode 双调用、ScrollTrigger+Lenis 同步、通用清理 checklist。 |
| graceful-degradation.md | 任何用了平台新特性或 WebGL 的站。 渐进增强基线、特性×fallback 总矩阵、capability-detection 引导代码、弱设备运行时降级。配合 _canonical-facts §1 的支持度数据。 |
| verification-runbook.md | 收尾必读 —— 把 SKILL 末尾的声明式 checklist 变成可执行验证。 每条 check 映射到 preview_*/axe-core/lighthouse/web-vitals 的真实动作；产物是工具输出+截图，不是勾选框。诚实标注哪些只能手动。 |
抗腐烂 — 易腐事实的维护约定
本 skill 大量内容锚定时间（"2026"、浏览器版本、库状态），会随时间过期。维护机制：
- 所有易腐数据集中在 _canonical-facts.md，每条带
last-verified 日期。其他文件引用而非重抄。
- 使用易腐事实前看日期：距
last-verified > 6 个月视为可疑，动手前应联网 caniuse / MDN 复核，并回写更新日期。把"过期"变成显式信号，而非沉默地用错。
- 改任何易腐数据后，运行
scripts/check-consistency.sh 确认没有别的文件还留着旧值（防矛盾回流）。
design-trends-2026.md 这类年份强绑定文件，其"原则"部分应去年份化理解，"当年快照"部分按上述复核。
"What to read for this brief" — quick decision flow
- Editorial / publication / magazine → Phase 1 + composition-and-grid + typography + micro-details + intro-and-reveal + materials-and-textures (paper)
- Luxury / fashion / heritage → Phase 1 + composition-and-grid + typography + micro-details + materials-and-textures (marble/fabric) + advanced-shaders (iridescence)
- Agency / portfolio / awwwards-maximalist → Phase 1 + composition-and-grid + typography + advanced-shaders (curl-noise) + intro-and-reveal + interactions + scroll-and-motion + transitions + micro-details
- Tech / dev tools / SaaS (Pole A) → Phase 1 + composition-and-grid + typography + modern-css-2026 + micro-details + performance
- Tech-futurist / music / gaming (Pole B) → Phase 1 + composition-and-grid + typography + advanced-shaders (aurora/plasma) + glsl-patterns + intro-and-reveal + interactions
- Dashboard / app shell → Phase 1 + composition-and-grid + typography + modern-css-2026 + micro-details (subtler density) + performance + functional-components + accessibility（含大量表单/表格/状态，这两个是主菜不是补充）
- Chinese-language site (any brief) → always add typography-chinese as first read after design-principles
- Site with Liquid Glass requirement → add liquid-glass-implementation
- 3D / product hero → add webgl-threejs + glsl-patterns + materials-and-textures (PBR section) + graceful-degradation（WebGL 降级必备）
- High-particle / compute / ML → add webgpu-and-tsl + graceful-degradation
- 任何用 React/Next/Vue/Svelte/Astro 框架 → always add framework-integration（集成坑手册）
- 任何含表单/导航/模态/数据列表 → always add functional-components
- 交付前（所有 B/C 档） → always end with accessibility + verification-runbook（跑真实验证，不只声称）
Examples — ready-to-run, portfolio-grade starting points
Files in examples/ are not technique demos. They are eight finished one-pagers, each from a different fictitious studio with its own complete visual identity (palette, type pairing, content, voice, microtype). Read them as starting points for both technique and taste — when adapting one, preserve the design discipline (named palette, paired typefaces, real content, microtype labels) and only swap the brand.
Currency: the 8 examples are aligned with this skill's current standard — scroll-driven CSS animations (animation-timeline: view() / scroll()), Anchor Positioning + Popover for non-cursor-tracked UI, OKLCH tokens with Relative Color Syntax + color-mix() derivations, text-wrap: balance / pretty, full prefers-reduced-motion coverage with the static state as its own designed view, the "one primary + one atmosphere (film grain) + one accent material" discipline, named composition moves (Pinned Eyebrow appears in 4 of the 8), 10+ micro-details per file, and — in page-transition-overlay.html — the View Transitions API as the primary navigation engine with GSAP overlay as graceful fallback. When adapting one, preserve every detail of these disciplines and only swap the brand vocabulary.
| File | Studio identity | Palette | Type pairing | Showcases |
|---|
hero-fluid-shader.html | — | warm noir + magenta-violet | system | GLSL fluid hero, fbm domain warp |
magnetic-cursor.html | Atelier Nord (Berlin agency) | warm noir + electric chartreuse #D4FF00 | Boska + Cabinet Grotesk | 3-state cursor, magnetic CTAs, hover image preview, live clock, availability pulse |
scroll-reveal-text.html | The Quarterly, Issue №07 | cream #F2EFE6 + cobalt #2841D4 + ink | Erode + Cabinet Grotesk | Editorial magazine, drop cap, footnotes, multi-col, reading progress, chapter rules with diamonds |
horizontal-scroll-section.html | Atlas Cinema, MMXXVI | midnight #0B0E14 + amber #E8985C + cream | Boska + Cabinet Grotesk | Pinned horizontal sequence with 5 panels of different visual treatments (photo / type-only / spec sheet), panel counter, parallax photos |
image-distortion-hover.html | Atelier North, Plates 001–006 | cream #F0EBE0 + vermilion #D4441E + ink | Erode + Satoshi | Asymmetric gallery archive, GLSL distortion on hover, "stacked stack" sibling-dim, vermilion VIEW cursor |
kinetic-marquee.html | Signal / Noise, Vol. 04 | pure black + acid yellow #E8FF00 | Tanker + Cabinet Grotesk | Brutalist hero with word-flip on hover, 3 marquees at different speeds/treatments, scroll-velocity skew, CTA strip |
page-transition-overlay.html | Maison Helix (Berlin studio) | forest #142019 + gold #D4A862 + bone | Boska + Cabinet Grotesk | 3 complete pages (Index / Work / Studio), staggered gold-strip transition with section name + numeral label flash, animated availability indicator |
chinese-editorial-studio.html | 砚行 Yán Xíng (上海 / 中文 editorial studio) | 宣纸白 #F2EEDC + 墨色 #1A1612 + 真金 #B8923F + 朱砂 #9E3A20（仅印章） | 霞鹜文楷 (display kai) + 思源宋体 SC (body) + Erode + Cabinet Grotesk + JetBrains Mono | CJK 排版完整实战：<html lang="zh-Hans">, line-height 1.85, word-break: keep-all, line-break: strict, hanging-punctuation, text-spacing-trim, 全角中文标点，中英文自动空格，36em 中文阅读宽度。印章红方章贯穿（logo / signoff / footer），节气与上海时区显示，hover 项目浮出预览，文字 split-lines 揭示（中文不用 chars）。 |
Open one with start examples\<file>.html (Windows) — they have no build step, only CDN imports.
The intended use: when a user asks for a high-end site, point them to the closest brand archetype in this set, ask which one feels closest in spirit, then adapt rather than build from scratch.
Hard rules (do not violate)
- Every screen is portfolio-grade, including throwaway demos. (适用范围：Step 0 的 B/C 档。A 档局部修改沿用项目既有风格，不受此条约束——见 Step 0。) No placeholder gradients standing in for "design later." No lorem ipsum. No
linear-gradient(red, blue) as a stand-in image. No grey rectangles. If you would not screenshot it and post it to Are.na, do not ship it. This applies to skill examples, prototype HTMLs, internal mockups — everything. A scratch demo with weak typography teaches the wrong reflexes. When asked for a "quick" demo, the answer is still a real palette, real type pairing, real content (with named, plausible references), real composition. The speed comes from having a library to draw from (see examples/ and design-principles.md), not from cutting corners.
- Pick a named color palette before writing the first hex. Premium sites do not use
#000 and #FFF. They use warm-blacks (#0A0907, #0B0E14), paper-whites (#F2EFE6, #F0EBE0), and a single deliberate accent (cobalt #2841D4, acid yellow #E8FF00, vermilion #D4441E, amber #E8985C, gold #D4A862, chartreuse #D4FF00). See design-principles.md § Color systems for the curated set. Copy one, do not invent on the fly. Modern alternative: declare one brand color in oklch() and derive the rest with relative color syntax (oklch(from var(--brand) calc(l + 0.06) c h)) and color-mix(in oklch, …) — see modern-css-2026.md § OKLCH.
- One primary material + one atmosphere + one accent — never more. Texture and material decisions follow the same "outsized gesture" discipline as motion. Pick one primary surface (paper / marble / mesh gradient / metal), one atmospheric overlay (always film grain, animated or static), and one accent material (iridescence on display type, gold leaf on the logo, brushed metal on a CTA — pick at most one). Stacking textures is the fastest amateur tell. See materials-and-textures.md for the full vocabulary + combination rules.
- Pick two typefaces, both with character. A serif display + a clean sans is the durable default. Default fonts signal default thinking. Skip Inter (unless you're explicitly doing a "calm productivity tool" in the Linear vein AND tuning it like they do), Roboto, Arial, Open Sans, Lato, Poppins, Space Grotesk (the new "I read one blog post about premium fonts" tell), Montserrat, and all system stacks. Use Fontshare for Boska / Erode / Cabinet Grotesk / Satoshi / Tanker / Author — they're free, look nothing like Roboto, and instantly elevate the work. Pair fonts like actors in a scene — one expressive (even risky) display face, one refined body face; cast them deliberately, never reach for the convenient understudy.
- Match implementation complexity to aesthetic vision. Maximalist / expressive direction → elaborate code, extensive animations, layered effects, dense decoration. Minimalist / refined direction → restraint, precision, careful spacing, almost no motion. Both succeed when fully committed; both fail when half-executed. Excellence comes from executing the vision well, not from doing more. If you've picked direction #1 "Brutally minimal" and find yourself adding a shader hero, you've misread the brief — stop and re-anchor.
- CJK content is a first-class concern, not an afterthought. The default user works in Chinese context. If a site has any Chinese copy, read typography-chinese.md before designing — Chinese typography has different rules (no negative tracking, line-height ≥ 1.7, full-width punctuation, CJK+Latin spacing, font subsetting). Never default to Microsoft YaHei or SimSun — they're the Chinese equivalent of Inter/Roboto and instantly read "default system." Use 思源宋/思源黑/HarmonyOS Sans/阿里巴巴普惠体/霞鹜文楷/得意黑 etc. Pair the chosen Chinese face with the Latin face deliberately (5 curated pairings in the reference). Set
<html lang="zh-Hans"> (or zh-Hant for traditional). For production-grade Chinese web fonts: subset with cn-font-split or use national CDNs (Google Fonts is blocked in China).
- Never ship a "high-end" site with
scroll-behavior: smooth alone. Use Lenis (or Locomotive). The native smooth scroll is jerky and breaks ScrollTrigger sync.
- Never use jQuery, Bootstrap, MUI, Chakra, Ant Design, or any opinionated UI kit for visual elements. They carry a "tutorial" aesthetic. shadcn/ui is OK for form controls hidden in admin sections only.
- Never use CSS
transition: all. Animate specific properties; use transform and opacity for anything triggered ≥30fps.
- Never lazy-load the hero. The first frame must be the polished one.
- Never ship without testing scroll on a real trackpad — momentum scroll exposes everything.
- Never use stock photography as-is. If you must, run it through a duotone treatment, shader filter, or at minimum a
filter: grayscale(0.15) contrast(1.05) saturate(0.85) lift.
- Never use "Why choose us?" sections, three-card service grids with icons, hero with centered-CTA SaaS template, testimonial carousels, or any element from a Bootstrap landing template. These are instant amateur tells.
- Never auto-play audio without an explicit user gesture and a visible toggle.
- Always respect
prefers-reduced-motion: provide a static or low-motion variant for every animation. See performance.md.
- Always include focus-visible states and keyboard nav. "Premium" is not an excuse to skip a11y.
The "one outsized gesture + everything else considered" rhythm
Every site in the reference set follows this 3-layer recipe:
- One bold gesture — shader-driven hero (see advanced-shaders.md for which shader for which mood), cinematic intro (see intro-and-reveal.md § Opening), pinned scroll narrative, kinetic typography moment, page-transition shared-element morph. One of these per site. Not two.
- Everything else restrained — generous whitespace (2–3× normal — see composition-and-grid.md § Whitespace), single accent color (see design-principles.md § Color systems), careful type hierarchy with 4+ tools beyond size, no decorative noise. If you find yourself adding a second "wow moment," that's the moment to cut it back.
- Then the small details that signal craft — 10+ named micro-details (live clock, animated availability dot, GPS, numbered eyebrows
§ 01 ◆ Premise, footnote markers, oversized index numerals, mixed serif-italic + sans-roman pairings, scroll-velocity skew, microtype labels in monospace, masthead with year/vol./GPS/timezone). See micro-details.md for the complete vocabulary + density goals per site type. These are the difference between "I designed this" and "someone lived in this."
Sites fail when they try to be maximalist everywhere. They also fail when they're merely clean (reads as templated). Pick the gesture, restrain the rest, obsess over typographic furniture.
Verification standard
Before declaring done, the site must pass all of these (do not skip — show the user the checklist):
这份 checklist 是声明式的；不要只勾框。 凡能自动验证的项，按 verification-runbook.md 用 preview_* / axe-core / lighthouse / web-vitals 跑出真实输出，贴证据；测不了的（真机、trackpad、INP p75、微信 webview）明确标注"需手动"，不要假装测过。这才是"先定验证标准再动手"的闭环。
Taste & composition
Motion & interaction
Platform-native / modern web
Typography
Performance & polish
Output the checklist with checks after the final implementation pass and run through it explicitly.
Working style for this skill
- Taste over speed. It's better to ship one perfectly choreographed section than five rough ones.
- Show, don't list. When proposing an aesthetic direction, link to 2-3 reference sites from inspiration.md so the user can react visually.
- Iterate in the browser. Start a dev server (
npm run dev) and keep it running. After each motion change, screenshot or describe what you see — animation cannot be verified by reading code.
- Comment shaders. Fragment shaders are write-only by default. Add a one-line "what does this do" above each major block. (This is the one exception to the "no comments" rule in CLAUDE.md.)
- Build creatively on user intent. Don't ask for permission to make bold choices that serve the brief. The user came here for craft, not for a 20-question UX audit. Ask only what's blocking; commit on the rest.
The permission slip
This skill explicitly authorizes — and expects — extraordinary, award-worthy creative work. Don't hold back. When the brief allows it, show what's actually possible:
- An opening 1.5-second choreographed reveal with masked text, staggered words, and a shader hero fading in beneath.
- A page transition that uses View Transitions API with a shared-element morph that no one will mistake for a template.
- A scroll-pinned section where a 3D object rotates through eight carefully-lit poses while caption text mask-reveals beside it.
- A custom cursor that morphs into the project title when hovering case-study thumbnails, with an image preview lagging behind via
quickTo.
- A typographic moment where the hero headline uses a variable font and the weight axis animates to its terminal weight on first paint.
None of these are gimmicks when committed-to in service of one aesthetic direction. They are why this skill exists. The failure mode is hedging, not over-reaching. When in doubt, pick the bolder option, then restrain everything else around it.
Relationship to the official Anthropic frontend-design skill
This skill supersedes Anthropic's official frontend-design for this user (it is now the user's default frontend skill — see their CLAUDE.md). The official skill's core directives are absorbed and present in this file:
- ✓ The four-question pre-coding ritual (Purpose / Tone / Constraints / Differentiation)
- ✓ The "commit to one aesthetic extreme" mandate (now with 16 named directions + concrete palettes)
- ✓ The banned-font and banned-pattern list (Inter/Roboto/Arial — unless doing Linear-style restraint, Space Grotesk, purple-on-white, bento, cookie-cutter components)
- ✓ "Match implementation complexity to aesthetic vision" as a hard rule
- ✓ "Default fonts signal default thinking" / "Pair fonts like actors in a scene" framing
- ✓ "Don't hold back" closing permission
What this skill adds beyond the official: the Restraint↔Expression axis, the 2026 design-trends snapshot (Liquid Glass + Material 3 Expressive + AI-integrated UI patterns), 20+ researched named palettes, the GLSL shader cookbook with Liquid Glass lensing, the 3-tier Liquid Glass implementation playbook (CSS / SVG-displacement / WebGL), the modern-CSS-2026 platform-native module (scroll-driven anims, View Transitions cross-doc, Anchor Positioning, OKLCH), the GSAP + Lenis + ScrollTrigger scroll choreography library, Three.js r171 WebGPU + TSL node-material guide, premium sound design (Howler sprites + Tone.js), seven portfolio-grade examples including full CJK editorial work, and Core Web Vitals 2026 budgets including INP <200ms.
If a request is genuinely outside this skill's vocabulary (e.g. a simple internal tool with zero design need, where speed-to-ship trumps everything), the official frontend-design is still installed as a fallback — but the user has explicitly told you to default here.
