# frontend-design开盖：一行代码没有的审美件 ## 概述 本期是本栏第2轮单件深度拆解，对象是 Claude Code 官方插件市场里最「不像技能」的技能——`frontend-design`。它管的是写出来的网页界面长什么样，核心使命一句话：避免 AI slop（AI 垃圾流水线审美）。本次拆解把它的 SKILL.md 从首句到尾句过一遍，核心发现有三：全文零脚本、零文件引用，是官方产出件里罕见的纯提示词形态；它最狠的条款不是教模型做什么，而是封杀模型自己的默认答案（Inter 字体、白底紫渐变、Space Grotesk 点名除名）；「审美」这种最虚的东西，被它写成了一份可执行规则清单，拆完你就能照着写一份自己的。 ## 评测对比表 | 维度 | 权重 | 得分 | 点评 | |------|------|------|------| | 功能完整度 | 25% | ★★★★ | 覆盖组件到整站，但无任何可配置项，边界场景全靠模型现场判断 | | 设计质量 | 25% | ★★★★★ | 教科书级：触发词、风格菜单、双向防呆、禁令设计一应俱全 | | 实战效果 | 20% | ★★★★ | 被官方选为插件市场预装分发件，本身就是最强的实战背书 | | 上手难度 | 15% | ★★★★★ | 零配置零依赖，装上即生效 | | 社区活跃度 | 15% | 官方维护 | 随官方渠道分发，本期未采信第三方计数 | 再放一张同门结构对照表，看清楚它在官方家族里的位置（同门结论沿用本栏此前各期拆解）： | 件 | 所属渠道 | 形态 | 管什么 | |----|----------|------|--------| | frontend-design | 官方插件市场 | 纯提示词单文件 | 网页界面的审美判断 | | canvas-design | 官方示例包 | 提示词+图形资产 | 平面图形、视觉稿 | | docx / xlsx / pptx / pdf | 官方示例包 document-skills | Python 脚本为主 | 文档的确定性操作 | | webapp-testing | 官方示例包 | 脚本+流程 | 起服务、开浏览器做验证 | 一眼可见的规律：**能确定步骤的活，官方用脚本；只能靠判断的活，官方用提示词。** frontend-design 是后者唯一的代表，这也是它值得逐行拆的原因。 ## 一、门牌拆解：第一句就是触发工程 开篇第一句（原文）： > This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. 短短一句压了三个定位词： - **production-grade**——锚定质量下限，告诉模型这不是出 demo，是能上生产的代码； - **distinctive**——锚定差异化，先给「独特」定了调，后面所有规则都是它的展开； - **avoid generic "AI slop" aesthetics**——最有心机的一处。「AI slop」是欧美开发者圈吐槽 AI 生成内容的黑话，把行话写进门牌（description）里，用户用行话提问时命中率最高。这是触发工程的老结论：**用行话钓行话**。 紧接着第二句做任务粒度枚举： > The user provides frontend requirements: a component, page, application, or interface to build. component、page、application、interface 四个名词，正好覆盖「帮我写个按钮」「做个落地页」「搭个管理后台」「改个界面」四种真实提问方式。门牌阶段就把触发面铺满，这是很多社区件欠的功课——描述只写了一种姿势，用户换了说法就挂载不上。 ## 二、开局五问：把「想一想」变成流程 正文第一段叫 Design Thinking，要求写码之前先过四问： - **Purpose**：这个界面解决什么问题，谁在用； - **Tone**：选一个极端基调； - **Constraints**：框架、性能、无障碍等技术约束； - **Differentiation**：什么会让它被人记住。 第一问和第三问是常规动作，真正值得抄的是后两问的写法。 **写法一：基调给菜单，但菜单带免责。** 原文一口气列了十一种极端风格：brutally minimal（性冷淡到底）、maximalist chaos（极繁混乱）、retro-futuristic（复古未来）、organic/natural、luxury/refined、playful/toy-like、editorial/magazine、brutalist/raw、art deco/geometric、soft/pastel、industrial/utilitarian。列完立刻补一句： > Use these for inspiration but design one that is true to the aesthetic direction. 菜单是启发不是题库——不写这句，模型会把十一个词当成唯一合法答案轮着用，菜单反而变成新的同质化源。**枚举必须配免责，这是给模型发清单的铁律。** **写法二：记忆点用问句逼出来。** Differentiation 一项原文是钩子式的： > What makes this UNFORGETTABLE? What's the one thing someone will remember? 不写「请确保界面令人难忘」这种废话指令，而是连环追问，逼模型在写第一行 CSS 之前先想清楚「用户明天记住哪一点」。 **写法三：CRITICAL 段做双向防呆。** 加粗的 CRITICAL 段只有两句，后一句是全文的定盘星： > Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. 极繁和极简都对，关键是「有意图」而不是「够用力」。这一句同时堵住两个失败方向：不敢冒险（产出平庸安全款）和理解错「大胆」（用力过猛变炫技）。提示词工程里大多数约束只防一头，一句话防住两头跑偏的写法，非常少见。 ## 三、五组规则：把品味写成清单 正文主体是五组美学规则。逐组看，每组真正的干货都是一个「观点句」而非「操作句」。 **Typography（字体）**：要求「漂亮的、独特的、有趣的」字体，点名 avoid Arial 和 Inter，并给出搭配公式——「Pair a distinctive display font with a refined body font」，个性展示字体配克制正文字体。没有指定任何具体字体名，只给了挑选标准和组合结构。 **Color & Theme（色彩）**：要求整体感，用 CSS variables 保证一致性，然后是全文最典型的观点句： > Dominant colors with sharp accents outperform timid, evenly-distributed palettes. 主色统治加尖锐点缀，胜过畏手畏脚的平均分配。注意这是**比较级判断**，不是操作步骤——它给模型的是评价标准，让模型在无数合法配色里自己裁决。品味清单的正确形态就是标准，不是配方。 **Motion（动效）**：三条都值得划线。技术栈分流——HTML 优先纯 CSS 实现，React 有条件就用 Motion 库，同一规则按框架给出不同落地路径；优先级判断——「one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions」，一次编排好的错峰入场胜过满屏碎动效，顺手还给了实现锚点 animation-delay；最后要求滚动触发和悬停态要有「surprise」。 **Spatial Composition（空间布局）**：全部是名词枚举——unexpected layouts、asymmetry、overlap、diagonal flow、grid-breaking elements，然后留了一个双向口：generous negative space OR controlled density，大留白或者高密度都行，唯独不能不选边。 **Backgrounds & Visual Details（背景与细节）**：反对直接铺纯色，要求造「氛围和深度」，给出的工具箱包括 gradient meshes、noise textures、geometric patterns、layered transparencies、dramatic shadows、custom cursors、grain overlays——七个词就是七种质感手法，模型按基调自取。 ## 四、NEVER 段：全文唯一的红灯 整份文件的大写 NEVER 只出现了一次，全给了封杀默认答案： > NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. 三连黑名单：字体（Inter、Roboto、Arial、系统字体）、配色（点名白底紫渐变——AI 生成页的头号识别特征）、布局（可预测的组件套路）。用大写和 NEVER 把最痛的点钉死，其余全用建议语气——**红灯只给最痛的路口，这是禁令设计的分寸感。** 紧接着还有一条更狠的，也是本件最独特的条款： > No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. 「任何两次设计都不该一样」，禁止跨代际收敛，还直接点名 Space Grotesk。这个点名的信息量极大：Space Grotesk 正是模型自认为「有设计感」时最爱选的字体——官方等于承认自家模型有审美惯性，然后把惯性答案写进了黑名单。一般技能防的是用户侧同质化，这条防的是**模型自身的收敛倾向**，深了一层。 ## 五、收尾两句：复杂度匹配与情绪赋权 倒数第二段解决一个容易漏的问题——工程量要配得上审美方向： > Match implementation complexity to the aesthetic vision. 极繁设计需要大量代码堆动效和细节，极简设计需要的是留白、间距、字体的毫米级精度。用写极简的省力方式去写极繁（或反过来），都会塌。这是把「风格」翻译成「工程量预算」的桥。 最后一句是情绪句： > Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. 别收着，放开写。LLM 对指令存在「均值回归」——默认输出总是往安全平庸处漂，结尾这句赋权喊话就是一个人为的反向偏置。别觉得玄学，官方把它放在压轴位置，就是当正经指令用的。 ## 六、两张图看懂 生效链路（从触发到输出）： ```mermaid flowchart TD A["用户提出前端需求"] --> B{"是否命中门牌触发词"} B -->|组件 页面 应用 界面| C["挂载frontend-design"] B -->|与前端无关| D["不加载 零上下文成本"] C --> E["开局四问定基调"] E --> F["选定一个极端美学方向"] F --> G["五组规则约束生成"] G --> H["字体 个性配对无默认"] G --> I["色彩 主色统治尖锐点缀"] G --> J["动效 一次重头戏"] G --> K["布局 不对称破网格"] G --> L["背景 造氛围与质感"] H --> M["NEVER黑名单自检"] I --> M J --> M K --> M L --> M M --> N["输出有记忆点的界面"] ``` 规则资产地图（一份纯提示词件的全部家当）： ```mermaid mindmap root((frontend-design 规则地图)) 开局四问 用途与受众 基调选极端 技术约束 记忆点追问 五组清单 字体个性配对 主色加尖锐点缀 动效少而重 不对称破网格 背景质感工具箱 两道禁令 三类AI味黑名单 禁跨代际收敛 两个收尾 工程量配风格 赋权情绪句 ``` ## 七、适用与不适用 **适用场景**：从零写页面或组件；明确要求「不要像 AI 做的」；营销页、作品集、活动页等视觉权重高的产出；想给默认审美抬一抬下限的任何前端任务。 **不适用场景**：企业内部改既有组件库——人家的设计系统本身就是「默认答案」，这份技能鼓励的「出格」会把规范冲掉；需要严格遵循品牌手册的交付；非网页端的视觉产出（平面图形是 canvas-design 的地盘，别认错门）。 ## 八、安装与使用 **方式一：插件市场（推荐，官方渠道）。** 在 Claude Code 里执行 `/plugin`，在官方市场（claude-plugins-official）中搜索 frontend-design 直接安装。本机实测它就来自这个渠道的 `plugins/frontend-design/skills/frontend-design` 目录。 **方式二：抄一份自己的。** 这份件的全部内容就是一篇短文，完全可以照抄成个人技能。建一个目录放 SKILL.md： ```bash mkdir -p ~/.claude/skills/frontend-design ``` 文件骨架如下，正文粘贴本文第二至五节引用的原文即可： ```markdown --- name: frontend-design description: This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Use when building pages, components, applications, or interfaces. --- （正文：Design Thinking 四问 + 五组规则 + NEVER 段 + 收尾两句） ``` **使用**：装好后无需手动调用，门牌里的 frontend interfaces 等词命中前端任务时自动挂载；也可以点名强拉：「用 frontend-design 帮我做一个作品集首页，基调用 editorial/magazine」——带上基调关键词，开局四问直接跳过一半。 ## 九、可偷的六个写法（按价值排序） 1. **黑名单点名自家模型的默认答案**——Space Grotesk 条款。你肯定见过自己的模型反复爱用某个库、某种命名、某种配色，把它写进 NEVER，一刀见效。 2. **反收敛条款**——要求「每次产出都不同」，防止技能本身变成新的模板机。写了枚举清单的技能尤其需要这条对冲。 3. **观点句代替操作句**——「A outperform B」式的比较级判断，给标准不给配方，模型在合法解空间里自己裁。 4. **枚举必配免责**——风格菜单后面跟一句「仅作灵感，选一个真的符合方向的」，防清单变题库。 5. **双向防呆句**——「A 和 B 都对，关键是 C」，一句话同时堵住两个方向的跑偏，比单边约束便宜一倍。 6. **情绪句压轴**——结尾给模型松绑赋权，对冲指令遵循中的均值回归，成本为零，值得一试。 ## 参考来源 1. frontend-design 技能原件（Claude Code 官方插件市场 claude-plugins-official 分发，本机安装于 `~/.claude/plugins/marketplaces/claude-plugins-official/plugins/frontend-design/skills/frontend-design`）——本文全部引文的逐字出处 2. [anthropics/skills](https://github.com/anthropics/skills) — Anthropic 官方 Skills 仓库，官方示例件（docx、pptx、canvas-design 等）的发布地，本栏此前各期官方件拆解的对象均出于此 3. Claude Code 插件市场（Claude Code 内执行 `/plugin` 可见）— frontend-design 的官方分发渠道，亦是「预装件」判断的依据 说明：本期外部搜索通道受限，第三方热度数据（星标、下载量、社区评分）一律未采信；本文所有事实均以本机安装的技能原文与官方分发渠道为准，引文可自行安装后比对。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。