| name | wk-frontend-design |
| description | 打造具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面、工件、海报或应用程序时（例如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或在设计/美化任何网页 UI 时），请使用此技能。生成富有创意、精致的代码和界面设计，避免了千篇一律的 AI 美学。 |
| license | Complete terms in LICENSE.txt |
这项技能指导创建独特的生产级前端界面，避免泛泛的“AI 粗糙”美学。实现真正可操作的代码，并特别注重美学细节和创意选择。
用户提供前端需求：组件、页面、应用程序或用于构建的界面。它们可能包括关于目的、受众或技术限制的背景信息。
设计流程
第一步：在编程之前，先了解背景，设计出具有美学风格的界面：
- 目的 ：这个界面解决了什么问题？谁会用？
- 基调 ：选择极端：极简、极繁混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具、时尚/杂志、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。口味选择非常多。用这些作为灵感，但设计一个忠于美学方向的作品。选择基调后，必须先输出三个关键词对（例如：高对比度+极细线条、半透明磨砂+流体梯度）。
- 限制条件 ：技术要求（框架、性能、可访问性）。
- 差异化 ：是什么让它令人难忘？用户会记住的那个点是什么？
关键 ：选择一个清晰的概念方向并精准执行。大胆的繁复主义和精致的极简主义同样有效——关键在于意图感，而非强度。
第二步：实现具备以下特性的运行代码（HTML/CSS/JS, React, Vue ，Angularjs等）：
-
生产级别且功能完备。
-
视觉冲击力强且令人难忘。
-
具有清晰审美观的凝聚力。
-
每一个细节都经过精心打磨。
前端审美指南
重点关注
-
字体排版 ：选择美观、独特且有趣的字体。避免使用如 Arial 和 Inter 等这样的通用字体，转而选择能提升前端审美的特色字体；使用出人意料且充满个性的字体组合。尝试将独特的展示字体与精致正文字体搭配使用。
-
色彩与主题 ：致力于一致的审美。使用 CSS 变量确保一致性。主色调配合锐利的强调色，效果远优于平庸且分布均匀的调色板。
-
动画特效（Animation/Motion） ：使用动画处理特效和微观交互。HTML 优先使用纯 CSS 方案；React 可用时使用 Motion 库。一个编排良好的、带有交错揭示效果（animation-delay）的页面加载过程，比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。在动画特效部分，加入对“质量（Mass）”和“阻尼（Damping）”的考虑，以提升动画的物理感和真实感。
-
空间构图 ：具有出人意料的布局。不对称感、重叠、对角线流动、打破网格的元素。大面积的留白或受控的密度。
-
背景与视觉细节： ：创造氛围和深度，而非默认使用纯色。添加与整体审美相匹配的情境效果和纹理。应用创意形式，如渐变网格（Gradient Meshes）、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒感叠加。
严禁行为
严禁使用通用的 AI 生成审美，例如：过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的流水线式设计。
有创意地解读，做出真正为情境设计的意想不到的选择。确保设计百花齐放。在深色和浅色主题、不同字体、不同审美之间切换。绝不要在多代交互中趋同于常规选择（例如 Space Grotesk 字体）。
重要提示
将实现的复杂度与审美视觉相匹配。繁复主义设计需要包含大量动画和特效的复杂代码；极简或精致的设计则需要克制、精准，并对间距、排版和微妙细节保持高度关注。优雅源于对视觉愿景的完美执行。
必须记住
你有能力创作出非凡的创意作品。不要有所保留，展现出打破常规、追求独特视觉的真实作品。
自查审计
在交付前，务必进行彻底的自查审计，确保代码和设计符合以下标准：
- 生产级别且功能完备
- 视觉冲击力强且令人难忘
- 具有清晰审美观的凝聚力
- 每一个细节都经过精心打磨
- 字体选择独特且有趣，避免通用字体
- 色彩方案符合一致的审美，使用 CSS 变量确保一致性
- 动画特效编排良好，带有交错揭示效果
- 布局具有出人意料的空间构图
- 背景与视觉细节创造氛围和深度
实践示例
推荐字体组合
展示字体（Headlines） — 用于标题和大字，强调个性与视觉冲击力：
Playfair Display — 经典衬线，优雅奢华Cormorant Garamond — 纤细衬线，文学气质Bebas Neue — 粗壮无衬线，力量感Abril Fatface — 装饰性衬线，戏剧张力Space Grotesk — 几何无衬线，现代科技（避免与正文搭配）Syne — 前卫几何，独特个性Clash Display — 超大显示，极端视觉
正文字体（Body） — 用于段落和说明文字，强调可读性：
Source Serif 4 — 现代衬线，屏幕优化Libre Baskerville — 经典衬线，权威感Crimson Pro — 文艺复兴风格衬线DM Sans — 几何无衬线，干净利落Plus Jakarta Sans — 当代几何，功能性
等宽字体（Monospace） — 用于代码和数据：
JetBrains Mono — 编程首选Fira Code — 连字支持IBM Plex Mono — 工业美学
字体使用法则
- 永远不要使用 Arial、Roboto、Inter、系统默认字体作为主要展示字体
- 展示字体与正文字体搭配时，类型反差越大越有趣（如衬线标题 + 无衬线正文）
- 一个页面最多使用 2 种展示字体、1-2 种正文字体
- 字体大小层级建议：Display 48-96px → H1 32-48px → H2 24-32px → H3 18-24px → Body 14-18px → Small 12px
配色方法论
60-30-10 法则
- 主色（60%）：背景和大面积色块
- 辅助色（30%）：次要元素、卡片、侧边栏
- 强调色（10%）：按钮、链接、关键数据
配色策略
| 策略 | 适用场景 | 示例 |
|---|
| 单色系 | 极简、专业、数据仪表盘 | 不同明度的蓝色 |
| 互补色 | 需要吸引注意力、活泼 | 蓝 + 橙 |
| 类比色 | 和谐、自然、品牌感 | 绿 + 青 + 蓝 |
| 冷暖对比 | 戏剧性、情感表达 | 暖橙 + 冷紫 |
深色/浅色主题切换
:root {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--text-primary: #1a1a1a;
--accent: #6366f1;
}
[data-theme="dark"] {
--bg-primary: #0a0a0a;
--bg-secondary: #171717;
--text-primary: #fafafa;
--accent: #818cf8;
}
动画规范
时长指南
- 微交互（hover、toggle）：100-200ms
- UI 反馈（按钮点击、菜单展开）：200-300ms
- 页面过渡、模态框：300-400ms
- 滚动触发动画：400-600ms
- 进入/退出动画：300-500ms
缓动函数选择
ease-out
ease-in
ease-in-out
cubic-bezier(0.34, 1.56, 0.64, 1)
动画编排原则
- 多个元素进入时使用 stagger（交错），间隔 50-100ms
- 优先使用 CSS
@keyframes，复杂交互使用 Motion.js（React）或 GSAP
- 滚动触发动画使用 Intersection Observer 或 AOS
好与坏的代码对比
字体选择
❌ 糟糕的做法 — 使用通用字体，缺乏个性：
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<h1 style="font-family: 'Inter', sans-serif;">Welcome</h1>
✅ 优秀的做法 — 展示字体与正文字体形成对比：
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
<h1 style="font-family: 'Playfair Display', serif; font-weight: 700;">Welcome</h1>
<p style="font-family: 'DM Sans', sans-serif;">A sophisticated reading experience.</p>
配色方案
❌ 糟糕的做法 — 均匀分布的平淡配色：
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
button { background: #764ba2; }
✅ 优秀的做法 — 60-30-10 法则，锐利对比：
:root {
--bg-primary: #0f0f0f;
--bg-secondary: #1a1a1a;
--accent: #f59e0b;
--accent-secondary: #fbbf24;
}
button {
background: var(--accent);
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
动画效果
❌ 糟糕的做法 — 零散、无编排的微交互：
button:hover { transform: scale(1.05); }
.card:hover { opacity: 0.9; }
✅ 优秀的做法 — 精心编排的进入动画：
.hero-title {
animation: fadeInUp 0.6s ease-out forwards;
}
.hero-subtitle {
animation: fadeInUp 0.6s ease-out 0.15s forwards;
opacity: 0;
}
.hero-cta {
animation: fadeInUp 0.6s ease-out 0.3s forwards;
opacity: 0;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
空间与布局
❌ 糟糕的做法 — 对称均匀，缺乏张力：
<div style="display: flex; justify-content: space-between;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
✅ 优秀的做法 — 不对称布局，重叠层次：
<header class="hero">
<h1 class="hero-title">DISRUPT</h1>
<div class="hero-image" style="transform: translateY(40px);"></div>
<p class="hero-tagline" style="margin-top: -20px;">打破常规</p>
</header>
输出规范
代码交付要求
- 文件结构（以 React 项目为例）：
/components
/Button
Button.tsx
Button.css
/Card
Card.tsx
Card.css
-
框架选择：根据用户需求选择，默认优先使用：
- React + CSS Modules / Tailwind
- Vue 3 + Composition API
- 纯 HTML/CSS/JS（简单需求）
-
TypeScript：默认使用，提供完整类型定义
-
响应式要求：
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
-
可访问性标准（WCAG 2.1 AA）：
- 颜色对比度 ≥ 4.5:1（正文）、≥ 3:1（大文本）
- 所有交互元素可通过键盘访问
- 提供适当的 ARIA 标签
-
性能目标：
- 首屏加载 < 3s（3G 网络）
- Lighthouse 性能分数 ≥ 90
设计系统检查清单
交付前确认以下要素：
严禁行为
以下模式是已知的"AI 粗糙美学"特征，严禁在代码中出现：
| 类别 | 禁止模式 | 替代方案 |
|---|
| 字体 | Inter/Roboto/Arial/system-ui 作为展示字体 | 上文字体推荐清单 |
| 配色 | 白色背景 + 紫色渐变 | 60-30-10 法则 |
| 布局 | 完全对称的 Flex 均匀分布 | 不对称、重叠、打破网格 |
| 动画 | 单一元素简单 hover 缩放 | 交错编排的进入/退出动画 |
| 阴影 | 平庸的 box-shadow: 0 2px 5px rgba(0,0,0,0.1) | 戏剧性阴影、渐变光晕 |
关键原则
设计能力的体现不在于使用多少特效，而在于克制的精准：
- 极简设计需要对间距、排版、细节的极致关注
- 繁复设计需要对层次、节奏、统一性的严格把控
- 优雅源于对视觉愿景的完美执行，而非元素的堆砌
