Thanx Design System — AI Design Sandbox

What this is

A testing sandbox for generating Thanx-styled design prototypes from PRDs using Claude Code. Output is an HTML prototype for design review — not production React code. When a design is approved, implement it in React using the tokens as reference.

---

Files

File	Purpose
thanx-design-tokens.json	Colors, spacing, typography tokens
patterns.md	Component patterns and usage rules
typography-styles.md	Type scale and font guidelines
examples/	Reference prototype outputs
app/	Next.js app — React components + Plasmic Studio integration

---

How to Use

Requirements: Claude Code installed.

1. Clone the repo:

   git clone https://github.com/thx-reno/ai-design-sandbox.git
   cd ai-design-sandbox

2. Open in Claude Code:

   claude

3. If extending an existing page → paste a screenshot of the current page into the chat before your PRD

4. Paste your PRD into the chat

5. Claude generates a .html design prototype in /examples

6. Open it in your browser, review, and paste feedback to iterate

7. When the design is approved → implement it in React using thanx-design-tokens.json as your token reference

---

Example Output

See examples/reward-restrictions-ui.html — generated from the Reward Restrictions PRD. Open it directly in any browser, no build step needed.

---

Design System (React + Plasmic)

The app/ directory is a Next.js app with 11 reusable React components (Button, Input, Select, Textarea, Badge, Table, Drawer, Checkbox, Toggle, Radio, FormField) connected to Plasmic Studio for visual composition.

Run locally

cd app
npm install
npm run dev

• http://localhost:3000 — component sandbox
• http://localhost:3000/plasmic-host — Plasmic Studio app host

Connect to Plasmic Studio

1. Open Plasmic Studio and open the Thanx project
2. Go to App Settings → App host
3. Set the URL to http://localhost:3000/plasmic-host
4. All 11 components appear in the Insert → Code Components panel

Sync Plasmic compositions back to code

After composing layouts in Plasmic Studio, pull them to the repo:

cd app
npm run sync

This generates files in app/components/plasmic/. Commit them alongside any component changes.

---

Feedback Workflow

After reviewing a prototype, give feedback as:

• Text — paste directly into Claude Code
• Annotated screenshot — use CleanShot X or macOS Preview to annotate, paste the image
• Voice notes — record with Whisper, paste the transcript

Claude reads the feedback, triages changes, and updates the prototype in one pass.