上周，我在浏览一组新SaaS产品的落地页作品集时，一种奇怪的既视感袭来。布局很整洁，字体很现代，但总觉得哪里不对劲。然后我恍然大悟：三个不同公司、不同项目、最近一个月内上线的网站，竟然使用了完全相同的视觉语言——温暖的米白色背景、粗衬线标题字体，以及一个赤陶色的行动按钮。这不是巧合，而是一种模式。我们用来构建的工具，正在让我们的设计看起来像是从同一条生产线上下来的。
如果你正在使用AI智能体或现代代码生成器进行构建，你很可能也遇到过这种情况。你要求一个“专业、现代的落地页”，得到的却是一个功能齐全、但完全让人记不住的模板。问题不在于AI不会写代码，而在于它默认选择了最常见、统计上最安全的设计选项。它优化的是“看起来像个网站”，而不是“感觉像是你的网站”。
千篇一律的AI设计解剖
为什么会这样？AI模型是在海量现有网站数据集上训练的。当你给出一个模糊的提示时，模型最安全的做法就是综合它所见过的最频繁的模式。这导致了一组默认的视觉风格：
- 温暖极简风： 前面提到的米白色（#F4F1EA）背景、高对比度的衬线展示字体，以及赤陶色或烧橙色的强调色。它感觉“高端”、“有编辑感”，因为很多高端网站都这么用，但这已经成了陈词滥调。
- 暗黑科技风： 接近纯黑的背景，搭配单一的亮酸绿色或朱红色强调色。它高喊“科技初创公司”，但与产品实际所属的领域没有任何特定联系。
- 报纸版式风： 模仿报纸的布局，使用细线分隔、零圆角和密集的多栏排版。它可以显得很权威，但常常被应用于并不需要这种正式结构的内容上。
结果就是一片同质化的海洋。你的项目，无论是关于精品咖啡、量子计算还是宠物护理，最终都穿上了同一件视觉外衣。设计变成了一个中性的容器，而不是产品独特身份的表达。在这里，意图性迷失了。
一个好的解决方案需要做什么
解决这个问题并不是要拒绝AI的帮助。而是要用一种不同的理念来引导它。一个好的解决方案应该：
- 强制具体化： 它应该要求你（或AI）在选择任何颜色之前，先定义页面的具体主题、受众和核心任务。
- 从主题衍生： 视觉选择——调色板、字体、布局——应该由产品自身的世界、材料和语言来证明其合理性，而不是依据通用的设计规范。
- 鼓励有主见的选择： 它应该推动做出一个经过深思熟虑、有合理依据的美学冒险——一个“标志性元素”——让设计令人难忘。
- 优先考虑意图性而非默认值： 从字体搭配到是否使用数字标记，每一个决定都应该是为这个具体需求做出的有意识选择，而不是一种条件反射。
这正是 frontend-design 技能 的核心思想。它不是一个能自动生成完美代码的魔法棒。它是一套结构化的方法论，一组设计原则和流程，你可以将其输入到你的AI智能体中，以产出具有独特观点的作品。
介绍一个打造独特设计的框架
frontend-design 技能 就像一个以独特客户视觉形象而闻名的小型工作室的设计总监。它的指导建立在几个关键支柱上：
1. 将设计植根于真实主题
该技能坚持要求你从命名一个具体主题开始。例如，不是“一个健身应用”，而是“一个面向城市马拉松训练者的跑步教练应用”。这立刻打开了一个充满具体意象的世界：城市天际线、跑鞋在人行道上的心率图、终点线。设计选择从这个现实中流淌出来，而不是从一张白纸开始。
2. 深思熟虑的设计原则
- 英雄区即论点： 开头部分不仅仅是一张大图加一句标语。它是主题世界中最具特征性的元素。对于跑步应用，它可能是一个风格化的、动态的著名马拉松路线图，而不是某人慢跑的通用库存图片。
- 有个性的字体： 它提倡将一个有特色的展示字体（谨慎使用）与一个互补的正文字体搭配。字体处理本身应该是令人难忘的。对于一个复古黑胶唱片店，你可能会将粗体、紧缩的无衬线体用于标题，搭配经典、易读的衬线体用于描述，让人联想到唱片内页的说明文字。
- 结构即信息： 数字标记（01, 02, 03）只在内容是真正的序列时才使用。对于一个食谱页面，步骤是一个序列。对于一个功能列表，它们可能不是。该技能会促使你质疑这些默认设置。
- 有意识的动效： 动画的使用是为了服务主题，而不仅仅是为了增添光彩。一个太空主题网站的页面加载序列可能展示火箭发射，而音乐应用上的悬停效果可能模仿黑胶唱片的旋转。
3. 结构化流程：头脑风暴、规划、评审、构建
这是该技能将理念转化为可操作工作流的地方。它建议采用两遍法：
- 头脑风暴与规划： 创建一个简洁的设计计划，包括：
- 色彩： 4-6个由主题证明其合理性的命名十六进制值（例如，“沥青灰 #333333”、“霓虹安全背心 #FF6B00”）。
- 字体： 为展示、正文和工具性角色指定具体的字体选择。
- 布局： 用文字描述和简单线框图阐述的布局概念。
- 标志性元素： 这个页面将被记住的那一个独特元素。
- 自我评审： 审查计划。是否有任何部分感觉像是你会为任何类似页面生成的通用默认值？如果有，就修改它。这一步对于打破模板循环至关重要。
- 精准构建： 只有在计划被确认为独特之后，你才开始编写代码，并从计划中推导出每一条CSS规则。
何时使用此技能（以及何时不用）
在以下情况下考虑使用：
- 你正在构建营销网站、落地页或作品集，而品牌身份至关重要。
- 你厌倦了通用的AI输出，并希望注入特定的美学方向。
- 你正在处理一个具有强烈主题性的项目（例如，音乐节、历史档案、特定菜系）。
- 你希望教会你的AI智能体一个更具意图性的设计流程。
在以下情况下可能不是最佳选择：
- 你需要一个纯粹功能性的内部工具或管理后台，速度和可用性比独特品牌更重要。
- 你正在构建一个需要最大限度保持中立和可复用性的组件库。
- 你面临极大的时间压力，无法投入头脑风暴和规划阶段。
使用前需要检查什么
在将此技能集成到你的工作流之前，请查看 GitHub 仓库 中的源材料。
- 阅读完整的 SKILL.md： 上面的摘要是总结。完整文档包含了关于为设计撰写文案、处理失败状态以及实践克制等更细致的指导。理解完整的理念。
- 检查仓库上下文： 该技能是 Anthropic 一个更大的
skills仓库的一部分。看看其他可用的技能。这个技能具体属于design-ui类别。了解生态系统有助于你理解它如何与其他智能体能力互补。 - 评估“安全级别”： 列出的安全级别是“低”。这通常意味着该技能提供的是指导和原则，而不是执行任意代码或访问外部系统。它是关于塑造AI的输出，而不是它的权限。
- 评估你自己的流程： 你是否愿意做前期工作来定义主题和进行头脑风暴规划？此技能增强了AI的输出，但它需要你提供深思熟虑的提示和清晰的需求简报。它是一个协作工具，而不是自动驾驶仪。
核心要点
AI生成设计的同质化是一个真实的问题，但并非无解。它源于模糊的提示和统计上的默认值。frontend-design 技能 提供了一个具体的框架来对抗这一点，它通过强制具体化、从主题衍生选择，并鼓励一个单一、大胆的标志性元素。
它将设计过程从“给我做个网站”转变为“帮助我视觉化地表达这个特定的想法”。如果你正在构建任何身份认同很重要的东西，这是一个值得研究的方法论。它不会替你进行创造性思考，但它会确保当你的AI智能体进行构建时，它是带着意图在构建，而不仅仅是模仿。