mcpField
D
design-screen

design-screen

github.com/plugin87デザイン・UI3.0k83 回インストール1 日前に更新
リポジトリ

design-screen について

design-screen は、要件整理から画面の完成までを支援するスキルです。実装前に対象者や雰囲気、レイアウト、参考例を定め、設計規則、モバイルファーストの構築、自動検証、目視レビューを組み合わせます。

主な機能

  1. 01画面設計ブリーフを最初に作成
  2. 02依頼内容に応じて専用スキルへ振り分け
  3. 03視覚方針をデザイントークンに反映
  4. 04モバイルファーストで実装
  5. 05検証を実行しスクリーンショットを確認

活用シーン

  1. 01ページやアプリ画面全体を設計
  2. 02対象者と分野に合わせてレイアウトを決定
  3. 03納品前にUI状態とレスポンシブ表示を確認

インストール

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-screen

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

詳細

スキル：画面をデザインする

まず最初に、何よりも先に行うこと

今すぐ返信に Brief Inference ブロックを書いてください。 このファイルの残りを読んだ後でも、頭の中でも、「レイアウトがはっきりしてから」でもありません。マークアップやファイル、ツール呼び出しの前に、今すぐです。

Domain:           fintech | editorial | dev-tool | healthcare | consumer | ...
Audience & tone:  expert vs first-time, calm vs energetic, premium vs utilitarian
Mood:             the one adjective the result must earn - "expensive", "precise", "warm", "brutal"
Motion depth:     none | subtle feedback | expressive choreography
Layout family:    the section sequence you will use, named, varied per section
Reference anchor: an archetype, or a named system - see step 3

すべての行に判断を記入してください。Mood: clean は判断ではありませんが、Mood: expensive は判断です。ムードとレイアウトの系統を明確にできないなら、まだ何も決めていません。その状態で生成したものは、平均的なものに後退します。

停止条件： マークアップを書く、ファイルを作成する、または UI を生成するツールを呼び出そうとしていて、このブロックがまだ返信にない場合は、いったん止めて先に記入してください。2026-10-07 に計測したところ、3 回に 1 回は省略されていました。スキルは読み込まれたものの、ブロックは記入されず、誰もデザインしていない画面ができあがりました。このセクションをファイルの先頭に置いたのは、以前は背景説明の 29 行後ろにあったためです。背景説明は指示ではありません。

以下は、上記の判断を実行に移す方法です。

キットはありますか？ このスキルはキット内のファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーだけです。これは npx skills add の実行によるものです。その旨をはっきり伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、 作業を中止してください。開けなかったファイルの内容を推測してはいけません。

代わりに引き継ぐケース

依頼内容使用するスキル
一度に多数の数値を扱うダッシュボード、ターミナル、コンソール、または画面data-dashboard
改善対象の既存サイトまたはアプリredesign
再現するスクリーンショット、モックアップ、または参考画像image-to-code
画面ではなく、単一コンポーネントの仕様design-component
画面を作成する前に、一からブランドの基盤を作る場合brandkit

それ以外の場合は続行してください。

1. 審美性の事前確認

このファイルの先頭にあるブロックです。まだ返信に記入していない場合は、いったん戻って先に記入してください。以降のスキルは、すでに決めた内容に基づいて実行します。

