AI Can Generate React UI. The Real Problem Starts on Page Two

Description and use

AI UI generators quickly duplicate components and create inconsistent tokens in existing React projects. The solution is a harness that supplies context and reuse rules, letting developers focus on product features while maintaining a coherent design system.

Problem

AI-generated UI quickly creates duplicate components, inconsistent tokens, and a fragmented design system in existing React projects.

Outcome

By integrating a harness that enforces reuse, extend, create, validate rules, developers can focus on product features while the AI maintains a consistent design system, reducing duplication and manual cleanup.

Workflow

• 1. Define the product feature (e.g., add a Settings page).
• 2. Prompt the AI with high-level intent only (e.g., "Add a Settings page.").
• 3. The harness (Varelyo) supplies context: existing components, tokens, and reuse rules.
• 4. AI generates JSX that reuses or extends components per the rules.
• 5. Review and merge the generated code into the repository.
• 6. Iterate for subsequent pages, allowing the design system to evolve naturally.

Evidence

The trouble starts once you keep going. By page two or three, the project already has components worth reusing, and that’s where AI coding agents often start inventing alternatives.

Source

I should be able to write: Add a Settings page. The rest belongs in the system around the agent.

Source