Claude-skill-registry design-ssot

[デザイン] 1.（Figma起点）SSOT（tokens/components/context/assets）を生成

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-ssot" ~/.claude/skills/majiayu000-claude-skill-registry-design-ssot && rm -rf "$T"

manifest: skills/data/design-ssot/SKILL.md

[デザイン] 1.（Figma起点）SSOT（tokens/components/context/assets）を生成

コマンド: /design-ssot $FIGMA_REFS

Figma MCPから設計情報を抽出し、AI/人間が参照するSSOTを作る。実装はしない。

いつ使う？（位置づけ）

Figma（Dev Mode）を根拠に、後続でブレない SSOT（tokens/components/context/assets） を確立したいとき
会話起点なら
```
/design-mock
```
、Figma起点ならこの
```
/design-ssot
```
から始める

次に何をする？

実装に進む →

/design-ui

→

/design-components

→

/design-assemble

ドキュメント/共有用の静的HTMLが欲しい →
```
/design-html
```
（任意）

共通前提（参照）

口調・出力規約・差分出力の方針は
```
CLAUDE.md
```
に従う。
```
doc/input/rdd.md
```
を読み、該当する
```
.claude/skills/*
```
を適用して判断軸を揃える（例:
```
ui-designer
```
/
```
usability-psychologist
```
）。
詳細運用（サンプル運用/依存評価補助/ADR-lite）は
```
doc/guide/ai_guidelines.md
```
を参照。

見た目の基準（ビューポート）について

まず
```
doc/input/rdd.md
```
の「ターゲット表示環境（事実）」を参照し、そのビューポートを基準にSSOTを作る
未記入の場合は、以下を 推奨デフォルトとして仮置きし、出力やレビューの前提に明記する：
- desktop: 1440x900
- mobile: 390x844
- tablet: 834x1194

事前チェック（必須）：Figma MCPが「使える」状態か

/design-ssot

は Figma MCPが利用可能であることが前提。最初に必ず以下を確認してから進める。

1) Claude Code側：MCP登録の確認

```
claude mcp list
```
を確認し、
```
figma
```
が登録されていること

2) 接続先：Figma MCP（Dev Mode）の到達確認

Figma MCPのエンドポイント（通常
```
http://localhost:3845/mcp
```
）に到達できること
到達できない場合は、MCPが未起動/未設定/権限不足の可能性が高い（推測でSSOT生成を続けない）

3) うまくいかないとき（ユーザーにお願いする手順）

AI側で「MCPが無い/設定されていない」など見当違いな推測をしないために、まず以下をユーザーに依頼する： 0.

/mcp

でFigmaの再接続を確認する（推奨）

```
/mcp
```
を実行
一覧から figma
ツールを選ぶ
Reconnect（再接続）を実行
再度
```
figma
```
ツールを選んだときに "View tools" が表示されている状態になっていることを確認する
上記が満たせない場合は、以降の手順へ進まず停止（接続/権限/起動状態の問題の可能性が高い）

Figma Desktop アプリで Dev Mode / MCP サーバーを有効化する（Figma公式手順に従う）
それでもダメなら、ユーザーに以下を確認してもらう：
- 3845番ポートが開いているか（Figma側のMCPが起動しているか）
- URLが環境と合っているか（例:
```
http://localhost:3845/mcp
```
  ）
- 必要なら MCP登録をやり直す

4) Figma MCPの登録

前提
- Figma Desktop 側で Dev Mode / MCP サーバーが有効で、MCPが起動していること
- Claude Code（CLI）を実行する環境から、そのMCPのHTTPエンドポイントに到達できること
手順（最小）
1. ```
claude mcp list
```
  を確認し、
```
figma
```
  が無ければ登録する
  - 例:
```
claude mcp add --transport http figma "http://localhost:3845/mcp"
```
2. 到達できない場合は、ユーザーに「Figma側のMCP起動・権限・ポート・URL」を確認してもらう（推測で先に進めない）

入力

