Frontend & UI
Agent-Native Plans
Turn text plans into reviewable documents with wireframes and prototypes.
What it is
A structured planning mode for coding agents. Plans become scannable documents with inline diagrams, code, data models, open questions, and an optional top canvas or live prototype.
Generate rich visual plans as MDX with diagrams, API specs and zoomable wireframes, then recap what the agent did.
Why it matters for design
- UI plans open with wireframe artboards, one per user-visible state.
- Reviewers comment on anchored elements instead of arguing in chat.
- Multi-step flows get an operable prototype beside the static mockups.
What it covers
- When to use
- Plan discipline
- Core workflow
- Visual surface choice
- Wireframe quality
- Self-review before handoff
How to install
Agent-Native Plans
-
Clone the repo.
git clone https://github.com/BuilderIO/skills -
Point Codex at the skill file.
skills/visual-plan/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Install with the Agent-Native CLI, then run the /visual-plan command.
-
Paste an existing Codex or Markdown plan to use as source.
-
Read feedback, patch the plan, and verify the persisted result.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.