design-it について
design-itは、フロントエンド開発向けのスキルです。依頼内容を48種類のビジュアルスタイルに振り分け、選んだスタイルの実装方法を案内します。
主な機能
- 0148種類のビジュアルスタイルへの振り分け
- 02プロンプトのキーワードからスタイルを判定
- 03スタイル別のリファレンス
- 04任意で使えるカラーパレット
- 05Webとアプリの実装ガイダンス
- 06アクセシビリティと実装上の制約
活用シーン
- 01Webサイトのビジュアル方針の選定
- 02アプリ画面へのスタイル適用
- 03フロントエンドコンポーネントの構築
- 04UIのレビューと改善案の作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/design-itを入力して読み込まれたか確認します。
詳細
Design-It：洗練された UI スタイルルーター
これは、design-it スキルシステムのメインエントリーポイントです。ありきたりな「AI スロップ」の美学に頼る代わりに、独自の強いこだわりを持つ 48 種類のデザインスタイルを利用できます。
使用するタイミング
ユーザーからフロントエンドのインターフェース（ウェブサイト、アプリの画面、UI コンポーネント）の構築を依頼され、一般的なデフォルトではなく、特定のこだわりあるデザイン美学を適用したい場合に、このスキルを使用してください。
このスキルの使い方
ユーザーからフロントエンドのインターフェース（ウェブまたはアプリ）の構築を依頼された場合：
- スタイルを特定する（あいまい検索）：プロンプト内のキーワード（例：「ミニマル」「ガラス」「レトロ」）を探します。完全一致である必要はありません。意味を理解して、依頼内容を 48 種類のスタイルのいずれかに対応付けてください。たとえば：
- 「Apple 風」または「VisionOS」 ->
spatial-design、bento-ui、またはglassmorphism - 「Windows 8」または「Metro」 ->
tile-design - 「ターミナル」または「ハッカー」 ->
sci-fi-interfaceまたはbrutalist-typography - 「バウハウス」または「クリーン」 ->
swiss-design - 「サイバー」または「マトリックス」 ->
cyberpunk-uiスタイルが指定されていない場合は、プロジェクトの状況に最も合うものを選んでください。
- 「Apple 風」または「VisionOS」 ->
- スタイルのリファレンスを読む：以下のスタイルインデックスを確認し、選択したスタイルの正しいパスを見つけます。利用可能なファイル読み取りツールを使って、該当する
SKILL.mdを読みます。 - パレットを選ぶ：ユーザーがテーマや色を明示的に指定している場合は、指定された色を使用してください。色が指定されていない場合は、以下の適切なパレットを任意の出発点として使用し、実際に使うすべての前景色と背景色の組み合わせでコントラストを確認します。
- 実行する：選択したスタイル固有の原則に沿ってコードを記述します。依頼がない限り、スタイルを混ぜないでください。
汎用カラーパレット
ユーザーが独自の色を指定した場合は、それを使用してください。指定がない場合は、以下の 10 種類の例示的なパレットを任意の出発点として使用できます。受賞歴の根拠を示すものではありません。選択したスタイルやブランド、測定したコントラストに合わせて色を調整し、再利用可能なカラートークンを定義してください。
- ヨットクラブ（航海／クラシックなエレガンス）
- 背景色：
#F9F6F0 - メインテキスト／アクセント：
#1B2A49 - CTA／ハイライト：
#C85A32 - セカンダリーベース：
#E2D8C9
- 背景色：
- 砂漠の蜃気楼（温かみ／オーガニック）
- 背景色：
#F4EFEA - メインテキスト／アクセント：
#2D2B2A - CTA／ハイライト：
#A65E44 - セカンダリーベース：
#8C8781
- 背景色：
- インダストリアルシック（力強さ／ミニマリスト）
- 背景色：
#D1D1D1 - メインテキスト／アクセント：
#111111 - CTA／ハイライト：
#9A3B3B - セカンダリーベース：
#757575
- 背景色：
- モノクロマティックブラウン（心地よさ／ノスタルジック）
- 背景色：
#D9CBBF - メインテキスト／アクセント：
#4A362D - CTA／ハイライト：
#7A4C3A - セカンダリーベース：
#948275
- 背景色：
- 大地に根ざしたエレガンス（穏やかさ／持続可能性）
- 背景色：
#F7F5F0 - メインテキスト／アクセント：
#3A4B3A - CTA／ハイライト：
#8A9A86 - セカンダリーベース：
#D3CEC4
- 背景色：
- ミニマリストスレート（プロフェッショナル／テクノロジー）
- 背景色：
#F4F4F9 - メインテキスト／アクセント：
#2B303A - CTA／ハイライト：
#5C6B73 - セカンダリーベース：
#C0C5C1
- 背景色：
- ミッドナイトラグジュアリー（プレミアム／ダークモード）
- 背景色：
#0A0A0A - メインテキスト／アクセント：
#F5F5F0 - CTA／ハイライト：
#B59A5F - セカンダリーベース：
#1C1C1C
- 背景色：
- 洗練されたニュートラル（上質／ライフスタイル）
- 背景色：
#E6E2DD - メインテキスト／アクセント：
#1F1C1B - CTA／ハイライト：
#524036 - セカンダリーベース：
#B8B0A8
- 背景色：
- ウォームテック（企業向け／モダン）
- 背景色：
#EAEAEA - メインテキスト／アクセント：
#1C252E - CTA／ハイライト：
#C28F79 - セカンダリーベース：
#2C3E50
- 背景色：
- モダンエディトリアル（雑誌／高コントラスト）
- 背景色：
#F9F9F9 - メインテキスト／アクセント：
#121212 - CTA／ハイライト：
#D44A3A - セカンダリーベース：
#8F8F8F
- 背景色：
60-30-10 の法則
- 60%：背景色／セカンダリーベース
- 30%：メインテキスト／アクセント
- 10%：CTA／ハイライト
スタイル一覧（48種類）
スタイルを使用するには、このファイルのディレクトリを基準にした <style-folder>/SKILL.md を必ず読み込んでください。
モダン UI
minimalismflat-designflat-design-2material-designglassmorphismneumorphismskeuomorphismclaymorphismaurora-uibento-ui
奥行きと 3D
3d-uiisometric-designlayered-designfloating-uispatial-design
タイポグラフィ
swiss-designeditorial-designtypography-firstbrutalist-typography
レトロと歴史的スタイル
brutalismneo-brutalismretro-designy2k-designcyber-y2kvaporwavesynthwavefrutiger-aeroretro-futurism
モダンなトレンド
dark-modemonochromatic-uigradient-designduotone-designcolor-blockingsoft-pastelhigh-contrastvibrant-maximalismmaximalism
未来的なスタイル
cyberpunk-uisci-fi-interfaceholographic-uiai-native-uispatial-computing-ui
データとプロダクト
dashboard-designcard-based-designwidget-based-designtile-designdata-dense-designcommand-center-ui
Web とアプリの実装
- Web（React/Vue/HTML）：CSS 変数をネイティブに使用してください。レイアウトには CSS grid/flexbox を優先してください。ホバー状態には CSS トランジションを使用してください。
- アプリ（React Native/Flutter/SwiftUI）：パレットを各フレームワークのテーマエンジンに適用してください。CSS トランジションの代わりに、プラットフォーム固有のシャドウ（elevation）とアニメーションを使用してください。モバイルの制約に合わせて調整しながら、視覚的な原則の核を維持してください。
例
ユーザーのリクエスト：
@design-it を使ってこのインターフェースをレビューし、影響の大きいデザイン上の問題を特定して、実装可能な改善案を提案してください。
制限事項
- このスキルは、環境固有の検証、テスト、専門家によるレビューに代わるものではありません。
- 必要な入力、権限、安全上の境界が不足している場合は、停止して確認を求めてください。
実装上の境界
スタイルの参考例は、ビジュアルの検討や部分的なスニペットであり、コンパイル可能な完全なアプリケーションではありません。インポート、パッケージのバージョン、ライセンスが適用されたフォント、画像アセットは、プロジェクト側で用意する必要があります。Color(hex:)はカスタム拡張です。明示的に実装したパーサーまたは RGB 初期化子を使用してください。フレームワークの API やシャドウのサポートは、バージョンやプラットフォームによって異なります。従来の React Native のシャドウプロパティでは、新アーキテクチャのすべての機能を記述できません。
プロジェクト内で、参照されている CSS トークン（例：--bg-primary、--primary-text、--text-primary、--secondary-base、--bg-surface、--cta-highlight）を定義してください。パレット名だけでは、これらの変数は宣言されません。パレットやネイティブマテリアルを使用しても、コントラスト要件への準拠が保証されるわけではありません。
見た目が無骨またはテキストのみの場合でも、セマンティックなボタン、ラベル、フォーカス、キーボード操作、役立つナビゲーションを維持してください。空のコールバック、コンテナだけのボタン、ジェスチャーだけの例は見た目を示すものです。使用前に、実際のアクションとキャンセル時にも安全なインタラクション状態を接続してください。装飾的に重複したテキスト、グロー、走査線、アイコンを、繰り返しコンテンツとして読み上げないでください。テキストの拡大、安全領域、透明度を下げる設定に配慮してください。幅が狭い場合に重要なコンテンツが切れる固定レイアウトは避けてください。
アニメーションは任意です。重要なテキストやコントロールは安定させ、非表示のときは装飾的なループを一時停止し、アンマウント時にコントローラーを破棄してループを停止し、動きを抑えた静的なバージョンを用意してください。Web のアニメーション例には、次のような対象を絞ったフォールバックを含めてください。
@media (prefers-reduced-motion: reduce) {
.aurora-blob, .cyber-y2k-btn, .max-sticker, .tile-live-content {
animation: none;
transition: none;
}
}
対応するネイティブの動きを抑える設定を使用し、グラデーションやマスクを使ったテキストには読みやすいフォールバックを用意してください。スタイルの選択は、対象デバイスでのアクセシビリティテストの代わりにはなりません。
実装に関する参考資料：Flutter コンポーネントテーマの移行、Flutter の子要素のカラーフィルター、Android RenderEffect、SwiftUI の内側シャドウスタイル。