Webdesign

音声通知（必須の最初のアクション）

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the Webdesign skill", "voice_enabled": true}' > /dev/null

概要

Web インターフェースを 2 つの経路で設計し、統合します。ClaudeDesign は Interceptor スキルを通じて Anthropic の claude.ai/design 製品を操作し、その成果をコードベースに取り込みます。DirectDesign は、ローカルのリファレンスから読み込んだ Anthropic のオープンソースのフロントエンド設計思想を使って、設計をインラインで記述します。デフォルトの振り分けは、短時間のその場限りのコードベース内作業には DirectDesign、複数ページにわたるプロトタイプや共有可能なプロトタイプには ClaudeDesign です。

解決する課題

優れた Web UI を作るには、通常、実際のコードベースに触れられないビジュアルツールと格闘するか、ゼロから手作業でコードを書いて毎回同じような一般的なデフォルトに行き着くことになります。この 2 つの失敗パターンは正反対です。ビジュアルファーストのツールは洗練された見た目を実現できますが、引き継ぎに隔たりが生まれます。一方、コードを直接書けば統合できますが、見た目が平板になります。このスキルでは、両方の経路を 1 つにまとめています。レビューが重要な場合は claude.ai/design を通じたビジュアルの往復を行い、速度やコードベース内での反復が重要な場合は、実際の美学上の指針を読み込んだうえでインライン設計を行います。そして、依頼内容に基づいて適切な経路を選びます。

動作の仕組み

Webdesign では、Web UI を作成するための 3 つの経路を用意しています。目的に合った経路を選び、意図が曖昧な場合は選択肢を名前を挙げて提示してください。 常に、その時点で公開されているバージョンの Claude Design を操作します。固定するバージョンはありません。

経路 1 — DirectDesign（標準の主力；{{DA_NAME}} が設計をインラインで記述）

{{DA_NAME}} は、Anthropic のオープンソース frontend-design の美学上の指針をインラインで読み込み、設計を直接記述します。設計の中核となるプロンプトの内容は、github.com/anthropics/skills/tree/main/skills/frontend-design（MIT ライセンス）から References/FrontendDesignPhilosophy.md に反映されています。これには、スタイルの一覧、デフォルトを避けるルール、フォントの組み合わせ例、モーションの語彙、色使いの規律が含まれます。自己完結型であり、実行時の依存関係、ブラウザー、認証は必要ありません。このスキルがこれまでに実際に生み出し、リリースしたすべてのデザインで使われた経路です。ワークフロー：DirectDesign。

経路 2 — Claude Design ネイティブ CLI（コード統合とデザインシステムの同期に最適）

Anthropic は Claude Code 内に、ファーストパーティの /design および /design-sync コマンドをリリースしました（2026 年 6 月、Pro／Max／Team／Enterprise で一般提供 — 公式情報：support.claude.com/en/articles/14604416）。/design-sync は、コードベースの実際のデザインシステムを Claude Design に取り込み、作成した変更をコードベースに反映します。/design はターミナルからデザインを作成・編集します。これらは、手作業で構築した Interceptor の引き継ぎバンドル機構に代わる、決定論的なファーストパーティの手段です。コードと結び付いた作業には、こちらを優先してください。ワークフロー：NativeDesignSync。

経路 3 — Interceptor 経由の ClaudeDesign（実験的なビジュアルレビュー用の代替手段）

⚠️ 未検証で、現在は動作しません。この経路では、ビジュアルファーストのレビューを目的として、Interceptor スキルを通じて claude.ai/design の Web キャンバスを操作します。interceptor-test Chrome プロファイルで認証済みの claude.ai セッションが必要ですが、現在ログインしていません。また、エンドツーエンドで実行されたことはありません（このスキルを実際に実行したすべてのケースで DirectDesign が使われました）。Web キャンバスでのビジュアル確認を明確に希望し、あらかじめログインを設定している場合に限り使用してください。ワークフロー：CreatePrototype、ExtractDesignSystem、RefinePrototype、WebsiteToRedesign、ExportToCode、IntegrateIntoApp、DeployDesign。ツール：DriveClaudeDesign.ts。

