Context
This whole epic was triggered by hitting a real limitation while syncing this repo's design system to Claude Design (claude.ai/design) via its /design-sync tool: that tool needs a real npm-buildable library (dist/ + per-component .d.ts exports) to produce a live, importable component bundle (_ds_bundle.js) that the design agent can actually render with. Without one, only a degraded "synth-entry" fallback (scanning src/ directly, weaker type contracts) is available, and even that has friction for components entangled with app-level context. An interim, non-live sync (raw token + component source files, no rendered previews, no live bundle) was pushed as a stopgap in the meantime.
Depends on everything else in this epic (#A–#G) — this is the closing validation step, not new scope.
Requirements
- Re-run the Claude Design
/design-sync flow, this time pointed at packages/ui-kit as the source (real dist/ entry + .d.ts tree — the package shape the tool actually expects, no fallback mode needed).
- Confirm the full high-fidelity path works: converter builds cleanly, render-check passes (playwright/chromium screenshot verification) for the migrated components, preview cards are authored/graded per the tool's rubric.
- Replace the interim stopgap upload (raw source, no live bundle) with the real one once verified.
- Record the final
packages/ui-kit-pointed sync config (.design-sync/config.json) committed to the repo so future re-syncs are one command, per the tool's own re-sync flow.
Deliverable
A live, verified Claude Design project backed by packages/ui-kit's real compiled bundle — every migrated component renders from actual shipped code, not a source-scan approximation.
Expected outcome
This closes the loop: the reason this epic exists (a design-system package Claude Design can actually build with) is delivered and verified working, not just architecturally plausible.
Context
This whole epic was triggered by hitting a real limitation while syncing this repo's design system to Claude Design (claude.ai/design) via its
/design-synctool: that tool needs a real npm-buildable library (dist/+ per-component.d.tsexports) to produce a live, importable component bundle (_ds_bundle.js) that the design agent can actually render with. Without one, only a degraded "synth-entry" fallback (scanningsrc/directly, weaker type contracts) is available, and even that has friction for components entangled with app-level context. An interim, non-live sync (raw token + component source files, no rendered previews, no live bundle) was pushed as a stopgap in the meantime.Depends on everything else in this epic (#A–#G) — this is the closing validation step, not new scope.
Requirements
/design-syncflow, this time pointed atpackages/ui-kitas the source (realdist/entry +.d.tstree — the package shape the tool actually expects, no fallback mode needed).packages/ui-kit-pointed sync config (.design-sync/config.json) committed to the repo so future re-syncs are one command, per the tool's own re-sync flow.Deliverable
A live, verified Claude Design project backed by
packages/ui-kit's real compiled bundle — every migrated component renders from actual shipped code, not a source-scan approximation.Expected outcome
This closes the loop: the reason this epic exists (a design-system package Claude Design can actually build with) is delivered and verified working, not just architecturally plausible.