design エージェントスキル

ckm:design は、ロゴ、CIPモックアップ、バナー、スライド、SVGアイコンの制作を、ルーティング付きで体系化したデザインスキルです。実務向けリファレンス、CSVベースの選択肢、Pythonスクリプトを備え、汎用的なプロンプト任せではなく再現性のあるワークフローで進められます。

design-md スキルは Stitch プロジェクトを解析し、画面情報をもとに、レイアウト、トーン、カラー、コンポーネントの言語を一貫させるための意味論的な DESIGN.md を生成します。Design Systems 向けに design-md を使うのは、単なる見た目の要約ではなく、今後の Stitch 生成に向けてプロンプト可能な指針が必要なときです。

design-system skill を使って UI システムを生成・監査し、既存コードからトークンを抽出し、実運用のリポジトリでスタイルの一貫性をレビューできます。

design スキルは、あいまいな UI 要件を、ページ、コンポーネント、ダッシュボード、スクリーンショットベースの仕上げに対応する本番品質のビジュアル出力へと変えるのに役立ちます。見た目が悪い、わかりにくい、整合性がない、またはビジュアルとしておかしいと感じるときや、バックエンドロジックやデータパイプラインではなく UI Design のためのデザインが必要なときに使います。インストール、使い方、ガードレール、より良い美的判断に関する指針も含まれています。

tool-design スキルは、エージェント向けツールを明確な契約で設計し、重複を減らしてツール選択を改善するのに役立ちます。Design Implementation、MCP ツール設計、ツール統合、命名規則、誤ったツール呼び出しのデバッグに活用できます。インストール手順と使い方、確認すべきソースファイル、ツール説明を曖昧にしないための具体的な制約まで含む、実践的な tool-design ガイドが必要なときに特に適しています。

figma-generate-design は、公開済みのデザインシステムを使って、コード化されたページ、モーダル、ドロワー、サイドバー、パネルなどの複数セクション画面を Figma へ落とし込むのに役立ちます。Code Connect や関連ソースからコンポーネント、変数、スタイル、ライブラリアセットを見つけ、画面全体を一から描き直すのではなく、Design Implementation 向けにセクションごとに組み立てます。コードやトークンとの忠実性を重視して Figma 画面を作成したいときは、figma-generate-design ガイドを使ってください。

design-consultation は、ざっくりした製品アイデアを完成度の高いデザイン方針へと落とし込むための design-consultation skill です。`DESIGN.md` を唯一の参照元として作成し、プレビューや、タイポグラフィ、カラー、余白、レイアウト、モーションに関するシステムレベルの指針までまとめます。新規プロダクトや、一貫した出発点が必要な UI 面の設計に向いています。

frontend-design を使うと、明確なビジュアルの方向性を持った、個性のある本番品質のフロントエンド UI を構築できます。この frontend-design skill は、ランディングページ、ダッシュボード、アプリのシェル、各種コンポーネントなど、実装だけでなく階層、タイポグラフィ、モーション、仕上げの精度が重要な場面向けです。デザイン先行の UI 制作に向けたインストール方法と使い方のガイドも含まれています。

figma-create-design-system-rules は、Figma からコードへの作業向けに、プロジェクト固有の Design System ルールを生成するのに役立ちます。コンポーネント、命名、トークン、配置先のファイル、そして AI コーディングエージェントがリポジトリ全体で一貫性を保つためにハードコードすべきでない内容を整理するのに使えます。利用には Figma MCP server への接続が必要です。

ipados-design-guidelines は、iPadネイティブなインターフェースの設計とレビューに使えるスキルです。アダプティブレイアウト、Split View、Stage Manager、サイドバー操作、ポインタとトラックパッドの挙動、キーボードショートカット、コンパクト幅へのフォールバックを扱います。iPhone的な前提を、実用的なiPadOSデザインチェックに置き換えるのに役立ちます。

web-design-guidelines を使って、UIコードを最新の Web Interface Guidelines と照らし合わせてレビューします。UX監査のための web-design-guidelines に絞ったワークフローに最適で、簡潔な file:line ベースの指摘、アクセシビリティ確認、リリース前のインターフェース準拠レビューに向いています。

figma-generate-design は、実際の画面・ページ・複数セクションのレイアウトを、汎用的な図形ではなく公開済みのデザインシステムを再利用しながら Figma に落とし込むのに役立ちます。コードやプロダクトページとの高い整合性、編集しやすい構造、トークンベースの一貫性を重視する場合に最適です。ラフなモックアップではなく、フルページの UI デザイン更新に使ってください。