SuperAPI AI 工具集

ln-114-frontend-docs-creator

前端与建站

查看项目

更新于 10-15 14:51

技能介绍

用途

该技能是一个 L3 工作单元(Worker),用于创建 design_guidelines.md 设计指南文档。它是条件性技能,仅在项目存在前端时被调用。其产出文档供下游的 ln-401(Frontend Guard)和 ln-402(Frontend Review Checks)加载,用于针对实现进行运行时设计验证。

主要能力

  • 创建 docs/project/design_guidelines.md(当 hasFrontend 为真时)
  • 覆盖 WCAG 2.1 Level AA 无障碍合规要求
  • 记录设计系统文档
  • 从协调器接收 Context Store,自身不收集上下文

使用方式

该技能从不被用户直接调用,而是由 ln-110-project-docs-coordinator 在 hasFrontend=true(检测到 react、vue、angular、svelte)时条件性调用。

输入来自协调器:

  • contextStore:包含前端特定数据的 Context Store,包括 DESIGN_SYSTEM(Material-UI、Ant Design、自定义)、COLOR_PALETTE(主色、辅色、强调色)、TYPOGRAPHY(字体族、字号、字重)、COMPONENT_LIBRARY(检测到的组件)
  • targetDir:项目根目录
  • flags:{ hasFrontend }

强制读取:references/docs_quality_contract.md 和 references/markdown_read_protocol.md。可选规则目录:仅在需要精确规则 ID、路径矩阵或允许的占位符例外时加载 references/docs_quality_rules.json。

工作流程:

  1. 检查条件:解析协调器传入的 flags,若 !hasFrontend 则提前返回空结果
  2. 创建文档:检查文件是否存在(幂等),若存在则跳过并记录日志;若不存在则复制模板、用 Context Store 值替换占位符、保留模板中的共享开头契约和标准顶部章节、填充设计系统章节,且不在已发布的前端文档中留下模板标记。若数据缺失,则省略该声明或使用简洁的中性回退,但不输出 [TBD: ...]
  3. 自验证:检查 SCOPE 标签和元数据标记;检查必需的顶部章节(Quick Navigation、Agent Entry、Maintenance);验证章节(设计系统/组件库、排版/字体族与字号、颜色/十六进制码与语义色);检查 WCAG 2.1 引用;检查文档质量契约合规性(无禁止占位符、无泄漏的模板元数据、有效的文档类型/角色)
  4. 返回状态:返回包含 created_files、skipped_files、quality_inputs、validation_status 的 JSON 结构

适用场景

适用于存在前端(react、vue、angular、svelte)的项目,需要生成设计指南文档以支持运行时设计验证的场景。

限制与规则

  • 条件性:若未检测到前端则完全跳过
  • WCAG 合规:文档必须引用无障碍标准
  • 设计令牌:从 CSS 变量、tailwind 配置或主题文件中提取
  • 幂等:绝不覆盖已有文件
  • 可发布输出:前端文档中不得出现 [TBD: ...]、TODO 或泄漏的模板元数据
  • NO_CODE_EXAMPLES 规则(强制):设计指南记录视觉标准而非代码。禁止 CSS 代码块和组件实现;允许表格(颜色、排版)、设计令牌、Figma 链接;以“See Component Library”或“See src/components/Button.tsx”替代代码
  • Stack Adaptation 规则(强制):链接到正确的组件库文档(React 用 MUI,Vue 用 Vuetify);引用框架特定模式(React hooks、Vue composition API);绝不混用技术栈引用
  • Format Priority 规则(强制):表格(颜色、排版、间距)> 列表(组件清单)> 文本

运行时摘要产物

强制读取 references/docs_generation_summary_contract.md。接受可选的 summaryArtifactPath。摘要类型为 docs-generation。必需负载语义包括:worker = "ln-114"、status、created_files、skipped_files、quality_inputs、validation_status、warnings。将摘要写入提供的产物路径,或在结构化输出中返回相同信封。

完成定义

  • 已检查条件(hasFrontend)
  • 如适用则已创建文档
  • 已记录设计系统、排版、颜色
  • 已包含 WCAG 引用
  • 已验证实际性:所有文档事实与当前代码匹配(路径、函数、API、配置存在且准确)
  • 已返回状态

参考文件

  • 模板:references/templates/design_guidelines_template.md
  • 问题:references/questions_frontend.md(Q43-Q45)
  • 版本:1.1.0
  • 最后更新:2025-01-12