$FIGMA_REFS: Figma参照（MCPが認識できる指定）
- 単一: これまで通り1つのFigma URL/参照を渡す
- 複数（推奨）: 複数のフレーム/ページURLを「ページキー付き」で羅列する（複数ページでも再現性を落とさないため）

複数指定の書式（固定）

1行に1件:

{PageKey}={FIGMA_REF}

例:
```
HomePage=https://...
```
例:
```
PricingPage=https://...
```

禁止: URLだけの羅列（ページキーが安定しないため）。複数指定時は必ず
```
PageKey=
```
を付ける

PageKeyのルール（固定）

```
PascalCase
```
推奨（例:
```
HomePage
```
,
```
PricingPage
```
,
```
LoginPage
```
）
既存の
```
doc/input/design/design_context.json
```
に同名
```
pages[].key
```
がある場合は「追記/更新」扱い
同名キーで別画面を指す場合は衝突として停止（推測でマージしない）

例

単一:
- ```
/design-ssot https://...
```

複数:

/design-ssot HomePage=https://... PricingPage=https://... LoginPage=https://...

出力（差分のみ）

doc/input/design/design_context.json # 画面/レイアウト/constraints/resizing
doc/input/design/design-tokens.json # 色/タイポ/spacing/半径/影/枠線/不透明度/breakpoints（単位明記）
doc/input/design/components.json # 主要コンポーネント + variants（例: size/tone/state）
doc/input/design/copy.json # 文字の文言（copyKey→文言）。一字一句固定（言い換え禁止）
(スタック既定の置き場)/design-assets/ # 画像アセット（Figmaからexportして保存）
doc/input/design/assets/assets.json # 画像アセットのmanifest（どの要素がどのファイルに対応するか）

ルール

JSONは単位明記（px/%/unitless）
tokens は「物理値」と「semantic（意味）」を混ぜない（例:
```
color.gray.900
```
と
```
color.text.primary
```
を分け、semanticは物理へ参照する）
variants は props/属性に落とせる粒度（例: { size:["sm","md","lg"] }）
文字の文言は必ずSSOT化する（
```
doc/input/design/copy.json
```
）
- ```
design_context.json
```
  の text ノードは必ず
  copyKey
  で
  copy.json
  を参照する（文言の直書き禁止）
- ```
copy.json
```
  に無い
```
copyKey
```
  を参照してはいけない（不足時は生成を止め、ユーザーに
```
FIGMA_REF
```
  再提示 or 文言提供を依頼する）
CSSで指定できる見た目は可能な限りSSOT化する（後続の再現性を上げる）
- 例: background（塗り/グラデ）/ border（stroke: 色・太さ・style・位置）/ radius / shadow / opacity / blur / blend mode
- blur は filter（要素自体） と backdrop-filter（背景） を区別してSSOTに残す
- 取りこぼしやすい: 「枠線だけある」「背景だけある」「hoverだけ変わる」など
```
components.json
```
には、可能な限り
```
styles
```
（background/border/radius/shadow/textColor など）を tokens 参照で残す（値の直書き禁止）
RDD遵守（doc/input/rdd.md のスタック/制約に反しない）
技術スタックの既定は
```
doc/input/rdd.md
```
。このコマンドの出力（SSOT JSON）は可能な限りスタック非依存に保ち、後続（
```
/design-ui
```
/
```
/design-assemble
```
）が
```
doc/input/rdd.md
```
を参照して生成する。
SSOTの最低限スキーマは
```
doc/input/design/ssot_schema.md
```
を参照。
```
doc/input/design/components.json
```
の variants 命名規約は
```
doc/input/design/ssot_schema.md
```
に従い、プロジェクト横断で揃える。
画像（アイコン/ロゴ/イラスト/写真など）で CSSだけでは再現できないものは、可能な限りFigmaからexportして「スタック既定の置き場」に保存し、
```
assets.json
```
に対応関係を残す
動画/アニメ（MP4/GIF/Lottie等）も同様に assetsとしてmanifest化する（取得できなければ
```
status: failed
```
+
```
error
```
を必ず記録し、ユーザーに手順を依頼する）
複数入力のマージ規約（固定）
- ```
design_context.json.pages
```
  は 入力した PageKey の配列として統合する
