開発
#design
design-extract
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=nexu-io-open-design-plugins-official-atoms-design-extract-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name design-extract description Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes. od {"scenario":"code-migration","mode":"extract"} Design extract 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. Inputs code/index.json from code-import (code-migration), OR figma/tree.json from figma-extract (figma-migration), OR A folder of screenshot images (tune-collab quick-tune flows). Output project-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. Convergence 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. Anti-patterns the prompt fragment forbids Hard-coded hex values inside JSX literals ( 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. Tailwind utility scans must dedupe palette references against the active theme — never list bg-blue-500 and bg-blue-600 as one token. Status 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 .
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