振り分けルール

ユーザーが経路を指定せずに「いい感じのデザイン」や「何かデザインして」と依頼した場合：

• 短時間のその場限りのコードベース内作業では DirectDesign をデフォルトにします。迅速に進められ、文脈に沿って反復できます。
• 実際のコードベースのデザインシステムを同期する作業や、コードと結び付いた設計作業で、コマンドが利用できる場合はネイティブ CLI（/design-sync）を使います。
• ビジュアル Web キャンバスでのレビューが明確に求められている場合に限り、ClaudeDesign（経路 3）を使用します。事前に一度ログインする必要があり、動作は未検証であることを忘れないでください。

インテグレーションを考慮した動作（重要）

このスキルは、ブログ記事の執筆、管理ダッシュボードの構築、マーケティングページの公開など、より大規模なサイト作業のサブステップとして頻繁に呼び出されます。親コンテキストから呼び出された場合、このスキルは次のように動作します。

• フレームワーク、トークンファイル、コンポーネントディレクトリ、デプロイ先など、既存プロジェクトのコンテキストを入力として受け取ります。
• 独立した HTML ファイルではなく、既存アプリに対する差分／パッチとして出力します。
• 既存のデザイントークンやコンポーネントのパターンを尊重し、ユーザーが全面的な再設計を依頼しない限り、それらを上書きしません。
• インテグレーション作業は Workflows/IntegrateIntoApp.md を通じて行います。

ゼロからのデザインを単独で行う場合、このスキルは自己完結型のプロトタイプを作成し、必要に応じて新しいアプリをスキャフォールディングします。

カスタマイズ

ユーザー固有のデザイン設定（カラーパレット、タイポグラフィ、スペーシンググリッド、アニメーションのタイミング、フレームワークのデフォルト設定）は、次の場所にあります。

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Design tokens, preferred frameworks
├── README.md
└── EXTEND.yaml

スキルは、PREFERENCES.md が存在する場合にそれを読み込み、そのトークンを Claude Design のブリーフと、後続のハンドオフバンドルに渡します。カスタマイズレイヤーがない場合、スキルは Claude Design 独自のシステム抽出結果をデフォルトとして使用します。

ワークフローの振り分け

ワークフローを実行するときは、次の通知を出力してください。

Running **WorkflowName** in **Webdesign**...

ワークフロー	トリガー	ファイル
DirectDesign (パス 1 — デフォルト、{{DA_NAME}} がインラインで作成)	「見栄えのよいデザインを作成」、「これを直接デザイン」、「自分でデザイン」、「クールなものをデザイン」、「フロントエンドの美しさ」、「ブルータリスト／エディトリアル／レトロ／マキシマリスト UI」、「prototype」／「mockup」／「claude design」を含まない短い単発のデザイン依頼	Workflows/DirectDesign.md
NativeDesignSync (パス 2 — コード作業に推奨)	「/design」、「/design-sync」、「design sync」、「デザインシステムを同期」、「デザインシステムを Claude Design に取り込む」、「コードを Claude Design に戻す」、「ネイティブデザインコマンド」	Workflows/NativeDesignSync.md
CreatePrototype (パス 3 — 実験的、claude.ai/design を使用)	「プロトタイプをデザイン」、「プロトタイプを作成」、「モックアップ」、「デザインを構築」、「claude design」、「claude.ai/design を使用」	Workflows/CreatePrototype.md
ExtractDesignSystem (パス 3)	「デザインシステムを抽出」、「トークンを取り込む」、「ブランドを抽出」	Workflows/ExtractDesignSystem.md
RefinePrototype (パス 3)	「反復する」、「調整する」、「スペーシングを調整」、「色を変更」	Workflows/RefinePrototype.md
WebsiteToRedesign (パス 3)	「このサイトを再デザイン」、「この URL を再構築」、「モダン化」	Workflows/WebsiteToRedesign.md
ExportToCode (パス 3 のフォールバック — /design-sync を推奨)	「コードにエクスポート」、「コードとして公開」、「Claude Code に送信」、「ハンドオフを処理」	Workflows/ExportToCode.md
IntegrateIntoApp (パス 3 のフォールバック — /design-sync を推奨)	「これを～に統合」、「アプリにパッチを適用」、「既存のコードベースに反映」	Workflows/IntegrateIntoApp.md
DeployDesign (パス 3)	「デザインをデプロイ」、「本番環境に公開」	Workflows/DeployDesign.md

