Menu
打造具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面、工件、海报或应用程序时（例如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或在设计/美化任何网页 UI 时），请使用此技能。生成富有创意、精致的代码和界面设计，避免了千篇一律的 AI 美学。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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) | 戏剧性阴影、渐变光晕 |
设计能力的体现不在于使用多少特效，而在于克制的精准：