フロントエンド & UI
Agent-Native Plans
テキストの計画を、ワイヤーフレームとプロトタイプ付きのレビュー可能なドキュメントに変える。
概要
コーディングエージェントのための構造化された計画モード。計画は、インライン図、コード、データモデル、未解決の疑問、そして任意で先頭のキャンバスやライブプロトタイプを備えた、目を通しやすいドキュメントになる。
Generate rich visual plans as MDX with diagrams, API specs and zoomable wireframes, then recap what the agent did.
デザインにとっての意味
- UI の計画は、ユーザーに見える状態ごとに 1 枚ずつのワイヤーフレームアートボードで始まる。
- レビュアーはチャットで議論する代わりに、固定された要素にコメントする。
- 複数ステップのフローには、静的なモックアップの横に操作可能なプロトタイプが付く。
カバーする内容
- When to use
- Plan discipline
- Core workflow
- Visual surface choice
- Wireframe quality
- Self-review before handoff
インストール方法
Agent-Native Plans
-
リポジトリをクローンする。
git clone https://github.com/BuilderIO/skills -
スキルファイルの場所を Codex に指定する。
skills/visual-plan/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
Agent-Native CLI でインストールし、/visual-plan コマンドを実行する。
-
既存の Codex または Markdown の計画を貼り付けて、元ネタにする。
-
フィードバックを読み、計画を修正し、保存された結果を検証する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。