コードに関わる作業（エクスポート、インテグレーション、デザインシステムの抽出／同期）では、パス 2（NativeDesignSync → /design-sync）を優先してください。上記のパス 3 のバンドルワークフローは、Web キャンバスから作業する場合のフォールバックとして記載されていますが、実証されておらず、テストプロファイルでのログインが必要です。

前提条件（PREFLIGHT）

パス 1（DirectDesign）には何も必要ありません。ブラウザーも認証も不要です。パス 2（ネイティブ CLI）では、Claude Design を利用できる Claude サブスクリプションと、最新の Claude Code のみが必要です（コマンドが表示されない場合は /update を実行してください）。以下のチェックはパス 3（Interceptor 経由の ClaudeDesign）にのみ適用されます。

1. Interceptor スキルが利用可能であること — which interceptor を実行するとパスが返されます。返されない場合は、まず Skill("Interceptor") を実行してセットアップするようユーザーに案内してください。
2. claude.ai セッションで認証済みであること — interceptor-test Chrome プロファイルで claude.ai にログインしている必要があります。実行時に確認してください（未認証のプロファイルではアプリではなくマーケティングページが表示されます）。ログインしていない場合は、パス 3 のワークフローを実行する前に、一度だけブラウザーを表示した状態でログインする必要があります。
3. Claude Design にアクセスできること — Claude サブスクリプションに Claude Design が含まれている必要があります（Pro、Max、Team、または管理者がオプトインした Enterprise）。
4. IntegrateIntoApp の場合：コンテキストに、親プロジェクトのパスとフレームワーク識別子（next、astro、vitepress、vite-react、vue、vanilla）が渡されていること。

前提条件が不足している場合は、明確な解決手順を示して処理を停止してください。黙って別の方法に切り替えてはいけません。

注意点

ここに学びを蓄積してください。情報密度が最も高いのは「注意点」です。

