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

说明与用途

AI UI 生成器在现有 React 项目中快速复制组件并产生不一致的设计令牌。解决方案是使用提供上下文和重用规则的工具，让开发者专注于产品功能，同时保持统一的设计系统。

问题

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

结果

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.

工作流

• 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.

证据

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.

来源

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

来源