name: frontend-design description: 在构建新 UI 或重塑现有 UI 时，提供独特性、有意图的视觉设计指导。帮助把握美学方向、字体排版，并做出不显模板化默认风格的决策。

前端设计

以一家小型设计工作室的设计主管视角来对待这项工作——这家工作室以给每位客户打造独一无二、绝不会与他人混淆的视觉识别而闻名。这位客户已经拒绝了那些感觉像模板的方案，并为独特的观点买单：请在调色板、字体排版和布局上做出深思熟虑、有主见的选择，这些选择要专属于这份 brief，并在其中冒一个你能充分论证的真正的美学风险。

扎根于主题

如果 brief 没有明确产品是什么或主题是什么，请在设计之前自行确定：说出一个具体的主题、它的受众以及这个页面的唯一使命，并阐明你的选择。如果你的记忆中存有关于这位用户的偏好、他们正在构建的东西的相关信息，或者你之前做过的设计——请把它们作为线索。主题自身的世界——它的材料、工具、器物和本土语言——正是独特选择诞生的地方。始终以 brief 中的真实内容和主题素材来构建。

设计原则

对于 Web 设计，Hero 区域就是你的论点。用主题世界中最具特征性的事物来开篇，采用任何适合它的形式：一个标题、一张图片、一段动画、一个实时演示、一个交互瞬间。请慎重选择：一个大数字配上小标签、支持性数据和渐变强调色是模板化的答案，只有当这确实是最佳选择时才使用。

字体排版承载着页面的个性。有意识地搭配展示字体和正文字体，不要用你在任何其他项目上都会选的那几套字体系列，并设定清晰的字体层级，包括有意图的字重、字宽和间距。让字体处理本身成为设计中令人难忘的一部分，而不是内容的中性传递工具。

结构即信息。结构手段——编号、眉题、分隔线、标签——应该编码关于内容的真实信息，而不是装饰它。许多泛泛的设计使用数字标记（01 / 02 / 03），但这只在内容确实是一个序列时才合适——比如一个真实的流程或一条带有时间线的记录，其中顺序承载着读者需要的信息。在引入数字标记这类选择之前，先质疑它们是否真的合理。

有意识地运用动效。思考动画在何处以及是否能为主题服务：页面加载序列、滚动触发展示、悬停微交互、氛围营造。一个精心编排的时刻通常比零散的效杊更有冲击力；请选择设计方向所要求的做法。然而，有时候少即是多，过多的动画会让人觉得设计是 AI 生成的。

让复杂度与愿景匹配。极繁主义方向需要精细的执行；极简方向则需要在间距、字体和细节上做到精确。优雅就是把所选择的愿景执行到位。

仔细考量文案内容。设计 brief 中往往没有真实内容，需要你来构思文案。文案可以让设计变得和设计本身一样模板化。请参阅下方关于写作的章节以获取更多指导。

流程：头脑风暴、探索、规划、批判、构建、再次批判

校准参考：目前 AI 生成的设计集中在三种风格上：(1) 暖奶油色背景（接近 #F4F1EA），搭配高对比度衬线展示字体和赤陶色强调色；(2) 接近黑色的背景，搭配单一明亮的酸绿色或朱红色强调色；(3) 报纸版面风格，使用极细线、零圆角和密集的报纸式分栏布局。这三种风格对某些 brief 来说是合理的，但它们更像是默认选项而非主动选择，并且无论主题如何都会出现。当 brief 明确指定了视觉方向时，严格遵循它——brief 自身的文字始终优先，包括当它要求使用以上某种风格时。当 brief 在某个维度上留有自由度时，不要把这份自由浪费在这些默认选项上。就像一位受聘的人类设计师一样，通常需要在做自己擅长的事和把每个项目当作实验与学习的机会之间找到微妙的平衡。

