Frontend design

何时使用

• 用户要构建或美化有视觉诉求的前端：组件、页面、落地页、仪表盘、海报、Web 应用，且希望成品有辨识度、避免「一眼 AI 味」的通用审美。
• 需要一次性产出可运行、可交付的前端代码（HTML/CSS/JS、React、Vue 等），而不只是给布局建议。
• 触发词：前端设计、做个页面、落地页、landing page、UI、美化界面、React 组件、HTML/CSS、仪表盘、dashboard、网页、海报。

不该用的边界：

• 纯后端/数据/算法逻辑、构建脚本、CLI，没有界面诉求 → 不属于本技能。
• 已有明确品牌规范（色板/字体/Logo 约束）要落地或抽取 → 配合 brand-guidelines；要做可切换主题系统 → 配合 theme-factory。
• 纯静态图形/插画/SVG 生成（非交互界面）→ 用 canvas-design。
• 写完后要在浏览器里跑测试、验交互/可访问性 → 交给 webapp-testing。
• 用户明确只要中性、默认、最朴素的内部工具样式，不追求设计感时，按需克制，不要强行炫技。

步骤 / 指令

1. 定方向（动手前必做）—— 不要一上来就写代码
   - 目的：这个界面解决什么问题、给谁用？
   - 基调：选一个「极端」并贯彻到底，例如
     极简 / 极繁 / 复古未来 / 自然有机 / 奢华精致 / 玩具感 /
     杂志编辑风 / 粗野主义 / 装饰艺术几何 / 柔和马卡龙 / 工业实用。
     仅作灵感，最终要为本场景量身设计，不照抄。
   - 约束：框架、性能、可访问性等技术要求。
   - 差异化：让人记住的「那一个点」是什么？

2. 锚定一致的概念方向并精确执行
   —— 大胆极繁和克制极简都成立，关键是「有意图」，不是「堆强度」。

3. 写出真正可运行的代码（HTML/CSS/JS / React / Vue …），同时满足：
   生产可用且功能完整、视觉强烈且令人记住、风格统一有明确观点、每处细节都打磨过。

4. 按五个维度精修（见下）。

5. 复杂度匹配愿景：极繁方向就上丰富动效与图层；
   极简/精致方向就靠留白、间距、字体与微妙细节的克制取胜。

五个美学维度（精修清单）：

排版 Typography
  - 选有个性、好看、独特的字体；显示字体（display）+ 正文字体（body）搭配。
  - 禁用通用脸：Arial、Inter、Roboto、系统默认字体。

配色与主题 Color & Theme
  - 锁定统一基调，用 CSS variables 管理。
  - 主色 + 锐利点缀色，强于平均分布的「胆小」配色。

动效 Motion
  - HTML 优先纯 CSS；React 在可用时用 Motion 库。
  - 聚焦高光时刻：一次编排良好、用 animation-delay 错峰入场的加载动画，
    胜过零散的微交互。善用滚动触发与出人意料的 hover 态。

空间构图 Spatial Composition
  - 不落俗套的布局：非对称、重叠、对角流动、打破网格的元素；
    要么大方留白，要么受控密集。

背景与视觉细节 Backgrounds & Details
  - 用氛围和层次替代纯色填充：渐变网格、噪点纹理、几何图案、
    叠层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加。

硬性规则：

• 绝不用通用 AI 审美：滥用字体（Inter/Roboto/Arial/系统字体）、套路配色（尤其白底紫色渐变）、可预测的布局与组件套路、缺乏场景特征的模板感设计。
• 每次产出都应不同：在明暗主题、字体、整体美学间变化，不要每次都收敛到同一选择（例如总用 Space Grotesk）。
• 复杂度服从愿景，优雅来自「把方向执行到位」，而非强度。

示例

最小启动提示词：

为「<场景/受众/约束>」做一个前端 <组件/落地页/仪表盘>。
先用一句话锁定一个大胆的美学方向（例：杂志编辑风深色主题），
再产出可直接运行的 <HTML+CSS / React> 代码。
要求：display+body 双字体搭配、CSS 变量管色、一次错峰入场加载动画、
非对称构图、有氛围背景。禁用 Inter/Roboto/Arial 与白底紫渐变。

配色用 CSS 变量统一管理：

:root {
  --bg: #0e0e10;
  --fg: #f5f3ec;
  --accent: #ff5c38;      /* 锐利点缀色 */
  --muted: #8a877e;
}

错峰入场（纯 CSS，HTML 优先）：

.reveal { opacity: 0; transform: translateY(16px); animation: in .6s ease forwards; }
.reveal:nth-child(1) { animation-delay: .05s; }
.reveal:nth-child(2) { animation-delay: .15s; }
.reveal:nth-child(3) { animation-delay: .25s; }
@keyframes in { to { opacity: 1; transform: none; } }

React 动效优先用 Motion 库（可用时），而非手写大量 keyframes。

注意事项

• 先定方向、后写代码：跳过「定基调/差异化」直接动手，几乎必然产出模板感界面。
• 一次只贯彻一个清晰方向，不要在同一界面里混搭多种互斥风格。
• 字体是辨识度的第一来源：务必避开 Inter/Roboto/Arial/系统默认；显示字体要有性格。
• 警惕默认陷阱：白底紫色渐变、居中三栏卡片、千篇一律的圆角阴影，都是「AI slop」信号。
• 可访问性别丢：再炫的视觉也要保证对比度、焦点态、语义结构、键盘可达。
• 性能与复杂度匹配：极简方向别堆无意义动效；极繁方向的动效也要可控、不卡顿。
• 跨多次生成要主动求变（明暗、字体、构图），不要每次收敛到同一套「安全」选择。

互见

• requires：无。
• related：brand-guidelines（已有品牌色板/字体/Logo 约束时先取规范再落地）、theme-factory（需要可切换的主题/设计 token 系统）、canvas-design（纯静态图形/SVG 而非交互界面）、web-artifacts-builder（构建可分发的 Web 工件/artifact）、webapp-testing（成品在浏览器里验交互与可访问性）。
• combines_with：webapp-testing（设计实现后接测试，形成「构建—验证」闭环）。