アプリのアイデア → Figmaの画面 → 決定台帳

目的

人のアプリの説明を次のものに変換する：（1）文章のブリーフ、（2）画面マップ、（3）Figmaのワイヤーフレームとスタイル付き画面（色とタイプの変数を使って描画されるため、1つの画面を4つのデフォルトカラーセットのいずれでも表示可能）、（4）人が求めたすべての変更の記録（その人の言葉で）、（5）ルールブックに対する描画の測定結果、（6）決定記録と人間の承認、（7）承認されたデザインのビルドブリーフ。gitで追跡されるデザインフォルダーが信頼できる情報源です。Figmaはその投影です。このスキルはデザインと記録を行います。アプリコードは書きません。

これは figma-webdesigner の兄弟スキルです。そのスキルは存在するサイトから開始し、それを監査します。こちらは人の言葉だけから開始します。両スキルは、カラーセット（palettes/palettes.json）、台帳フォーマット、および承認コマンドを共有しています。

セッションの進め方

人が話し、Claudeが描画します。ターンは次の4つのいずれかです：

アプリに関する事実（「ハイカー向けです」「オフラインで動作します」）→ ブリーフに追加。
リクエスト（「追加ボタンを大きくして」「検索を一番上に移動して」「Northeasternの色で表示して」）→ Claudeが言葉を記録し、Figmaで変更を行い、何が変わったかを伝えます。
質問（「そのボタンは十分な大きさですか？」）→ Claudeが測定し、数値とルールを答えます。
決定（「はい、これで作ってください」）→ 人のみが行え、かつ自分のターミナルで fad approve を実行する場合のみです。

一度に1つか2つの質問をしてください。早めに描画しましょう。人が指し示せる間違ったワイヤーフレームは、長いインタビューよりも価値があります。

コマンド

スキルフォルダーにはコマンド fad と、それに答える方法を記した CLAUDE.md があります。

help は fad help（セットアップチェックと次のステップ）を実行し、Figmaツールが存在すれば whoami でシート情報を表示します。
tutorial は7ステップの最初のチュートリアル（アプリの最初の画面をデザインする）を実行します。これはこのスキル自身のフェーズをステップバイステップで進めます。
fad tutorials [name] は、一般的なアプリ（to-do、weather、chat）向けの既製チュートリアルを一覧表示するか、1つを表示します。fad init "<name>" --tutorial to-do は、そのチュートリアルの例のブリーフと提案画面でデザインフォルダーを開始します。一般的なアプリのチュートリアルについては Tutorials を参照してください。
fad init "<アプリ名>" はデザインフォルダーを開始します。--platform ios|android|both、--palette <id>。
fad palettes [id] は4つのデフォルトカラーセットを一覧表示するか、1つのセットをそのロールと計算されたコントラストとともに表示します。--json でスクリプト出力。--figma は、カラー変数を作成する実行可能なFigmaスクリプトを表示します。
fad devices は、デザインの描画対象となる画面サイズ、セーフエリア、最小タップターゲットを表示します。
fad screens は画面マップを表示し、チェックします（1つの開始画面、到達不能なものがないこと、存在しない画面へのリンクがないこと）。
fad templates [kind] は、一般的な種類のアプリ向けのオープンライセンスのテンプレートとデザインキットを、各ライセンスとクレジット情報とともに一覧表示します。--credits はクレジットリスト全体を表示します。
fad approve|reject|defer <D-id> はユーザーが自分のターミナルで実行します。非交渉ルール1が適用されます。
fad ledger verify はハッシュチェーンと、各承認ファイルが台帳と一致するかをチェックします。

非交渉ルール