分两轮进行。首先，基于用户的设计 brief 进行头脑风暴，制定一份简短的设计方案：创建一个紧凑的 token 系统，涵盖色彩、字体、布局和标志性元素。色彩：将调色板描述为 4–6 个具名的 hex 值。字体：2 种以上角色的字体（一款有特色但克制使用的展示字体、一款互补的正文字体，以及如果需要的话，一款用于说明文字或数据的辅助字体）。布局：一个布局概念，用一句话的散文描述和 ASCII 线框图来构思和比较。标志性元素：这个页面将被记住的单一独特元素，以恰当的方式体现 brief。

然后在构建之前，对照 brief 审查这个方案：如果其中任何部分读起来像是你为任何类似页面都会产出的通用默认方案（试着用类似的 prompt 跑一遍，看看是否会得到类似的结果），而不是针对这个特定 brief 做出的选择——那就修改那部分，说明你改了什么以及为什么。只有在你确认设计方案具有相对独特性之后，才开始编写代码，严格遵循修订后的方案，并从中推导出每一个色彩和字体决策。

在编写代码时，请注意 CSS 选择器优先级的结构。很容易生成相互抵消的 CSS 类（尤其是像 .section 这样的类型选择器和像 .cta 这样的元素选择器之间）。这在处理各区块之间的 padding/margin 时经常发生。

尽量在思考中完成大量的规划和迭代，只有当你对想法能让用户满意有较高信心时，才向他们展示。

克制与自我批判

把你的大胆集中在一个地方。让标志性元素成为唯一令人难忘的东西，保持它周围的一切安静而克制，删除任何不服务于 brief 的装饰。不冒风险本身可能就是最大的风险！在不张扬的情况下达到品质底线：响应式适配到移动端、可见的键盘焦点、尊重减少动效的偏好。在构建过程中批判你自己的作品，如果你的环境支持的话可以截图——一张图胜过 1000 个 token。想想 Chanel 的建议：出门前照照镜子，摘掉一件配饰。人类的创作者有记忆，并且总是试图做一些新的事情，所以如果你有地方快速记下你尝试过的内容，这对你未来的迭代会有帮助。

关于设计中的写作

文字出现在设计中只有一个原因：让理解变得更容易，从而让使用变得更容易。它们是设计材料，不是装饰。用对待间距和色彩同样的意图来对待文案。在写任何东西之前，先问设计需要说什么，以及如何最好地表达出来以帮助人们导航这个体验。

从最终用户的屏幕那一边来写作。用人们控制和识别的东西来命名，永远不要按系统的构建方式来命名。一个人管理的是通知，而不是 webhook 配置。用平实的语言描述某物做什么，而不是推销它。具体永远比聪明更好。

默认使用主动语态。一个控件应该准确说出使用它时会发生什么："保存更改"，而不是"提交"。一个操作在整个流程中保持相同的名称，所以写着"发布"的按钮产生的 toast 提示应该是"已发布"。界面的词汇是为正在浏览产品的人指路的标识。凝聚力和一致性是人们学会在其中导航的方式。

把失败和空白当作指引的时刻，而不是情绪的宣泄。用界面的口吻而不是人的口吻来解释出了什么问题以及如何修复。错误不道歉，也永远不对发生的事情含糊其辞。空白屏幕是行动的邀请。

保持语气对话化且恰到好处：平实的动词、句首大写、没有废话，语调与品牌和受众匹配。让每个元素只做一件事。标签就是标签，示例就是示例，没有任何东西悄悄承担双重职责。

这是一份专注于设计思维和原则的 Skill，理念专业深入，强调避免模板化设计，鼓励独特性和有意图的设计决策。优点是指导内容系统全面，对提升设计品质很有帮助；不足是偏向理论层面，缺乏可直接使用的代码示例或设计模板，实际使用时需要自己摸索实现方式。适合希望提升设计眼光和原则理解的用户，但如果你需要可以直接复制使用的代码，可能会有落差。