一个Claude Code自定义技能，能将你的前端/UI工作提升到Awwwards的每日网站级别（8.0+分）。

它的作用

当被调用（手动使用/awwwards或前端自动检测）时，Claude Code作为高级创意总监工作，具备以下方面的专业知识：

• 排版 — 流畅的clamp()比例，趋势字体搭配，动态文本动画
• 色彩系统 — 感知均匀的调色板、暗模式、渐变配方
• 布局 — 便当格子、破碎格子、多样的段落节奏、英雄图案
• 运动设计 — GSAP图案、滚动揭示、页面过渡、光标效果
• CSS 技术 — 滚动驱动动画、容器查询、:has()、视图过渡
• WebGL / 3D — Three.js、React Three Fiber、着色器、粒子、性能预算
• 工作室理念 — 评审标准、行业特定设计语言、2025-26年趋势

安装

就这些。Claude Code会自动发现~/.claude/skills/的技能。

推荐 CLAUDE.md 添加

将此内容添加到你的 ~/.claude/CLAUDE.md（或项目 .claude/CLAUDE.md]）中，以确保 Claude 始终在前端工作中使用该技能：

用途

手册

/awwwards — Elite Creative Direction Skill for Claude Code

A Claude Code custom skill that transforms your frontend/UI work to Awwwards Site of the Day level (8.0+ score).

What it does

When invoked (manually with /awwwards or auto-detected on frontend work), Claude Code operates as a Senior Creative Director with expertise in:

• Typography — Fluid clamp() scales, trending font pairings, kinetic text animation
• Color Systems — Perceptually uniform palettes, dark mode, gradient recipes
• Layouts — Bento grids, broken grids, varied section rhythm, hero patterns
• Motion Design — GSAP patterns, scroll reveals, page transitions, cursor effects
• CSS Techniques — Scroll-driven animations, container queries, :has(), View Transitions
• WebGL / 3D — Three.js, React Three Fiber, shaders, particles, performance budgets
• Studio Philosophies — Awwwards judging criteria, industry-specific design languages, 2025-26 trends

Install

git clone [email protected]:tponscr-debug/claude-skill-awwwards.git ~/.claude/skills/awwwards

That’s it. Claude Code auto-discovers skills in ~/.claude/skills/.

Recommended CLAUDE.md addition

Add this to your ~/.claude/CLAUDE.md (or project .claude/CLAUDE.md) to ensure Claude always uses the skill for frontend work:

- Design Standard — Use the `/awwwards` skill: For ANY frontend/UI work, invoke the `/awwwards` skill which contains the complete creative direction framework, design decision process, and links to 7 reference files covering typography, color, layout, motion, CSS techniques, WebGL, and studio philosophies. Key principles:
  - ALWAYS define art direction BEFORE writing code (emotion, archetype, industry context)
  - Typography is 90% of design — use fluid `clamp()` scales, max 2 font families, tight tracking on display
  - Never pure black/white — use oklch() or carefully chosen near-black/near-white values
  - Motion must tell a story — every animation answers "what happened?" or "where should I look?"
  - Vary section rhythm — alternate contained/full-bleed, vary spacing, break the template look
  - Performance IS design — target <3s load, 60fps, animate only `transform` and `opacity`
  - A generic, template-looking UI is a failure. The user must feel the product is one-of-a-kind on first load.

Usage

Manual

Type /awwwards in Claude Code to activate creative direction mode.

Automatic

The skill auto-triggers on frontend design, UI/UX work, styling, and CSS tasks (via the description field in SKILL.md frontmatter).

In conversation

Ask Claude to design or redesign any UI — it will consult the reference files, define art direction (emotion, archetype, typography, color, motion), then build.

File structure

~/.claude/skills/awwwards/
├── SKILL.md                         # Main prompt (auto-loaded by Claude Code)
└── references/
    ├── typography.md                # Fonts, pairings, fluid type, text animation