mcpField
G
grilling-frontend-prototyping

grilling-frontend-prototyping

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

grilling-frontend-prototyping について

grilling-frontend-prototypingは、文章だけでなく操作可能なプロトタイプを使ってデザインセッションを進めます。各ラウンドで5種類のHTMLモックを同じアプリに提示し、全体から個々のコンポーネントへと検討を絞り込みます。

主な機能

  1. 01各ラウンドで異なる5案を作成
  2. 02単一HTMLのライブモックアプリ
  3. 03ドラッグ可能なデザイン選択パネル
  4. 04矢印キーによるデザイン切り替え
  5. 05モック状態の切り替え操作
  6. 06段階的なデザインの絞り込み

活用シーン

  1. 01全体レイアウトの案出し
  2. 02コンポーネント群のデザイン比較
  3. 03反復的なフィードバックによる細部決定

インストール

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

$npx skills add https://github.com/will-ness-ai/skills --skill grilling-frontend-prototyping

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

同梱ファイルagents/openai.yaml

詳細

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

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

コメント