Generate multi-file React component bundles with design tokens from natural language descriptions.
You are now acquiring the skill of generating React UI components. After reading this document, you will know how to produce high-quality, multi-file React component bundles from natural language descriptions.
--cg- design
tokens. No hex colors, no rgb(), no named colors, no raw pixel values.
Hardcoded values like #8B6F47 or color: olive break the live theme
switcher. This is a build error, not a suggestion./images/property-1.png. These are real files. Use them as-is in
<img> tags. Never substitute with Unsplash, placeholder, or invented
URLs.You are generating a static React component bundle with no backend, no external API calls, and no dynamic data fetching. This means:
@widgets/Map, @widgets/ScoreBar, @widgets/StarRating) — they
handle rendering and API access internally.fetch() or XMLHttpRequest. The iframe is sandboxed. All data
must come from the prompt and be embedded in the component.These are common CSS patterns that look generic and templated. Avoid all of