• 2 つの経路、1 つのスキルです。 ClaudeDesign（CreatePrototype など）は claude.ai/design を操作します。DirectDesign では、{{DA_NAME}} が References/FrontendDesignPhilosophy.md を使ってデザインを直接記述します。この 2 つを混同しないでください。ユーザーの意図が曖昧な場合は、名前を付けた両方の選択肢を提示して選んでもらい、黙って一方に誘導しないでください。
• ネイティブ優先 — コードとトークンが信頼できる唯一の情報源であり、Figma は依存関係ではありません。 リポジトリをリンクしてデザインシステムをインポートする（Claude Design がコードから実際のコンポーネントとトークンを読み取ります）か、トークン／コンポーネントのファイルをアップロードしてください。.fig エクスポートは使わないでください。いずれの方向にも、Figma との往復（デザイン → .fig、またはコード → 編集可能な Figma フレーム）を追加しないでください。デザインは外部の交換ファイルではなく、コードベースに存在するという考え方です。リポジトリを使わずにビジュアルレビューが必要になった場合は、スキルを Figma に依存させるのではなく、URL／スクリーンショットの共有で解決してください。
• DirectDesign は自己完結型です。 デザインの原則は References/FrontendDesignPhilosophy.md にあります（anthropics/skills の MIT ソースを反映）。上流の frontend-design Claude Code プラグインがインストールされている必要はなく、DirectDesign はあらゆる LifeOS 環境で動作します。
• ネイティブの /design と /design-sync が、現在のコード連携経路です（確認済み）。 Anthropic の公式ドキュメント（support.claude.com/en/articles/14604416）には両方のコマンドが記載されており、2026 年 6 月時点で Pro／Max／Team／Enterprise で一般提供されています。/design-sync はコードベースとデザインシステムを双方向に同期するため、コード連携が必要な場合は Interceptor のハンドオフバンドル方式の代わりに使用してください。公開 REST API も MCP サーバーもまだなく、プログラムから利用できる手段は CLI コマンドです。表示されない場合は /update を実行してください。
• ClaudeDesign／Interceptor 経路（経路 3）は未検証で、現在は利用できません。 エンドツーエンドで実行されたことはなく、このスキルを実際に実行した際は毎回 DirectDesign が使われています。interceptor-test プロファイルは claude.ai にログインしていないため、DriveClaudeDesign.ts はアプリではなくマーケティングページに到達します。このツールはアクセシビリティツリーのヒューリスティクスで操作対象を特定します（作成欄は role=textbox／contenteditable、送信ボタンは /send|submit/、エクスポートボタンは /export/）。そのため、ボタンの位置変更が障害なのではありません。認証がないことと、ネイティブ CLI に置き換わっていることが障害です。経路 3 を信頼する前に、テストプロファイルで claude.ai に 1 度ログインし、監督下で 1 回だけ実行してください。
• 実際の Chrome が必要です。 Interceptor スキルを使用してください。LifeOS で認められているブラウザー自動化はこれだけです。Claude Design の UI は claude.ai の完全なセッション状態に依存しており、CDP ベースの自動化ではボット検出に引っかかり、セッション Cookie が失われます。
• ハンドオフバンドルは単一ファイルではなく、ディレクトリです。 バンドルには PROMPT.md、任意の tokens.json、components/、assets/、およびフレームワーク固有のスキャフォールディングが含まれます。ディレクトリ全体をひとまとまりとして扱ってください。
• frontend-design プラグインは自動的に有効になります。 ハンドオフバンドルを Claude Code に渡すと、（公式マーケットプレイスにすでにインストールされている）プラグインがフロントエンド作業を自動的に引き受けます。手動で呼び出さないでください。
• Claude Design のデザインシステム抽出はオンボーディング中に行われます。 Claude Design に新しいコードベースを理解させる場合は、CreatePrototype の前に必ず ExtractDesignSystem を実行してください。実行しないと、Claude Design は汎用のデフォルトを使用し、トークンを上書きします。
• 統合 ≠ 上書きです。 IntegrateIntoApp は既存コードをベースに差分を生成します。既存 UI を置き換える全面的な再デザインをユーザーが希望している場合は、その旨を明示して確認を得てください。
• Canva のエクスポートは編集可能です。 開発者以外（マーケター、創業者など）がデザインを調整できるようにしたい場合は、--format canva を指定して Workflows/ExportToCode.md を経由してください。
• リアルタイム共同編集には対応していません。 Claude Design は Figma のような複数人での編集をサポートしていません。非同期レビューには URL エクスポートを共有してください。
• Enterprise には事前設定が必要です。 Enterprise アカウントでは、claude.ai にパレットアイコンを表示する前に、管理者が Organization 設定で Claude Design を有効にする必要があります。
• セッションの使用量上限に注意してください。 Claude Design の生成はトークンを多く消費します。2026 年 6 月の更新時点で、使用量は claude.ai のチャット、Claude Code、Cowork と 1 つのプールを共有しており、別枠の上限はなくなりました。継続的なデザイン作業には Pro では容量が足りず、Max を推奨します。
• デザインシステム優先がトークン消費対策になります。 最も大きなトークン消費源は、作業のたびにブランドを推測し直して修正することです。ExtractDesignSystem を 1 回実行してシステムを固定の再利用可能な参照情報にすれば、その後の生成では推測せずに再利用できます。修正サイクルが減れば、プロジェクト全体のトークン消費も大幅に減ります。これは使用量上限の消費を抑えるうえで最も効果の高い方法です。
• 出力の忠実度 ≠ 本番環境でそのまま使えることです。 Claude Design は洗練されたビジュアルを生成しますが、引き継いだコードには検証と a11y の確認が必要になることがよくあります。統合後に Tools/VerifyDesign.ts を実行してください。
• ビジョンが不足情報を推測することはありません。 プロンプトでレスポンシブのブレークポイント、コントラスト要件、ダークモードの動作が指定されていない場合、Claude Design は対象アプリに合わない可能性のあるデフォルトを選びます。依頼内容を明確にしてください。

