design-fast について
design-fastは、UIデザインを素早く作成するためのスキルです。デザイン情報の調査とデザイナーのサブエージェントによる作成を行い、ユーザーの確認を経て進めます。
主な機能
- 01デザイン情報の調査
- 02サブエージェントへのデザイン作成委任
- 03確定前のユーザー確認
- 04HTML、CSS、JavaScriptを既定で使用
活用シーン
- 01短時間でのUIデザイン作成
- 02フレームワーク未指定時のデザイン開始
- 03承認前のデザイン案確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ duc01226/ easyplatform --skill design-fastインストール後、Claude Code で/design-fastを入力して読み込まれたか確認します。
詳細
Codex 互換性に関する注意:
- Codex では
$skill-nameを使ってリポジトリのスキルを呼び出します。このミラーコピーでは、従来の Claude の/skill-name参照を書き換えています。- タスクトラッカーに関する必須事項:ワークフローまたはスキルの手順を実行する前に、すべての手順のタスク追跡を作成または更新し、進捗が変わるたびに同期してください。
- ユーザーへの質問を促すプロンプトがある場合は、Codex でユーザーに直接質問してください。
- Claude 固有のモード切り替え指示がある場合は無視してください。
- 厳格な実行規約:ユーザーがスキルを明示的に呼び出した場合は、そのスキルの手順を記載どおりに実行してください。
- サブエージェントの使用許可:スキルがユーザーによって呼び出された場合、または AI が検出した場合に、その手順でサブエージェントが必要とされるなら、そのスキルの有効化により、そのタスクに必要な
spawn_agentサブエージェントの使用が許可されます。- ユーザーが事前に変更を明示的に承認しない限り、手順を省略、並べ替え、統合しないでください。
- ワークフロースキルでは、列挙された各子スキルの手順を個別に明示して実行し、各手順の根拠を順を追って報告してください。
- 必須の手順またはツールをこの環境で実行できない場合は、適応策を講じる前に停止してユーザーに確認してください。
Codex でのプロジェクト参照ドキュメントの読み込み(フックなし)
Codex では Claude のフックによるドキュメントの自動挿入が行われません。 コーディング、計画、デバッグ、テスト、レビューを行う際は、このルーティングに従ってプロジェクトのドキュメントを明示的に開いてください。
必ず読むドキュメント:
docs/project-config.json(プロジェクト固有のパス、コマンド、モジュール、ワークフローとテストの設定)docs/project-reference/docs-index-reference.md(docs/project-reference/*カタログ全体へのルート)docs/project-reference/lessons.md(常に適用されるガードレールとアンチパターン)
状況に応じて読むドキュメント:
- バックエンド/CQRS/API/ドメイン/エンティティの変更:
backend-patterns-reference.md、domain-entities-reference.md、project-structure-reference.md - フロントエンド/UI/スタイル設定/デザインシステム:
frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md - 仕様/テストケースの計画または TC のマッピング:
feature-docs-reference.md - 結合テストの実装/レビュー:
integration-test-reference.md - E2E テストの実装/レビュー:
e2e-test-reference.md - コードレビュー/監査作業:
code-review-rules.mdと、変更ファイルに応じた上記のドメインドキュメント
すべてのドキュメントを無差別に読まないでください。まず docs-index-reference.md を確認し、タスクに関連するファイルだけを開いてください。
クイックサマリー
目標: デザインインテリジェンスデータベースとサブエージェントを活用して、簡単な UI デザインを作成します。
ワークフロー:
- 調査 —
ui-ux-pro-maxの検索を実行し、デザインインテリジェンスを調査します - デザイン —
ui-ux-designerサブエージェントを使ってデザインを作成します - レビュー — ユーザーに提示して承認を得ます
主なルール:
- デザインインテリジェンスの調査では、必ず最初に
ui-ux-pro-maxを有効化してください - ユーザーがフレームワークを指定しない場合は、純粋な HTML/CSS/JS をデフォルトにします
- 実際のビジュアルアセットの生成には
ai-multimodalを使用してください
懐疑的な姿勢を保ち、批判的思考とシーケンシャルシンキングを適用してください。すべての主張には追跡可能な証拠と確信度を示してください(Idea は 80% を超える必要があります)。
必須スキル(優先順位順)
ui-ux-pro-max- デザインインテリジェンスデータベース(必ず最初に有効化)frontend-design- 簡単な実装
高品質を保ちつつ、トークンを効率的に使用してください。
ワークフロー:
- 最初に:
ui-ux-pro-maxで検索し、デザインに関する情報を収集します。python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color ui-ux-designerサブエージェントを使用して、デザインの作業を開始します。- ユーザーから指定がない場合は、純粋な HTML/CSS/JS でデザインを作成します。
- 変更内容を要約し、すべてを簡潔に説明してユーザーに報告します。変更内容を確認し、承認するようユーザーに依頼します。
- ユーザーが変更を承認したら、必要に応じて
./docs/design-guidelines.mdのドキュメントを更新します。
注記:
ai-multimodalスキルを使って、画像や動画の生成、画像の編集などができます。これらを活用してデザインと実際のアセットを作成してください。ai-multimodalスキルを使って、生成したアセットを必ず確認、分析し、品質を再確認してください。- 必要に応じて、
./docs/design-guidelines.mdのドキュメントを維持、更新してください。
[IMPORTANT] 作業を始める前に、タスク管理を使ってすべての作業を小さなタスクに分割してください。各ファイルを読む作業もタスクに含めます。これにより、長いファイルによるコンテキストの喪失を防げます。単純なタスクの場合は、スキップしてよいかユーザーに必ず確認してください。
Orchestration Protocol、Core Responsibilities、Subagents Team、Development Rules に従い、よく考えて計画を立て、これらのタスクに取り組んでください。 $ARGUMENTS
スキルのバリエーション: デザインスキルのバリエーション — クイックなデザイン実装。
AI のミスを防ぐために — すべてのタスクで、次の失敗パターンを避けてください。
削除する前に、後続の参照箇所を確認してください。 コンポーネントを削除すると、ドキュメントやコードに古い記述が連鎖的に残る可能性があります。削除する前に、参照しているファイルをすべて特定してください。 AI が生成した内容を実際のコードと照合してください。 AI は API、クラス名、メソッドのシグネチャを捏造することがあります。ドキュメントに記載したり参照したりする前に、必ず grep で実在を確認してください。 編集後は依存関係を最後までたどってください。 定義を変更しても、そこから派生する変数や利用箇所が更新されないことがあります。依存関係を最後までたどってください。 正しさを検証する際は、すべてのコードパスをたどってください。 コードが存在することを確認しても、実行されることを確認したことにはなりません。正常系だけでなく、早期リターン、エラー分岐、条件によるスキップも必ず確認してください。 デバッグ時は、修正する前に「どちらの責任か」を確認してください。 バグの原因が呼び出し元の誤ったデータなのか、呼び出し先の不適切な処理なのかをたどってください。責任のあるレイヤーで修正し、症状が現れる箇所だけを修正しないでください。 既存の値は意図的なものと考え、変更する前に理由を確認してください。 定数、上限、フラグ、パターンを変更する前に、コメントを読み、git blame を確認し、周囲のコードを調べてください。 最初の出力だけでなく、影響を受ける出力をすべて検証してください。 複数のスタックに関わる変更では、すべての出力を検証してください。チェックが1つ通っても、すべて通ったことにはなりません。 全体を優先してデバッグし、目につきやすい箇所に飛びつかないでください。 問題を調査するときは、まず前提条件をすべて列挙してください(設定、環境変数、DB 名、エンドポイント、DI 登録、データの前提条件など)。その後、コード層の原因を仮定する前に、証拠に基づいて各項目を確認してください。 変更は必要最小限にし、差分で確認してください。 バグ修正では、変更するすべての行がバグに直接関係していなければなりません。周辺コードのスタイル変更や改善は行わないでください。機能強化のタスクでは、改善を実装し、その内容を明示してください。 実装前に曖昧な点を明らかにし、黙って解釈を決めないでください。 依頼に複数の解釈がある場合は、それぞれの工数見積もりとともに提示して確認を求めてください。全レコード対象、ファイルベース、またはより複雑な方法を、確認なしに選ばないでください。
批判的思考の姿勢 — 批判的思考と段階的思考を適用してください。行動に移すには、すべての主張にたどれる根拠が必要で、確信度は80%を超えていなければなりません。 幻覚の防止: 推測を事実として述べないでください。すべての主張の出典を示し、不確実な点は率直に認め、出力に誤りがないか自ら確認し、独立した情報源と照合し、自分の確信を疑ってください。根拠のない確信は、あらゆる幻覚の根源です。
必ず注意して批判的思考を適用してください。すべての主張にたどれる根拠が必要で、行動に移すには確信度が80%を超えていなければなりません。幻覚を防ぐため、推測を事実として述べないでください。
必ず注意してAI のミス防止策を適用してください。全体を優先してデバッグし、責任のあるレイヤーで修正し、実装前に曖昧な点を明らかにし、コンパクション後はファイルを読み直してください。
最後のリマインダー
- 必須・重要・必ず注意 作業を始める前に、タスク追跡を使って作業を小さな ToDo タスクに分割してください
- 必須・重要・必ず注意 新しいコードを作成する前に、コードベース内で類似パターンを 3 つ以上検索してください
- 必須・重要・必ず注意 すべての主張に
file:lineの根拠を示してください(確信度が 80% を超える場合に実行) - 必須・重要・必ず注意 作業品質を確認するための最終レビュー ToDo タスクを追加してください
[TASK-PLANNING] 作業を始める前に、タスクの範囲を分析し、タスク追跡を使って小さな ToDo タスクとサブタスクに体系的に分割してください。
フックレス・プロンプト・プロトコル・ミラー(自動同期)
ソース:.claude/hooks/lib/prompt-injections.cjs + .claude/.ck.json
[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] ワークフロー実行プロトコル — 必須・重要・必ず・重大。いかなる理由でも省略しないでください。
汎用的な移植性の境界: 再利用可能なスキルとプロトコルの文面はプロジェクトに依存しないものとし、プロジェクト固有の規約は docs/project-config.json と docs/project-reference/ から確認します。共有 AI-SDD は shared/sdd-artifact-contract.md を適用してください。docs/project-config.json と docs/project-reference/docs-index-reference.md を読み、そこに記載されたプロジェクトリファレンス文書を開いてください。共有コンテキストとローカル文書を利用できる場合は、サポート対象のあらゆる AI ツールで実行できます。
- 検出: プロンプトをワークフローカタログと照合します
- 分析: 最適なワークフローを見つけ、カスタムのステップの組み合わせのほうが適しているかも評価します
- 質問(必須形式): ユーザーが明示的にワークフロー/スキルを呼び出しており、ローカルプロトコルでその明示的な呼び出しを確認とみなす場合を除き、次の構成でユーザーに直接質問します:
- 質問:「どのワークフローを有効にしますか?」
- オプション 1:「[最適なワークフロー] を有効にする(推奨)」
- オプション 2:「カスタムワークフローを有効にする:[ステップ1 → ステップ2 → ...]」(理由を 1 行で記載)
- 有効化(確認後): 標準ワークフローには
$workflow-start <workflowId>を呼び出します。カスタムのステップは手動で順に実行します - タスクの作成: すべてのワークフローステップについて、タスク追跡を使ってタスクを作成します
- 実行: 各ステップを順番に実行します [CRITICAL-THINKING-MINDSET] 批判的思考と順序立てた思考を適用します。すべての主張には追跡可能な根拠が必要であり、確信度が 80% を超える場合に実行します。 ハルシネーション防止の原則: 推測を事実として提示しないでください。すべての主張に出典を引用し、不確実性は率直に認め、出力に誤りがないか自己確認し、独立した情報源と相互参照し、自分の確信度にも懐疑的でいてください。根拠のない確信は、あらゆるハルシネーションの根源です。 AI 注意の原則(初頭効果・新近効果): 長いプロンプト/プロトコルでは、最も重要な 3 つのルールを冒頭と末尾の両方に配置し、長いコンテキストでも指示への準拠を保てるようにします。 目標主導の実行: まず成功基準を定義し、検証できるまで繰り返します。観察可能なチェックに合格した場合にのみ停止します。 テストで意図を検証: テストは、現在の動作をただ反映するだけでなく、ビジネスルールや不変条件を保護し、保護対象の意図が破られた場合に失敗するようにしてください。
[LESSON-LEARNED-REMINDER] [BLOCKING] タスク計画と継続的改善 — 必須。省略しないでください。
作業を始める前に、作業を小さなタスクに分けて(タスク追跡を行って)ください。最後のタスクとして「AI のミスと教訓を分析する」を追加してください。
教訓を抽出する — 症状への対処ではなく、根本原因のみ:
- 症状ではなく、失敗モード(推論や前提の誤り)に名前を付けます。「誤った列挙値を使った」ではなく、「ソースを読まずに API が存在すると仮定した」。
- 汎用性を確認します。この失敗モードは、3 つ以上の状況やコードベースに当てはまりますか?当てはまらない場合は、もう 1 段階抽象化してください。
- 普遍的なルールとして記述します。プロジェクト固有の名前、パス、クラスを取り除き、どのコードベースでも役立つ内容にしてください。
- まとめます。同じ失敗モードに起因する複数のミスは、1 つの教訓にまとめてください。
- 再発確認:「このリマインダーがなくても、今後のセッションで再発しますか?」いいえの場合は、
$learnを省略します。 - 自動修正確認:「
$code-review/$code-simplifier/$security/$lintで検出できますか?」はいの場合は、代わりにレビューのスキルを改善してください。 - **両方の確認を通過した場合:**ユーザーに
$learnの実行を依頼してください。 [TASK-PLANNING] [MANDATORY] ワークフローやスキルの手順を実行する前に、計画したすべての手順についてタスク追跡を作成または更新してください。その後、各手順の開始時と完了時に、タスク追跡の内容を同期してください。