Frontend & UI

Agent-Native Plans

Macht aus Text-Plänen prüfbare Dokumente mit Wireframes und Prototypen.

Worum es geht

Ein strukturierter Planungsmodus für Coding-Agenten. Pläne werden zu überfliegbaren Dokumenten mit Inline-Diagrammen, Code, Datenmodellen, offenen Fragen und einem optionalen Canvas oben oder Live-Prototyp.

Generate rich visual plans as MDX with diagrams, API specs and zoomable wireframes, then recap what the agent did.
Aus der Upstream-SKILL.md

Warum das fürs Design zählt

  • UI-Pläne beginnen mit Wireframe-Artboards, eines pro nutzersichtbarem State.
  • Reviewer kommentieren verankerte Elemente, statt im Chat zu diskutieren.
  • Mehrstufige Flows bekommen einen bedienbaren Prototyp neben den statischen Mockups.

Was es abdeckt

  • When to use
  • Plan discipline
  • Core workflow
  • Visual surface choice
  • Wireframe quality
  • Self-review before handoff

So installierst du es

Agent-Native Plans

  1. Klone das Repo.

    git clone https://github.com/BuilderIO/skills
  2. Verweise Codex auf die Skill-Datei.

    skills/visual-plan/SKILL.md
  3. Beschreibe dann das gewünschte UI. Codex folgt dem Skill.

So nutzt du es mit Codex

  1. Installiere über die Agent-Native CLI und führe dann den Befehl /visual-plan aus.

  2. Füg einen bestehenden Codex- oder Markdown-Plan als Quelle ein.

  3. Lies das Feedback, patche den Plan und prüfe das gespeicherte Ergebnis.

Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.

Mehr auf der codex-design-Liste ↗

Nächster Schritt

Mit Open Design designen, ohne Setup

Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.