frontend-design

前端设计技能

设计并实现令人印象深刻的前端界面，打造清晰且经过深思熟虑的美学风格。输出必须是真正可运行的代码，而不只是情绪板。这项技能关注的是设计思维 + 落地实现：每项视觉选择都应以目标和情境为依据。

使用时机

当用户希望进行以下操作时，请使用这项技能：

• 创建新的网页、落地页、仪表板或应用 UI
• 设计或重新设计前端组件或屏幕
• 改进排版、布局、色彩、动效或整体视觉质感
• 将概念或需求说明转化为高保真编码界面

需要收集的输入（或自行假设）

编写代码之前，请确认：

• 目的与受众：这个 UI 要解决什么问题？谁会使用它？
• 品牌/语调：是否有参考品牌、语调或视觉灵感？
• 技术限制：框架、库、CSS 策略、无障碍性、性能要求
• 内容限制：必需文案、素材、数据、功能

如果用户未提供这些信息，请提出 2–4 个有针对性的问题，或在简短的前言中说明合理的假设。

设计思维（必需）

确定单一、大胆的美学方向，为其命名并贯彻始终。例如：

• 粗野主义 / 原始 / 实用主义
• 编辑风 / 杂志风 / 字体排印
• 奢华 / 精致 / 极简
• 复古未来主义 / 赛博 / 霓虹
• 装饰艺术 / 几何 / 华丽
• 手工感 / 有机 / 纹理

避免千篇一律的 AI 美学。 不要使用“默认”的字体、配色方案或现成布局。

编写代码之前，请定义设计体系：

1. 视觉方向 — 用一句话描述整体氛围
2. 差异化特点 — 这个 UI 应该因何令人难忘？
3. 字体体系 — 标题字体 + 正文字体、字号比例、字重、大小写
4. 色彩体系 — 主色、强调色、中性色；将其定义为 CSS 变量
5. 布局策略 — 网格节奏、间距比例、层级规划
6. 动效策略 — 1–2 个有意义的交互时刻

如果用户只想要代码，则略过说明，但仍须在内部遵循这些要求。

实现原则

• 可运行代码：可直接运行的 HTML/CSS/JS 或框架代码
• 语义化且无障碍：标题、标签、焦点状态、键盘导航
• 响应式：流式布局、断点、响应式字体
• 样式令牌化：使用 CSS 变量定义颜色、间距、圆角、阴影
• 现代布局：优先使用 CSS Grid/Flex，避免脆弱的位置调整技巧

美学指南

字体排印

• 字体排印应体现设计的语调
• 避免使用默认字体（Inter、Roboto、Arial、系统字体栈）
• 使用独特的展示字体 + 精致的正文字体
• 建立清晰的层级（字号、字重、间距、大小写）

色彩与主题

• 选定一套鲜明且有明确立场的配色
• 避免平淡、过度使用的渐变（例如白底上的紫粉渐变）
• 有意识地使用对比，并检查文字是否清晰易读

构图与布局

• 鼓励使用不对称、尺度对比、重叠或打破网格的设计
• 有意运用留白（若采用极繁主义，则控制信息密度）
• 通过间距和对齐营造视觉节奏与层级

细节与氛围

• 视情况添加纹理或层次感（噪点、颗粒、细微图案）
• 只有在符合设计概念时才使用阴影/辉光
• 考虑使用独特的边框、遮罩或 clip-path 打造鲜明形状

动效与交互

• 谨慎使用动效，但要让它们发挥作用
• 优先打造一个出彩的交互，而不是许多细碎交互
• 尊重 prefers-reduced-motion

避免

• 千篇一律的首屏 + 三卡片布局
• 普通渐变和默认字体选择
• 缺乏目的性的装饰元素
• 过于扁平、缺乏个性的组件库

交付内容

• 提供完整代码，并注明文件名或组件边界
• 使用 CSS 变量或配置对象，方便自定义
• 如果需要素材，请提供内联 SVG 或生成式 CSS 图案

质量检查清单（自我验证）

• 美学方向鲜明明确
• 字体设计经过深思熟虑，富有表现力
• 布局与间距一致且恰到好处
• 配色协调统一，清晰易读
• 交互提升体验，不显杂乱
• 代码可按提供内容运行，并已达到生产就绪状态

**请记住：**设计的成败取决于投入程度。选定一个方向，并坚定不移地贯彻到底。