Wk Frontend Design

这项技能指导创建独特的生产级前端界面，避免泛泛的“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 — 工业美学

字体使用法则

1. 永远不要使用 Arial、Roboto、Inter、系统默认字体作为主要展示字体
2. 展示字体与正文字体搭配时，类型反差越大越有趣（如衬线标题 + 无衬线正文）
3. 一个页面最多使用 2 种展示字体、1-2 种正文字体
4. 字体大小层级建议：Display 48-96px → H1 32-48px → H2 24-32px → H3 18-24px → Body 14-18px → Small 12px

配色方法论

60-30-10 法则

• 主色（60%）：背景和大面积色块
• 辅助色（30%）：次要元素、卡片、侧边栏
• 强调色（10%）：按钮、链接、关键数据

配色策略

深色/浅色主题切换

/* 推荐使用 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;
}

动画规范

时长指南

• 微交互（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>

输出规范

代码交付要求

1. 文件结构（以 React 项目为例）：

/components
  /Button
    Button.tsx
    Button.css
  /Card
    Card.tsx
    Card.css

2. 框架选择：根据用户需求选择，默认优先使用：

   • React + CSS Modules / Tailwind
   • Vue 3 + Composition API
   • 纯 HTML/CSS/JS（简单需求）

3. TypeScript：默认使用，提供完整类型定义

4. 响应式要求：

   • Mobile: 320px - 767px
   • Tablet: 768px - 1023px
   • Desktop: 1024px+

5. 可访问性标准（WCAG 2.1 AA）：

   • 颜色对比度 ≥ 4.5:1（正文）、≥ 3:1（大文本）
   • 所有交互元素可通过键盘访问
   • 提供适当的 ARIA 标签

6. 性能目标：

   • 首屏加载 < 3s（3G 网络）
   • Lighthouse 性能分数 ≥ 90

设计系统检查清单

交付前确认以下要素：

• 字体层级清晰，主次分明
• 配色符合 60-30-10 法则
• 动画时长和缓动符合规范
• 深色/浅色主题已实现
• 响应式布局完整
• 可访问性要求满足
• 无通用 AI 审美痕迹

严禁行为

以下模式是已知的"AI 粗糙美学"特征，严禁在代码中出现：

关键原则

设计能力的体现不在于使用多少特效，而在于克制的精准：

• 极简设计需要对间距、排版、细节的极致关注
• 繁复设计需要对层次、节奏、统一性的严格把控
• 优雅源于对视觉愿景的完美执行，而非元素的堆砌