4.3 frontend-design：让界面不像模板

它是什么

frontend-design 的官方描述：在构建新的前端界面或重塑现有前端时，提供有辨识度、有意图的视觉设计指导。

关键词是 distinctive（有辨识度）和 intentional（有意图）。它不管你用 React 还是 Vue，框架细节不是它的事；它只管一件事：别做得像所有人。

在 19 个官方技能里，它是少数几个“给的是审美判断而非操作步骤”的技能，也因此最容易被低估——看起来不能帮你多写一行代码。但 UI 的成败常常就在这些没有代码的地方：同样的组件库，有人拼出产品感，有人拼出练习题。

装法和 4.1 一样，浅克隆后复制 skills/frontend-design 到 ~/.dsh/skills/。

模型写前端的老毛病

如果你让模型直接写个落地页，大概率得到：

  • 紫蓝渐变 Hero 区，左边一句大标题，右边一张插图；
  • 三列等宽卡片，每张一个图标加一行小字；
  • 圆角 8px、阴影 0 2px 8px rgba(0,0,0,0.1)；
  • Inter 字体，text-center；
  • 结尾一个“立即开始”按钮，旁边一行小字“无需信用卡”。

每个单项都“没问题”，合在一起就是没有人会记住的页面。问题不在某一项丑，而在所有项都来自同一个默认分布——模型把训练数据里最高频的网页长相复述了一遍。frontend-design 治的就是这个：在写代码之前，先把设计意图按下去，让每个决策有理由，而不是有先例。

它通常给什么指导

加载之后，它一般从六个维度给指导：

维度 典型问题 这一维空着的后果
设计意图 这个页面想让人感觉到什么？ 其余五维全部退回默认值
排版层级 视线第一落点在哪，第二落点在哪 所有元素抢同一个注意力层级
色彩策略 主色、强调色、中性色如何分工 紫蓝渐变或者其他默认配色
字体配对 标题与正文用什么对比 全套默认字体，没有层级反差
留白节奏 哪里密、哪里疏 均匀分布，页面显得平
动效 什么时候该动，什么时候必须静 要么全静要么乱动

注意第一条。多数失败的设计不是技术问题，是没有设计意图——只是把内容摆上去了，照着通用模板的默认值走完全程。六维里其余五维都是意图的下游：意图定了，“视线第一落点在哪”才有答案；意图空着，排版、色彩、字体只能各自退回默认值，拼出那个“正确的平庸”。

所以用这个技能的正确顺序是：先逼出设计意图，再谈执行。意图没出来之前写的每一行 CSS，都在给将来的返工打地基。

一个设计意图工作表（可直接填空）

向模型要方向时，与其说“做个好看的页面”，不如把这张表递给它：

页面类型：__________
目标受众：__________
希望用户产生的感受：__________（如：专业、克制、高效）
必须突出的一个重点：__________
明确不要的东西：__________（如：不要渐变、不要圆角卡片）

填得越具体，出来的方向越不像模板。比如“运维工程师用的数据看板，希望感到高效且不累，重点是最新告警，不要任何装饰性插画”——这一句已经把六维里的意图、排版重点、配色克制全锁住了。

六维自检清单

拿到一份设计稿（或模型产出的页面），对着这张表逐条打勾：

维度 自问 通过了吗
意图 看一眼知道这页想让人感受什么吗 □
排版 视线路径明确，重点突出吗 □
色彩 主色 / 强调色 / 中性色有分工吗 □
字体 标题与正文有可感知的反差吗 □
留白 有疏密节奏，不是均匀平铺吗 □
动效 动得有理由，静态处也安静吗 □

六条里任何一条答不上来，就是模板味残留的位置。

典型用法

用法一：先定方向再写代码。

用 frontend-design 技能帮我定一个数据看板的设计方向。
受众是运维工程师，信息密度要高，暗色主题。
先给设计意图、排版层级、色彩策略，不要写代码。

注意提示词最后一句“不要写代码”。设计方向没定就写代码，等于把六维问题全部交给默认值。这条提示词把受众（运维工程师）、约束（信息密度高、暗色）都给了出来，意图才逼得出来。

用法二：改造已有页面。

用 frontend-design 技能评审这个落地页，
列出三处最像模板的地方，各给两个不同的改法。

“最像模板”是个好用的抓手。改造型任务最容易陷入微调——这里挪两像素那里换个色，改完还是那股模板味。让它先列出病灶再动手，改完是对比得出的，不是拍脑袋。

用法二还有一个变体：让技能只出诊断不出方案，你自己从两个改法里挑。设计决策最后得有人拍板，那个人最好是你。

和其他前端技能的分工

技能 负责
frontend-design 好不好看、有没有辨识度（设计意图与方向）
web-artifacts-builder 精细的多组件 HTML 构件的工程实现
webapp-testing 功能是否正确
theme-factory 用一套主题为多个产出物统一样式

顺序上设计先行，工程随后：frontend-design 出方向，web-artifacts-builder 负责把方向落成能跑的多组件构件，webapp-testing 验证改完之后功能没坏，theme-factory 则在幻灯片、文档等多个产物之间统一风格。四者互不替代——让 webapp-testing 管好看，它只会告诉你按钮能点。

一个粗自检方法：让同一个会话先用技能出方向再写页面，再另起一个会话不让它加载技能写同一页面，两份放一起看。如果看不出差别，说明意图没有被真正执行，回到六维表逐条对。

小结

  • frontend-design 管视觉设计意图，不管框架选型。
  • 模型默认产出是“正确的平庸”，根治方法是先定设计意图，再谈执行。
  • 用法：先要方向再要代码；改造时先列“最像模板的三处”。
  • 和 web-artifacts-builder / webapp-testing / theme-factory 分工明确，设计先行，工程随后。

延伸阅读