Figma

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

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

design-system-patternsは、デザインシステムやコンポーネントライブラリ向けに、トークン設計、テーマアーキテクチャ、再利用しやすいコンポーネントAPIパターンを通じて、拡張しやすいUI基盤づくりを支援するスキルです。

figma-create-new-file は、下書きに新しい空の Figma Design ファイルまたは FigJam ボードを作成します。use_figma を含む、より深い Figma 操作に入る前の新しい出発点が必要なときに使います。design または figjam、任意のファイル名指定に対応し、必要に応じて whoami でプランアクセスの解決も行えます。

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

figma-code-connect-components は、Figma Code Connect を使って Figma のデザインコンポーネントを対応するコードコンポーネントに対応付けるためのスキルです。デザイン実装の整合、variant と prop の対応、そしてマッピング作成前に適切なローカルコンポーネントを見つける用途に向いています。キャンバス上の文章作成やページ全体の生成ではなく、connect、map、link-to-code のワークフローに最適です。

figma を使って Figma MCP server からデザインの文脈、スクリーンショット、変数、アセットを取得し、Figma node を実装可能な UI 判断へ落とし込みます。Figma URL または node ID があり、デザインからコードへの作業、セットアップ、トラブルシューティングに適した正確な figma の使い方を知りたい場合に最適です。

industrial-brutalist-ui skill for UI Design は、スイス風グリッド、極端なタイポグラフィ対比、実用本位の配色、アナログな質感を使って、機械的で高密度なインターフェースを作るための skill です。ダッシュボード、編集システム、ポートフォリオページなど、規律のあるコントロールパネル風の見た目が必要な場面で、この industrial-brutalist-ui ガイドを活用できます。

wwas は、ざっくりしたアイデアを Why-What-Acceptance 形式のバックログ項目に落とし込む、要件定義向けのプロンプトスキルです。wwas スキルを使うと、事業背景を整理し、変更内容を明確にし、スプリント対応可能なテスト可能な受け入れ基準まで書けます。

user-stories skill を使って、機能をバックログ投入可能なユーザーストーリーへ変換します。3C、INVEST基準、デザインリンク、テスト可能な受け入れ条件まで整理できるため、ユーザーストーリー作成、機能の分割、Requirements Planning における user-stories を、より明確なスコープと少ない推測で進めたい場合に最適です。

job-storiesスキルを使うと、機能アイデアをJTBD形式のジョブストーリー「When [状況], I want to [動機], so I can [成果].」へ整理できます。バックログ項目の明確化、Requirements Planningでのjob-stories活用、ユーザーの文脈に根ざした受け入れ基準の作成に役立ちます。

enhance-prompt スキルは、あいまいなUIのアイデアを、より明確で Stitch にそのまま使いやすいプロンプトへ整えます。構成を強化し、UI/UXの語彙やデザインシステムの文脈を補うことで、プロンプトの具体性を高め、解釈の余地を減らし、より一貫した結果を得やすくします。この enhance-prompt ガイドは、プロンプトをより的確にし、試行錯誤を減らし、プロンプト作成とUI生成の精度を上げるために使えます。

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

diagram-generator は、構造化入力から draw.io、Mermaid、Excalidraw の図を作成・編集するのに役立ちます。フローチャート、シーケンス図、クラス図、ER 図、マインドマップ、アーキテクチャ図、ネットワークトポロジーに対応し、既存の .drawio、.mmd、Excalidraw ファイルも読み取れるため、更新作業をスムーズに進められます。

figma-use は、use_figma を呼び出す前に毎回インストールしておくことで、Figma のファイルコンテキスト内で JavaScript を安全に実行できるようにするスキルです。ノードの作成・編集、変数やスタイルの接続、コンポーネントやバリアントの構築、ファイル構造のプログラム的な निरी査といった、デザイン実装作業を支援します。リポジトリには、よくある Figma 自動化エラーを減らすための使い方、注意点、パターンがまとめられています。

network skill を使うと、mxGraph のデバイスアイコン、自動レイアウト、ゾーン分け、明確なリンク表現を備えた PlantUML のネットワークトポロジ図を作成できます。LAN、WAN、企業ネットワーク、データセンター、無線、セキュリティ、ベンダー固有の図に適しており、network の使い方の例と、network と uml や cloud の使い分けの指針も含まれています。

infographicスキルは、`infographic` DSL を使って構造化コンテンツを洗練されたインフォグラフィックレイアウトに変換します。KPIカード、タイムライン、ロードマップ、ステップ形式のフロー、A vs B比較、SWOT、ファネル、組織ツリー、シンプルなチャートに適しています。UIデザイン向けのインフォグラフィックや、4〜8項目のプレゼン資料風サマリーに特に向いています。複雑なデータ分析や技術図解にはあまり適していません。

logo-generator は、製品、ブランド、コンセプト向けに、プロフェッショナルなSVGロゴと洗練された紹介用画像を作成するのに役立ちます。デザインパターンの指針、6種類以上のロゴバリエーション、SVGからPNGへの書き出し、背景付きのショーケース生成を組み合わせています。編集可能な成果物とそのまま使えるプレビューを備えた、ブランディング用の素早く体系立ったlogo-generatorガイドが必要なときに、この skill を使ってください。

figma-designer は、Figma MCP を通じて Figma ファイルやスクリーンショットを解析し、ビジュアル仕様、デザイントークン、コンポーネント、さらに UI デザインチーム向けの実装に直結する PRD ハンドオフを抽出します。

stitch-design-taste は、Design Implementation 向けの Google Stitch デザインシステム技能です。高級感があり、ありきたりでない UI のために、明確なタイポグラフィ、調整された色設計、非対称レイアウト、モーションルール、禁止パターンを備えた、エージェント向けの `DESIGN.md` ガイドを生成します。単発のプロンプトではなく、再現性のある stitch-design-taste ガイドがほしいときに使います。

hand-drawn-diagramsは、自然言語の指示を手描き風のExcalidraw図、フロー、解説図、ワイヤーフレーム、ページモックアップに変換するスキルです。出力の検証にも対応しており、編集用URLとエクスポート可能な画像を返せます。洗練されたベクターアートではなく、スケッチ風の見た目で素早く図解したいときに最適です。

figma-implement-designは、Figmaのデザインを本番投入可能なアプリケーションコードへ、ビジュアルの再現性を保って変換するスキルです。FigmaファイルからUIコードを実装するとき、特定のコンポーネントや画面に合わせ込むとき、またはDesign Implementationのためのfigma-implement-designガイドに沿って進めるときに使います。Figmaキャンバス上のノードを編集する用途には向きません。

figma-generate-library は、コードベースから Figma のデザインシステムを構築・更新するためのスキルです。トークン、コンポーネントライブラリ、ドキュメント、ライト/ダークテーマ対応まで、順序立てたワークフローで進められます。単発のモックアップではなく、Design Systems 向けの実践的なガイドが必要なときに使ってください。Plugin API の呼び出しには figma-use を補完的に併用できます。

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