cn_DESIGN.md 样式提取器（Chrome 扩展）

这是一个中文版本的 Chrome 扩展，可以从当前网页中提取样式和页面信号，并生成 DESIGN.md 或 SKILL.md 文件。生成结果可用于 Claude Code、Codex、Cursor 等 AI 编程工具，帮助它们按照目标网页的设计系统风格生成界面。

生成文件基于开源的 TypeUI DESIGN.md 结构。

快速开始

在 Chrome 中加载扩展：

1. 打开 chrome://extensions
2. 开启开发者模式
3. 点击加载已解压的扩展程序
4. 选择本项目目录

可用操作

操作	说明
自动提取	从当前标签页读取样式信号，包括字体、颜色、间距、圆角、阴影和动效。
生成 DESIGN.md	根据提取结果生成中文设计系统文档。
生成 SKILL.md	根据提取结果生成可供 AI Agent 使用的中文技能文件。
重新提取	针对当前页面状态重新执行提取。
下载	将生成结果保存为 DESIGN.md 或 SKILL.md。
复制	将生成结果复制到剪贴板。
快速安装	将 SKILL.md 安装到 Claude Code、Codex 或 Cursor 的项目目录。
生成说明	展示生成流程、抽取信号、token 覆盖和校验结果。

生成文件结构

生成的 Markdown 默认包含以下中文章节：

章节	作用
使命	定义设计系统目标和适用产品体验。
品牌	记录产品/品牌、URL、目标用户和产品界面。
样式基础	列出推断得到的视觉 token 和基础样式。
可访问性	应用 WCAG 2.2 AA 要求和交互约束。
写作语气	规定面向实现的文档表达方式。
规则：必须	列出必须遵守的实现规则。
规则：禁止	列出反模式和禁止行为。
指南编写流程	定义编写组件/设计指南的顺序。
必需输出结构	约束后续设计文档的输出结构。
组件规则预期	要求补充组件状态、交互、响应式和边界场景。
质量门槛	添加可测试的一致性与可访问性检查。

本地开发

运行测试：

node tests/run-tests.mjs

说明

• 扩展通过 DOM 和 computed styles 提取信号，不做截图识别或像素级还原。
• token 名称保持英文，例如 color.text.primary、font.size.md，方便在代码和工具中稳定引用。
• 输出正文、插件界面、帮助说明和校验提示均为中文。

许可证

本项目基于 MIT License 开源。

赞助

感谢支持开源工作的赞助方。

Skybridge