そのボタンはすでに存在しています。それにもかかわらず、AI エージェントは独自の色、異なる余白、余分なバリアントを持つ新しいボタンを作ってしまいます。スクリーンショット上では、その複製は似て見えます。しかしプロジェクト内では二つ目のコンポーネントが生まれ、今後はそれを別途保守しなければならなくなります。問題は単なる画像理解ではなく、コンポーネントの同一性が欠けていることにあります。
Figma Code Connect は、デザインコンポーネントをコード上の対応するコンポーネントと結び付け、その関係を Dev Mode や MCP で利用できるようにします。現在のドキュメントは、このようにコンテキストを渡す特定の経路を説明しています。品質やコストが一律に改善されることを示しているわけではありません。私たちの問いは、エージェントが既存のボタンを実際に再利用するには、どのような情報が必要か、ということです。
バリアントは契約です
私たちの例のコンポーネントは QuietButton という名前です。プライマリとセカンダリの外観に加え、無効状態を持っています。指示は「似たものを作って」ではなく、「このコンポーネントを許可された構成で使って」です。当たり前に聞こえますが、それにはデザインとコードの間の正確な関係が必要です。
Design: understated action button
Code: QuietButton
Allowed variant: secondary
Label: View details
State: enabledこのカードは私たち独自のマッピングスキーマであり、Code Connect の設定ファイルではありません。エージェントがそれがなければ推測しなければならない箇所を可視化します。実際のコンポーネントが「secondary」を期待している場合、「quiet」のように似た響きの値が自動的に有効なパラメーターになるわけではありません。
同じことがコンテンツと状態にも当てはまります。装飾のために薄く表示されたボタンは、実際に無効化されたコントロールとは異なる実装になっている場合があります。したがって、見た目の印象だけでは技術的なマッピングには不十分です。
長いスタイルの説明よりも、小さな実例が一つあるほうが役立ちます
マッピングに加えて、既存の使用例をエージェントに渡してください。シンプルな HTML コンポーネントであれば、次のようになります。
<button class="action action--secondary" type="button">
View details
</button>これらのクラスは私たちの例に属するものです。どの CSS ルールを持つかは、ご自身のプロジェクトで決める必要があります。利点は、エージェントがまず新しい構造を考え出すことを求められない点です。変更を限定した具体的な出発点が得られます。
有用な補足では、維持すべきものを明示します。同じコンポーネント、有効なバリアント、既存のキーボード操作、そしてアクションの実際の目的です。矛盾する例を含む膨大な資料集よりも、短く最新の抜粋のほうが役立つ場合があります。
古いマッピングは非常に説得力があるように見えることがあります
プロジェクトでプロパティの名前を変更したとします。古いマッピングは依然として理解しやすく、きれいに整形されたままです。エージェントにとってはもっともらしいコンテキストですが、技術的には誤りです。したがって、現在のコードとのつながりも保守し続ける必要があります。
手元にあるものを実践的に見直すには、よく使われるコンポーネントを三つ選んでください。それぞれについて実際の使用例を一つと、許可されているバリアントを書き留めます。新しいマッピングを公開する前に、これらの詳細を現在のコードと比較してください。この演習の提案は、リポジトリのレビューがすでに実施されたことや、AI の実行が合格したことを主張するものではありません。
反例はマッピングをより明確にします。デザインが、そのコンポーネントにまったく存在しないバリアントを求めている場合はどうすべきでしょうか。黙って新しいボタンを作り出すのではなく、実装側がこのギャップを指摘すべきです。そうすれば、欠けているコンテキストは、実際のプロジェクトで下せる意図的な設計上の判断になります。
ブランドの値はコンポーネントを補完しますが、置き換えるものではありません
KENJTEC で独自のページコンポーネントを再利用する場合、 KENJTEC BrandStudio ai のブランドシートから具体的な色、フォント、形状を取り込めます。画像だけからコンポーネントを作り直させるのではなく、これらの値を既存の HTML/CSS の例に意図的に適用してください。
その後、独自の HTML、CSS、JavaScript を手動で準備できるのが KENJTEC WebSiteBuilder aiの開発者モードです。プレビューで個別に確認し、カスタムコードとして公開できます。これは Code Connect の自動インポートや React アプリのホスティングを意味するものではありません。マッピングは外部の開発ワークフローに残ります。
技術的な教訓は他にも応用できます。デザインシステムは似た形状だけで成り立つものではありません。目に見えるバリアントと実際のコンポーネントとの間に、検証可能な関係が必要です。これらの関係が具体的であるほど、エージェントが推測すべきことは減り、その結果を既存のプロジェクトと照らし合わせて判断しやすくなります。
出典と情報の時点
調査および資料は 2026 年十月 25 日時点のものです。 Code Connect: Introduction。
