安装与使用 Extract Design System
安装 Skill
在项目中运行上游安装命令,然后依照作者的安装说明和下方使用条件继续。
npx skills add arvindrk/extract-design-system向 Agent 提供任务
提供相关文件、背景与约束。例如:
从这个公开网址提取颜色、字体等可用设计令牌,生成 JSON 与 CSS 起点。
关于这个 Skill
从公开网站提取颜色、字体等设计基础元素,生成初始 JSON 与 CSS 令牌。
为什么推荐
参考现有网站的视觉基础,生成项目起步令牌。
适合用来做什么
- 参考现有网站的视觉基础,生成项目起步令牌。
使用方式与边界
提取结果只是起点,不是完整组件库,也不能保证像素级还原。
替代方案与相关工作流
Create DESIGN.md:设计规范文档
需要从公开网站生成 JSON 和 CSS 起步令牌时使用本 Skill;需要根据项目或渲染页面整理 DESIGN.md 时可考虑 Create DESIGN.md。两者输出不同。
使用前需要了解
- 需要 Node.js、提取 CLI 和 Playwright Chromium,并且目标网站可访问。
资料与来源
原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。