ui-design について
ui-design は、プロジェクトのコードに直接 UI を実装するためのフロントエンド設計スキルです。コーディング前にデザイン方針を定め、実装を検証します。Next.js の場合は、指定されたセキュリティバージョン要件を先に確認します。
主な機能
- 01モックアップより実装を優先
- 02成果物とデザイン制約を確認
- 03コーディング前にデザイン方針を決定
- 04必要に応じて特定コンポーネントの参考例を利用
- 05既存コンポーネントを再利用しレスポンシブとアクセシビリティに配慮
- 06チェックを実行し主要な操作を検証
活用シーン
- 01既存プロジェクトでページやコンポーネントを構築
- 02UI のビジュアルとレイアウト方針を定める
- 03レスポンシブ表示と操作状態を確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ui-designを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.txtagents/openai.yamlreferences/component-inspiration.mddesign-direction.mdvalidation-checklist.md詳細
UI デザイン
概要
明確なデザイン方針と本番品質を備えたフロントエンドコードを、ユーザーのプロジェクト内に直接構築します。
ユーザーがデザインのみの出力を明示的に求めている場合を除き、モックアップより実装を優先します。
ユーザーが別のフレームワークを指定しない限り、デフォルトで Next.js を使用します。
ワークフロー
以下の手順を順番に実行します。
ステップ 0：Next.js のセキュリティゲート（CVE-2025-55182）
プロジェクトで Next.js を使用している場合は、実装作業を始める前に、インストールされている next のバージョンを確認します。
以下のバージョンは脆弱なものとして扱い、まずアップグレードが必要です。
>=14.3.0-canary.77かつ<15.0.5>=15.1.0-canary.0かつ<15.1.9>=15.2.0-canary.0かつ<15.2.6>=15.3.0-canary.0かつ<15.3.6>=15.4.0-canary.0かつ<15.4.8>=15.5.0-canary.0かつ<15.5.7>=16.0.0-canary.0かつ<16.0.7
この CVE について、修正済みの以下のバージョンのみを使用します。
15.0.5、15.1.9、15.2.6、15.3.6、15.4.8、15.5.7、または各系列のそれ以降のパッチバージョン16.0.7以降15.6.0-canary.58+および16.1.0-canary.12+
安定版の 13.x および 14.x は、この CVE の影響を受けません。
バージョンの状態が不明確な場合は、続行する前に最新の安定版 Next.js にアップグレードします。
ステップ 1：実装要件を確認する
重要な入力項目のみを確認します。
- 成果物の種類（ページ、セクション、フロー、コンポーネント）
- 対象デバイス（デスクトップ、モバイル、レスポンシブ）
- フレームワークと制約（デフォルトは Next.js）
- 必要な状態とインタラクション
- ブランド上の制約（色、タイポグラフィ、トーン）
要件の不足により作業が進められない場合に限り、簡潔な追加質問をします。
ステップ 2：コーディング前にデザイン方針を定める
コードを書く前に、具体的な方針を決定します。
- 目的と対象ユーザー
- トーンと美的方向性
- レイアウトと階層の方針
- タイポグラフィと配色の体系
- モーションの方針
- 独自の差別化要素（印象に残る要素を 1 つ）
方針を作成または検証する際は、references/design-direction.md を読み込みます。
ステップ 3：必要な場合に限り、対象を絞って参考事例を調べる
参考事例の効果が期待できる特定のコンポーネントに限り、21st.dev を使用します。
幅広い参考事例の調査は行いません。
対象を絞った参考事例が必要な場合は、以下を行います。
- スクリーンショットのキャプチャ機能が利用可能であることを確認します。
- ウェブ／ブラウザー検索機能が利用可能であることを確認します。
- 必要最小限の参考事例のみをキャプチャします。
- そのまま模倣するのではなく、パターンを統合します。
スクリーンショットのキャプチャが利用できない場合は、作業を中断し、ユーザーに次のように伝えます。 「このワークフローでは、対象を絞ったコンポーネントの参考事例にスクリーンショットのキャプチャが必要です。スクリーンショットスキルをインストールして、再試行してください。」
ウェブ検索が利用できない場合は、検索を有効にして再起動するようユーザーに伝えます。
このステップが必要な場合は、references/component-inspiration.md を読み込みます。
ステップ 4：プロジェクトのコードに実装する
ユーザーのコードベースに直接実装します。
- まず既存のコンポーネントと規約を再利用します。
- レスポンシブな動作とアクセシブルな状態を維持します。
- ありがちな AI 風の構造、余白、スタイルのデフォルト設定は避けます。
- 選択した方針に沿って、ビジュアルに一貫性を持たせます。
ステップ 5：検証して納品する
完了前に、以下を行います。
- 変更したファイルに関連する lint／テスト／ビルドのチェックを実行します。
- レスポンシブな動作と重要なインタラクションの状態を確認します。
- 実装が明示した方針に合致していることを確認します。
最終的な品質確認を行うには、references/validation-checklist.md を読み込みます。
出力要件
最終回答には、以下を含めます。
- 選択したデザイン方針と独自の差別化要素
- 対象を絞った参考事例を使用したコンポーネント（該当する場合）
- 使用したフレームワーク（デフォルトの Next.js またはユーザー指定のもの）
- 変更した具体的なファイル
- 検証状況（実行したものと実行していないもの）