Frontend Design Skill
这个 skill 指导创建独特、生产级的前端界面，避免千篇一律的"AI 生成感"。实现精致、具有卓越审美细节和创意选择的真实可运行代码。
用户提供前端需求：组件、页面、应用或界面。可能包含目的、受众或技术约束的上下文。
设计思维
编码前，理解上下文并承诺一个大胆的审美方向：
- 目的：这个界面解决什么问题？谁在使用？
- 基调：选择极端风格 这些只是灵感，设计一个真正符合审美方向的独特风格。
- 极简主义 (brutally minimal) - 最大主义混沌 (maximalist chaos) - 复古未来 (retro-futuristic) - 有机自然 (organic/natural) - 奢华精致 (luxury/refined) - 俏皮玩具 (playful/toy-like) - 编辑杂志 (editorial/magazine) - 粗野主义 (brutalist/raw) - 装饰艺术 (art deco/geometric) - 柔和粉彩 (soft/pastel) - 工业实用 (industrial/utilitarian)
- 约束：技术要求（框架、性能、无障碍）
- 差异化：什么让这个界面难以忘怀？用户会记住的一件事是什么？
关键：选择明确的概念方向并精准执行。大胆的最大主义和精致的极简主义都可以——关键是意图性，而非强度。
然后实现可运行的代码（HTML/CSS/JS, React, Vue 等）：
- 生产级且功能完整
- 视觉震撼且令人难忘
- 具有清晰审美观点的连贯性
- 在每个细节上精雕细琢
前端美学指南
核心原则
1. 字体排版 (Typography)
- 选择美丽、独特、有趣的字体
- 禁止：Arial, Inter, Roboto, 系统默认字体
- 推荐：配对一个独特的展示字体 + 精致的正文字体
- 示例：
- Display: Clash Display, Cabinet Grotesk, Sohne, Fraunces - Body: Söhne, ABC Diatype, Suisse Int'l, GT America
2. 色彩与主题 (Color & Theme)
- 承诺一个连贯的审美
- 使用 CSS 变量保持一致性
- 主导色 + 锐利的强调色 > 平庸的均匀调色板
- 禁止：紫色渐变 + 白色背景（AI 陈词滥调）
- 推荐：
- 大胆对比：深色背景 + 霓虹强调 - 极简精致：灰度系统 + 单一强调色 - 温暖有机：土色调 + 天然质感
3. 动效 (Motion)
- 用于效果和微交互的动画
- HTML 优先使用 CSS-only 方案
- React 可用时使用 Framer Motion
- 重点关注高影响力时刻：
- 一个精心编排的页面加载（带交错显示 animation-delay） - 分散的微交互
- 使用滚动触发和令人惊喜的悬停状态
4. 空间构成 (Spatial Composition)
- 意外的布局
- 不对称
- 重叠
- 对角线流动
- 打破网格的元素
- 慷慨的负空间 或 受控的密度
5. 背景与视觉细节 (Backgrounds & Visual Details)
创造氛围和深度，而非默认纯色
添加符合整体美学的上下文效果和纹理：
- 渐变网格 (gradient meshes)
- 噪点纹理 (noise textures)
- 几何图案 (geometric patterns)
- 分层透明度 (layered transparencies)
- 戏剧性阴影 (dramatic shadows)
- 装饰边框 (decorative borders)
- 自定义光标 (custom cursors)
- 颗粒叠加 (grain overlays)
绝对禁止的 AI 味
永远不要使用这些通用 AI 生成美学：
❌ 字体：Inter, Roboto, Arial, 系统字体 ❌ 配色：紫色渐变 + 白色背景 ❌ 布局：可预测的组件模式 ❌ 设计：缺乏上下文特色的千篇一律
创意解读原则
- 创造性解读，做出意外选择，感觉是真正为上下文设计的
- 没有设计应该相同
- 在浅色/深色主题、不同字体、不同美学之间变化
- 永远不要在多次生成中收敛到常见选择（例如 Space Grotesk）
实现复杂度匹配
重要：实现复杂度要匹配审美愿景
- 最大主义设计 → 需要精细代码 + 广泛动画 + 效果
- 极简/精致设计 → 需要克制、精确、细心关注间距/排版/微妙细节
- 优雅来自于很好地执行愿景
TokenDance 特定指导
在 TokenDance 项目中使用时：
- 遵守 WARP.md 规范 - 避免 AI 味是核心原则
- 参考 UI-UX-Pro-Max-Integration.md - 57 UI 样式 + 95 色彩方案
- 使用 Heroicons/Lucide - 禁用 Emoji
- 对比度标准: 4.5:1 最低
- 过渡时间: 200ms (卡片) / 300ms (节点)
- 灰度为主: #fafafa / #f1f5f9 背景
记住
Claude 能够创造非凡的创意作品。不要退缩，展示当跳出思维定式并全力投入独特愿景时真正能够创造的东西。