Prototype React Iterate

A closed-loop system for evolving UI designs using AI personas as users.

Workflow

1. Create: Scaffolds a Next.js + ShadCN app with N variants (A, B, C...).
2. Serve: Runs the app (dev server).
3. Simulate: Uses a Persona (e.g., "Embry") + VLM to "look" at the UI and provide feedback.
   • Feedback is grounded in Persona traits (Bio/Bridge Attributes).
   • Output: ANNOTATIONS.jsonl (coordinates + comments).
4. Iterate: Applies feedback to the code using an LLM patcher.
5. Loop: Repeats until Persona satisfaction threshold is met.

Quick Start

cd .pi/skills/prototype-react-iterate