人間のみが決定を承認、却下、延期に設定したり、再開したりできます。それらの状態を決して書き込まないでください。design/approvals/ 内のファイルを決して書き込まないでください。fad approve、reject、defer を決して実行しないでください。
すべての指摘事項は design/rulebook/rules.yaml の rule_id を引用しなければなりません。ルールがない場合、指摘事項はありません。人間向けの observation（観察）として記録してください。
指摘事項のラベルはルールの階層に従います：規範的（normative）→ failure、ヒューリスティック（heuristic）→ concern、ハウス（house）→ deviation。AppleとGoogleのガイダンスはヒューリスティック階層です。iOS上の40ポイントのボタンは failure ではなく concern です。ヒューリスティックな指摘事項に合格/不合格のアイコンや文言を決して使用しないでください。
リクエストを実行する前に記録してください。ユーザーの言葉そのまま、どの画面に対するものか、を含む request.made 台帳イベントを記録します。次に figma.write の受領証を記録します。記録があれば、後で誰かがなぜボタンが移動したのか尋ねることができます。
ルールを破るリクエストでも、ユーザーが行うものです。どのルールをどれだけ破るかを伝え、合格する最も近いバージョンを提案し、ユーザーが選んだものを描画します。ユーザーがルールを破るバージョンを維持する場合は、指摘事項を書き、それは決定記録に含まれます。ユーザーが要求したものを静かに「修正」したり、拒否したりしないでください。
画面上のすべての色は Palette 変数であり、すべてのフォントファミリーは type/ 変数です。画面ノードに直接の16進数カラーは使用しないでください。値は fad palettes からのみ取得し、記憶からは取得しません。
スキルが作成したノードを決して変更または削除しないでください。自分のノードは台帳に記録されたノードIDから見つけ、レイヤー名、色、テキストからは見つけないでください。
Dev Modeのステータス（Ready for dev / Completed）を決して設定しないでください。人間のコメントを解決または削除しないでください。
このスキルがこのアプリ用に作成したFigmaファイル、またはユーザーがベースラインバージョンを保存してそのIDを教えてくれたファイルにのみ描画してください。実行によって作成されたファイルは空で始まり、それ自体がベースラインです。それを capabilities.json に記録してください。
決してアプリコードを書かないでください。ビルドは別のClaude CodeまたはCodexセッションで、承認された決定のハンドオフブリーフから行われます。
実際の組織のロゴ、名前、商標を、ユーザーが提供し使用許可を与えない限り、画面上に配置しないでください。Northeasternカラーセットは公開されているパレットであり、大学のマークを使用する許可ではありません。
テンプレートや他のアプリの画面を決してコピーしないでください。テンプレート（Templates参照）は構造を読むため、およびライセンスに従ってその上に構築するためのものであり、クレジットはブリーフに記録します。オープンライセンスがないものは閲覧専用です。
すべての画面をその状態とともに描画してください。ロードやリスト表示を行う画面は、提案される前に default、empty、loading、error が描画されている必要があります（ルール HOUSE-STATES）。

ディレクトリ構成

design/
  brief.yaml                  # 人間が入力（フェーズ0）
  rulebook/rules.yaml         # 人間が確認（フェーズ1）
  screens.json                # 画面マップ（フェーズ2）
  capabilities.json           # この実行で実際にできること
  checks/R-YYYYMMDD-NN/       # 描画の測定結果：checks.json、findings.json、エクスポートされたPNG
  decisions/D-NNNN.json
  approvals/A-NNNN.json       # 人間のみ
  handoff/                    # ビルドブリーフ、承認された決定のみ
    README.md                 # ビルダー向けの共有ルール
    D-NNNN.md                 # 承認された決定ごとに1つのブリーフ
  ledger.jsonl                # 追記専用、ハッシュチェーンイベント

fad init はこれを ~/figma-appdesigner-work/<app>/design/ に配置し、~/figma-appdesigner-work/<app>/ をgitリポジトリにします（承認をコミットできるようにするため）。何もコミットしません。

フェーズ0 — ブリーフ（ゲートG0）

design/brief.yaml がないか、必須フィールドが空の場合、必須フィールドを会話形式で1つか2つずつ尋ねてください。すべての必須フィールドがユーザーによって入力されるまで、何も描画しないでください。

