前端设计

要解决什么问题

用 AI 写前端界面时，很容易落成「暖米色 + 衬线标题 + 陶土强调色」或「近黑底 + 酸绿/朱红 + 玻璃卡片」这类可套在任何产品上的模板。结果是首屏说不清用途、排版只当内容容器、动效只为炫技，用户也很难从界面感到「这是为当前主题做的」。

技能如何工作

技能让你以小型工作室设计负责人的身份推进，而不是先堆组件再补审美。

明确设计简报：开工前锁定主题/产品、主要受众、页面单一核心任务，以及内容与操作、品牌/技术/无障碍约束；简报不全时自行选定合理设定并简要说明，并从主题自身的材料与文化参照里提炼方向。

建立设计方向（写代码前）：用精简系统描述——

• 概念：一句与主题绑定的视觉构想
• 色彩：4～6 种具名色、十六进制与功能角色
• 字体排印：展示/正文/功能角色，字号层级、字重、间距与回退
• 布局：构图、网格、密度、响应式收拢；可用字符线框说明结构
• 标志性元素：一个可记忆、服务简报的核心视觉
• 动效：有编排的动效构想，或明确选择静态

首屏主视觉当作核心论点，优先呈现主题世界中最具代表性的元素，而不是可替换的标题+数据+渐变卡片组合。

质疑通用选择：凡能原封不动套到无关产品上的方案一律替换；仅在简报确实支持时才用常见 AI 默认风格，并把大胆集中在一处，其余保持克制。

按方向实施：从设计变量派生颜色、间距、圆角、阴影；让结构性元素表达层级与状态；实现复杂度匹配概念（繁复则丰富执行，极简则精确执行）；优先语义化标记与原生控件；保证移动端是真响应式，并覆盖焦点、对比度、prefers-reduced-motion 与加载/空白/错误等状态。

界面文案：用户视角、主动语态、操作名一致；错误说明发生了什么与如何恢复；空白状态给出明确行动邀请。

评审与验证：在桌面与移动宽度下审查渲染（含键盘路径），对照简报检查首屏用途、方向专属性、标志性元素、排版与动效是否服务理解；完成后去掉一个不必要的视觉配件，迭代到界面明确属于当前主题。

适用边界

除非任务要求更大范围调整，否则应保留现有框架、组件与样式约定，避免为「换皮」重写工程结构。动效若削弱概念应选静态；装饰性标签、分隔线或编号不应替代真实信息结构。