danielmiessler/LifeOS

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

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Webdesignスキルを実行中", "voice_enabled": true}' > /dev/null

機能

2つのパスでWebインターフェースを設計・統合します。ClaudeDesignは、Interceptorスキルを介してAnthropicの claude.ai/design 製品を駆動し、その結果をコードベースに取り込みます。DirectDesignは、ローカルリファレンスから読み込んだAnthropicのオープンソースフロントエンドデザイン哲学を使用して、インラインで設計を記述します。デフォルトのルーティング：短いアドホックなコードベース内の作業はDirectDesignへ、マルチページまたは共有可能なプロトタイプはClaudeDesignへ送られます。

問題点

優れたWeb UIを生み出すには、実際のコードベースに触れられないビジュアルツールと格闘するか、ゼロから手作業でコーディングして毎回同じような凡庸なデフォルトに落ち着くかのどちらかになりがちです。2つの失敗モードは相反する方向に引っ張られます。ビジュアルファーストのツールは洗練さをもたらすがハンドオフのギャップが生じ、コードを直接記述する方法は統合性をもたらすが平坦な美学になります。このスキルは、レビューが重要な場合はclaude.ai/designを介したビジュアルラウンドトリップ、スピードとコードベース内のイテレーションが重要な場合は実際の美的ドクトリンを読み込んだインラインデザインという、2つの経路を1つの屋根の下に提供し、要求に応じて適切な経路にルーティングします。

仕組み

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でGA — 公式：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）を使用。
• ClaudeDesign（パス3）は、ビジュアルWebキャンバスレビューが明示的に望まれる場合にのみ使用し、それには1回限りのログインが必要で未検証であることを覚えておいてください。

統合認識動作（重要）

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

• 既存プロジェクトのコンテキスト（フレームワーク、トークンファイル、コンポーネントディレクトリ、デプロイメントターゲット）を入力として受け入れます。
• 出力を、独立したHTMLファイルではなく、既存のアプリに対する差分/パッチとして生成します。
• 既存のデザイントークンとコンポーネントパターンを尊重し、ユーザーが完全な再設計を要求しない限り、それらを上書きしません。
• 統合作業を Workflows/IntegrateIntoApp.md を通じてルーティングします。

グリーンフィールドデザインのために単独で呼び出された場合、スキルは自己完結型のプロトタイプを生成し、オプションで新しいアプリをスキャフォールディングします。

カスタマイズ

ユーザー固有のデザイン設定（カラーパレット、タイポグラフィ、スペーシンググリッド、アニメーションタイミング、フレームワークのデフォルト）は以下に保存されます：

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # デザイントークン、推奨フレームワーク
├── 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」「sync design system」「pull design system into Claude Design」「push code back to Claude Design」「native design command」	Workflows/NativeDesignSync.md
CreatePrototype (パス3 — 実験的、claude.ai/designを駆動)	「design a prototype」「create prototype」「mockup」「build a design」「claude design」「use claude.ai/design」	Workflows/CreatePrototype.md
ExtractDesignSystem (パス3)	「extract design system」「pull tokens from」「extract brand」	Workflows/ExtractDesignSystem.md
RefinePrototype (パス3)	「iterate on」「refine」「adjust spacing」「change color」	Workflows/RefinePrototype.md
WebsiteToRedesign (パス3)	「redesign this site」「rebuild this URL」「modernize」	Workflows/WebsiteToRedesign.md
ExportToCode (パス3のフォールバック — /design-sync を優先)	「export to code」「ship to code」「send to Claude Code」「process handoff」	Workflows/ExportToCode.md
IntegrateIntoApp (パス3のフォールバック — /design-sync を優先)	「integrate this into」「patch into the app」「land in existing codebase」	Workflows/IntegrateIntoApp.md
DeployDesign (パス3)	「deploy the design」「ship to production」	Workflows/DeployDesign.md

コードバウンドの作業（エクスポート、統合、デザインシステムの抽出/同期）には、パス2（NativeDesignSync → /design-sync）を優先してください。上記のパス3のバンドルワークフローは、Webキャンバスから作業する場合のドキュメント化されたフォールバックとして残されていますが、未検証であり、テストプロファイルのログインが必要です。

前提条件（プリフライト）

