用途：本技能用于对已实现的 SaaS 仪表盘、管理面板或内部工具做取证式视觉系统文档化，输出结构化 Markdown 与已解析的设计令牌，而非生成的 UI 代码。
适用请求：从面板 URL 提取设计系统；从代码库、仓库或 HTML 快照中记录设计令牌与视觉体系；从 globals.css、@theme、tailwind.config.* 或令牌文件记录颜色、排版、间距、圆角、阴影；记录真实实现中的侧边栏、表格、命令面板、表单布局等具名组件；依据实现做颜色、间距或无障碍一致性审计；记录深色模式令牌与模式切换；交接设计系统供其他团队或代码库匹配既有外观。
不适用范围：要求构建、移植、克隆、恢复或交付可运行 UI（应转 convert-url-to-nextjs）；要求重新设计、改样式或给出推测性 UX 建议（本技能只记录现状，不推荐改动）；来源仅为 Figma、截图或无可检查实现（无 DOM、无 CSS、无代码）；目标为营销/宣传站点而非 SaaS/面板/管理产品。
主要规则：只记录不重建，产物仅放 .design-soul/ 下的 .md；把每条令牌链解析到最终字面值，如 bg-primary → var(--primary) → oklch(0.205 0 0)；遵守范围，只记录用户指定的部分；缺失即证据，写明“Hover: not implemented”等，不得虚构状态；区分主流模式与噪声，记录不一致并附文件引用；代码来源优先于截图，DOM/计算样式次之，截图仅验证布局。
使用方式：先在目标代码库根目录 .design-soul/ 下输出文档，默认交付物包括 system.md、编号基础文档、每个组件一份编号文档、INDEX.md、_summary.md；可用 references/documentation/output-format.md、system-template.md、component-template.md 中的模板与结构。流程为：框定范围，检测样式栈（Tailwind v4 的 @import "tailwindcss" 与 @theme、v3 的 tailwind.config.*、shadcn/ui、CVA、CSS 入口、离线快照模式），采集证据（可用 run-agent-browser 捕获 DOM、计算样式、截图与状态，证据存 .design-soul/evidence/；可用 scripts/capture-css-tokens.md、scripts/audit-spacing-scale.md 枚举令牌与间距用量），提取基础（颜色、排版、间距、阴影、圆角、动画、状态约定，面板还需侧边栏覆盖、图表色板、密度区、表格/等宽字体），提取组件与模式（解剖、变体、尺寸、状态、过渡、深色差异、组合），翻译令牌，交接前按 references/quality-checklist.md 验证，最后打包输出。
限制：不生成 .tokens.json、Style Dictionary 或 Tokens Studio 文件，除非明确要求；不生成构建指令；证据不足时查邻近依据并显式记录缺口；代码库过大时拆分，不静默扩大范围；跨文件值冲突时记录主流模式并列出例外与来源；深色模式或状态不存在时如实说明。