efecto-web-design

Efecto — AI で Web ページをデザイン

Efecto は、AI エージェントがプログラムから操作するリアルタイムの Web デザインツールです。セッションを作成し、ユーザーがブラウザーで URL を開いたら、デザインコマンドを送信して瞬時にレンダリングします。すべてのノードは Tailwind CSS でスタイル設定された実際の HTML 要素に対応しているため、Web ネイティブで、セマンティックかつピクセル単位で正確です。

---

セットアップ

このスキルには Efecto MCP サーバーが必要です。ツール一覧に create_session、add_section、get_document などのツールがあるか確認してください。

Efecto のツールが利用できない場合は、MCP サーバーをインストールしてください：

Claude Code

claude mcp add efecto -- npx -y @efectoapp/mcp

Cursor

.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Windsurf / VS Code / その他の MCP クライアント

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

インストールすると、画像検索やネイティブアニメーション作成を含む 68 個の MCP ツールを利用できます。MCP サーバーは、エージェントを efecto.app の Efecto デザインキャンバスに接続します。

---

セッションの仕組み

Agent ──POST /execute──> Server ──SSE──> Browser (renders live)
Agent <──poll/response── Server <──POST── Browser (returns results)

1. MCP サーバーまたは REST API を使ってセッションを作成します
2. ユーザーが返された Efecto URL をブラウザーで開きます
3. ツール呼び出しを送信します。呼び出しごとにブラウザーで実行され、結果が返されます
4. デザインの作成中、ユーザーはすべての変更をリアルタイムで確認できます

セッションは、2 時間操作がないと期限切れになります。ツール呼び出しを実行するには、ブラウザーが接続されている必要があります。MCP プロセスを再起動した場合や、プロセスとの接続が失われた場合は、重複したセッションを作成せず、ユーザーの現在の Efecto URL を指定して attach_session を呼び出してください。

---

クイックスタート — 7 ステップでページを作成

ステップ 1：セッションを作成

create_session
  label: "Landing page design"

{ sessionId, documentId, designUrl } が返されます。ユーザーに URL を開くよう伝えてください。セッション ID は自動的に保存され、以降のすべてのツールで使用されます。

ユーザーがすでに ?session=... を含む Efecto URL を持っている場合は、そのセッションを再開します：

attach_session
  designUrl: "https://efecto.app/design/<file-id>/untitled?session=<session-id>"

「再接続」のために create_session を再度呼び出さないでください。 既存の URL には attach_session を使用してください。2 回目の create_session 呼び出しは、force: true を指定しない限り、ペアリング済みのセッションの上書きを拒否します。

ステップ 2：ブラウザーの接続を待つ

wait_for_connection

ブラウザーが URL を開いてペアリングするまで待機します（デフォルトは 120 秒）。すでにペアリング済みの場合は、すぐに返ります。

ルーティング状態はいつでも確認できます：

session_status                # legacy single-session shape (sessionId, paired, browserConnected, knownSessions)
session_status { all: true }  # list shape — all sessions in this MCP process with isActive / paired flags

ステップ 3：アートボードを作成

create_artboard
  name: "Homepage"
  width: 1440
  height: 900
  backgroundColor: "#ffffff"
  className: "flex flex-col"

アートボード ID が返されます。子要素を縦に積み重ねるため、必ず className を "flex flex-col" に設定してください。

ステップ 4：JSX でセクションを追加

add_section
  parentId: "<artboard-id>"
  jsx: '<nav name="Primary Navigation" className="flex items-center justify-between px-16 py-5 bg-white w-full">
    <h2 name="Brand Name" className="text-xl font-bold text-gray-900">Acme</h2>
    <div name="Navigation Links" className="flex items-center gap-8">
      <a name="Features Link" className="text-sm text-gray-600" href="#">Features</a>
      <a name="Pricing Link" className="text-sm text-gray-600" href="#">Pricing</a>
      <button name="Get Started Button" className="px-4 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg">Get Started</button>
    </div>
  </nav>'

複雑なレイアウトを作成するには、これが最も効率的な方法です。セクションごとに 1 つの JSX 文字列を使用します。

ステップ 5：現在の状態を読み取る

get_document

すべてのノードに data-id 属性が付いた、JSX に似たマークアップが返されます。更新にはこれらの ID を使用します。

ステップ 6：更新して微調整

batch_update
  updates: [
    { nodeId: "abc", className: "text-2xl font-extrabold text-gray-900" },
    { nodeId: "def", textContent: "Updated heading text" }
  ]

ステップ 7：反復する

ステップ 4〜6 を繰り返し、セクションの追加、スタイルの調整、デザインの改善を行います。ユーザーはすべての変更をリアルタイムで確認できます。

---

デザインツール

状態の読み取り

ツール	用途
get_selection	現在選択されているノード／アートボードを JSX サブツリーとともに返します
get_document	ドキュメントを JSX として返します。大きなドキュメントではスコープ指定モードを推奨します：outline: true（トップレベルの子要素ごとに 1 行で要約）、artboardId（単一のアートボード）、maxDepth（探索する深さの上限。0 = アートボードのヘッダーのみ、1 = トップレベルの子要素のみ）。レスポンスにはおおよそのトークン数も含まれます。
list_artboards	すべてのアートボードを ID、名前、寸法とともに一覧表示します
find_nodes	名前、テキスト内容、タイプ、または className でノードを検索します。サブツリーを含まない ID が返されます。get_node_tree を呼び出す前に、これを使ってノードを特定してください。
get_node_tree	1 つのノード／アートボードのサブツリーのみをシリアライズします。outline または find_nodes の後に、さらに詳しく調べるために使用します。

コンテンツの作成

ツール	用途
create_artboard	新しいアートボード（画面／フレーム）を作成します
add_section	JSX マークアップから複雑なレイアウトを追加します（推奨）
add_node	親要素に単一のノードを追加します

コンテンツの変更

ツール	目的
update_node	ノードの任意のプロパティ（className、textContent、tag、style、src、link、elementId など）を更新します
update_class	ショートカット：ノードの className のみを置き換えます
update_artboard	アートボードのプロパティ（名前、サイズ、背景、className、timelineDuration）を更新します
batch_update	1 回の呼び出しで複数のノードを更新します（一括スタイル設定）
replace_section	ノードとその子要素を新しい JSX に置き換えます

アニメーション

ツール	目的
list_animation_presets	ID、カテゴリ、デフォルト値、対応するコントロールを含む、ネイティブの Efecto アニメーションプリセットを一覧表示します
apply_animation_plan	検証済みの複数レイヤーのアニメーションプランを 1 回の呼び出しで適用します
clear_animations	ノード、選択範囲、アートボード、またはドキュメント全体からネイティブアニメーションをクリアします

構造の整理

ツール	目的
move_node	ノードの親を変更するか、順序を並べ替えます
duplicate_node	新しい ID でノードをディープクローンします
duplicate_artboard	バリエーション作成用にアートボードをディープクローンします
group_nodes	選択したノードをフレームコンテナーで囲みます
ungroup_node	グループを解除し、子要素を親に移動します
reorder_node	前面へ移動、または背面へ移動します（z-order）

表示と選択

ツール	目的
select_nodes	ユーザーに見えるようにノードをハイライトします
set_visibility	ノードを表示／非表示にします（Figma の目のアイコンのように動作します）
delete_nodes	ノードとその子要素を削除します
delete_artboard	アートボードとそのすべてのコンテンツを削除します

配置と分布

ツール	目的
align_nodes	複数のノードを配置します（左／中央／右／上／中／下）
distribute_nodes	ノードを均等に分布させます（水平／垂直）