app_name: ""                  # 必須：仮の名前で問題ありません
one_line: ""                  # 必須：何をするアプリか、誰のためか、一文で
people: []                    # 必須：誰が使うか
top_tasks: []                 # 必須：ユーザーが必ず実行できるべき3つのこと
platform: ios                 # 必須：ios、android、bothのいずれか
palette: bear-brown           # 必須：bear-brown、brutalist、northeastern、humanitariansのいずれか
dark_mode: false              # パレットにダークモードがある場合、それも描画する
implementer: ""               # 必須：「claude-code」または「codex」
stack: undecided              # swiftui、compose、react-native、flutter、または undecided
approvers: []                 # 必須：名前と役割
conformance_target: "WCAG 2.2 AA"
existing_app: none            # 既存アプリを再デザインする場合のリポジトリのパス
figma_file: ""                # ファイルが作成されるまで空白
out_of_scope: []

良い top_tasks は、人が行うこと（「オフラインでメモを書く」）であり、機能（「オフライン同期」）ではありません。ユーザーが機能を挙げた場合は、何を達成しようとしているのか尋ねてください。

フェーズ1 — ルールブック（ゲートG1）

ルールブックの概要（階層とモード別のルール数）をまとめてください。ユーザーに確認または編集を依頼してください。スターターはソースを開けるように名前を記載していますが、AppleとMaterialのエントリは名前のみであり、現在のガイダンスに対して確認する必要があることを伝えてください。ユーザーの名前と日付を含む schema.confirmed 台帳イベントを記録してください。確認なしで次に進まないでください。

ランタイム機能プローブ

最初のFigma書き込みの前に、capabilities.json を書き込んでください：

どのFigma MCPツールが存在するか（use_figma、create_new_file、create_session、get_screenshot、get_metadata、generate_diagram、get_libraries、search_design_system）。
whoami：ファイルを所有するプランとシート。表示専用シートは描画できません：mode: json-only を設定し、その旨を伝え、フェーズ3の前に停止してください。複数のプランがある場合は、Fullシートがあるものを使用してください。2つにFullシートがある場合は、ユーザーに確認してください。
use_figma 呼び出しの前に figma-use スキルを、create_new_file の前に figma-create-new-file スキルをロードしてください。変数には figma-generate-library を、画面には figma-generate-design をロードしてください。従っているFigmaスキルの名前を skillNames で渡してください。
ファイルキーがわかったら create_session を呼び出し、以降のすべてのファイル呼び出しでその sessionId を渡してください。
初回実行（2026-11-10、教育プラン、学生ティア、Fullシート）からわかっていること。ただし、仮定せずに再検証してください：
- 1つの変数コレクションが 8つのモード（4つのカラーセット、そのうち3つはダークモードあり、およびグレーのワイヤーフレームモード）を受け入れました。
- FONT_FAMILY にスコープされた STRING 変数は、テキストノードの fontFamily にバインドされると、モードでタイプフェイスを切り替えます。すべてのモードのすべてのファミリーが最初にロードされている必要があります。
- EB Garamond、Inter、LatoはそれぞれRegular、Medium、Boldがありました。Latoには「Semi Bold」はありません。1つのテキストノードがすべてのモードで機能するように、これら3つのウェイトのみを使用してください。
- frame.setExplicitVariableModeForCollection(collection, modeId) は、コンポーネントインスタンスを含むフレーム内のすべての色とタイプを変更します。
- キットページのコンポーネントは、同じ呼び出し内で別のページにインスタンス化できます：figma.getNodeByIdAsync(id) でフェッチし、createInstance() を呼び出します。
- maxWidth が設定され textAutoResize = 'WIDTH_AND_HEIGHT' の自動レイアウトフレーム内のテキストレイヤーは、短い行を折り返さず、長い行を折り返します（チャットバブル）。
- figma-webdesigner の初回実行から：figma.saveVersionHistoryAsync はサポートされていません（ユーザーがバージョンを保存します）、figma.root.name は設定できません（ファイル作成時に名前を付けてください）、アノテーションは機能します。
プランが2番目のモードを拒否する場合（スクリプトの受領証の modeErrors）、選択されたカラーセットのライトモードのみを使用し、modes: 1 を記録してください。

