Who it is forA solo builder using Claude Code or Cursor who wants an AI image app that looks designed, not improvised.
The problemAgents invent their own spacing, colors and states, so every screen looks different.
The outcomeA generation screen built from Material Design 3 based components that follows the documented rules.
What you need first
- React 18.3 or 19, or Vue 3.5 or later
- pnpm
- An engine account such as Fal.ai or OpenRouter
Steps
- Run
pnpm add @chai-ui/react @chai-ui/core @chai-ui/tokens(React 18.3 or 19) - Give your agent packages/react/DESIGN.md from the repo
- Also give it Chai UI.com/docs/llms.txt as the API reference
- Ask: build a generation screen with Composer and ResultCard using the Fal engine
- Check the result against the accessibility section of DESIGN.md
Prompt for your agent
Read chai-ui's DESIGN.md and https://chai-ui.com/docs/llms.txt, then build a <type> generation screen in <app> with Composer and ResultCard. Keep API keys server side and list any rule from DESIGN.md you could not follow.
Caveat. The components call a model provider, so the screen only works once a Fal.ai, OpenRouter or gateway key is set on your server.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for kazarazat/chai-ui and "Let your coding agent build UI from the design reference"
Add Deduped to Claude Code once
claude mcp add --transport http deduped https://dedupedai.com/mcp
Every Monday: the 5 hottest repos and exactly how to use them. Free, one email a week, unsubscribe anytime.
Get them freeShare: X LinkedIn Hacker News Email Copy link
Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer