mcpField
G
grill-design

grill-design

github.com/will-ness-aiデザイン・UI17162 回インストール2 週間前に更新
リポジトリ

grill-design について

grill-design は `/prototype` スキルを使って `/grilling` セッションを進めるデザインスキルです。各ラウンドのプロトタイプで機能を検討し、全体構成から個々のコンポーネントへ段階的に具体化します。

主な機能

  1. 01各ラウンドで5種類のプロトタイプ
  2. 02単一HTMLモックのリアルタイム更新
  3. 03ドラッグ可能な選択パネルと矢印操作
  4. 04ボタンによるモック状態の切り替え
  5. 05全体構成からコンポーネントへの段階的な検討

活用シーン

  1. 01全体レイアウト案の比較
  2. 02コンポーネント群のデザイン検討
  3. 03意味のある画面状態の選択

インストール

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

$npx skills add https://github.com/will-ness-ai/skills --skill grill-design

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

同梱ファイルagents/openai.yaml

詳細

各質問を言葉ではなくプロトタイプで提示する、/prototype スキルを使った /grilling セッションを実行します。

  • 各ラウンドでは、現在のデザインに関する質問をもとに、まったく異なる5つのプロトタイプを1つのライブモックアプリに作成します。1つの独立したHTMLファイル(Artifact tool)を使い、各ラウンドでその場で更新します。
  • 右下にフローティング表示され、ドラッグで移動できるピッカーで各デザインを切り替えます。←/→キーを押すとデザインが切り替わり、モックアプリのスタイルがその場で更新されます。受信トレイの「未読あり」と「空」のように、デザインに意味のある状態がある場合は、モックの状態を切り替えるピッカーボタンも追加します。
  • グリリングでは、ビジュアルデザインのツリーをたどり、各回答によって1段階ずつ掘り下げます。全体のデザインから始め、次にコンポーネントのグループ、最後に個々のコンポーネントへと進み、ユーザーが機能全体を細部まで設計できるようにします。

コメント