パス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のワークフローを実行する前に、1回限りのヘッド付きログインが必要です。
3. Claude Designへのアクセス — ClaudeサブスクリプションにClaude Designが含まれている必要があります（Pro、Max、Team、または管理者のオプトインがあるEnterprise）。
4. IntegrateIntoAppの場合：親プロジェクトのパスとフレームワーク識別子（next, astro, vitepress, vite-react, vue, vanilla）がコンテキストとして渡される必要があります。

前提条件が満たされていない場合 → 明確な修正手順を示して停止します。決して黙ってフォールバックしてはいけません。

注意点

教訓はここに蓄積します。情報密度は注意点で最も高くなります。

• 1つのスキルに2つのパス。 ClaudeDesign（CreatePrototypeなど）は claude.ai/design を駆動します。DirectDesignは References/FrontendDesignPhilosophy.md を使用して{{DA_NAME}}がインラインで設計を記述します。これらを混同しないでください。ユーザーの意図が曖昧な場合、両方を名前付きの選択肢として提示し、選択させてください。決して黙ってルーティングしてはいけません。
• ネイティブファースト — コードとトークンが真実の源泉であり、Figmaは依存関係ではありません。 リポジトリをリンクする（Claude Designはコードから実際のコンポーネントとトークンを読み取ります）か、トークン/コンポーネントファイルをアップロードしてデザインシステムをインポートします。.fig のエクスポートは絶対に使用しないでください。どちらの方向（デザイン→ .fig、またはコード→編集可能なFigmaフレーム）にも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でGAです。/design-sync はコードベース↔デザインシステムの双方向同期を行います。コードバウンドのものには、Interceptorのハンドオフバンドル機構の代わりにこれを使用してください。まだ公開REST APIやMCPサーバーはありません。CLIコマンドがプログラムによるインターフェースです。コマンドが表示されない場合は、/update を実行してください。
• ClaudeDesign/Interceptorパス（パス3）は未検証で現在ブロックされています。 エンドツーエンドで実行されたことは一度もありません。このスキルの実際の実行はすべてDirectDesignを使用しました。interceptor-test プロファイルはclaude.aiにログインしていないため、DriveClaudeDesign.ts はアプリではなくマーケティングウォールに到達します。ツールはアクセシビリティツリーヒューリスティック（composerは 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のエクスポートは編集可能です。 ユーザーが非開発者（マーケター、創業者）にデザインの洗練を依頼したい場合は、Workflows/ExportToCode.md に --format canva を指定してルーティングしてください。
• リアルタイムコラボレーションはありません。 Claude DesignはFigmaのようなマルチプレイヤー編集をサポートしていません。非同期レビューのためにURLエクスポートで共有してください。
• エンタープライズゲート。 エンタープライズアカウントでは、管理者がOrganization設定でClaude Designを有効にする必要があります。そうしないと、パレットアイコンがclaude.aiに表示されません。
• セッションクォータ。 Claude Designの生成はトークンを大量に消費します。2026年6月のアップデート以降、その使用量はclaude.aiチャット、Claude Code、Coworkと1つのプールを共有しており、もはや別のクォータではありません。Proは継続的なデザイン作業には不十分です。Maxを推奨します。
• デザインシステムファーストがトークン対策です。 最大のトークン消費は、パスを実行するたびにブランドを推測し直し、それを修正することです。ExtractDesignSystem を1回実行して、システムを固定の再利用可能なリファレンスにしてください。以降のすべての生成は、推測する代わりにそれを再利用します。修正サイクルが少ない = プロジェクトのライフサイクル全体で消費トークンが大幅に減少します。これは、クォータ消費に対する単一の最も効果的な対策です。
• 出力の忠実度 ≠ プロダクションレディ。 Claude Designは洗練されたビジュアルを生成しますが、ハンドオフコードはしばしば検証とa11yパスが必要です。統合後に Tools/VerifyDesign.ts を実行してください。
• Visionは推測しません。 プロンプトがレスポンシブブレークポイント、コントラスト要件、またはダークモードの動作を指定しない場合、Claude Designはターゲットアプリに一致しないデフォルトを選択する可能性があります。ブリーフで明示的に指定してください。

例

例1：ブリーフからプロトタイプを作成

ユーザー：「AIセキュリティスタートアップの価格ページをデザインして — エディトリアルな美学、ダークのみ」
→ CreatePrototypeワークフローを呼び出し
→ プリフライト：Interceptor + 認証済みclaude.aiセッション
→ 明示的な美学、制約、差別化要素を含むブリーフを作成
→ ツールを介してclaude.ai/designを駆動

…

[翻訳のために省略]