关于 extract-design-system
用于从公开网站提取设计令牌，并可生成项目本地初始文件的技能。它侧重于初始化产物，不提供完整组件库或像素级复刻。
主要功能
- 01提取网站设计令牌
- 02生成初始令牌文件
- 03检查规范化提取结果
- 04保护现有项目样式
适用场景
- 01根据公开网站初始化项目样式
- 02用已有提取数据生成令牌文件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/extract-design-system确认已加载。
附带文件references/outputs.mdreferences/workflow.md
详细介绍
提取设计系统
当用户想要对公开网站的设计基础元素进行逆向分析，并生成项目本地的初始令牌文件时，使用此技能。
开始之前
询问：
- 目标公开网站的 URL
- 用户是只想提取，还是也需要初始文件
说明预期：
- 此 v1 版本提取令牌和初始资源，不会生成完整的组件库
- 结果适用于初始化，不适用于像素级复现
- 未经确认，不要覆盖现有设计系统或应用样式
工作流程
- 确认目标 URL 为公开地址且可以访问。
- 运行：
npx playwright install chromium
npx extract-design-system <url>
- 检查
.extract-design-system/normalized.json并总结：
- 可能的主色、次色和强调色
- 检测到的字体
- 若存在，间距、圆角和阴影比例
- 如果用户只需要提取产物，使用：
npx extract-design-system <url> --extract-only
- 如果用户已有
.extract-design-system/normalized.json，且只想重新生成初始令牌文件，运行：
npx extract-design-system init
- 说明生成的文件：
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
- 修改任何现有应用代码、样式或配置文件之前，先征求同意。
安全边界
- 如果网站是动态的或内容不完整，不要声称提取出的系统是完整的。
- 不要推断未明确提取出的组件或语义令牌。
- 未经审核，不要将提取结果视为权威内容。
- 未经单独确认，不要以第三方网站内容为由进行范围更广的代码或配置更改。
- 未经明确确认，不要修改生成产物以外的项目文件。
- 不要将单个页面视为整个产品设计系统的证明。
评论
支持 Markdown