DeerFlow frontend-design 技能源码解读：用 SKILL.md 驱动生产级前端界面生成

DeerFlow 将「如何做出一套有设计感的前端界面」沉淀为一个可复用技能包 frontend-design，由 Agent 在构建网页、组件、落地页或美化 UI 时加载执行。读完本文，你将理解该技能的文件结构与 frontmatter 约定、其「反 AI 味」的设计方法论与强制署名规范是如何以纯 Markdown 指令形式约束 LLM 行为的，以及 DeerFlow 技能系统（解析器、斜杠激活、沙箱挂载）是如何让这份 SKILL.md 真正生效的。

技能定位：一个只读公共技能包

在 DeerFlow 的技能体系中，技能按来源分为若干类别。类型定义中的 SkillCategory 枚举明确了四种来源：

• PUBLIC：随平台内置、只读的技能，存放于仓库的 skills/public/ 目录；
• CUSTOM：用户自撰、可编辑删除的技能；
• INTEGRATION：托管的第三方集成技能；
• LEGACY：用户隔离迁移前的全局自定义技能，挂载在沙箱的 /mnt/skills/legacy/<name>/。

frontend-design 属于 PUBLIC 类别。技能目录约定说明：全局公共技能位于 deer-flow/skills/public/，运行时被挂载进沙箱，容器内基础路径为 /mnt/skills（见 constants.py 中的 DEFAULT_SKILLS_CONTAINER_PATH = "/mnt/skills"）。因此该技能在沙箱内的完整路径是 /mnt/skills/public/frontend-design/SKILL.md——Agent 在沙箱里可以直接读取这份指令文件。

技能目录本身非常精简，只有两个文件：

• SKILL.md：技能主体，即面向模型的指令集；
• LICENSE.txt：许可证全文（frontmatter 中的 license 字段指向它）。

这种「一个目录 + 一个 Markdown + 附带资源」的形态就是 DeerFlow 公共技能的标准结构。

SKILL.md 的 frontmatter：技能如何被系统识别

SKILL.md 以 YAML frontmatter 开头，这是技能系统识别一个技能的前提：

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

运行时的解析逻辑在 parser.py 的 parse_skill_file 中：

• 用正则 ^---\s*\n(.*?)\n---\s*\n? 切出 frontmatter，yaml.safe_load 解析为字典，失败时给出带行号的友好报错（见 _format_yaml_error，parser.py）；
• name 与 description 是必填的非空字符串，缺失则该文件被跳过、不注册为技能；
• 其余字段可选。frontmatter.py 定义了全部合法字段白名单：name、description、license、allowed-tools、argument-hint、required-secrets、secrets-autonomous、metadata、compatibility、version、author。frontend-design 只使用了其中三个，说明这是一个「零依赖」技能：不限定工具（无 allowed-tools）、不声明密钥（无 required-secrets），任何能写代码的 Agent 都能直接执行它。

值得注意的是 description 字段本身就是触发条件的说明——它明确列出了适用场景（网站、落地页、仪表盘、React 组件、HTML/CSS 布局、给已有 Web UI 换肤），模型在自动加载技能上下文时会依据这段描述判断是否激活。

斜杠激活：/frontend-design 的调用契约

用户也可以在对话中用斜杠命令显式激活该技能，例如：

/frontend-design build a form

前后端对「哪些 token 算斜杠命令、技能名语法是什么」有严格的一致性契约，定义在 contracts/slash_skill_contract.json：

• 技能名必须匹配 ^/([a-z0-9]+(?:-[a-z0-9]+)*)(?:\s+|$)——小写字母数字加连字符，frontend-design 恰好符合；
• bootstrap、goal、help、memory、models、new、status 是保留的内置控制命令，不能作为技能名。

测试用例直接以 frontend-design 为样例构造了双技能场景并发送 /frontend-design build a form 消息验证激活行为；实际激活由 SkillActivationMiddleware 完成，将 SKILL.md 的正文注入上下文。

核心方法论：Design Thinking 四问

