Layoza

Layoza — AI エージェントのためのデザインエンジニアリング

オープンソースの MCP サーバーとエージェントスキルにより、Claude Code、Cursor、Codex、OpenCode、Antigravity、Windsurf を UI/UX デザインのエキスパートに変えます。 サイトのデザイン DNA を読み取り、要件に合うモーションを選び、実際の Chromium ブラウザーですべての変更をチェックします。

▶ 2 分半のショーケース全編をダウンロード（MP4、17 MB）：4 つすべての要件を Chromium でライブ録画

npx layoza init            # adds the skills + MCP server to every agent it finds in this project
npx layoza qa index.html   # design and usability: contrast, overflow, focus, menu, screenshots

あとはエージェントに話しかけるだけです。プロンプトの例：

Build a homepage for a family-run bakery in Leeds. Warm, not twee.
Add a pricing page that matches the rest of this site.
Our dashboard feels cluttered. Fix the design without changing the brand.
Redesign the agency homepage with a kinetic hero, but keep every page and form working.
Check this page on mobile and fix anything a visitor would trip over.

理由

Layoza は、AI が作るサイトが見飽きたデザインにならないようにするためのものです。Layoza が支援して作るデザインはすべて、ナビゲーションからヒーロー、各セクション、フッターに至るまで、模倣でも、色や見た目だけを変えたものでも、使い回しでもない、固有のものであるべきです。現代的な手法で、個々の要件に合わせて構築します。プロジェクトごとの台帳（.layoza/looks.jsonl）には、これまでに扱ったデザインを記録します。また、design-system / mechanics deal を実行するたびに、直近 20 回の実行と照らし合わせてナビゲーション、ヒーロー、各セクション、フッター、モーションの独自性を評価するブロックを出力します（--window 1-200）。

AI エージェントはフロントエンドのコードをすばやく書きますが、どこでも同じような仕上がりになりがちです。クリーム色とテラコッタ、Inter、角丸のカード 3 枚、紫のグラデーション。さらに、目で確認できない問題も引き起こします。固定ヘッダーに隠れて見切れる見出し、Escape キーを押しても閉じないスマートフォンのメニュー、コントラスト比が 3:1 のテキスト、LCP が 4 秒を超える原因になるキャンバスなどです。

結果

6つのセットアップに、同じ1行の概要、同じモデル（Claude Opus 5.5）、各1つのビルドエージェントを与え、互いの出力は見られないようにしました。

その後、新しいブラインド審査員が、1440 pxと375 pxでのスクロール時の静止画を、デザイン、使いやすさ、創造性、コンテンツの観点から比較しました。競合のページは固定し、ラウンド間で再構築したのはLayozaのみです。以下でご自身でもページを評価してください。

レストランの概要：港のシーフードキッチン

ダッシュボードの概要：ベーカリーチェーンの朝の売上

店舗の概要：小さなリネンショップ

キネティックエージェンシーの概要：動きを重視したスタジオのホームページ

Layozaが勝っていない点。画像を信頼する前にお読みください。

• キネティックは引き分けであり、勝利ではありません。 taste-skillのページも同じくらい優れていました。複数回のラウンドではリードが入れ替わり、審査員の評価のばらつきの範囲内にとどまりました。
• 以前の単一概要でのラウンド： アニメーションのないシンプルなページではimpeccableがLayozaを上回り、以前のキネティックのラウンドではui-ux-pro-maxが上回りました。
• 各ラウンドの審査員は1人で、スクリーンショットを評価します。 動きそのものは評価対象ではありません。そのため、動画では実際のブラウザー録画を使っています。
• 審査員が繰り返し指摘する弱点：
  • キネティックページの創造性は、優れてはいるものの、際立つほどではありません
  • スクロール途中の静止画では、固定ヘッダーに見出しが切られているように見える
  • スマートフォンではヒーローアートが小さい
  • ラボ環境でのLCPが目標の2.5秒を大幅に超える3Dヒーロー

評価方法、各ラウンド、審査員のコメント（未加工のスコアを含む）は、docs/CROSS-TYPE-BENCHMARK-2026-10.mdに記載されています。デモページは、新しい一式を用意するため、2026年10月に削除されました。任意のページでQAを実行するには：

npx layoza qa path/to/index.html

できること

出力はプロジェクトで使われているスタックに合わせて生成されます。

• React、Next.js、Astro、Vue、Nuxt、SvelteKit
• プレーンなHTML/CSS/JS
• WordPressブロックテーマ（theme.json v3）
• ElementorまたはBricksのJSON
• Shopify Liquid

4つのモード

layoza ルータースキルがプロンプトからモードを選ぶため、エージェントに 「サイトのほかの部分に合う料金ページを追加して」 と頼むだけで使えます。

どのモードを選べばよいですか？

• 何もない状態から始める場合 → A。コードを書く前に、異なる3つの方向性から選べます。
• サイトの見た目は気に入っていて、ページなどを追加したい場合 → B。Layozaは現在の見た目を再現し、独自のデザインを押し付けません。
• サイトは動作するものの、古びて見える場合やアクセシビリティに問題がある場合 → C。
• 見た目を一新したい場合 → D。最初にベースラインを取得するため、元に戻せます。