詳細とその理由：${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md。

禁止されているデフォルト：それぞれを意識的に避ける

これらは UI を生成物らしく見せる特徴です。出発点ではなく、欠点です。

  • サイズと重要度がすべて同じカードを 3 枚または 4 枚並べる。 主役を一つ決め、サイズを大きくするか、強調するか、専用の行に配置します。同じ重みのグリッドでは、視線を導けません。
  • 何もかも中央揃えにする。 非対称性と実用的なグリッドを使います。中央揃えは控えめにしてください。
  • 左にテキスト、右に画像という行を繰り返す。 セクションごとに構成を変えてください。
  • 本文を太字にしただけのディスプレイ書体。 最も大きな見出しは本文の少なくとも 2.5 倍のサイズにし、短くまとめ、横幅にゆとりを持たせます（18～24ch）。
  • すべてのボックスに汎用的なドロップシャドウを付ける。 大半はフラットにし、浮き上がりは階層を付けて必要な箇所だけに使います。
  • 純粋な #000 と #fff。 テーマの温かみのある白とオフブラックを使います。
  • アクセントカラーを虹色にする。 基本色を一つ、アクセントは多くても一つにします。主役はニュートラルカラーです。
  • 絵文字を使う。 アイコン、箇条書き、ステータスドット、ラベルなど、どこにも使いません。currentColor を使った lucide のインライン SVG、または通常の単語を使ってください。これは好みの問題ではなく、必須条件です。
  • UI の文言に全角ダッシュ、マーケティングの常套句（「高める」「シームレス」「解き放つ」）、中身のない 3 語の並列（「パワフル、直感的、美しい」）、架空のラベル（「SECTION 01」、lorem ipsum）を使う。 具体的に伝えるか、何も書かないでください。
  • カード、アラート、トースト、コールアウトの片側だけに色付きの境界線を付ける。 色を付けた 3～4px の帯は、生成 UI の典型的な表現です。細い境界線全体または背景面の違いを使い、状態は実際のアイコンとテキストで示してください。色だけで示してはいけません。
  • 縦方向のリズムを詰め込む。 セクション間には、まとまった余白を十分に取ってください。

2. 設計指針

design-doctrine を読み込んで従ってください。この作業で判断基準となるのは、意図に基づいたトークンの選択、テーマの統一、すべてのインタラクティブ要素における 8 つの状態、一つの主役、絵文字ゼロ、そして計測していない数値を決して提示しないことです。

3. トークンへの落とし込み

${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md または名前付きのシステムを参照基準として選びます （node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> を実行すると、仕様を取得してその場所を表示します）。そのうえで、画面を直接スタイリングするのではなく、トークンに落とし込みます。CSS 変数のレイヤーは 1 つだけにして、一度だけインポートします。ブランドカラーがコントラスト要件を満たさない場合は調整してください。センスはレベル 4 に役立つものであり、アクセシビリティより優先されることはありません。

品質の基準となる参照出力： ${CLAUDE_SKILL_DIR}/../../../examples/showcase/ および ${CLAUDE_SKILL_DIR}/../../../examples/templates/。

4. 構築

モバイルを基本とし、後回しにしないでください。スマートフォン向けのレイアウトを基本スタイルとして記述し、幅の広い画面向けのスタイルは min-width で追加します。狭い画面向けの微調整に max-width を使うのは問題ありませんが、モバイル対応の手段として使ってはいけません。すべての値をトークンにします。インタラクティブ要素には 8 つの状態をすべて実装します。まずコンテンツを用意し、それに適したレイアウトを作ります。

5. ゲート：実行し、実行したと偽らない

node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs

実際の N/N の行を報告します。単一ファイルの場合は、最低限次を実行します。

node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark]
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file> --scale=1.25
DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file>
DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>

ブラウザーなしでレンダーゲートを実行すると、SKIPPED と表示され、終了コード 0 で終了します。これは合格ではありません。単独でゲートを実行し、その結果を信頼するつもりなら、DS_REQUIRE_BROWSER=1 を設定してください。

6. レンダリングして確認

画面が見た目に明らかに壊れていても、ゲートは合格することがあります。スクリーンショットを撮り、すべての状態を確認し、各コントロールをクリックして実際に変化することを確かめてください。

7. 批評

/critique を実行します。意図的に厳しく評価し、あなたの推論ではなく、成果物そのものを見ます。ゲートに合格しても、センスがあることの証拠にはなりません。

提出物

Brief Inference ブロック、ファイル、実際のゲート出力、そして批評の判定を提出します。ゲートを実行していない場合は、どのゲートを実行していないか、その理由とともに記載してください。測定していない結果は、合格としてではなく、未測定として報告します。

コメント

Markdown 対応