- ```
copy.json
```
  の
```
copyKey
```
  は 必ずページキーで名前空間を切る（例:
```
homePage.hero.title
```
  ）
- ```
assets.json
```
  の
```
assetKey
```
  も ページ横断で一意にする
  - 同じ
```
assetKey
```
    が複数入力に現れた場合は、同一ファイル（同一内容）であることが確認できる場合のみOK
  - 内容が異なる場合は衝突として停止し、ユーザーにキー命名の修正を依頼する
tokensの整合（固定）
- 複数入力で tokens が矛盾する場合（例:
```
semantic.color.text.primary
```
  の参照先がページで違う）は衝突として停止
- 推測で片方に寄せたり、別名tokenを勝手に増やさない（必要ならユーザーと命名/設計を合意してから）
ここで停止

ゲート

tokens/variantsに未定義値なし
design_context.json に constraints/resizing が含まれる
components.json のvariantsが「実装の分岐」に落とせる粒度になっている
```
copy.json
```
に未定義文言なし（参照される
```
copyKey
```
の不足0件）
border/background/gradient/blur/blend/strokeAlign が存在する要素について、tokens と components の
```
styles
```
参照に落ちている（取りこぼし0）
画像アセットが必要な箇所（ロゴ/アイコン/イラスト/写真）が「スタック既定の置き場」と
```
doc/input/design/assets/assets.json
```
に落ちている（取りこぼし0）
- ```
assets.json
```
  に
```
status: "failed"
```
  が1件でもある場合は、必ずユーザーに失敗理由と次アクション（Figma Export設定/権限/再提示/手元提供）を明示して停止する

再現性（会話コンテキストがクリアでも再現するためのルール）

後続のdesign系コマンドは、
```
doc/input/design/*
```
のSSOT（tokens/components/context/copy/assets）だけで再現できる状態を目標にする
もしSSOTが不足/破損している場合は、推測で補わない。次のどちらかをユーザーに依頼する：
- ```
FIGMA_REF
```
  （Figma URL等）を再提示して、
```
/design-ssot
```
  を再実行する
- 不足しているSSOT（例:
```
copy.json
```
  /
```
assets.json
```
  ）の差分をユーザーに提供してもらう

画像アセットの扱い（重要）

アセットの保存先（スタック既定）

doc/input/rdd.md

の技術スタックに合わせて、アセット実体は以下へ保存する（SSOTのmanifestは

doc/

に残す）：

Next.js / React / Astro:
```
public/design-assets/
```
SvelteKit:
```
static/design-assets/
```
（判定できない場合）: まず
```
public/
```
があれば
```
public/design-assets/
```
、なければ
```
static/design-assets/
```
優先形式
- アイコン/ロゴ: SVG（可能なら単色・パス化）
- 写真/ラスタ: WebP または PNG（透過が必要ならPNG）
- 複雑なイラスト: SVG優先、無理ならPNG

命名

public/design-assets/{kind}/{name}@{scale}.{ext}

または

static/design-assets/{kind}/{name}@{scale}.{ext}

を基本

例:
```
icons/search@1x.svg
```
,
```
images/hero@2x.webp
```

```
name
```
は英小文字 +
```
-
```
（kebab-case）で安定させる

ダウンロードできない場合（ユーザーにお願いする手順）

Figma側の状態によっては、MCPが画像を取り出せないことがあります。次をユーザーに確認・依頼する：

対象レイヤー/フレームを export 可能にする
- Figma右パネルの Export を追加し、形式（SVG/PNG等）と倍率（1x/2x等）を設定する
権限の確認
- そのFigmaファイルにアクセス権があるか（閲覧のみでexportが制限されていないか）
画像の代替入力
- どうしてもMCPで取得できない場合は、ユーザーに「SVG/PNG/WebPを手元からアップロード」または「アセットの配布方法（zip等）を提示」してもらい、
```
doc/input/design/assets/
```
  に配置してもらう