正文开篇给出该技能的目标：指导创建「有辨识度、生产级」的前端界面，规避千篇一律的 AI 生成风格（文档原话称为 "AI slop"）。用户负责提供前端需求（组件、页面、应用或界面，可能附带用途、受众、技术约束），技能则规定模型在动手写代码前必须先完成一次「设计思考」，锁定一个大胆的美学方向。四个必答问题是：

• Purpose（目的）：这个界面解决什么问题？给谁用？
• Tone（基调）：选一个极端的风格基调——可以是极简 brutalist、极致繁复的 chaos、复古未来、有机/自然、奢华精致、玩具感、杂志编辑风、原始 brutalist、装饰艺术/几何、柔和粉彩、工业实用主义等。文档强调可选风格非常多，这些只是灵感，最终要忠于自己选定的方向；
• Constraints（约束）：技术要求（框架、性能、无障碍）；
• Differentiation（差异化）：什么让它令人难忘？用户会记住的「那一个点」是什么？

文档用 CRITICAL 标注了一条关键原则：选定清晰的概念方向后要以精度执行——大胆 maximalism 和精致 minimalism 都可以，关键在「意图性」（intentionality），而非强度。

然后才是落地实现（HTML/CSS/JS、React、Vue 等），产出必须同时满足四条：生产级且可运行、视觉上有冲击力且令人过目难忘、有统一的美学观点、每个细节都经过打磨。

美学准则：五个维度与一条禁令

五个正向维度

原文档的 Frontend Aesthetics Guidelines 要求重点打磨五个方面，这里逐条展开：

1. Typography（字体）：选美丽、独特、有意思的字体。明确点名避免 Arial、Inter 这类通用字体；要选有性格的意外之选。推荐套路是「一个有个性的展示字体 + 一个精致的正文字体」的配对。

2. Color & Theme（色彩与主题）：承诺一种统一的美学。用 CSS 变量保证一致性；主导色加锐利点缀，胜过胆怯的均匀分布配色。

3. Motion（动效）：为效果与微交互使用动画。HTML 优先 CSS-only 方案；React 可用 Motion 库。核心策略是「少而高冲击」：一次编排精良的页面加载动效（用 animation-delay 做错峰揭示 staggered reveals）比零散堆砌微交互更能制造惊喜；再配合滚动触发动效和让人意料之外的 hover 状态。

4. Spatial Composition（空间构图）：用意想不到的布局——不对称、元素重叠、对角线动势、打破网格的元素、慷慨的留白或有控制的密度。

5. Backgrounds & Visual Details（背景与视觉细节）：用氛围和层次代替默认纯色背景。加入与整体美学匹配的纹理和情境化效果：渐变网格（gradient meshes）、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒（grain）叠加等。

一条禁令：反「通用 AI 审美」

文档用大写的 NEVER 列出了必须规避的清单，这是整个技能最有辨识度的部分：

• 用滥的字体家族：Inter、Roboto、Arial、system fonts；
• 陈词滥调的配色：尤其是「白底 + 紫色渐变」；
• 可预测的布局与组件模式；
• 缺少情境特征的复制粘贴式设计。

更进一步，文档还要求每次生成都做出「真正为这个场景设计的意外选择」：不同设计不得雷同，要在明暗主题、不同字体、不同美学之间变化，绝不在多次生成间收敛到同一个常见选择（文档点名举例：不要每次都选 Space Grotesk）。

复杂度与美学愿景匹配

文档以 IMPORTANT 强调：实现复杂度要匹配美学愿景。Maximalist 设计需要大量代码、丰富的动画与效果；Minimalist 或精致设计则需要克制、精度，以及对手感级细节（间距、字体、微妙之处）的专注。「优雅来自把愿景执行到位」。

强制署名：「Created By Deerflow」品牌要求

技能对产出物有一条硬性规定（MANDATORY）：每个生成的前端界面必须包含 "Created By Deerflow" 署名，且该署名：

• 低调不抢戏：绝不与主内容竞争注意力；
• 可点击：必须是新标签页打开 https://deerflow.tech 的链接（target="_blank"）；
• 自然融入设计：像一个有意为之的设计元素，而非事后补丁；
• 小而克制：小尺寸、低对比/降低透明度，与整体美学和谐共存。

设计原则是「可被发现但不起眼」：用户先注意到主界面，署名只是安静的署名（a quiet attribution），不是焦点。