履歴

ツール	目的
undo	最後の操作を元に戻します（Cmd+Z）
redo	最後に元に戻した操作をやり直します（Cmd+Shift+Z）

ビューポートとドキュメント

ツール	目的
zoom_to_artboard	特定のアートボードが表示されるようにビューポートをズームします
zoom_to_fit	すべてのアートボードがビューポートに収まるようにズームします
set_viewport	ビューポートのズームレベル、パン位置、またはその両方を設定します
rename_document	ドキュメントの名前を変更します
new_document	新しい空のドキュメントを作成します（現在のドキュメントを置き換えます）

キャンバスと読み取り

ツール	目的
move_artboard	複数画面のフロー用に、キャンバス上のアートボードの位置を変更します
deselect_all	現在のノード選択を解除します
get_node_tree	1 つのノード／アートボードのサブツリーに対する JSX を返します（ドキュメント全体より高速です）

塗りつぶしとエクスポート

ツール	目的
set_fill	ノードまたはアートボードの塗りつぶし（背景）を設定します。単色、グラデーション、画像に対応しています。デュアルライトを自動的に処理します。
export_image	アートボードまたはノードを画像（PNG、JPEG、WebP、SVG）としてエクスポートします。base64 データ URL を返します。

テーマ

ツール	目的
get_theme	現在のテーマトークン（色、フォント、角丸）とアクティブなモードを返します
set_theme	色、フォント、境界線の角丸などのテーマトークンを設定します。一部の項目だけを更新できます。
set_theme_mode	ライト／ダーク／カスタムモードを切り替えます
reset_theme	テーマをデフォルトにリセットします

デザイン検証

ツール	目的
audit_design	プロ品質のルールに照らしてデザインを監査します。対象はタイポグラフィ（スケール、ウェイトのコントラスト、サイズ）、色（ニュートラルカラーの一貫性、純粋な黒、コントラストの低い組み合わせ）、余白（4pt グリッド、タッチターゲット）、AI スロップの検出（単調なレイアウト）です。1 つのアートボードを対象にする場合は artboardId を渡し、すべてを対象にする場合は省略します。
repair_design	ドキュメント全体（または 1 つのアートボード）に対して、安全で決定論的な修正を一括適用します。対象は、欠落している w-full、欠落している flex、任意の Tailwind 値からインラインスタイルへの変換、純粋な黒から zinc-950 への変更、タッチターゲットの拡大、プレースホルダー画像、空のテキストのデフォルト値です。プレビューするには dryRun: true を渡します。

画像検索

ツール	目的
search_images	無料のストック画像（Lummi）を検索します。セッションは不要です。add_node または set_fill で使用する URL を返します。

---

ネイティブアニメーション — 既存のデザインにアニメーションを追加する

Efecto には、ネイティブのレイヤーアニメーションシステムがあります。アニメーションを作成する方法として、Tailwind の animate-*、transition-*、duration-* クラスは使用しないでください。

「これにアニメーションを付けて」という依頼に対するワークフロー：

1. get_selection、get_document、get_node_tree、または list_artboards で対象を確認します。
2. list_animation_presets を呼び出し、サポートされているプリセット ID と設定を確認します。
3. 主要なレイヤーを選びます。ヒーロー画像、見出し、補足テキスト、CTA、カード、アイコン、商品ビジュアルなどが対象です。入れ子になったすべての子要素にアニメーションを付けるのは避けてください。
4. タイミングを指定したエントリとともに apply_animation_plan を呼び出します。新しいモーションシステムには mode: "replace"、退出／アウトロアニメーションの追加には mode: "append" を使用します。
5. アートボードで再生終了時刻を明示する必要がある場合は、update_artboard で timelineDuration を設定します。
6. select_nodes を使用して、変更したレイヤーをハイライトします。

タイミングのデフォルト値：

• 小さな UI 要素：0.18～0.35 秒。
• ヒーロー／スライド要素：0.35～0.6 秒。
• 兄弟要素間のスタッガー：0.04～0.12 秒。
• 登場：ease-out。
• 退出：ease-in。

プリセットのガイダンス：

• fade-in：控えめな補足コンテンツ向け。
• slide-in：方向性のある表示。通常は 16～48px。
• scale-in：カード、商品画像、バッジ、モーダル向け。
• blur-in：映画のような演出やエディトリアルな表示向け。
• tilt-in、spin-in、bounce-in、pop-spark：遊び心のある演出やプロモーション向け。
• mask-in、fade-mask-in、slide-mask-in、scale-mask-in：インパクトのあるヒーロー、フレーム、タイトルの表示向け。すっきりとしたワイプには maskStyle: "linear"、エディトリアルな躍動感には "diagonal"、スポットライトのような表示には "iris" を使用します。エッジからの動きには maskDirection、アイリスの起点には maskOrigin を使用します。
• mask-reveal、iris-reveal：従来の複合エイリアスで、現在も動作しますが、上記の明示的なマスクプリセットを優先してください。
• 退出プリセット（fade-out、slide-out、scale-out など）は、開始前に十分な閲覧時間を確保してください。

テキストノードでは、見出しを表示する際に appearBy: "word" または "line" を使用できます。"char" はキネティックなタイトル演出にのみ使用してください。テキスト以外のノードでは "block" を使用する必要があります。

例：

apply_animation_plan
  mode: "replace"
  animations: [
    { nodeId: "<headline-id>", presetId: "fade-in", offset: 0, settings: { duration: 0.55, easing: "ease-out", appearBy: "word" } },
    { nodeId: "<hero-image-id>", presetId: "scale-in", offset: 0.08, settings: { duration: 0.5, easing: "ease-out", scaleFrom: 0.96 } },
    { nodeId: "<cta-id>", presetId: "slide-in", offset: 0.28, settings: { duration: 0.35, easing: "ease-out", direction: "up", distance: 20 } }
  ]

---

画像 — 実際の写真を検索して使用する

Efecto には、無料の高品質なストック写真、イラスト、3D レンダリングのライブラリである Lummi を利用した、組み込みの画像検索機能があります。デザインを洗練され、リアルに見せるため、プレースホルダー画像の代わりにこれを使用してください。

search_images ツール

このツールはセッションなしで動作します。セッションを作成する前でも、いつでも呼び出せます。

search_images
  query: "mountain landscape"
  orientation: "horizontal"
  limit: 4

url、thumbnail、alt、width、height、photographer、orientation を含む画像の一覧を返します。

フィルター

フィルター	値	使用する場面
query	任意の検索語	常に指定します。必要な画像を説明してください（「作業中のチーム」「抽象的なグラデーション」「コーヒーショップ」など）。
orientation	horizontal、vertical、square	レイアウトに合わせます。ヒーローバナーには横向き、モバイル／ストーリーには縦向き、カードには正方形を使用します。
type	photo、illustration、3d	デフォルトではすべてを返します。リアルな画像には「photo」、スタイライズされたグラフィックには「illustration」を使用します。
luminance	dark、neutral、bright	デザインの雰囲気に合わせます。ダークテーマのページには「dark」、明るく軽やかなデザインには「bright」を使用します。
limit	1～20（デフォルト：6）	コンテキストが過剰にならないよう、少なめ（3～6）にします。

ワークフロー：検索 → 適用

ステップ 1：画像を検索

search_images
  query: "modern office workspace"
  orientation: "horizontal"
  luminance: "bright"
  limit: 3

ステップ 2a：画像ノードとして追加