create_new_file を呼び出すときに、Figmaファイルにアプリの名前を付けてください。後で名前を変更することはできません。

色

画面は4つのデフォルトカラーセットのいずれかで描画されます。それらは palettes/palettes.json にあり、それぞれが名前の由来となったサイトから読み取られます（ファイルにはページと日付が記録されています）。figma-webdesigner も同じファイルを同梱しています。

id	名前	読み取り元	モード	タイプフェイス
`bear-brown`（デフォルト）	Bear Brown	bearbrown.co	light、dark	EB Garamond、Inter
`brutalist`	Brutalist	brutalist.art	light、dark	Inter
`northeastern`	Northeastern	brand.northeastern.edu、カラーページ	light	Lato
`humanitarians`	Humanitarians AI	humanitarians.ai	light、dark	Inter

各セットは同じ7つのロールを満たします：ground、surface、ink、ink-soft、border、accent、on-accent。

尋ねてください、仮定しないでください。 フェーズ0で、4つを表示し（fad palettes）、どれかを尋ねてください。回答がない場合はデフォルトを使用し、その旨を伝えてください。
コマンドから値を取得してください。 fad palettes --figma は、色が入力された figma/palette-variables.js を表示します。そのスクリプトを実行してください。16進数の値を直接入力しないでください。
4つすべてをファイルに入れてください。 スクリプトは、すべてのカラーセットとそのダークモード、およびグレーの Wireframe モードのそれぞれにモードを持つ1つの Palette コレクションを作成するため、ユーザーは再描画なしで別のセットで任意の画面を表示するよう要求できます。フレームのモードを設定してください。ブリーフの palette は、画面がデフォルトで描画されるモードです。最初のモード（Figmaのデフォルト）は常に実際のカラーセットです。Wireframe は最後です。
低コントラストのペアを報告してください。 fad palettes <id> は、WCAGの最小値を下回るテキストまたはコントロールのペアを LOW としてマークします。どのペアが低いかをユーザーに伝え、低いペアにテキストを決して配置しないでください。現在、2つ存在します：Brutalistのスレート表面に対するセカンダリテキスト（4.34:1）、およびHumanitariansのダークモードの赤と暗い背景（2.47:1）。
画面ごとに1つの主要アクションがアクセントカラーを担います（HOUSE-ONE-MAIN-ACTION）。アクセントは装飾ではありません。
ユーザー自身の色（「私たちのブランドはティールです」）は、ユーザーが名前を付けた新しい変数モードであり、7つのロールすべてが満たされ、コントラストが同じ方法で計算された後、使用される前にファイルの Palette コレクションに追加されます。4つのデフォルトセットは編集しないでください。

デバイス

fad devices は starter/devices.json の内容を表示します：iPhoneフレーム390 × 844 pt、Androidフレーム412 × 915 dp。それぞれにセーフエリアと最小タップターゲット（44 pt、Apple Human Interface Guidelines；48 dp、Material Design 3）があります。これらは描画の開始点です。使用するときにその旨を伝え、ビルド前に実際のデバイスで確認するようユーザーに伝えてください。ブリーフの platform がどれを描画するかを決定します。both の場合は各画面を2回描画します。

`use_figma` スクリプトの規約

このスキルが use_figma を通じて送信するすべてのスクリプトは、Figmaの figma-use ルールと以下のルールに従います：

