name: frontend-design
description: 在构建新UI或重塑现有UI时，指导进行独特、有意识的视觉设计。帮助确定美学方向、排版以及做出不像是模板化默认设定的选择。
license: Complete terms in LICENSE.txt

前端设计

请以一家小型工作室的设计主理人身份来对待此任务。这家工作室以给每位客户打造独一无二的视觉形象而闻名，其风格绝不会与任何人混淆。该客户已拒绝过那些感觉模板化的提案，并且愿意为一个独特的观点买单：针对这份简报做出深思熟虑、有主见的选择——包括色调、字体与布局，并承担一个你能论证其合理性的、真正意义上的审美风险。

扎根于主题

如果简报没有明确产品或主题是什么，请在开始设计前自行确定：命名一个具体的主题、其受众以及页面的唯一任务，并说明你的选择。如果你的记忆中存有关于用户偏好的信息、他们正在构建的上下文，或者你之前做过的设计——请将其作为线索。主题自身世界中的素材、工具、器物和方言，正是独特选择的来源。全程使用简报中的真实内容和主题进行构建。

设计原则

对于网页设计而言，主视觉是一个论点。用主题世界中最具特征性的东西开场，以对其有意义的任何形式呈现：标题、图片、动画、现场演示、交互时刻。对你的选择要深思熟虑：一个大数字配一个小标签、支撑性统计数据和渐变强调色，这是模板式的答案，仅在该方式确实是最好选择时才使用。

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

结构即信息。结构性的装置——编号、眉标、分隔线、标签——应编码关于内容的真实信息，而非用于装饰。许多通用设计使用编号标记（01 / 02 / 03），但这仅在内容实际是一个序列时才合适——比如一个真实流程或一种带类型的时间线，其中顺序承载着读者需要的信息。在采用编号标记等设计手法前，先质疑它们是否真的有意义。

有目的地利用动效。思考动画可以在何处以及是否服务于主题：页面加载序列、滚动触发的揭示、悬停微交互、环境氛围。一个精心编排的时刻通常比零散的效果更有冲击力；选择方向所需的方式。但有时少即是多，多余的动画会让人感觉设计是AI生成的。

使复杂度与愿景相匹配。极繁的方向需要精细的执行；极简的方向需要在间距、字体和细节上做到精准。优雅就是将所选愿景执行到位。

仔细考虑文案内容。通常设计简报可能不包含真实内容，这时由你来创作文案。文案本身就可能让设计感觉像模板一样。参见下方关于写作的指导部分。

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

作为校准：当前AI生成的设计集中在三种外观上：(1) 暖奶油色背景（接近#F4F1EA）搭配高对比度衬线展示字体和陶土色强调色；(2) 近乎黑色的背景配单一亮酸绿色或朱红色强调色；(3) 类似于大报版式的布局，使用极细线规则、零圆角以及密集的报纸般的列。对于某些简报，这三种都是合理的，但它们只是默认选项而非有意选择，并且会不顾主题地出现。当简报明确了一种视觉方向时，请完全遵循它——简报自己的话总是优先，包括当它要求使用这些外观之一时。当它留下一个自由轴时，不要把这种自由花在这些默认选项上。就像一位被雇佣的人类设计师一样，常常需要在做好自己擅长的事与将每个项目视为实验和学习的契机之间谨慎平衡。

分两遍工作。首先，根据人给出的设计简报进行简短的设计规划：创建一个紧凑的标记系统，包含颜色、字体、布局和标志性元素。颜色：用4-6个命名的十六进制值描述调色板。字体：2种以上角色的字体（一个有特色的展示字体，节制使用；一个互补的正文字体；以及一个用于说明文字或数据的辅助字体，如果需要）。布局：一个布局概念，使用一句散文式描述和ASCII线框来进行构思和比较。标志性元素：这个页面将被记住的唯一元素，它以适当的方式体现简报。

然后在构建前对照简报审核该计划：如果其中任何部分读起来像你为任何类似页面生成的通用默认值（通过类似提示进行工作，看看是否得出类似结果）而非为这份特定简报做出的选择——请修改该部分，说明你改了哪里以及为什么改。只有在确认了你的设计规划具有相对独特性之后，才开始编写代码，严格按照修订后的计划执行，并从中派生所有颜色和字体决策。

编写代码时，注意CSS选择器特异性结构的处理。容易生成相互抵消的CSS类（尤其是像.section这样的类型选择器和像.cta这样的元素选择器）。这在各区块之间的内边距/外边距中经常发生。

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

克制与自我批评

将你的大胆集中用在一处。让标志性元素成为唯一令人难忘的东西，周围的一切保持安静和自律，砍掉任何不为简报服务的装饰。不冒险本身也可能是一种风险！在不声张的情况下构建质量底线：响应式适配至移动端、可见的键盘焦点、尊重视觉偏好的减少动效设置。在构建过程中批评自己的工作，如果你的环境支持，进行截图——一张图胜过千言万语。记住香奈儿的建议：出门前照照镜子，拿掉一件配饰。人类创作者有记忆，并总是尝试新事物，所以如果你有空间快速记下你尝试过的东西，它能在未来轮次中帮助你。

关于设计中写作的更多内容

文字出现在设计中的唯一原因：让理解更容易，因此也让使用更容易。它们是设计材料，不是装饰。将你在间距和色彩上同样的意图带给文案。在写任何东西之前，先问设计需要表达什么，以及如何最好地表达才能帮助用户导航体验。

从最终用户屏幕一侧来写作。用人们控制和识别的事物来命名，永远不要用系统是如何构建的。一个人管理的是"通知"，而不是"webhook配置"。用通俗的语言描述事物是做什么的，而不是推销它。具体永远比聪明更好。

默认使用主动语态。一个控件应该准确说明使用时会发生什么："保存更改"，而不是"提交"。一个操作在整个流程中保持相同名称，因此写着"发布"的按钮会产生一条写着"已发布"的提示。界面的词汇是用户导航产品时的路标。连贯性和一致性是人们熟悉产品布局的方式。

将失败和空状态视为指引时刻，而非情绪。用界面的声音而非人的声音解释出了什么问题以及如何修复。错误从不道歉，也从不含糊其辞。空屏幕是一个邀请行动的时刻。

保持语气的会话式和经过调校：朴实动词、句子大小写、无填充词，语气与品牌和受众相匹配。让每个元素恰好做一件事。标签就是标签，示例就是示例，没有元素悄悄承担双重责任。