add_node
  parentId: "<section-id>"
  type: "image"
  src: "<url-from-search>"
  alt: "Modern office workspace"
  className: "w-full h-[400px] rounded-2xl object-cover"

ステップ 2b：背景の塗りとして設定

set_fill
  targetId: "<section-id>"
  fill: { type: "image", url: "<url-from-search>", size: "cover", position: "center" }

ステップ 2c：JSX で使用（add_section）

add_section
  parentId: "<artboard-id>"
  jsx: '<section className="flex items-center gap-16 px-16 py-24 w-full">
    <div className="flex flex-col gap-6 grow">
      <h1 className="text-5xl font-bold text-gray-900">Our Story</h1>
      <p className="text-lg text-gray-500">Building the future of design.</p>
    </div>
    <img src="<url-from-search>" alt="Team at work" className="w-[560px] h-[380px] rounded-2xl object-cover" />
  </section>'

ヒント

• デザインの前に検索します。 まず画像を見つけてから、それを中心にレイアウトを組み立てます。画像を後付けするよりも、構成の質が高まります。
• レイアウトに合わせて向きを選びます。 ヒーローセクションには横長、サイドバーやモバイルには縦長、グリッドカードには正方形の画像を使います。
• 輝度フィルターを使います。 ダークテーマのデザインでは、luminance: "dark"を指定して検索すると、暗い背景に自然になじむ画像が見つかります。
• 画像ノードにobject-coverを設定します。 画像を歪ませずにコンテナいっぱいに表示できます。
• プレースホルダーより実際の画像を優先します。 <div className="w-full h-[400px] bg-gray-100 rounded-2xl" />の代わりに、関連する画像を検索して使用します。

---

シェーダーノードとビジュアルエフェクト

シェーダーノードは、ジェネレーティブビジュアル、画像／動画処理、ビジュアルエフェクト（ASCII、ディザ、ハーフトーン、グリッチ、アートフィルター）を組み合わせた強力なノードタイプです。WebGLで描画され、ほかのノードと同じようにデザイン内の任意の場所に配置できます。

シェーダーノードの作成

type: "shader"を指定してadd_nodeを使います。

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-[400px] rounded-2xl"

入力ソース

入力タイプ	説明	主なプロパティ
shader（デフォルト）	ジェネレーティブなWebGLビジュアル	shaderType、shaderSettings
image	エフェクトを使って画像を処理	mediaInput: { mediaUrl, mediaType: "image", objectFit }
video	エフェクトを使って動画を処理	mediaInput: { mediaUrl, mediaType: "video" }
fill	エフェクトを使って単色を処理	fillColor: "#hex"

ジェネレーティブシェーダーの種類（11）

シェーダー	説明	最適な用途
meshGradient	滑らかで有機的な色のブレンド	ヒーロー背景、アンビエントビジュアル
dotGrid	アニメーション付きのドットグリッドパターン	テクノロジー／データをテーマにしたデザイン
voronoi	セルベースの有機的なパターン	抽象的なテクスチャ
liquidMetal	金属の流体シミュレーション	高級感のあるビジュアル
chrome	クロームの反射エフェクト	大胆で反射的なアクセント
pulsar	放射状に脈動するエネルギー	動的で目を引くビジュアル
blackHole	重力による歪み	ドラマチックなダークビジュアル
glass	すりガラスの屈折	控えめで上品なオーバーレイ
spiral	渦巻く動きのパターン	催眠的で遊び心のあるビジュアル
particles	浮遊するパーティクルシステム	アンビエントで雰囲気のあるビジュアル
fireworks	爆発するパーティクルのバースト	祝祭感、エネルギー

ビジュアルエフェクト（28）

任意の入力ソースにエフェクトを重ねて適用できます。effectIdとeffectEnabled: trueを設定します。

add_node
  parentId: "<section-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<image-url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-[500px] rounded-2xl"

カテゴリ	エフェクトID	説明
ASCII	ascii-standard、ascii-dense、ascii-minimal、ascii-blocks、ascii-braille、ascii-technical、ascii-matrix、ascii-hatching	ビジュアルをASCII文字アートに変換
ディザ	dither-floyd-steinberg、dither-atkinson、dither-stucki、dither-sierra、dither-sierra-lite、dither-burkes、dither-jarvis-judice-ninke、dither-two-row-sierra、color-separation	レトロなディザパターン
ハーフトーン	halftone-mono、halftone-cmyk	印刷風のドットパターン（モノクロまたはCMYK）
グリッチ	glitch-vhs、glitch-digital、glitch-weird、glitch-chromatic	デジタルの破損と歪み
アート	art-kuwahara、art-crosshatch、art-lineart、art-engraving、art-stipple	絵画風およびスケッチ風のフィルター

ポストプロセススタック

postProcessesを使って、追加のエフェクトを重ねます。指定できるエフェクトは、scanlines、vignette、bloom、grain、noise、pixelate、wave、rgb-glitch、brightness-contrast、color-tint、sepia、grid、dot-screen、light-beams、warp、motion-blur、chromatic-aberration、curvatureです。

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
]

よく使うレシピ

画像からASCIIアートのヒーローを作成：

search_images  query: "city skyline"  orientation: "horizontal"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-[500px]"

ジェネレーティブなグラデーション背景：

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-[600px]"

写真にハーフトーンエフェクトを適用：

add_node
  parentId: "<section-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-[400px] h-[400px] rounded-2xl"

---

ノードの種類と HTML タグ

各ノードは HTML 要素に 1 対 1 で対応します。type は動作を決定し、tag はどの HTML 要素としてレンダリングされるかを決定します。

種類	デフォルトタグ	使用可能なすべてのタグ	コンテンツプロパティ
frame	div	div, section, article, aside, main, nav, header, footer, ul, ol, li, figure, figcaption, form, table, thead, tbody, tr, th, td	（なし — コンテナのみ）
text	p	p, span, h1, h2, h3, h4, h5, h6, blockquote, label, li	textContent
image	img	img	src, alt, objectFit
button	button	button, a, div	textContent, variant
link	a	a, button, div, span	textContent, href, target
icon	svg	svg	iconName（ケバブケース）、iconLibrary、iconWeight
input	input	input, textarea, select	placeholder, inputType, label
video	video	video	src, poster, autoPlay, loop, muted
shader	（WebGL）	—	shaderType, inputType, effectId, effectEnabled, effectSettings, postProcesses
component	div	div	componentId, overrides

JSX ではタグによって種類が決まります

add_section 用の JSX を記述する場合、HTML タグによってノードの種類が決まります。

<div>       -> frame       <img>        -> image
<section>   -> frame       <button>     -> button
<nav>       -> frame       <a>          -> link
<header>    -> frame       <input>      -> input
<footer>    -> frame       <video>      -> video
<h1>-<h6>   -> text        <svg>        -> icon
<p>         -> text        <i>          -> icon
<span>      -> text        <Icon>       -> icon
                           <HeartIcon>  -> icon (name resolved from tag)

---

add_section の JSX 形式

これはレイアウトを構築する主な方法です。HTML タグと Tailwind の className 属性を使って、標準的な JSX を記述します。

形式のルール

1. HTML タグを使用します — div、section、nav、h1、p、img、button、a など
2. className でスタイルを指定します — Tailwind CSS クラスのみ
3. テキストはタグの間に記述します — <h1 className="...">Hello</h1>
4. 画像は自己終了タグにします — <img src="https://..." alt="..." className="..." />
5. 既存のノード（get_document で取得したもの）を参照する場合にのみ、data-id を使用します
6. React 固有の構文は使用できません — onClick、useState、フラグメント、コンポーネントは使用できません
7. アイコンには icon 属性を付けた <svg> を使用します — <svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