例

例 1：概要からプロトタイプを作成する

User: "Design a pricing page for an AI security startup — editorial aesthetic, dark only"
→ Invokes CreatePrototype workflow
→ Preflight: Interceptor + authenticated claude.ai session
→ Composes brief with explicit aesthetic, constraints, differentiation
→ Drives claude.ai/design via Tools/DriveClaudeDesign.ts
→ Screenshots output, verifies a11y via Tools/VerifyDesign.ts
→ Returns bundle path + preview URL

例 2：既存の Astro アプリに Claude Design のプロトタイプを組み込む

User: "Integrate this prototype into ~/Projects/landing — it's an Astro site"
→ Invokes IntegrateIntoApp workflow
→ Audits target project (framework, tokens, components)
→ Runs ExtractDesignSystem first to prime Claude Design with app's real tokens
→ Translates prototype to Astro conventions via frontend-design plugin
→ Produces unified diff against the working tree
→ Pauses for human review before applying
→ Applies patch on a branch, runs tests, screenshots in-context

例 3：公開中の既存サイトを再設計する

User: "Redesign example.com — modernize, keep the copy, make it brutalist"
→ Invokes WebsiteToRedesign workflow
→ Captures current state (screenshot + HTML + tokens)
→ Writes critique (what works, what's dated, what to preserve)
→ Composes rebuild brief with explicit aesthetic and preserve list
→ Drives Claude Design with critique + original screenshot as input
→ Iterates via RefinePrototype until satisfied
→ Hands off to IntegrateIntoApp or ExportToCode

ファイル構成

skills/Webdesign/
├── SKILL.md                          # This file — routing + gotchas
├── README.md                         # Public-facing intro
├── Workflows/
│   ├── DirectDesign.md               # Path 2 — {{DA_NAME}} writes inline (no claude.ai round-trip)
│   ├── CreatePrototype.md            # Path 1 — drives claude.ai/design
│   ├── ExtractDesignSystem.md
│   ├── RefinePrototype.md
│   ├── WebsiteToRedesign.md
│   ├── ExportToCode.md
│   ├── IntegrateIntoApp.md
│   └── DeployDesign.md
├── Tools/
│   ├── DriveClaudeDesign.ts          # Interceptor wrapper for claude.ai/design
│   ├── ProcessHandoffBundle.ts       # Parse bundle → structured brief
│   └── VerifyDesign.ts               # Screenshot + a11y probe
└── References/
    ├── FrontendDesignPhilosophy.md   # Aesthetic doctrine — load-bearing for DirectDesign (MIT-attributed mirror)
    ├── ClaudeDesignCapabilities.md   # What Claude Design does / doesn't do
    ├── InputFormats.md               # Prompt patterns, codebase prep
    ├── ExportFormats.md              # html / pdf / pptx / canva / url / bundle
    └── HandoffBundleSpec.md          # Bundle structure for Claude Code handoff

実行ログ

{"ts":"ISO8601","workflow":"CreatePrototype","brief":"one-line","outputs":["path1","path2"],"duration_s":42}

このログは読み取り専用のメタデータです。公開されるスキル配布物には含まれません。