インストール

Node.js 18以降が必要です。npmパッケージには、Windows x64、macOS（IntelおよびAppleシリコン）、Linux（x64およびarm64）向けのビルド済みバイナリが含まれています。それ以外のプラットフォームでは初回実行時にソースからコンパイルされ、その際にRustが必要です。ビジュアルQAにはPlaywrightも必要です。

npm i -D playwright && npx playwright install chromium

続いて、プロジェクト内で次を実行します。

npx layoza init      # skills + MCP config for every agent it detects
npx layoza doctor    # checks Node, Playwright and the MCP handshake

または、MCP サーバーを手動で追加します。

claude mcp add layoza -- npx -y -p layoza layoza-mcp

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

codex mcp add layoza -- npx -y -p layoza layoza-mcp

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

{ "mcp": { "layoza": { "type": "local", "command": ["npx", "-y", "-p", "layoza", "layoza-mcp"], "enabled": true } } }

recommend_layout は非推奨で、一覧にも表示されないため、tools/list は 24 個のツールを返します。

CLI の追加機能

• layoza guidelines search "<query>" [--limit 1-50] と layoza guidelines get <id>：MCP ツールと同じガイドライン検索を行います（同義語と語幹も含みます）。
• layoza chart "<data shape>" [--task "<task>"]：フォールバック付きで、上位 3 つのチャートタイプを提示します。
• design-system と mechanics deal の --window N は、一意性チェックで比較する台帳の実行数を設定します（デフォルトは 36、最大は 200）。--no-ledger は台帳を無視します。
• layoza audit . --strict と layoza verify . --strict は、ゲートの警告（方向性について承認記録のない新しいサイトなど）をエラーにします。
• layoza qa <file> --full は、すべての幅で完全なビジュアルチェックを実行します。速度チェックはデフォルトでは無効です。実行するには別途 --performance を指定してください。--allow a,b を指定すると、名前を挙げたパスに限定されます。レポートには mode、passes、skipped_passes が表示されます。
• layoza conform <file> --deal deal.json [--direction N] は、構築したページを割り当てられたページの形状（design-system --json の出力）と照合し、すべての制約ルール、ボタンの形状、モチーフを Chromium で 1440px と 390px において測定します。根拠とともに PASS / FAIL / unknown と 0～100 のスコアを出力し、チェックに失敗すると終了コード 2 で終了します。QA は不具合を検出し、conform は割り当て内容からの逸脱を検出します。
• 環境変数：LAYOZA_QA_TIMEOUT_SECS（ブラウザー QA のタイムアウト）、LAYOZA_PLAYWRIGHT_DIR（Playwright のインストール先）、LAYOZA_QA_ENGINE=python（Python Playwright エンジンを使用）。

inspect_site は、指定したページを取得します。返される内容はすべて信頼できないデータとして扱ってください。Layoza は検査したページ内の指示を実行しません。

スキル

Layoza には、段階的開示に対応した 19 個のスキルが付属しています。内訳は layoza ルーターと 18 個の専門スキルです。

• ワークフロー： layoza-new-website、layoza-extend-website、layoza-refine、layoza-redesign
• デザイン： layoza-site-dna、layoza-design-system、layoza-art-direction、layoza-creative-direction
• 構築： layoza-components、layoza-product-ui、layoza-figma、layoza-wordpress
• モーション： layoza-animations、layoza-threejs-webgl
• チェック： layoza-accessibility、layoza-performance、layoza-visual-qa、layoza-discovery-audit

docs/SKILLS-GUIDE.md を参照してください。

他のアプローチとの比較

作業に合ったものを選んでください。

Layoza を使わない場合：

• 公開する予定のない、手早く作る一度限りのモックアップ（frontend-design のほうが軽量です）

FAQ

ドキュメント

インストール · CLI · MCP · スキル · モーションレシピ · 既存サイトのワークフロー · プロンプトの例 · アーキテクチャ · セキュリティ · トラブルシューティング · ベンチマーク

クレジット

Layoza は、Apache-2.0 および MIT ライセンスのオープンソースのデザインスキルから、ファイルではなくアイデアを取り入れています。クレジット表記は THIRD_PARTY_NOTICES.md に記載されています。

ライセンス

MIT

根拠に基づくデザインワークフロー

デフォルトの MCP ツールリストには、サポートされている 24 個のツールすべてが表示されます。get_design_system は brief_context を受け取り、実際のクライアントの対象、事実、固定された選択を保持し、デフォルトの依頼内容でも 3 つの構成案を返します。design_assets は出典情報とともに実際の画像を一覧化して登録します。import_design_tokens はローカルの DTCG/Figma Variables JSON をエイリアスやモードとともにインポートします。review_design は実際のスクリーンショットの証拠を保存し、古くなったソースやレンダリングにフラグを立てます。compare_before_after は指定された PNG スクリーンショットをデコードして比較できます。パフォーマンス診断は引き続きオプトインです。