Design System

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

wpds スキルを使うと、WordPress Design System（WPDS）に基づいて WordPress UI の作成やレビューを進められます。WPDS MCP server を通じてコンポーネント、トークン、パターン、パッケージの適合性を確認できるため、wpds ガイドを勘ではなく正規ドキュメントに沿って保てます。Gutenberg、WooCommerce、WordPress.com、Jetpack などの関連インターフェースにまたがる Design Systems 業務で特に有用です。

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

hig-components-content は、Apple HIG のコンテンツ表示コンポーネントを、迷いを減らしながら選び、説明するのに役立ちます。チャート、コレクション、画像ビュー、イメージウェル、カラーウェル、アクティビティビュー、ロックアップ、Webビューに関する UI Design の判断に、この hig-components-content ガイドを活用してください。Apple に沿ったコンポーネント選定のための導入・利用ガイダンスも含まれています。

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

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

figma-use は、Figma Plugin API のワークフローで安全に `use_figma` を呼び出すために必須のスキルです。Figmaファイルを JavaScript で作成・更新・確認・構成する前に、この figma-use スキルをインストールして読み込んでください。特に、Design Implementation、コンポーネント作業、変数、オートレイアウト、プログラムによるファイル読み取りで役立ちます。

figma-generate-library は、コードベースを tokens、variables、components、theming、documentation を備えた Figma の design system library に変換するのに役立ちます。Design Systems の作業で、install、setup、discovery、creation、validation、code との reconciliation まで含む段階的なワークフローが必要なときに、この figma-generate-library スキルを使います。

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

frontend-design-review は、フロントエンドの UI 作業をレビューし、ゼロから個性的で本番品質のインターフェースを作るための GitHub スキルです。デザインシステム準拠、アクセシビリティ、視覚品質、そして UI が凡庸に見えるか意図を持って設計されているかを評価するのに役立ちます。PR レビュー、コンポーネントレビュー、UI デザイン向けの frontend-design-review に使えます。