Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.