例：セクション全体

<section className="flex flex-col items-center gap-12 px-16 py-24 bg-white w-full">
  <div className="flex flex-col items-center gap-4 max-w-2xl">
    <span className="text-sm font-semibold text-blue-600 uppercase tracking-widest">Why Choose Us</span>
    <h2 className="text-4xl font-bold text-gray-900 text-center">Everything you need to scale</h2>
    <p className="text-lg text-gray-500 text-center">Built for modern teams that move fast and ship faster.</p>
  </div>
  <div className="flex gap-8 w-full max-w-5xl">
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="lightning" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">Lightning Fast</h3>
      <p className="text-sm text-gray-500">Deploy in seconds, not hours. Our edge network ensures sub-50ms latency worldwide.</p>
    </div>
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="shield-check" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">Enterprise Security</h3>
      <p className="text-sm text-gray-500">SOC 2 certified with end-to-end encryption. Your data stays yours.</p>
    </div>
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="headset" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">24/7 Support</h3>
      <p className="text-sm text-gray-500">Our team is always on. Get answers in minutes, not days.</p>
    </div>
  </div>
</section>

---

アイコン

Efecto は 4 つのアイコンライブラリに対応しており、合計で約 9,400 個のアイコンを利用できます。アイコンは SVG としてレンダリングされ、色は currentColor を継承します。

JSX でのアイコンの記述方法

標準形式：

<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

• icon — ケバブケースで記述するアイコン名（例：arrow-right、magnifying-glass、google-logo）
• className — w-* / h-* クラスでサイズを指定し、text-* クラスで色を指定します
• iconLibrary — 任意：phosphor（デフォルト）、lucide、heroicons、radix
• iconWeight — 任意：thin、light、regular（デフォルト）、bold、fill、duotone（Phosphor のみ）

よく使われるアイコン名（Phosphor — デフォルトライブラリ）

カテゴリ	アイコン
矢印	arrow-right、arrow-left、arrow-up、arrow-down、caret-right、caret-down
アクション	check、x、plus、minus、magnifying-glass、funnel、pencil、trash
UI	gear、sliders、dots-three、list、squares-four、sidebar
ソーシャル	google-logo、apple-logo、github-logo、x-logo、linkedin-logo、discord-logo、facebook-logo、instagram-logo、youtube-logo
オブジェクト	envelope、lock、eye、eye-slash、star、heart、user、users、house、lightning、fire、rocket
メディア	image、camera、play、pause、microphone、speaker-high
コマース	shopping-cart、credit-card、currency-dollar、receipt、package

アイコンのサイズガイド

w-3 h-3     /* 12px — tiny, inline indicators */
w-4 h-4     /* 16px — inline with small text */
w-5 h-5     /* 20px — standard UI icon */
w-6 h-6     /* 24px — default, comfortable */
w-8 h-8     /* 32px — feature icons, cards */
w-10 h-10   /* 40px — hero feature icons */
w-12 h-12   /* 48px — large decorative */
w-16 h-16   /* 64px — hero section centerpiece */

セクションでのアイコンのパターン

アイコン付きの機能カード：

<div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
  <svg icon="lightning" className="w-8 h-8 text-blue-600" />
  <h3 className="text-lg font-semibold text-gray-900">Lightning Fast</h3>
  <p className="text-sm text-gray-500">Deploy in seconds, not hours.</p>
</div>

アイコン付きボタン（アイコンは子要素ではなく兄弟要素です）：

<div className="flex items-center gap-2 bg-gray-900 text-white px-5 py-2.5 rounded-lg">
  <span className="text-sm font-medium">Get Started</span>
  <svg icon="arrow-right" className="w-4 h-4" />
</div>

ソーシャルアイコンの行：

<div className="flex items-center gap-4">
  <svg icon="x-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="github-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="linkedin-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="discord-logo" className="w-5 h-5 text-gray-400" />
</div>

アイコン付き入力欄：

<div className="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-white">
  <svg icon="magnifying-glass" className="w-4 h-4 text-gray-400" />
  <input placeholder="Search..." className="text-sm text-gray-900 grow" />
</div>

別のライブラリ（Lucide）を使用する場合：

<svg icon="check" iconLibrary="lucide" className="w-5 h-5 text-green-600" />

ウェイトのバリエーション（Phosphor bold）を使用する場合：

<svg icon="star" iconWeight="fill" className="w-5 h-5 text-yellow-500" />

---

使用できる Tailwind CSS パターン

レイアウト

flex                    /* Horizontal flex row */
flex flex-col           /* Vertical flex column */
items-center            /* Center cross-axis */
items-start             /* Align to start */
justify-between         /* Space between children */
justify-center          /* Center main-axis */
gap-2 gap-4 gap-8      /* Gap between flex children */
grow                    /* Fill remaining space (DO NOT use flex-1) */

余白

p-4 p-6 p-8 p-12       /* Padding all sides */
px-6 py-4               /* Horizontal / vertical padding */
pt-8 pb-16              /* Top / bottom padding */
mx-auto                 /* Center horizontally */

サイズ

w-full                  /* Full width of parent */
w-auto                  /* Width from content */
w-fit                   /* Shrink-wrap width */
w-[600px]               /* Fixed pixel width */
max-w-2xl max-w-5xl     /* Maximum width constraints */
min-h-screen            /* Minimum full viewport height */
h-[400px]               /* Fixed pixel height */

タイポグラフィ

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl
font-light font-normal font-medium font-semibold font-bold font-extrabold font-black
leading-tight leading-snug leading-normal leading-relaxed
tracking-tight tracking-normal tracking-wide tracking-widest
text-left text-center text-right
uppercase lowercase capitalize

テーマ対応カラー（推奨）

Efecto はセマンティックトークンシステムに対応しています。テーマが有効な場合、これらのクラスはライト／ダーク／カスタムモードに自動で適応します。

/* Backgrounds */
bg-background              /* Page/artboard background */
bg-card                    /* Card surfaces */
bg-popover                 /* Popover/dropdown surfaces */
bg-primary                 /* Primary action backgrounds */
bg-secondary               /* Secondary surfaces */
bg-muted                   /* Muted/subtle backgrounds */
bg-accent                  /* Accent highlights */
bg-destructive             /* Destructive/error backgrounds */
bg-input                   /* Input field backgrounds */

/* Text */
text-foreground            /* Primary text */
text-primary-foreground    /* Text on primary backgrounds */
text-secondary-foreground  /* Text on secondary surfaces */
text-muted-foreground      /* Muted/secondary text */
text-accent-foreground     /* Text on accent backgrounds */
text-card-foreground       /* Text on cards */
text-popover-foreground    /* Text on popovers */
text-destructive-foreground /* Text on destructive backgrounds */

/* Borders */
border-border              /* Default border color */
ring-ring                  /* Focus ring color */

セマンティックカラーとハードコードカラーの使い分け：

• セマンティック（bg-primary、text-foreground）：UI コンポーネント、ボタン、カード、テキストなど、テーマやモードの変更に応じて適応させるもの
• ハードコード（bg-blue-500、text-white）：装飾要素、ブランド固有の色、イラスト、グラデーション

これらのクラスは CSS カスタムプロパティ（--background、--primary など）にマッピングされ、テーマやモードが変わると自動的に更新されます。shadcn はデフォルトのトークンシステムですが、これらは標準的な CSS 変数のため、対応するデザインシステムであればどれでも使用できます。

カラー（名前付きのみ）

