frontend-design

Frontend Design

Frontend Design 是一份关于前端界面视觉设计的指导准则，适用于构建新 UI 或重塑既有 UI 时参考。它的目标是帮助设计者做出「有辨识度、有意图」的视觉设计，处理好审美方向、字体排印，并避免落入模板化默认样式。

用途与定位

资料把这项工作比作设计工作室的设计主管：每个客户都应获得独一无二、不会被误认为他人的视觉身份。客户已经否决过显得陈词滥调或模板化的方案，付费购买的是「独特的观点」。因此需要在配色、字体和布局上做出有主见、针对具体需求的选择，必要时可以承担审美风险。

以主题内容为基础

如果需求说明没有指明产品或主题是什么，需要先自行确定，并与客户确认。可以提出一个具体的主题、设计受众以及设计的主要职责作为方案。主题所属行业、题材、材料与语言习惯，正是独特视觉选择的来源——例如给 8 至 11 岁女孩的玩具做设计，与给金融分析师做仪表盘设计，审美方向会截然不同。整个设计应始终围绕需求中的真实内容与主题展开。

设计原则

首屏（hero）：网页设计中首屏是观众最先看到的部分。应从主题世界中最具代表性的事物入手，选择最合适的形式：标题、图片、动画、实时演示、互动瞬间或其他处理方式。要有意选择，避免「大数字加小标签、辅助数据加渐变点缀」这类默认做法，除非它确实最合适。
字体排印：字体承载页面个性。展示文字与正文不必使用不同字体族，用一个或两个即可；若用两个，要明显区分。要有意选择字体，而不是随手使用任何项目都会用的默认字体族；按照《The Elements of Typographic Style》的默认指导建立清晰的字号阶梯，并有意识地设置字重、字宽与字距。当字体作为标题或视觉元素时，应把字体处理本身当作设计的一部分，而非内容的普通载体。行宽默认小于 80 个字符；衬线字体可以略长；衬线正文的行高应比无衬线略大。
避免默认排版处理：不要把标题中的单个词或短语做斜体、加粗或变色强调；不要用全大写做标签；不要在内容上方添加不必要的排版标签——这些是生成式页面最常见的特征。
视觉结构即信息：轮廓、边框、编号、眉标、分隔线、标签等结构元素应编码关于内容的有用信息，而不是装饰。许多通用设计使用编号标记（01 / 02 / 03），但只有当内容确实是序列时才合适，例如分步流程或时间线。添加编号前要确认内容真的是序列。
动效：非用户触发的动效应少而克制，仅用于吸引注意。一次精心编排的动效——一次页面加载序列或一次揭示——效果优于零散的多个效果；每块内容都淡入上滑、每张卡片都有悬停过渡，是通用默认做法，会显得像 AI 生成。响应用户操作的动效（打开、展开、确认）是受欢迎的，因为它展示了变化。
文案：设计简报往往没有真实内容，需要自己撰写文案与占位内容。文案和设计本身一样容易显得模板化。

工作流程：规划、对照需求复核、构建、自我批判

资料指出当前 AI 生成设计常聚集于一些特征：

暖奶油背景（接近 #F4F1EA）配高对比衬线标题与陶土色或暖泥色点缀（常接近 #D97757，即 Anthropic 自身 Claude 交互色，在用户需求中出现读起来像一种暴露）；
近黑背景配单一亮酸绿或朱红点缀；
大报式版式，细线规则、零圆角、密集报纸式分栏；
SaaS 卡片套件：内容切成相同的圆角卡片，无论层级都用同一圆角，每张卡片下都是同样的柔和灰色阴影（rgba(0,0,0,.1)），并用渐变铺色作装饰；
与主题无关都出现的模板外壳：每个标题上方有拉宽的全大写眉标；用中点连接的元信息字符串（'A · B · C'）；用「WORD — 片段」形式的标签配间隔号破折号；用带色调的近黑（#0B0B0B、#111）代替纯黑；小数据标签用等宽字体；链接和按钮文字后加「→」。

这些特征对某些需求是合理的，但它们更像是默认值而非选择，且与主题无关。需求明确指定视觉方向时应严格遵循，需求中的原话永远优先，包括它要求上述某种外观时。需求留空的维度上，不应把这份自由花在这些默认样式上。

工作分两轮。第一轮先基于客户设计简报构思一份简短的设计计划：建立紧凑的 token 系统，包含颜色、字体、布局与原则。

颜色：用 4 至 6 个命名十六进制值描述核心基础配色。
字体：字体族及其角色。
布局：一个布局概念，用一句话散文描述和 ASCII 线框图来构思与比较，并给出对齐指导——内容应左对齐、居中对齐还是两端对齐。
原则：让这个页面独特的高层指导。

然后在构建前对照需求复核计划：如果任何部分读起来像你为任何类似页面都会产出的通用默认（可尝试类似提示词看是否得到相似结果），而不是针对这份具体需求做的选择，就修改该部分，说明改了什么以及为什么。确认设计计划相对独特后，再按修订后的计划写代码。

写代码时要注意 CSS 选择器优先级结构，很容易生成互相抵消的 CSS 类（尤其同时存在基于类型的 .section 和基于元素的 .cta 时），在区块之间的内外边距上尤其常见。

克制与自我批判

把大胆用在一处。让一个元素成为令人记住的点，其余保持安静、自律，删掉任何不服务于需求的装饰。在不声张的前提下打好质量底线：响应式适配到移动端、可见的键盘焦点、尊重减少动态效果、视觉可访问、配色和谐。构建过程中自我批判，环境允许就截图复查——一图胜过千 token。可参考香奈儿的建议：出门前照照镜子，拿掉一件配饰。人类创作者有记忆，总是尝试新东西，所以如果有地方可以快速记录尝试过的内容，会对后续有帮助。

关于设计中的写作

文字出现在设计中只有一个原因：让人更容易理解和使用。它们是设计内容，不是装饰。写文案要像处理间距和颜色一样有意图、极简。动笔前先问：设计需要说什么，怎么说最能帮助人走完这段体验。

从最终用户角度写作。用用户能懂的简单语言命名事物，而不是按系统实现方式命名。用户管理的是「通知」，不是「webhook 配置」。用平实语言描述某物是什么或做什么，而不是推销它。对新手具体、清晰，永远好过耍聪明。

默认使用主动语态。CTA 要准确说明使用后会发生什么：写「保存更改」，不写「提交」。一个动作在整个流程中保持同一名称，所以写着「发布」的按钮会产生写着「已发布」的提示。界面的词汇是用户在产品中导航的路标，一致与连贯是人学会使用的方式。

把失败和空状态当作指引方向的时刻，而非营造情绪。解释出了什么问题、如何解决，用界面的口吻而非某个人类口吻。错误不道歉，且对发生了什么绝不含糊。空屏是一份行动的邀请。

保持对话式语气：平实的动词、句子式大小写、无填充词，语气与品牌和受众匹配。让每个文字元素只做一件事。

使用方式

资料未提供安装命令、API 或代码调用方式，它以设计指导文本的形式提供，供人在设计前端界面时参考执行。

适用场景

适用于需要独特视觉风格的前端界面设计，包括新建 UI 与重塑既有 UI，尤其是希望避免模板化、千人一面观感的项目。

限制

资料未提供具体运行平台、集成方式、收费与价格信息，也未给出效果保证或量化指标。