安装热度榜

extract-design-system

从现有代码库中提取设计令牌、组件和模式,并生成项目本地的初始令牌文件。

分类
设计与 UI
榜单排名
#332
安装量
129,831

它能做什么

中文摘要

从现有代码库中提取设计令牌、组件和模式,并生成项目本地的初始令牌文件。

为什么推荐

推荐理由

适合需要逆向工程公开网站设计元素并快速生成初始令牌文件的场景,操作流程清晰,且强调安全边界。

什么时候用

适用场景

  • 从公开网站逆向提取颜色、字体、间距等设计原语
  • 为项目生成本地化设计令牌初始文件
  • 对现有设计系统进行非侵入式分析或初始化

使用前先看

主要亮点

  • 01

    通过 npx extract-design-system <url> 提取设计令牌及初始文件

  • 02

    支持仅提取产物(--extract-only)或重新生成令牌文件(init)

  • 03

    生成 raw.json、normalized.json、tokens.json、tokens.css 等输出文件

  • 04

    工作流要求先确认目标 URL 公开且可访问,并明确提取目标

  • 05

    明确限定 v1 不提取完整组件库,结果适用于初始化而非像素级复刻

原始文档

原文摘录

Extract Design System Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files. Before You Start