This repo is an R&D workspace for evaluating how a Figma MCP-driven workflow behaves across multiple React styling targets, then refining that workflow until it produces a reliable single-library reference and a usable design-system implementation path.
Read the investigation in this order:
- Pass 01 - Baseline
- Pass 02 - Guided
- Pass 03 - Guided
- Chakra Golden Pass
- Hiedra Pass
- Investigation Summary
Those six documents are the canonical investigation trail. Everything else in the repo supports implementation, extraction, or audit workflows.
The investigation is organized in two parts:
- dashboard calibration across four styling targets
- Hiedra design-system implementation in Chakra
The retained dashboard investigation path is:
- Pass 01
- Pass 02
- Pass 03
- Chakra Golden Pass
The Hiedra implementation scope documented in this repo is intentionally narrow:
- Branding:
- Colors
- Typography
- Atoms:
- Buttons
- Badges
- Checkboxes
The goal of the Hiedra implementation is not to build a gallery. It is to create reusable, developer-usable design-system foundations and components.
The accepted dashboard reference lives in:
For the dashboard control sample, Chakra uses:
This file is a thin local MCP-derived implementation module for the accepted control sample. It is not the original Figma source of truth and not a generated skill artifact.
The Hiedra implementation lives in:
Important entry points:
The control layer is:
Figma extraction helpers:
Start the Chakra app:
npm run dev:chakraDashboard reference route:
?sample=fof
Golden pass capture:
npm run audit:capture:chakra-goldenPass 03 four-library capture:
npm run audit:capture:pass03.
|-- apps
| |-- lab-chakra
| |-- lab-mui
| |-- lab-scss
| `-- lab-tailwind
|-- docs
| |-- investigations
| `-- presentation
|-- packages
| `-- config-mcp
|-- design-debt.md
|-- mock-tokens.json
`-- README.md