菜单
打造具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面、工件、海报或应用程序时（例如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或在设计/美化任何网页 UI 时），请使用此技能。生成富有创意、精致的代码和界面设计，避免了千篇一律的 AI 美学。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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 字体）。
将实现的复杂度与审美视觉相匹配。繁复主义设计需要包含大量动画和特效的复杂代码；极简或精致的设计则需要克制、精准，并对间距、排版和微妙细节保持高度关注。优雅源于对视觉愿景的完美执行。
你有能力创作出非凡的创意作品。不要有所保留，展现出打破常规、追求独特视觉的真实作品。
在交付前，务必进行彻底的自查审计，确保代码和设计符合以下标准：
展示字体（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 — 工业美学| 策略 | 适用场景 | 示例 |
|---|---|---|
| 单色系 | 极简、专业、数据仪表盘 | 不同明度的蓝色 |
| 互补色 | 需要吸引注意力、活泼 | 蓝 + 橙 |
| 类比色 | 和谐、自然、品牌感 | 绿 + 青 + 蓝 |
| 冷暖对比 | 戏剧性、情感表达 | 暖橙 + 冷紫 |
/* 推荐使用 CSS 变量实现主题切换 */
: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;
}
ease-out /* 自然减速，适合大多数进入动画 */
ease-in /* 自然加速，适合退出动画 */
ease-in-out /* 对称运动，适合模态框 */
cubic-bezier(0.34, 1.56, 0.64, 1) /* 弹性回弹，适合按钮点击 */
@keyframes，复杂交互使用 Motion.js（React）或 GSAP❌ 糟糕的做法 — 使用通用字体，缺乏个性：
<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>
/components
/Button
Button.tsx
Button.css
/Card
Card.tsx
Card.css
框架选择：根据用户需求选择，默认优先使用：
TypeScript：默认使用，提供完整类型定义
响应式要求：
可访问性标准（WCAG 2.1 AA）：
性能目标：
交付前确认以下要素：
以下模式是已知的"AI 粗糙美学"特征，严禁在代码中出现：
| 类别 | 禁止模式 | 替代方案 |
|---|---|---|
| 字体 | Inter/Roboto/Arial/system-ui 作为展示字体 | 上文字体推荐清单 |
| 配色 | 白色背景 + 紫色渐变 | 60-30-10 法则 |
| 布局 | 完全对称的 Flex 均匀分布 | 不对称、重叠、打破网格 |
| 动画 | 单一元素简单 hover 缩放 | 交错编排的进入/退出动画 |
| 阴影 | 平庸的 box-shadow: 0 2px 5px rgba(0,0,0,0.1) | 戏剧性阴影、渐变光晕 |
设计能力的体现不在于使用多少特效，而在于克制的精准：