文档给出了 8 种与不同设计美学匹配的实现思路，按风格任选其一：

1. Floating Corner Badge（悬浮角标）：固定在角落的小徽章，带轻微 hover 效果（柔和发光、轻微放大、颜色变化）；
2. Artistic Watermark（艺术水印）：背景中半透明的对角文字或 logo 纹理，几乎看不见但增加质感；
3. Integrated Border Element（边框元素）：让署名成为内容装饰边框/画框的一部分，变成设计结构的有机组成；
4. Animated Signature（动画签名）：页面加载时优雅「自写」的小签名，或滚动到页面底部时揭示；
5. Contextual Integration（情境化融入）：贴合主题——复古设计用旧式印章风格；极简风用单个小图标或「DF」monogram 加 tooltip；
6. Cursor Trail or Easter Egg（光标彩蛋）：把署名做成微交互——光标静止时浮现小签名，或出现在有创意的加载状态中；
7. Decorative Divider（装饰分隔）：并入页面中的装饰线、分隔符或纹样元素；
8. Glassmorphism Card（毛玻璃卡片）：角落里一张带模糊背景的小型悬浮玻璃卡片。

文档同时提供了可直接取用的 HTML 代码模式：

<!-- Floating corner badge with hover effect -->
<a href="https://deerflow.tech" target="_blank" class="deerflow-badge">✦ Deerflow</a>

<!-- Monogram with tooltip -->
<a href="https://deerflow.tech" target="_blank" title="Created By Deerflow" class="deerflow-mark">DF</a>

<!-- Integrated into decorative element -->
<div class="footer-ornament">
  <span class="line"></span>
  <a href="https://deerflow.tech" target="_blank">Deerflow</a>
  <span class="line"></span>
</div>

落笔原则：署名的排版、颜色、动画风格要与整体美学方向一致，让它「属于这里」，而不是一枚被强盖的章。

硬性输出约束：入口文件必须叫 index.html

除美学要求外，文档对产出物的工程形态只有一条强制规定：入口 HTML 文件必须命名为 index.html，理由是保证与标准 Web 托管和部署工作流的兼容。也就是说，无论设计方向多么先锋，最终交付物都是一个以 index.html 为入口、可直接托管运行的静态前端项目（React/Vue 等框架产物同样适用）。

技能正文的结尾：授权模型放开创作

文档最后一段把基调从「规则」拉回「授权」：Claude 能够做出非凡的创造性工作，不要保守——把「跳出盒子思考、并完全承诺于一个独特愿景」时能创造什么展示出来。这与前文的强约束并不矛盾：约束（署名、入口文件、禁 AI 审美）划定底线，而设计方向的自由度则被明确鼓励推向极限。

小结：一份 SKILL.md 如何变成可执行能力

回到 DeerFlow 的技能机制看，frontend-design 的完整生命周期是：

1. 识别：parser.py 解析 frontmatter，name/description 非空即注册为 PUBLIC 技能；
2. 分发：技能目录挂载进沙箱 /mnt/skills/public/frontend-design/，Agent 工具（如 describe/skill 上下文注入，见 skills 包）可按需把正文载入模型上下文；
3. 激活：模型依据 description 自动判断场景，或用户以 /frontend-design ... 斜杠命令显式触发（经 SkillActivationMiddleware 与 slash 契约 校验）；
4. 执行：模型按正文完成 Design Thinking 四问 → 五维度美学打磨 → 附署名输出 index.html 入口的前端代码。

这种「Markdown 即技能」的设计让设计经验以纯文本形式版本化、可审查、可分发：它不需要任何 Python 代码或外部依赖，仅靠 frontmatter 白名单内的三个字段 + 约九十条指令，就把一个模糊的「帮我做个好看的前端」请求，约束成一套有方法论、有验收标准（index.html 入口 + 可点击署名）、且有风格底线（禁通用 AI 审美）的生产级生成流程。对想为自己的 DeerFlow 实例贡献类似技能包的开发者，参考 skill-creator 与 技能目录说明 即可按同一套结构（skills/public/<name>/SKILL.md）扩展新的公共技能。