mcpField
U
uinaf-design

uinaf-design

github.com/uinafデザイン・UI186 回インストール1 日前に更新
リポジトリ

uinaf-design について

uinaf-designは、範囲を明示した作業でuinafのデザインシステムとブランド指針を適用する手動スキルです。関連するデザイン情報を取得し、必要に応じてリンク先のMarkdownを参照します。製品固有の実装は担当リポジトリに委ねます。

主な機能

  1. 01最新のデザイン情報を取得
  2. 02MCP未接続時はMarkdownを参照
  3. 03提供済みデザインシステムを再利用
  4. 04製品UIの作業は担当リポジトリで実施
  5. 05既存のdesign:checkを実行

活用シーン

  1. 01画面・コンポーネント・トークンの確認
  2. 02対象作業へのuinaf構造とスタイルの適用
  3. 03リポジトリの検査手順でデザイン変更を確認

MCP 対応

接続時はuinaf design MCPサーバーからページ、テンプレート、パターン、トークン、ガイドラインを取得します。利用できない場合は、関連するMarkdown資料を取得します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/uinaf/design --skill uinaf-design

インストール後、Claude Code で/uinaf-designを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

uinaf デザイン

これは手動スキルです。このスキルが存在していても、明示的に範囲が指定された uinaf の作業以外で uinaf のスタイルを適用することは許可されません。

ワークフロー

  1. 実装は担当者に任せます。 このパッケージはデザインシステムと一般的なブランドガイダンスを提供します。製品固有の UI とコピーは、その製品のリポジトリで管理します。
  2. 作成を始める前に、ライブソースを 1 つ取得します。 接続されている場合は、MCP サーバー https://design.uinaf.dev/mcp を優先します。
    • 製品画面全体 → get_page
    • uinaf.dev の画面またはエクスポート用アートボード → get_template
    • コンポーネント → list_patterns を実行してから get_pattern
    • トークンの値 → get_tokens
    • トーンまたは一般的なルール → voice、type、color、layout、motion などの正確なトピックを 1 つ指定して search_guidelines
  3. 記憶に頼らず、Markdown を参照します。 MCP を利用できない場合は、https://design.uinaf.dev/llms.txt を読み、関連するリンクを 1 つ選んで取得します。トーンと一般的なガイダンスには /design.md を、パッケージのセットアップには /readme.md を使用します。カタログ全体は読み込まないでください。どちらの方法でもアクセスできない場合は、作業を中断し、不足しているデザインコンテキストを報告します。
  4. 提供済みのシステムを再利用します。 @uinaf/design/css をインポートし、取得した構造をコピーして、コンテンツを調整します。説明文をもとにコンポーネントを作り直さないでください。
  5. 担当リポジトリのゲートを通して完了します。 リポジトリで宣言されているパッケージマネージャーを使って、既存の design:check スクリプトを実行します。スクリプトがない場合は /readme.md を参照します。承認なしに依存関係をインストールしたり、ラチェットを作成したり、作業範囲を広げたりしないでください。

コメント

Markdown 対応