デザインからコードまでのパイプライン (URL からコピーを抽出し、画像からデザイン トークンを抽出し、React コンポーネントまたは HTML プレビュー バリアントをビルドします)。 Web サイトからのコンテンツの抽出、デザイン システムの抽出、フロントエンド コードの生成、デザイン バリアントのプレビュー、MCP 経由の Figma への送信時に使用します。ユーザーが参照 URL またはスクリーンショットからページを構築する場合、既存のサイトを再デザインする場合、ビジュアル プロトタイプを作成する場合、またはデザインからコードを生成する場合にも使用します。 「コピーの抽出」、「デザインの抽出」、「フロントエンドの構築」、「バリアントの生成」、「デザインのエクスポート」、「Figma に送信」、「参照から構築」、「これを再設計」、「プロトタイプの作成」をトリガーします。
コマンドラインで design-builder AI スキルを開発環境にすばやくインストール
ソース: adeonir/agent-skills。
Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.
If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.
If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.
デザインからコードまでのパイプライン (URL からコピーを抽出し、画像からデザイン トークンを抽出し、React コンポーネントまたは HTML プレビュー バリアントをビルドします)。 Web サイトからのコンテンツの抽出、デザイン システムの抽出、フロントエンド コードの生成、デザイン バリアントのプレビュー、MCP 経由の Figma への送信時に使用します。ユーザーが参照 URL またはスクリーンショットからページを構築する場合、既存のサイトを再デザインする場合、ビジュアル プロトタイプを作成する場合、またはデザインからコードを生成する場合にも使用します。 「コピーの抽出」、「デザインの抽出」、「フロントエンドの構築」、「バリアントの生成」、「デザインのエクスポート」、「Figma に送信」、「参照から構築」、「これを再設計」、「プロトタイプの作成」をトリガーします。 ソース: adeonir/agent-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/adeonir/agent-skills --skill design-builderデザインからコードまでのパイプライン (URL からコピーを抽出し、画像からデザイン トークンを抽出し、React コンポーネントまたは HTML プレビュー バリアントをビルドします)。 Web サイトからのコンテンツの抽出、デザイン システムの抽出、フロントエンド コードの生成、デザイン バリアントのプレビュー、MCP 経由の Figma への送信時に使用します。ユーザーが参照 URL またはスクリーンショットからページを構築する場合、既存のサイトを再デザインする場合、ビジュアル プロトタイプを作成する場合、またはデザインからコードを生成する場合にも使用します。 「コピーの抽出」、「デザインの抽出」、「フロントエンドの構築」、「バリアントの生成」、「デザインのエクスポート」、「Figma に送信」、「参照から構築」、「これを再設計」、「プロトタイプの作成」をトリガーします。 ソース: adeonir/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/adeonir/agent-skills --skill design-builder インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/adeonir/agent-skills