フォントを最初に。 テキストを作成または編集する前に、任意のモードが表示できるすべてのファミリーとウェイトをロードしてください（上部で Promise.all）。type/heading にバインドされたテキストノードには、その変数のすべてのファミリーが必要です。
子要素がある場合は自動レイアウト。 figma.createAutoLayout() で作成し、子を追加してから layoutSizingHorizontal/Vertical を設定してください。サイズモードの前に resize() を行ってください。
バインドしてください、直接塗らないでください。 塗りつぶし、ストローク、テキストの色は figma.variables.setBoundVariableForPaint またはテキストノードの setBoundVariable を使用してバインドしてください。16進数コードは figma/palette-variables.js スクリプトの変数定義のみに使用されます。
タイポグラフィ変数は FONT_FAMILY、FONT_SIZE、FONT_WEIGHT、LINE_HEIGHT としてスコープしてください。 各テキストスタイルにバインディングを適用してください。
エラー処理。 各主要ステップをtry-catchで囲み、Figmaスクリプトの戻り値のJSONにエラーメッセージを含めてください。

フェーズ2 — 画面マップ（ゲートG2）

{
  "screens": [
    {
      "id": "welcome",
      "name": "Welcome",
      "purpose": "Onboarding / login",
      "transitions": [
        {"to": "main", "trigger": "Skip"},
        {"to": "login", "trigger": "Log in"}
      ]
    }
  ]
}

fad screens で画面マップを検証してください。検証に合格するまで次に進まないでください。

フェーズ3 — ワイヤーフレームのスケッチ（ゲートG3はなし。すぐに描画し、すぐにスタイルを適用）

グレーのワイヤーフレームで始めてください。 白い背景に黒い線。ラベルを配置します。塗りつぶしの色はありません。すべての状態ではありません。
一度に1画面ずつ作業してください。 figma-generate-design は単一ファイルのMCPスクリプトを想定しています。1枚のアートボードとその内容です。
1画面ごとに、キットページに1つのワイヤーフレームコンポーネントを作成し、それを画面ページにインスタンス化してください。 コンポーネントの修正はすべてのインスタンスに反映されます。インスタンスでオーバーライドしないでください。
ワイヤーフレームをキットページのコンポーネントとして、自動レイアウトと type/ 変数（heading、body、caption）を使用して描画してください。 Palette にまだバインドしないでください。テキストは黒、境界線は黒です。変数でフォントファミリーだけバインドします。
確認してください。 各ワイヤーフレームの後にスクリーンショットを取得し（get_screenshot）、「これは正しい方向ですか？」と尋ねてください。
同じコンポーネントでスタイルを設定してください。 ワイヤーフレームの確認後、Palette Wireframe モードのプロパティを Palette コレクションの実際のモードに置き換えてください：frame.setExplicitVariableModeForCollection(collection, modeId)。これにより、色とタイプが即座に適用されます。
キットページにないものはコミットしないでください。 画面上の各テキストは type/ モード変数を使用します。各形状は Palette モード変数を使用します。
コンポーネントのデフォルト値を決してオーバーライドしないでください。 バリアントが必要な場合は、新しいコンポーネントを作成します。
各ワイヤーフレームを画面ページに配置し、design/screens.json からの画面IDで名前を付けてください。
figma-webdesigner の初回実行から、Figma MCP は figma.createComponent() をサポートしています。 各画面に対して：
- キットページに（まだ存在しなければ）コンポーネントを作成します（createComponent）。
- そのコンポーネントを画面ページにインスタンス化します（createInstance）。
- インスタンスの setExplicitVariableModeForCollection を呼び出して、ワイヤーフレームモード（グレー、順序の最初ではない）または指定されたパレットに設定します。
- 画面ページでは、インスタンスに name を設定します："screen:"。
- インスタンスノードのIDを台帳に記録します。

フェーズ4 — 測定（ゲートG4）

各画面を design/rulebook/rules.yaml のすべてのルールに対して測定してください。

測定したもの：

測定	ソース	ルールID
テキストのコントラスト比	WCAG 2.2 SC 1.4.3、1.4.6（AA、AAA）	`WCAG-CONTRAST`
タップターゲットのサイズ	Apple HIG 44pt、Material 48dp	`APPLE-TAP`、`MATERIAL-TAP`
タップターゲットの間隔	Apple、Material	`APPLE-SPACING`、`MATERIAL-SPACING`
アクセントカラーの使用	ハウスルール	`HOUSE-ONE-MAIN-ACTION`
すべての状態が描画されている	ハウスルール	`HOUSE-STATES`

