Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
复制下面这句话,粘贴给 Claude Code、Codex、Cursor 等 AI 编程工具,它会读取安装说明并在你确认后完成安装。
请阅读 https://ai.atlankj.com/install/asset/gh-design-extract-34bc9d07eb3a ,按照其中的说明把「design-extract」安装到你(当前 AI 工具)中。执行前先告诉我将运行的命令和写入的位置,等我确认。
查看 AI 将读取的安装说明正在读取 GitHub 原文…
内容来自 GitHub 原始文件,由原作者维护。在 GitHub 查看
Spec §10 / §21.3.2: tokens scattered across a repo's CSS / theme
files / Tailwind config / styled-components helpers / SCSS partials
need to be lifted into one bag before token-map can crosswalk
them onto the active OD design system. This atom does the lifting;
the input shape is intentionally generic so the same atom serves
both code-migration and figma-migration when fed different sources.
code/index.json from code-import (code-migration), ORfigma/tree.json from figma-extract (figma-migration), ORproject-cwd/
└── code/
└── tokens.json # { colors[], typography[], spacing[], radius[], shadow[] }
Each token entry carries:
{
"kind": "color",
"name": "primary-500", // optional source name
"value": "#5b8def", // canonical value
"sources": ["styles/global.css:42", "tailwind.config.js:24"],
"usage": ["Header.tsx", "Footer.tsx"]
}
sources[] and usage[] are the audit trail token-map.unmatched.json
references when a target token can't be found.
The atom completes when code/tokens.json exists. Empty token bags
emit a warning event but do not abort — token-map handles the
empty case by skipping its mapping pass.
color: '#fff') are
tokens for this atom's purposes; record them with kind:'color'
and a synthetic name so they don't disappear into the noise.bg-blue-500 and bg-blue-600 as one
token.Implemented by the daemon runner in
apps/daemon/src/plugins/atoms/design-extract.ts. It scans the indexed
source files, extracts CSS, Tailwind, and JavaScript token evidence, and
writes code/tokens.json.