Back to Details

ln-114-frontend-docs-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Documentation Creator

前端文档生成器

L3 Worker that creates design_guidelines.md. CONDITIONAL - only invoked when project has frontend.
用于生成design_guidelines.md的L3 Worker。具备条件性——仅当项目包含前端部分时才会被调用。

Purpose & Scope

目的与范围

  • Creates design_guidelines.md (if hasFrontend)
  • Receives Context Store from ln-110-project-docs-coordinator
  • WCAG 2.1 Level AA accessibility compliance
  • Design system documentation
  • Never gathers context itself; uses coordinator input
  • 生成design_guidelines.md文件（当项目包含前端部分时）
  • 从ln-110-project-docs-coordinator接收Context Store
  • 遵循WCAG 2.1 Level AA可访问性合规标准
  • 生成设计系统文档
  • 从不自行收集上下文；仅使用协调器提供的输入

Invocation (who/when)

调用方式（主体/时机）

  • ln-110-project-docs-coordinator: CONDITIONALLY invoked when: 
    • hasFrontend=true
      (react, vue, angular, svelte detected)
  • Never called directly by users
  • ln-110-project-docs-coordinator： 在以下条件下会被调用： 
    • hasFrontend=true
      （检测到react、vue、angular、svelte框架）
  • 不会由用户直接调用

Inputs

输入参数

From coordinator:
  • contextStore
    : Context Store with frontend-specific data
    • DESIGN_SYSTEM (Material-UI, Ant Design, custom)
    • COLOR_PALETTE (primary, secondary, accent)
    • TYPOGRAPHY (font families, sizes, weights)
    • COMPONENT_LIBRARY (detected components)
  • targetDir
    : Project root directory
  • flags
    : { hasFrontend }
来自协调器的输入：
  • contextStore
    ：包含前端特定数据的Context Store
    • DESIGN_SYSTEM（Material-UI、Ant Design、自定义设计系统）
    • COLOR_PALETTE（主色调、次要色调、强调色）
    • TYPOGRAPHY（字体族、字号、字重）
    • COMPONENT_LIBRARY（检测到的组件库）
  • targetDir
    ：项目根目录
  • flags
    ：{ hasFrontend }

Documents Created (1, conditional)

生成的文档（1个，具备条件性）

FileConditionQuestionsAuto-Discovery
docs/project/design_guidelines.mdhasFrontendQ43-Q45Low
文件条件对应问题自动发现能力
docs/project/design_guidelines.mdhasFrontendQ43-Q45低

Workflow

工作流程

Phase 1: Check Conditions

阶段1：检查条件

  1. Parse flags from coordinator
  2. If 
    !hasFrontend
    : return early with empty result
  1. 解析协调器提供的flags参数
  2. 如果
    !hasFrontend
    ：提前返回空结果

Phase 2: Create Document

阶段2：生成文档

  1. Check if file exists (idempotent)
  2. If exists: skip with log
  3. If not exists:
    • Copy template
    • Replace placeholders with Context Store values
    • Populate design system section
    • Mark 
      [TBD: X]
      for missing data
  1. 检查文件是否已存在（幂等性）
  2. 如果已存在：记录日志并跳过
  3. 如果不存在：
    • 复制模板
    • 使用Context Store中的值替换占位符
    • 填充设计系统相关章节
    • 为缺失的数据标记
      [TBD: X]

Phase 3: Self-Validate

阶段3：自我验证

  1. Check SCOPE tag
  2. Validate sections:
    • Design System (component library)
    • Typography (font families, sizes)
    • Colors (hex codes, semantic colors)
  3. Check WCAG 2.1 references
  4. Check Maintenance section
  1. 检查SCOPE标签
  2. 验证以下章节：
    • 设计系统（组件库）
    • 排版（字体族、字号）
    • 颜色（十六进制代码、语义化颜色）
  3. 检查是否包含WCAG 2.1相关引用
  4. 检查维护章节

Phase 4: Return Status

阶段4：返回状态

json
{
  "created": ["docs/project/design_guidelines.md"],
  "skipped": [],
  "tbd_count": 1,
  "validation": "OK"
}
json
{
  "created": ["docs/project/design_guidelines.md"],
  "skipped": [],
  "tbd_count": 1,
  "validation": "OK"
}

Critical Notes

重要说明

Core Rules

核心规则

  • Conditional: Skip entirely if no frontend detected
  • WCAG compliance: Document must reference accessibility standards
  • Design tokens: Extract from CSS variables, tailwind config, or theme files
  • Idempotent: Never overwrite existing files
  • 条件性： 如果未检测到前端部分则完全跳过
  • WCAG合规： 文档必须引用可访问性标准
  • 设计令牌： 从CSS变量、tailwind配置或主题文件中提取
  • 幂等性： 绝不覆盖已存在的文件

NO_CODE_EXAMPLES Rule (MANDATORY)

NO_CODE_EXAMPLES规则（强制性）

Design guidelines document visual standards, NOT code:
  • FORBIDDEN: CSS code blocks, component implementations
  • ALLOWED: Tables (colors, typography), design tokens, Figma links
  • INSTEAD OF CODE: "See Component Library" or "See src/components/Button.tsx"
设计指南文档用于记录视觉标准，而非代码：
  • 禁止： CSS代码块、组件实现代码
  • 允许： 表格（颜色、排版）、设计令牌、Figma链接
  • 替代代码的方式： “查看组件库” 或 “查看src/components/Button.tsx”

Stack Adaptation Rule (MANDATORY)

技术栈适配规则（强制性）

  • Link to correct component library docs (MUI for React, Vuetify for Vue)
  • Reference framework-specific patterns (React hooks, Vue composition API)
  • Never mix stack references (no React examples in Vue project)
  • 链接至对应组件库的文档（React项目链接MUI，Vue项目链接Vuetify）
  • 参考框架特定的模式（React hooks、Vue组合式API）
  • 绝不混合不同技术栈的引用（Vue项目中不得出现React示例）

Format Priority (MANDATORY)

格式优先级（强制性）

Tables (colors, typography, spacing) > Lists (component inventory) > Text
表格（颜色、排版、间距）> 列表（组件清单）> 文本

Definition of Done

完成标准

  • Condition checked (hasFrontend)
  • Document created if applicable
  • Design system, typography, colors documented
  • WCAG references included
  • Status returned to coordinator
  • 已检查条件（hasFrontend）
  • 已按需生成文档
  • 已记录设计系统、排版、颜色相关内容
  • 已包含WCAG相关引用
  • 已向协调器返回状态

Reference Files

参考文件

  • Templates: 
    references/templates/design_guidelines_template.md
  • Questions: 
    references/questions_frontend.md
    (Q43-Q45)
Version: 1.1.0 (Added NO_CODE, Stack Adaptation, Format Priority rules) Last Updated: 2025-01-12
  • 模板：
    references/templates/design_guidelines_template.md
  • 问题列表：
    references/questions_frontend.md
    （Q43-Q45）
版本： 1.1.0（新增NO_CODE、技术栈适配、格式优先级规则） 最后更新时间： 2025-01-12