前端设计指南：从主题出发的有意识选择

扎根于主题

如果简报没有明确产品或主题，请在开始设计之前自行确定：指定一个具体的主题、其受众以及页面的唯一任务，并陈述你的选择。如果你的记忆中有关于用户偏好、他们在构建的内容上下文，或你之前做过的设计，请以此为线索。主题自身的世界——其材料、工具、制品和原生语言——正是独特选择诞生的源泉。整个设计过程应始终以简报中的真实内容和主题为基础。

设计原则

对于网页设计，首屏（Hero）就是一个主题陈述。用主题世界中最具特色的事物开场，以任何适合它的形式呈现：一个标题、一张图片、一段动画、一个现场演示、一个互动瞬间。要慎重选择：一个大数字配一个小标签，加上辅助统计数据和渐变强调色，这是模板式的答案，仅当这确实是最好选项时才使用。

字体承载着页面的个性。刻意搭配标题字体和正文字体，不要选用你在任何其他项目中都会使用的同一字体家族，并设置清晰的字体层级，包含有意的字重、字宽和间距。让字体处理本身成为设计中令人难忘的部分，而不是内容的被动载体。

结构即信息。结构性手段——编号、眉题、分割线、标签——应传递关于内容的真实信息，而非装饰内容。许多通用设计使用编号标记（01 / 02 / 03），但这仅当内容确实是序列时才合适——比如一个真实流程或一个带时间顺序的列表，其中顺序承载了读者需要的信息。在采用编号标记等选项前，先质疑它们是否真的合理。

有意地利用动效。思考动画是否以及如何服务于主题：页面加载序列、滚动触发的揭示、悬停微交互、氛围营造。一个精心编排的时刻通常比零散的效果更有冲击力；根据方向需求选择。然而，有时少即是多，额外的动画会让设计显得像是AI生成的。

让复杂度与愿景相匹配。极繁方向需要精致的执行；极简方向需要精确的间距、字体和细节。优雅在于出色地执行所选愿景。

仔细考虑文字内容。通常设计简报可能不包含真实内容，需要由你来撰写文案。文案可能让设计本身看起来也像模板一样。有关撰写的更多指导，请参见下方关于写作的部分。

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

作为校准：目前AI生成的设计集中在三种外观上：(1) 暖奶油色背景（接近#F4F1EA），搭配高对比度衬线标题字和赤陶色强调色；(2) 接近黑色的背景，搭配单一的亮酸绿色或朱红色强调色；(3) 宽幅报纸式布局，带有极细规线、零圆角和密集的报纸式列。这三种外观对于某些简报都是合理的，但它们是默认选项而非选择，并且无论主题如何都会出现。如果简报明确指定了视觉方向，请严格遵循——简报本身的措辞总是优先，包括当它要求采用这些外观之一时。如果简报留下了自由设计的轴线，不要把这自由花在这些默认选项上。就像受雇的人类设计师一样，常常需要在做自己擅长的事情和把每个项目都当作实验和学习机会之间仔细平衡。

分两轮进行。首先，根据用户的设计简报简短地构思一个设计计划：创建一个紧凑的Token系统，包含颜色、字体、布局和标志性元素。颜色：将调色板描述为4-6个命名的十六进制值。字体：2个以上角色的字体（一个富有特色的标题字体，克制使用；一个互补的正文字体；以及一个用于说明文字或数据的工具字体，如果需要）。布局：一个布局概念，使用一句话散文式描述和ASCII线框图进行构思和比较。标志性元素：这个页面将因此而被记住的单一独特元素，以适当的方式体现简报。

然后，在构建之前对照简报评审该计划：如果计划的任何部分读起来像是你为任何类似页面都会产生的通用默认输出（通过类似提示运行以查看是否得出类似结果），而不是为这个特定简报做出的选择——请修改该部分，说明你修改了什么以及为什么。只有在确认你的设计计划相对独特之后，才开始编写代码，严格遵循修订后的计划，并从中推导出所有颜色和字体决策。

编写代码时，注意CSS选择器特异性的结构。很容易生成互相抵消的CSS类（尤其是当出现基于类型的如.section和基于元素的如.cta选择器时）。这在段落之间的内边距/外边距上经常发生。

尝试在你的思考中完成大量此类规划和迭代，仅当你有较高信心认为它能取悦用户时，才向用户展示想法。

克制与自我批评

将你的大胆用在一个地方。让标志性元素成为唯一令人难忘的东西，保持其他一切安静且有纪律，并删去任何不服务于简报的装饰。不冒险本身也可能是一种风险！在达到质量底线的基础上构建，而不刻意宣告：响应式向下兼容到手机，可见的键盘焦点，尊重减少动效偏好。在构建过程中自我批评，如果环境支持，截取截图——一张图胜过一千个Token。记住香奈儿的建议：出门前，照镜子，摘掉一件配饰。人类创作者有记忆，总是尝试新事物，所以如果有一片空间可以快速记下你尝试过的东西，这对你未来的设计会有帮助。

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

文字出现在设计中只有一个原因：使其更易于理解，从而更易于使用。它们是设计材料，而非装饰。将同样的意图带入文案，就像你对待间距和颜色一样。在写任何东西之前，先问设计需要表达什么，以及如何最好地表达以帮助用户导航体验。

从屏幕另一端的最终用户角度写作。用人们能控制和识别的方式来命名事物，永远不要用系统构建方式。用户管理通知，而不是Webhook配置。用直白的语言描述某物做什么，而不是推销它。具体总是比聪明更好。

默认使用主动语态。一个控件应准确说明使用它时会发生什么：“保存更改”，而不是“提交”。一个动作在整个流程中保持同一名称，所以标有“发布”的按钮会产生一条“已发布”的吐司消息。界面的词汇表是用户在产品中导航的路径标识。内聚性和一致性是人们学习如何操作的方式。

将失败和空状态视为引导方向的机会，而非气氛渲染。用界面的声音（而非人的声音）解释出了什么问题以及如何修复。错误不会道歉，也从不含糊其辞。空屏幕是一个行动的邀请。

保持语气对话式且精准：朴实的动词、句子首字母小写（句子小写）、无废话，语气与品牌和受众相匹配。让每个元素只做一件工作。标签就做标签，示例就做示例，没有东西会默默承担双重任务。

• 原文链接： github.com/anthropics/cl...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～