Extract Design System

arvindrk/extract-design-system

从公开网站提取颜色、字体等设计基础元素,生成初始 JSON 与 CSS 令牌。

最近更新于:

查看 GitHub 项目
npx skills add arvindrk/extract-design-system
287Stars31Forks仓库最近推送

安装与使用 Extract Design System

  1. 安装 Skill

    在项目中运行上游安装命令,然后依照作者的安装说明和下方使用条件继续。

    npx skills add arvindrk/extract-design-system
  2. 向 Agent 提供任务

    提供相关文件、背景与约束。例如:

    从这个公开网址提取颜色、字体等可用设计令牌,生成 JSON 与 CSS 起点。

关于这个 Skill

从公开网站提取颜色、字体等设计基础元素,生成初始 JSON 与 CSS 令牌。

为什么推荐

参考现有网站的视觉基础,生成项目起步令牌。

适合用来做什么

  • 参考现有网站的视觉基础,生成项目起步令牌。

使用方式与边界

提取结果只是起点,不是完整组件库,也不能保证像素级还原。

替代方案与相关工作流

Create DESIGN.md:设计规范文档

需要从公开网站生成 JSON 和 CSS 起步令牌时使用本 Skill;需要根据项目或渲染页面整理 DESIGN.md 时可考虑 Create DESIGN.md。两者输出不同。

使用前需要了解

  • 需要 Node.js、提取 CLI 和 Playwright Chromium,并且目标网站可访问。

资料与来源

原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。