名前付きの Tailwind カラーを使用してください。bg-[#f9f9f9] のような任意の 16 進数カラーは使用しないでください。実行時にエラーが発生しても、表示されない場合があります。

/* Backgrounds */
bg-white bg-black bg-gray-50 bg-gray-100 bg-gray-900 bg-neutral-950
bg-blue-50 bg-blue-500 bg-blue-600 bg-indigo-500 bg-purple-500
bg-green-50 bg-green-500 bg-red-50 bg-red-500 bg-amber-50 bg-yellow-400

/* Text */
text-white text-black text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-900
text-blue-600 text-blue-500 text-indigo-600 text-green-600 text-red-600

/* Borders */
border-gray-100 border-gray-200 border-gray-300 border-blue-500

/* If you MUST use a specific hex color, use inline style instead: */
style: { "background-color": "#f9f9f9" }

ボーダーと角丸

border border-2                      /* Border width */
border-gray-200 border-gray-300      /* Border color */
rounded rounded-lg rounded-xl rounded-2xl rounded-full  /* Border radius */

エフェクト

shadow-sm shadow shadow-md shadow-lg shadow-xl
opacity-50 opacity-75
ring-1 ring-2 ring-blue-500          /* Ring / outline */

グラデーション

bg-gradient-to-r from-blue-500 to-purple-500
bg-gradient-to-b from-white to-gray-50
bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500

塗りつぶし（推奨：set_fill ツール）

単色、グラデーション、画像の背景には、className/style を手動で設定するよりも、set_fill ツールを使用してください。二重書き込みのパターンを自動的に処理します。

# Solid color
set_fill  targetId: "<id>"  fill: { type: "solid", color: "blue-500" }

# Linear gradient
set_fill  targetId: "<id>"  fill: { type: "gradient", gradient: { type: "linear", angle: 90, stops: [{ color: "#3b82f6", position: 0 }, { color: "#8b5cf6", position: 1 }] } }

# Radial gradient
set_fill  targetId: "<id>"  fill: { type: "gradient", gradient: { type: "radial", stops: [{ color: "#3b82f6", position: 0 }, { color: "#1e1b4b", position: 1 }] } }

# Image fill
set_fill  targetId: "<id>"  fill: { type: "image", url: "https://...", size: "cover", position: "center" }

# Clear fill
set_fill  targetId: "<id>"

ノードとアートボードの両方で使用できます。アートボードでは、後方互換性のため、単色の塗りつぶしによって backgroundColor が更新されます。

リンクとアンカー

add_node、update_node、batch_update の link プロパティを使うと、任意のノードをクリック可能にできます。elementId を使うと、ノードをアンカーのリンク先に設定できます。

リンクの種類	用途	必須フィールド
url	外部 URL	url、省略可能な target: "_blank"
page	別のアートボードに移動	pageId（アートボード ID）
section	要素のアンカーまでスクロール	sectionId（elementId と一致）
email	mailto リンク	email
phone	tel リンク	phone

# Make a button link to an external URL
update_node  nodeId: "<btn-id>"  link: { type: "url", url: "https://example.com", target: "_blank" }

# Mark a section as an anchor target
update_node  nodeId: "<section-id>"  elementId: "pricing"

# Link a nav item to that anchor
update_node  nodeId: "<nav-link-id>"  link: { type: "section", sectionId: "pricing" }

# Link to another artboard (page navigation)
update_node  nodeId: "<link-id>"  link: { type: "page", pageId: "<artboard-id>" }

# Remove a link
update_node  nodeId: "<id>"  link: null

フレーム、テキスト、画像、ボタンなど、あらゆる種類のノードで使用できます。公開サイトでは、page リンクと section リンクが実際のナビゲーションになります。

---

アートボードのベストプラクティス

標準サイズ

名前	幅	高さ	用途
デスクトップ	1440	900+	ウェブサイトの全ページ
デスクトップ（狭幅）	1280	800+	コンテンツ重視のページ
タブレット	768	1024	タブレットのレスポンシブ表示
モバイル	375	812	iPhone／モバイル表示

必ず最初に行うこと

create_artboard:
  name: "Homepage"
  width: 1440
  height: 900
  backgroundColor: "#ffffff"
  className: "flex flex-col"

• className: "flex flex-col" は必須です。設定しないと、子要素が (0,0) の位置で重なります
• backgroundColor はインラインスタイルのプロパティであり、Tailwind クラスではありません
• コンテンツがあふれると高さは自動的に伸びますが、初期の高さは設定してください

---

よく使うセクションのパターン

ナビゲーションバー

<nav className="flex items-center justify-between px-16 py-5 bg-white w-full border-b border-gray-100">
  <h2 className="text-xl font-bold text-gray-900">Acme</h2>
  <div className="flex items-center gap-8">
    <a className="text-sm font-medium text-gray-600" href="#">Features</a>
    <a className="text-sm font-medium text-gray-600" href="#">Pricing</a>
    <a className="text-sm font-medium text-gray-600" href="#">About</a>
    <button className="px-5 py-2.5 text-sm font-medium text-white bg-gray-900 rounded-lg">Get Started</button>
  </div>
</nav>

ヒーローセクション（中央揃え）

<section className="flex flex-col items-center justify-center gap-8 px-16 py-32 bg-white w-full">
  <div className="flex flex-col items-center gap-6 max-w-3xl">
    <span className="px-4 py-1.5 text-xs font-semibold text-blue-700 bg-blue-50 rounded-full uppercase tracking-wider">Now in Beta</span>
    <h1 className="text-6xl font-bold text-gray-900 text-center leading-tight">Build beautiful websites at the speed of thought</h1>
    <p className="text-xl text-gray-500 text-center">The AI-powered design tool that turns ideas into production-ready pages. No code required.</p>
  </div>
  <div className="flex items-center gap-4">
    <button className="px-8 py-3.5 text-base font-semibold text-white bg-blue-600 rounded-xl">Start Free Trial</button>
    <button className="px-8 py-3.5 text-base font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl">Watch Demo</button>
  </div>
</section>

ヒーローセクション（分割 — 左にテキスト、右に画像）

<section className="flex items-center gap-16 px-16 py-24 bg-white w-full">
  <div className="flex flex-col gap-6 grow">
    <h1 className="text-5xl font-bold text-gray-900 leading-tight">Ship your next product in record time</h1>
    <p className="text-lg text-gray-500">From prototype to production in minutes. Our platform handles the complexity so you can focus on what matters.</p>
    <div className="flex items-center gap-4">
      <button className="px-6 py-3 text-base font-semibold text-white bg-gray-900 rounded-lg">Get Started</button>
      <a className="text-base font-medium text-gray-600" href="#">Learn more</a>
    </div>
  </div>
  <img src="https://placehold.co/600x400" alt="Product screenshot" className="w-[560px] h-[380px] rounded-2xl object-cover bg-gray-100" />
</section>

特徴グリッド（3 列）

<section className="flex flex-col items-center gap-16 px-16 py-24 bg-gray-50 w-full">
  <div className="flex flex-col items-center gap-4 max-w-2xl">
    <h2 className="text-4xl font-bold text-gray-900 text-center">Powerful features for modern teams</h2>
    <p className="text-lg text-gray-500 text-center">Everything you need to design, build, and ship — all in one place.</p>
  </div>
  <div className="flex gap-8 w-full max-w-6xl">
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-xl">
        <span className="text-blue-600 text-lg font-bold">1</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">Real-Time Collaboration</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Work together with your team in real time. See cursors, selections, and changes as they happen.</p>
    </div>
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-green-100 rounded-xl">
        <span className="text-green-600 text-lg font-bold">2</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">One-Click Deploy</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Push to production with a single click. Built-in CI/CD, preview deployments, and rollbacks.</p>
    </div>
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-xl">
        <span className="text-purple-600 text-lg font-bold">3</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">AI Assistant</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Built-in AI that understands your codebase. Generate components, fix bugs, and refactor with natural language.</p>
    </div>
  </div>
</section>

お客様の声／ソーシャルプルーフ

<section className="flex flex-col items-center gap-12 px-16 py-24 bg-white w-full">
  <div className="flex flex-col items-center gap-6 max-w-2xl">
    <p className="text-2xl text-gray-700 text-center leading-relaxed italic">"This tool completely transformed our workflow. We shipped our redesign in two weeks instead of two months."</p>
    <div className="flex items-center gap-4">
      <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
      <div className="flex flex-col">
        <span className="text-sm font-semibold text-gray-900">Sarah Chen</span>
        <span className="text-sm text-gray-500">VP of Design, Stripe</span>
      </div>
    </div>
  </div>
  <div className="flex items-center gap-12">
    <span className="text-sm font-medium text-gray-400">Trusted by</span>
    <span className="text-lg font-bold text-gray-300">Stripe</span>
    <span className="text-lg font-bold text-gray-300">Vercel</span>
    <span className="text-lg font-bold text-gray-300">Linear</span>
    <span className="text-lg font-bold text-gray-300">Notion</span>
    <span className="text-lg font-bold text-gray-300">Figma</span>
  </div>
</section>

料金カード

<section className="flex flex-col items-center gap-12 px-16 py-24 bg-gray-50 w-full">
  <div className="flex flex-col items-center gap-4">
    <h2 className="text-4xl font-bold text-gray-900">Simple, transparent pricing</h2>
    <p className="text-lg text-gray-500">No surprise fees. Cancel anytime.</p>
  </div>
  <div className="flex gap-8 w-full max-w-4xl">
    <div className="flex flex-col gap-6 p-8 bg-white rounded-2xl border border-gray-200 grow">
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-semibold text-gray-900">Starter</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-4xl font-bold text-gray-900">$19</span>
          <span className="text-sm text-gray-500">/month</span>
        </div>
        <p className="text-sm text-gray-500">Perfect for individuals and small projects.</p>
      </div>
      <button className="w-full py-3 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg">Get Started</button>
    </div>
    <div className="flex flex-col gap-6 p-8 bg-gray-900 rounded-2xl grow">
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-semibold text-white">Pro</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-4xl font-bold text-white">$49</span>
          <span className="text-sm text-gray-400">/month</span>
        </div>
        <p className="text-sm text-gray-400">For growing teams that need more power.</p>
      </div>
      <button className="w-full py-3 text-sm font-semibold text-gray-900 bg-white rounded-lg">Get Started</button>
    </div>
    <div className="flex flex-col gap-6 p-8 bg-white rounded-2xl border border-gray-200 grow">
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-semibold text-gray-900">Enterprise</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-4xl font-bold text-gray-900">$99</span>
          <span className="text-sm text-gray-500">/month</span>
        </div>
        <p className="text-sm text-gray-500">For large organizations with custom needs.</p>
      </div>
      <button className="w-full py-3 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg">Contact Sales</button>
    </div>
  </div>
</section>

CTA（行動喚起）

<section className="flex flex-col items-center gap-8 px-16 py-24 bg-gray-900 w-full">
  <h2 className="text-4xl font-bold text-white text-center">Ready to get started?</h2>
  <p className="text-lg text-gray-400 text-center max-w-xl">Join thousands of teams already building faster. Start your free trial today.</p>
  <div className="flex items-center gap-4">
    <button className="px-8 py-3.5 text-base font-semibold text-gray-900 bg-white rounded-xl">Start Free Trial</button>
    <button className="px-8 py-3.5 text-base font-semibold text-gray-300 bg-transparent border border-gray-700 rounded-xl">Talk to Sales</button>
  </div>
</section>

フッター

<footer className="flex items-center justify-between px-16 py-8 bg-white border-t border-gray-100 w-full">
  <span className="text-sm text-gray-500">2026 Acme Inc. All rights reserved.</span>
  <div className="flex items-center gap-6">
    <a className="text-sm text-gray-500" href="#">Privacy</a>
    <a className="text-sm text-gray-500" href="#">Terms</a>
    <a className="text-sm text-gray-500" href="#">Contact</a>
  </div>
</footer>

統計／指標の行

<section className="flex items-center justify-center gap-16 px-16 py-16 bg-blue-600 w-full">
  <div className="flex flex-col items-center gap-2">
    <span className="text-4xl font-bold text-white">10K+</span>
    <span className="text-sm text-blue-200">Active Users</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <span className="text-4xl font-bold text-white">99.9%</span>
    <span className="text-sm text-blue-200">Uptime SLA</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <span className="text-4xl font-bold text-white">50ms</span>
    <span className="text-sm text-blue-200">Avg Latency</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <span className="text-4xl font-bold text-white">4.9/5</span>
    <span className="text-sm text-blue-200">User Rating</span>
  </div>
</section>

---

ヒント、注意点、ベストプラクティス

基本ルール

1. 既存のデザインを変更する前に、必ず最初に get_document を実行してください。data-id 属性が必要です。
2. ユーザーから「ここ」に何かを編集または追加するよう求められた場合は、get_selection を使用してください。選択したノードとその JSX サブツリーが返されるため、状況に応じた編集ができます。
3. ノード ID を推測しないでください。必ず get_document、get_selection、または find_nodes から読み取ってください。
4. 構造の構築には JSX を使って add_section を使用してください。add_node で要素を一つずつ追加するより、はるかに効率的です。
5. 複数の小さな変更には batch_update を使用してください。何度も呼び出す代わりに、1 回で済みます。
6. 削除して作り直すより、既存のものを更新することを優先してください。update_node または update_class を使用してください。

重大な注意点

Artboard の className には flex flex-col を含める必要があります 含めないと、子要素が (0,0) に重なります。これが最もよくある間違いです。

Artboard の backgroundColor はプロパティであり、className ではありません

WRONG:  className: "bg-gray-900 flex flex-col"
RIGHT:  backgroundColor: "#1a1a1a", className: "flex flex-col"

className では任意の 16 進カラーを使用しないでください Tailwind 4 はビルド時に CSS を生成します。bg-[#f9f9f9] のような動的クラスには実行時の CSS がなく、表示されません。

WRONG:  className: "bg-[#f9f9f9] text-[#333333]"
RIGHT:  className: "bg-gray-50 text-gray-700"
ALSO OK: style: { "background-color": "#f9f9f9", "color": "#333333" }

注：システムは任意の 16 進カラーをインラインスタイルに自動変換しますが、名前付きカラーを推奨します。

flex-1 は機能しません。代わりに grow を使用してください flex-1 は Tailwind ブリッジで未マッピングとして分類されます。同じ効果を得るには grow を使用してください。

Frame ノードには textContent がありません Frame タイプ（div、section、nav、header、footer）はテキストを直接保持できません。内部にテキストノード（h1、p、span）を使用してください。

Button ノードは子要素を無視します ボタンのレンダラーは textContent のみを使用します。ボタンの内部にアイコンなどの要素をネストしないでください。代わりに、フレックスコンテナで囲んでください：

<div className="flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-lg">
  <span className="text-sm font-medium">Continue</span>
  <svg icon="arrow-right" className="w-4 h-4" />
</div>

最上位のセクションには w-full が必要です 自動修正機能によって追加されますが、アートボードの直接の子要素には必ず w-full を指定し、幅いっぱいに広がるようにしてください。

src のない画像にはプレースホルダーが設定されます src を省略すると、システムは https://placehold.co/600x400 を挿入します。本番用のデザインでは必ず実際の src を指定してください。

必須の構造と品質ゲート

• 意味のあるレイヤー名を付けます。 各セクション、レイアウトグループ、カード、テキストブロック、コントロール、画像、アイコンに、簡潔で意味の分かる name 属性を付けてください（例：<section name="Hero">、<div name="Hero Copy">、<h1 name="Hero Heading">）。Frame、Text、Icon のような汎用名は使用しないでください。名前のない装飾目的のみのリーフノードは例外です。
• ネストされたレイアウトを明示します。 子要素が 2 つ以上ある各フレームには、ネストされたラッパーも含め、className に flex または grid を明示的に含めてください。方向、配置、間隔、折り返しに対応するクラスも追加し、暗黙のブロックフローに頼らないでください。
• WCAG AA のコントラスト基準を満たします。 通常のテキストは 4.5:1、大きなテキストは 3:1 以上のコントラスト比が必要です。実際に描画される背景を基準にテキストを評価してください。テキスト自体に背景がある場合はその背景を使用し、ない場合は不透明度／アルファ合成を含め、祖先フレームをたどってアートボードまで確認します。コントラストを判定する前に、現在のモードでセマンティックなテーマトークンを解決してください。
• 問題がなくなるまで監査します。 作成または編集後に audit_design を呼び出します。batch_update または replace_section を使って、contrast-ratio、implicit-block-container、generic-layer-name のすべての指摘を修正し、再度 audit_design を呼び出してください。repair_design を使用する場合は、その変更内容を確認してから再監査してください。3 種類すべての指摘がゼロになるまで完了としないでください。また、get_document を使い、意味のあるレイヤーにセマンティックな名前が付いた状態で保持されていることを確認してください。

デザインのヒント

• 最大幅コンテナ：読みやすいテキスト幅にするため、max-w-5xl または max-w-6xl を中央揃えにして、その中にコンテンツを配置します
• 一貫した間隔：Tailwind のスペーシングスケールを使用します（セクションのパディングでは 4、6、8、12、16、24 が一般的です）
• カラーの階層：見出しには gray-900、本文には gray-500、副次的なテキストには gray-400 を使用します
• セクションのリズム：白と gray-50 の背景を交互に使い、視覚的に区切ります
• ボタンの階層：プライマリ＝濃色の塗りつぶし、セカンダリ＝アウトラインまたは明るい背景

---

完全なレシピ：SaaS ランディングページ

SaaS のランディングページをゼロから、手順に沿って作成します。

ステップ 1：セッションとアートボードを作成する

create_session
  label: "SaaS Landing Page"

開いている Efecto URL から再開する場合は、代わりに attach_session を使用します。ブラウザーの接続を待ってから（wait_for_connection）、次を実行します：

create_artboard:
  name: "Landing Page"
  width: 1440
  height: 900
  backgroundColor: "#ffffff"
  className: "flex flex-col"

ステップ 2：ナビゲーション

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <nav className="flex items-center justify-between px-16 py-5 bg-white w-full border-b border-gray-100">
      <div className="flex items-center gap-2">
        <div className="w-8 h-8 bg-blue-600 rounded-lg"></div>
        <h2 className="text-lg font-bold text-gray-900">Launchpad</h2>
      </div>
      <div className="flex items-center gap-8">
        <a className="text-sm font-medium text-gray-600" href="#">Product</a>
        <a className="text-sm font-medium text-gray-600" href="#">Features</a>
        <a className="text-sm font-medium text-gray-600" href="#">Pricing</a>
        <a className="text-sm font-medium text-gray-600" href="#">Docs</a>
      </div>
      <div className="flex items-center gap-3">
        <a className="text-sm font-medium text-gray-600" href="#">Sign In</a>
        <button className="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg">Start Free</button>
      </div>
    </nav>

ステップ 3：ヒーロー

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <section className="flex flex-col items-center gap-10 px-16 py-32 bg-white w-full">
      <div className="flex flex-col items-center gap-6 max-w-3xl">
        <span className="px-4 py-1.5 text-xs font-semibold text-blue-700 bg-blue-50 rounded-full uppercase tracking-wider">New: AI-Powered Workflows</span>
        <h1 className="text-6xl font-extrabold text-gray-900 text-center leading-tight tracking-tight">Ship products faster than ever before</h1>
        <p className="text-xl text-gray-500 text-center leading-relaxed">The all-in-one platform for modern product teams. Design, build, test, and deploy from a single dashboard.</p>
      </div>
      <div className="flex items-center gap-4">
        <button className="px-8 py-4 text-base font-semibold text-white bg-blue-600 rounded-xl">Start Free Trial</button>
        <button className="px-8 py-4 text-base font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl">Watch Demo</button>
      </div>
      <p className="text-sm text-gray-400">Free for 14 days. No credit card required.</p>
    </section>

ステップ 4：ソーシャルプルーフバー

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <section className="flex items-center justify-center gap-12 px-16 py-12 bg-gray-50 border-y border-gray-100 w-full">
      <span className="text-sm text-gray-400">Trusted by leading teams at</span>
      <span className="text-lg font-bold text-gray-300">Stripe</span>
      <span className="text-lg font-bold text-gray-300">Vercel</span>
      <span className="text-lg font-bold text-gray-300">Linear</span>
      <span className="text-lg font-bold text-gray-300">Notion</span>
      <span className="text-lg font-bold text-gray-300">Figma</span>
    </section>

ステップ 5：機能グリッド

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <section className="flex flex-col items-center gap-16 px-16 py-24 bg-white w-full">
      <div className="flex flex-col items-center gap-4 max-w-2xl">
        <h2 className="text-4xl font-bold text-gray-900 text-center">Built for speed, designed for scale</h2>
        <p className="text-lg text-gray-500 text-center">Powerful tools that grow with your team. No compromises.</p>
      </div>
      <div className="flex gap-6 w-full max-w-5xl">
        <div className="flex flex-col gap-4 p-8 bg-gray-50 rounded-2xl grow">
          <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-xl">
            <span className="text-blue-600 font-bold">1</span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Visual Editor</h3>
          <p className="text-sm text-gray-500 leading-relaxed">Drag-and-drop interface with pixel-perfect precision. Design at the speed of thought.</p>
        </div>
        <div className="flex flex-col gap-4 p-8 bg-gray-50 rounded-2xl grow">
          <div className="flex items-center justify-center w-12 h-12 bg-green-100 rounded-xl">
            <span className="text-green-600 font-bold">2</span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Instant Deploy</h3>
          <p className="text-sm text-gray-500 leading-relaxed">One-click deployment to our global CDN. Preview environments for every branch.</p>
        </div>
        <div className="flex flex-col gap-4 p-8 bg-gray-50 rounded-2xl grow">
          <div className="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-xl">
            <span className="text-purple-600 font-bold">3</span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">AI Copilot</h3>
          <p className="text-sm text-gray-500 leading-relaxed">AI that understands your design system. Generate components, layouts, and content automatically.</p>
        </div>
      </div>
    </section>

ステップ 6：CTA

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <section className="flex flex-col items-center gap-8 px-16 py-24 bg-gray-900 w-full">
      <h2 className="text-4xl font-bold text-white text-center">Start building today</h2>
      <p className="text-lg text-gray-400 text-center max-w-xl">Join 10,000+ teams already shipping faster with Launchpad. Free trial, no strings attached.</p>
      <div className="flex items-center gap-4">
        <button className="px-8 py-4 text-base font-semibold text-gray-900 bg-white rounded-xl">Start Free Trial</button>
        <button className="px-8 py-4 text-base font-semibold text-gray-300 bg-transparent border border-gray-700 rounded-xl">Talk to Sales</button>
      </div>
    </section>

ステップ 7：フッター

add_section:
  parentId: "<artboard-id>"
  jsx: |
    <footer className="flex items-center justify-between px-16 py-8 bg-gray-900 border-t border-gray-800 w-full">
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 bg-blue-600 rounded-md"></div>
        <span className="text-sm font-semibold text-gray-400">Launchpad</span>
      </div>
      <span className="text-sm text-gray-500">2026 Launchpad Inc. All rights reserved.</span>
      <div className="flex items-center gap-6">
        <a className="text-sm text-gray-500" href="#">Privacy</a>
        <a className="text-sm text-gray-500" href="#">Terms</a>
        <a className="text-sm text-gray-500" href="#">Status</a>
      </div>
    </footer>

ステップ 8：確認と調整

get_document を呼び出して構造を確認します。調整が必要な場合は batch_update を使い、複数のノードの色、間隔、テキスト内容を一度に変更します。

---

レスポンシブデザインのワークフロー

レスポンシブなバリエーションを作成するには：

1. まずデスクトップデザイン（1440px）を作成します
2. duplicate_artboard を使って複製し、タブレット（768px）用とモバイル（375px）用のアートボードを作成します
3. batch_update を使って次の項目を調整します：
   • 横方向のフレックス行を flex flex-col に切り替えて縦に並べます
   • パディングを縮小します：px-16 から px-6、py-24 から py-16
   • テキストを縮小します：text-6xl から text-4xl、text-4xl から text-2xl
   • ギャップの値を変更します：gap-8 から gap-4
   • グリッドレイアウトを変更します：3列の機能紹介を1列に並べます

---

ダークモードのデザイン

推奨：テーマシステムを使用する — ライトモードとダークモードを自動で処理します：

1. プリセット（例：presetId: "default"）を指定して set_theme を呼び出します — ライトモードとダークモードの両方が含まれます
2. mode: "dark" を指定して set_theme_mode を呼び出します — アートボードがダークモードのトークンに切り替わります
3. セマンティッククラス（bg-background、text-foreground、bg-card など）を使用します — アクティブなモードに合わせて色が自動的に調整されます
4. 任意のタイミングで set_theme_mode の mode: "light" を指定してライトモードに戻します

手動での代替方法（セマンティックトークンを使用しない、テーマ未使用のカスタムデザイン向け）：

1. アートボードの backgroundColor: "#0a0a0a" または "#111111" を設定します
2. 反転したカラースケールを使用します：
   • 見出し：text-white または text-gray-100
   • 本文：text-gray-400
   • セカンダリ：text-gray-500
   • 背景：bg-gray-900、bg-gray-800、bg-neutral-900
   • 枠線：border-gray-800
   • カード：bg-gray-900 と border border-gray-800
3. ボタン：プライマリには bg-white text-gray-900、セカンダリには border border-gray-700 text-gray-300 を使用します

---

テーマシステム

Efecto のテーマシステムでは、セマンティックな Tailwind クラスに適用するデザイントークン（色、角丸）を定義できます。テーマは複数のモード（ライト、ダーク、またはカスタム）に対応しており、切り替えるとすべてのアートボードがリアルタイムで更新されます。

テーマツール

ツール	説明
get_theme	現在のテーマを返します：ID、名前、モード、activeMode、解決済みのアクティブなトークン
set_theme	プリセットの適用、CSS のインポート、またはトークンオブジェクトの直接指定を行います
set_theme_mode	アクティブなモードを切り替えます（例：「light」から「dark」）
reset_theme	テーマを完全に削除し、セマンティックトークンのない Tailwind の標準色に戻します

プリセットを適用する

set_theme
  presetId: "blue"

利用可能なプリセット：default、zinc、slate、rose、blue、green、violet、orange。各プリセットにはライトモードとダークモードが含まれます。

モードを切り替える

set_theme_mode
  mode: "dark"

独自のトークンを使用する

エージェントは、ユーザーのリポジトリの globals.css、shadcn のテーマ、Radix の色、Open Props、または手作業で作成した値など、あらゆるソースからデザイントークンをインポートできます。CSS が --variable-name: value; 形式の宣言を使用していれば、利用できます。

CSS ファイルからインポートする（例：ユーザーの globals.css）：

set_theme
  css: ":root { --background: #ffffff; --foreground: #0a0a0a; --primary: #e11d48; --primary-foreground: #fff1f2; --secondary: #f5f5f5; --secondary-foreground: #171717; --muted: #f5f5f5; --muted-foreground: #737373; --border: #e5e5e5; --ring: #fb7185; --radius: 0.5rem; } .dark { --background: #0a0a0a; --foreground: #fafafa; --primary: #fb7185; --primary-foreground: #1c1917; --secondary: #262626; --secondary-foreground: #fafafa; --muted: #262626; --muted-foreground: #a3a3a3; --border: #404040; --ring: #e11d48; }"

ユーザーが「自分のブランドカラーを使って」や「自分のリポジトリに合わせて」と言った場合は、その CSS ファイルを読み込み、css パラメーターで渡します。

トークンを一から作成する（ブランド用）：

set_theme
  modes: {
    "light": { "primary": "#6d28d9", "primaryForeground": "#f5f3ff", "background": "#fafafa", "foreground": "#1a1a1a" },
    "dark": { "primary": "#a78bfa", "primaryForeground": "#1a1a1a", "background": "#0a0a0a", "foreground": "#fafafa" }
  }

不足しているトークンキーは、自動的にデフォルト値を継承します。

トークンを使って構築する

テーマが有効になったら、JSX でセマンティッククラスを使用します：

<div className="bg-background text-foreground">
  <div className="bg-card border border-border rounded-lg p-6">
    <h2 className="text-foreground text-xl font-bold">Card Title</h2>
    <p className="text-muted-foreground">Supporting text</p>
    <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md">Action</button>
  </div>
</div>

これらのクラスはどのモードでも正しく表示されます。ライトモードからダークモードに切り替えると、すべての色が更新されます。

Supported Token Keys

CSS Variable	Token Key	Usage
--background	background	Page background (bg-background)
--foreground	foreground	Primary text (text-foreground)
--card	card	Card surface (bg-card)
--card-foreground	cardForeground	Card text (text-card-foreground)
--popover	popover	Popover surface (bg-popover)
--popover-foreground	popoverForeground	Popover text (text-popover-foreground)
--primary	primary	Primary action (bg-primary)
--primary-foreground	primaryForeground	Text on primary (text-primary-foreground)
--secondary	secondary	Secondary surface (bg-secondary)
--secondary-foreground	secondaryForeground	Text on secondary (text-secondary-foreground)
--muted	muted	Muted surface (bg-muted)
--muted-foreground	mutedForeground	Muted text (text-muted-foreground)
--accent	accent	Accent surface (bg-accent)
--accent-foreground	accentForeground	Text on accent (text-accent-foreground)
--destructive	destructive	Error/danger (bg-destructive)
--destructive-foreground	destructiveForeground	Text on destructive (text-destructive-foreground)
--border	border	Default borders (border-border)
--input	input	Input borders (bg-input)
--ring	ring	Focus rings (ring-ring)
--radius	radius	Border radius base