很多前端设计 prompt 的第一句都是“你是一位资深 UI/UX 设计师。” frontend-design 不是这样写的。它让模型把自己当成一家小型设计工作室的负责人——这家工作室以独特的视觉识别出名而眼前这位客户已经拒绝过好…为什么这个前端设计 Skill 让我眼前一亮它先让 AI 知道平庸是不合格的很多前端设计 prompt 的第一句都是“你是一位资深 UI/UX 设计师。”frontend-design不是这样写的。它让模型把自己当成一家小型设计工作室的负责人——这家工作室以独特的视觉识别出名而眼前这位客户已经拒绝过好几版“看起来太模板化”的方案。我第一次看到这段时很有触动。它没有直接命令模型“更有创意一点”而是先给模型创造了一个必须认真设计的处境这次不能再交出一份“还行”的答案。本文聚焦这份 Skill 的写法与设计思路。完整原始SKILL.md正文保留在文末研究资料原件仍位于_research/claude-skills-docs/03-frontend-design.md。它不是让模型“扮演设计师”而是让模型背负设计责任“你是一位设计师”其实很空。模型当然知道设计师应该做配色、排版和页面但这不足以让它摆脱最顺手的默认答案。frontend-design多做了一步它给角色补上了历史、名声和压力。这是一家以独特视觉识别闻名的小型设计工作室。 客户已经拒绝过几版模板化提案。 客户付费购买的是一套有观点、能自圆其说的审美判断。这几句共同改变了任务标准普通的“干净、现代、有科技感”不再够用模型知道最应该避免的失败不是页面做不出来而是又做出一版可替换、没有记忆点的页面用户不是来买默认答案而是在为设计上的取舍与观点付费。这是一种很高明的写法。它不直接要求“更有创意”而是让“平庸”在这个具体情境里变得不合格。好设计不是选一种风格而是进入产品自己的世界这份 Skill 还有一句很重要的话独特的设计选择应当来自主题自身的世界——它的材料、器具、器物和特有语汇。它在提醒模型不要从“科技感”“高级感”“极简风”这样的空词出发而要先问这个产品到底是什么谁在用这张页面只需要完成什么任务不同主题应该长出不同的设计语言产品所处的世界设计可能需要关注的东西金融分析工具数据、风险、时间、判断、可信度手作品牌纸张、材料、工艺、痕迹、触感知识工具批注、索引、推理链路、阅读节奏很多 AI 页面之所以一眼像 AI并不是因为颜色不够大胆而是因为它们可以套到任何产品上。换一个 Logo、换一段标题页面依然成立。而这份 Skill 要求设计从产品自己的世界里长出来不是“加点花哨的东西”而是找到只有这个项目才说得通的视觉选择。它真正教会模型的是如何识别默认答案Skill 直接点出了三种常见的 AI 审美惯性暖米色配高对比衬线体、近黑背景配荧光色、报纸式细线分栏。它并没有说这些风格不能用。真正的重点是它们很容易变成模型不假思索的默认项。真正的问题从来不是某一种风格俗而是模型没有解释为什么这一次必须是它。所以它要求模型先做一份简短的设计方案再反过来对照 brief 审查如果方案里有任何部分换成另一个类似项目也一样成立那它可能只是默认答案不是专门为这次需求做出的设计。这种“先提出再质疑”的两遍流程很值得借鉴第一遍提出颜色、字体、布局与独特元素 ↓ 第二遍检查它们是否真的属于这个项目 ↓ 不是就修改并说明为什么 ↓ 确认后才开始写代码它没有把“有辨识度”留给模型临场发挥而是给了模型一套发现套路、跳出套路的方法。先写设计理由再开始写代码这份 Skill 要求先定下四件事颜色一组有名字、有明确用途的颜色字体展示字体、正文字体必要时再补一套功能性字体布局一句清楚的布局描述必要时用简单线框辅助思考signature整个页面最值得被记住的一个独特元素。然后才开始实现。这看起来只是多了一道流程实际是在把审美变成可追溯的决定。每一个颜色、字体和布局都应该能回到前面的设计方案里找到理由。这样即使结果不够好后续也知道问题该从哪里改是主题理解错了、设计方向太泛、还是独特元素不成立而不是只能笼统地说“感觉不对”。大胆只花在一个地方克制才让设计成立这份 Skill 一边鼓励真正的审美冒险一边又给了一个很成熟的限制把大胆只花在一个地方。让 signature 元素成为那个让人记住的存在其他部分则安静地服务于内容、阅读和使用。每一个地方都抢戏最终往往等于没有重点。它把这件事概括得很像一位设计师的自我提醒出门前照照镜子摘掉一件配饰。这份克制也延伸到动效与文案动效要为主题和关键时刻服务而不是到处都动文案是帮助人理解和行动的设计材料不是装饰错误状态要说清发生了什么、如何处理不靠拟人化道歉来制造情绪每一个元素最好只做一件事标签负责标注示例负责演示。所以它讨论的从来不只是“页面好不好看”而是视觉、结构、交互和文字能否共同服务同一个目的。我从这份 Skill 里学到什么frontend-design最值得借鉴的地方是它先让模型相信这次设计不能再交出一份“还行”的答案。它用角色处境提高标准用产品主题替代空泛风格用反模板检查法对抗默认值用先规划后实现让决定可追溯最后再用克制把所有东西收回来。它不负责提供组件库也不直接告诉模型该写哪段 CSS它做的是更前面的事让模型在开始写代码以前先拥有一次真正的设计判断。附录原始 Skill 正文完整保留上面的内容负责解释这份 Skill 为什么这样写以下保留原始SKILL.md正文便于需要时直接查看它对 Agent 的具体要求。# 前端设计 把自己当作一家小型设计工作室的设计负责人来处理这项工作——这家工作室以每一位客户都能获得独一无二、绝不会被认错的视觉识别而闻名。这位客户已经拒绝过几版感觉很模板化的提案,他们花钱买的正是一种与众不同的观点:针对这份需求书(brief),在配色、字体排版、版面布局上做出深思熟虑、态度鲜明的选择,并且承担一次你能够自圆其说的真正的审美冒险。 ## 把设计扎根于主题本身 如果需求书没有讲清楚产品或主题究竟是什么,那就在动手设计之前自己把它钉死:明确说出一个具体的主题、它的受众,以及这个页面唯一要完成的任务,并陈述你的选择。如果你的记忆中有任何关于这位用户偏好的信息、他们正在构建什么的背景信息,或者你之前为他们做过的设计——都可以拿来作为线索。独特的设计选择,来自主题自身的世界——它的材料、器具、器物和特有的语汇。要始终围绕需求书里真实的内容和主题去构建设计。 ## 设计原则 对于网页设计而言,首屏(hero)就是一篇论点陈述。用主题世界里最具代表性的东西作为开场,具体采用什么形式则由主题本身决定:可以是一句标题、一张图片、一段动画、一个实时演示,或是一个可交互的瞬间。做选择时要有意为之:一个大数字配一个小标签、再加几项辅助统计数据和一块渐变色作点缀,这是模板答案,只有在它确实是最佳选项时才使用。 字体排版承载着页面的个性。要有意识地为标题字体和正文字体做搭配,而不是每个项目都用同一套惯用字体族,并且要设定一套清晰的字号体系,字重、字宽、字间距都要经过刻意安排。让字体处理本身就成为设计中令人印象深刻的一部分,而不是承载内容的中性容器。 结构即信息。编号、导语小字(eyebrow)、分隔线、标签这类结构性手法,应当承载关于内容本身的真实信息,而不是用来装饰。许多千篇一律的设计都爱用编号标记(01/02/03),但这种做法只有在内容真的是一个序列时才合适——比如一个真实的流程,或是一条有明确类型的时间线,其中顺序本身携带着读者需要的信息。在采用编号标记之类的手法之前,先质疑一下它是否真的说得通。 有意识地运用动效。想清楚动画能否、以及在哪里为主题服务:页面加载时的入场序列、滚动触发的显现效果、悬停时的微交互、氛围感的环境动效。一次经过精心编排的动效瞬间,通常比零散堆砌的特效更有冲击力;具体选择什么要看设计方向的需要。但有时候少即是多,过多的动效反而会让设计显得更像是 AI 生成的。 让复杂度匹配设计愿景。极繁主义的方向需要精细繁复的执行;极简主义的方向则需要在间距、字体、细节上做到精准克制。优雅,就是把选定的愿景执行到位。 认真对待文字内容。设计需求书往往并不包含真实的文案内容,想出文案是你的责任。文案写得平庸,会让整个设计显得和视觉设计本身一样模板化。更多指导见下文关于文案写作的章节。 ## 流程:头脑风暴、探索、规划、批判、构建、再批判一次 先做个校准:目前 AI 生成的设计大致聚集在三种 look 上:(1)暖米色背景(接近 #F4F1EA)配高对比度的衬线体标题字与赤陶色点缀;(2)近黑色背景配单一的亮酸绿色或朱红色点缀;(3)报纸式(broadsheet)版式,配细发丝分隔线、零圆角,以及密集的报纸式分栏。这三种在某些需求书下都是合理的选择,但它们是默认项而非主动选择——不论主题是什么,它们都会反复出现。如果需求书已经明确指定了某种视觉方向,就完全照做——需求书自己的措辞永远优先,哪怕它要求的正是上述三种 look 之一。但如果需求书在某个维度上留白,就不要把这份自由随手花在这几种默认选项上。这就像一位被雇佣的人类设计师一样,常常需要在发挥自己擅长的东西和把每个项目当作一次实验和学习的机会之间小心权衡。 分两遍来做这件事。第一遍,基于人类给出的设计需求书,先头脑风暴出一份简短的设计方案:构建一套紧凑的 token 体系,涵盖颜色、字体、布局与 signature(签名式元素)。颜色:用 4-6 个具名的十六进制色值描述调色板。字体:为 2 个以上的角色指定字体(一个有个性但克制使用的展示字体、一个与之搭配的正文字体,以及在需要时用于说明文字或数据的功能性字体)。布局:一个布局构思,用一句话的文字描述加上 ASCII 线框图来构思与比较。Signature:整个页面会被人记住的那个唯一的独特元素,它要以恰当的方式体现出这份需求书的特质。 然后,在动手构建之前,把这份方案拿去对照需求书做审查:如果方案里有任何一部分读起来像是你对任何类似页面都会给出的通用默认答案(可以用一个类似的提示词跑一遍,看看是否会得到差不多的结果),而不是专门为这份需求书做出的选择——就修改那一部分,并说明改了什么、为什么改。只有在确认了这份设计方案具有相对的独特性之后,才能开始写代码,并且要严格按照修订后的方案来写,每一个颜色和字体的决策都必须能从方案中追溯出处。 编写代码时,要留意 CSS 选择器优先级的组织方式。很容易生成互相抵消的 CSS 类(尤其是像 .section 这种基于类型的选择器,和 .cta 这种基于元素的选择器混用时),这种情况在 section 之间的内边距/外边距设置上尤其容易发生。 尽量把大量的规划和迭代放在你的思考过程里完成,只有当你对某个想法有较高把握、确信它会让用户满意时,才把它展示出来。 ## 克制与自我批判 把你的大胆只花在一个地方。让 signature 元素成为唯一那个令人难忘的存在,让它周围的一切都保持安静、克制,并且剪掉任何不服务于需求书本身的装饰。不敢冒险,本身也是一种风险!要在不刻意宣扬的前提下做到一条质量底线:响应式适配到移动端、键盘焦点态清晰可见、遵循用户的减少动效(reduced motion)偏好设置。在构建过程中不断批判自己的作品,如果你的环境支持,就截图检查——一图胜千token。可以参考香奈儿的建议:出门前照照镜子,摘掉一件配饰。人类创作者是有记忆的,并且总是努力做点新东西,所以,如果你有地方可以快速记下已经尝试过什么的笔记,这会对你未来几轮的创作有帮助。 ## 关于设计中文案写作的更多说明 文字之所以出现在设计里,只有一个理由:让设计更容易被理解,从而更容易被使用。文字是设计材料,不是装饰品。对待文案要像对待间距和颜色一样用心。在写任何文字之前,先问清楚这个设计需要说什么,以及怎么说才能最好地帮助使用者在体验中找到方向。 要站在屏幕另一端最终用户的立场上写文案。给事物命名时,要用人们能够操控、能够识别的说法,而绝不能用系统内部是怎么构建的那套说法。用户管理的是通知,而不是webhook 配置。用平实的语言描述一个东西是做什么的,而不是去推销它。具体永远胜过取巧。 默认使用主动语态。一个控件应当准确说出使用它会发生什么:是保存更改,而不是提交。一个动作在整个流程中要保持同样的名字——所以如果按钮上写的是发布(Publish),对应弹出的提示就应该是已发布(Published)。界面的用词,就是引导用户在产品中导航的路标。连贯和一致,是人们摸清产品脉络的方式。 把失败和空状态当作提供方向的时刻,而不是渲染情绪的时刻。用界面的口吻(而不是拟人化的口吻)说明发生了什么问题、该如何解决。错误提示不道歉,也绝不含糊其辞地说明发生了什么。一个空白的界面,应当是一次行动邀请。 把语域保持在对话化且经过调校的状态:用平实的动词、句首字母大写的句式(sentence case)、没有多余的废话,语气要匹配品牌调性与受众。让每个元素只做一件事:标签就负责标注,示例就负责演示,不要有任何元素悄悄身兼数职。