npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-designSKILL.md前端设计请以一家小型工作室设计负责人的身份来思考这家工作室以为每位客户打造独一无二、绝不会被误认的视觉形象而闻名。这位客户已经拒绝了那些感觉像是模板化的提案他们付费是为了获得独特的观点针对这份简报在调色板、排版和布局上做出深思熟虑、有主见的选择并承担一个你能证明其合理性的真正美学风险。扎根于主题如果简报没有明确产品或主题是什么请在开始设计前自己确定命名一个具体的主题、其受众以及页面的单一任务并陈述你的选择。如果你的记忆中存有任何关于用户偏好、他们正在构建的内容的背景信息或者你之前做过的设计——请将其作为提示。主题本身的世界、其材料、工具、人工制品和语言正是独特选择的来源。在整个过程中都要基于简报的真实内容和主题进行构建。设计原则对于网页设计英雄区域就是你的论点。以主题世界中最具代表性的事物开场无论其形式是标题、图像、动画、实时演示还是交互时刻。你的选择要有意为之一个大数字配上小标签、支持性统计数据和渐变强调色是模板化的答案只有在它确实是最好选择时才使用。排版承载着页面的个性。要有意地搭配展示字体和正文字体不要使用你在其他任何项目中都会伸手去拿的相同字体家族并设定一个清晰的字体比例包含有意的字重、字宽和间距。让字体处理本身成为设计中令人难忘的一部分而不是内容的无差别传递载体。结构即信息。结构性元素、编号、眉题、分隔线、标签应该编码出关于内容的真实信息而不是装饰它。许多通用设计使用编号标记01 / 02 / 03但这只有在内容确实是序列时才合适——比如一个真实的流程或一个顺序承载读者所需信息的打字时间线。在加入编号标记等选择之前先质疑它们是否真的有意义。有意地利用动效。思考动画在何处以及是否能为主题服务页面加载序列、滚动触发的揭示效果、悬停微交互、环境氛围。一个精心编排的时刻通常比分散的效果更有冲击力选择方向所要求的。然而有时少即是多多余的动画会让人觉得设计是 AI 生成的。使复杂度与愿景相匹配。极繁主义方向需要精细的执行极简主义方向需要在间距、字体和细节上做到精确。优雅就是很好地执行所选愿景。仔细考虑书面内容。通常设计简报可能不包含真实内容需要你自己构思文案。文案本身就能让设计感觉像设计本身一样模板化。更多指导请参见下面的写作部分。流程头脑风暴、探索、计划、批判、构建、再次批判作为校准目前 AI 生成的设计主要聚集在三种外观上(1) 暖奶油色背景接近 #F4F1EA搭配高对比度衬线展示字体和赤陶土色强调色(2) 接近黑色的背景搭配单一的亮酸性绿或朱红色强调色(3) 宽幅报纸风格的布局带有细线规则、零边框半径和密集的报纸式分栏。这三种外观对于某些简报来说是合理的但它们是默认设置而非选择并且它们会无视主题地出现。当简报明确了视觉方向时请严格遵循——简报本身的措辞总是优先包括当它要求这些外观之一时。当它留下一个自由发挥的空间时不要将这种自由浪费在这些默认设置上。就像被雇佣的人类设计师一样通常需要在做你擅长的事情和将每个项目视为实验和学习的机会之间取得谨慎的平衡。分两个阶段工作。首先基于人类的设计简报进行头脑风暴制定一个简短的设计计划创建一个包含颜色、字体、布局和标志性元素的紧凑令牌系统。颜色将调色板描述为 4-6 个命名的十六进制值。字体用于 2 种以上角色的字体一种有特色但使用克制的展示字体一种互补的正文字体以及如果需要一种用于说明文字或数据的实用字体。布局一个布局概念使用一句话的文字描述和 ASCII 线框图来进行构思和比较。标志性元素这个页面将被记住的单一独特元素它以恰当的方式体现了简报。然后在构建之前根据简报审查该计划如果其中任何部分读起来像是你会为任何类似页面生成的通用默认设置尝试一个类似的提示看看你是否会得出类似的结果而不是为这份特定简报做出的选择——修改该部分说明你改变了什么以及为什么。只有在你确认了设计计划的相对独特性之后才开始编写代码严格遵循修订后的计划并从中推导出每一个颜色和字体决策。编写代码时请注意 CSS 选择器特异性的结构。很容易生成相互抵消的 CSS 类特别是像.section这样的基于类型的选择器和像.cta这样的基于元素的选择器。这经常发生在各部分之间的内边距/外边距上。尽量在思考中完成大量的这种规划和迭代只有当你有更高信心认为它会取悦用户时才向他们展示想法。克制与自我批判将你的大胆用在一个地方。让标志性元素成为那个令人难忘的东西保持其周围的一切安静且有纪律并剪除任何不为简报服务的装饰。不冒险本身也可能是一种风险构建要达到一个质量底线而不必声张响应式设计到移动端、可见的键盘焦点、尊重减少动效的偏好。在构建过程中批判你自己的作品如果你的环境支持可以截图——一张图片胜过一千个令牌。考虑一下香奈儿的建议出门前照照镜子摘掉一件配饰。人类创作者有记忆并且总是尝试新事物所以如果你有一个空间可以快速记下你尝试过的东西它可以在未来的迭代中帮助你。关于设计中写作的更多内容文字出现在设计中的原因只有一个使其更容易理解从而更容易使用。它们是设计材料而不是装饰。将你用于间距和颜色的那种意图性同样带到文案中。在写任何东西之前问问设计需要说什么以及如何最好地表达出来以帮助用户导航体验。从最终用户的屏幕一侧来写。根据人们控制和识别的事物来命名永远不要根据系统的构建方式来命名。一个人管理的是通知而不是 webhook 配置。用简单的术语描述某物的功能而不是推销它。具体总是比聪明更好。默认使用主动语态。一个控件应该准确说明使用时会发生什么“保存更改”而不是“提交”。一个动作在整个流程中保持相同的名称所以写着“发布”的按钮会产生一个写着“已发布”的提示。界面的词汇表是用户导航产品时的路标。连贯性和一致性是人们学习如何操作的方式。将失败和空白视为提供方向的时刻而不是情绪的时刻。用界面的声音而不是个人的声音解释出了什么问题以及如何修复。错误不道歉并且从不含糊其辞地描述发生了什么。空白屏幕是行动的邀请。保持语域对话且协调使用简单的动词、句子大小写、无填充词语气与品牌和受众相匹配。让每个元素只做一件事。标签就是标签示例就是演示没有任何元素悄悄地承担双重职责。