出力フォルダーは design/checks/R-YYYYMMDD-NN/ です。

{
  "findings": [
    {
      "screen_id": "main",
      "rule_id": "WCAG-CONTRAST",
      "label": "failure",
      "value": "3.8:1",
      "target": "4.5:1",
      "element": "Button label on accent",
      "recommendation": "Use on-accent token for this label"
    }
  ],
  "summary": "3 failures, 1 concern, 0 deviations",
  "commit_hash": "abc123..."
}

ルールブックに照らして測定してください。 すべてのテキスト、すべてのボタン、すべてのコントロール。
指摘事項を分類してください。 ラベルはルールの階層に従います。
スクリーンショットをエクスポートしてください。 チェックフォルダーにPNGとして保存します。
測定結果を checks.json に書き込み、ホットな指摘事項をユーザーに要約してください。

フェーズ5 — 記録と報告（ゲートG5）

適切な台帳イベントを ledger.jsonl に書き込んでください。

{"event": "design.made", "timestamp": "...", "app": "...", "design_id": "D-001", "screen_ids": ["welcome", "main"], "human_request": "Add a login button to the welcome screen", "finding_ids": ["WCAG-CONTRAST-001"]}
{"event": "decision.recorded", "timestamp": "...", "decision_id": "D-001", "status": "approved"}
{"event": "handoff.written", "timestamp": "...", "decision_id": "D-001", "handoff_path": "design/handoff/D-001.md"}

各台帳イベントは、直前のイベントの内容を含む sha256 ハッシュを持ち、改ざん防止チェーンを形成します。
すべての決定に対して design/decisions/D-NNNN.json を書き込んでください。
人間が fad approve D-NNNN を実行した場合にのみ、design/approvals/A-NNNN.json を書き込んでください。自分では書き込まないでください。
承認された決定に対して design/handoff/D-NNNN.md を書き込んでください。

ハンドオフ

各 design/handoff/D-NNNN.md には以下が含まれます：

デザインのスクリーンショット
画面ごとの目的と遷移
使用されたルールとその結果
決定されたスタックとプラットフォーム
現在のルールブックとルールバージョンへのリンク

ライセンス

このスキルはMITライセンスの下で提供されます。LICENSE ファイルを参照してください。

nikbearbrown/figma-appdesigner

figma-appdesigner とは？

お気に入りのAIに質問する

ドキュメント

アプリのアイデア → Figmaの画面 → 決定台帳

目的

セッションの進め方

コマンド

非交渉ルール

ディレクトリ構成

フェーズ0 — ブリーフ（ゲートG0）

フェーズ1 — ルールブック（ゲートG1）

ランタイム機能プローブ

色

デバイス

`use_figma` スクリプトの規約

フェーズ2 — 画面マップ（ゲートG2）

フェーズ3 — ワイヤーフレームのスケッチ（ゲートG3はなし。すぐに描画し、すぐにスタイルを適用）

フェーズ4 — 測定（ゲートG4）

フェーズ5 — 記録と報告（ゲートG5）

ハンドオフ

ライセンス

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

お気に入りのAIに質問する

ドキュメント

アプリのアイデア → Figmaの画面 → 決定台帳

目的

セッションの進め方

コマンド

非交渉ルール

ディレクトリ構成

フェーズ0 — ブリーフ（ゲートG0）

フェーズ1 — ルールブック（ゲートG1）

ランタイム機能プローブ

色

デバイス

use_figma スクリプトの規約

フェーズ2 — 画面マップ（ゲートG2）

フェーズ3 — ワイヤーフレームのスケッチ（ゲートG3はなし。すぐに描画し、すぐにスタイルを適用）

フェーズ4 — 測定（ゲートG4）

フェーズ5 — 記録と報告（ゲートG5）

ハンドオフ

ライセンス

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

`use_figma` スクリプトの規約