feat(design-sync): generator for claude.ai design-system bundle#149
Merged
Conversation
Adds scripts/design-sync/ — a one-command builder that turns ScriptHammer's real DaisyUI components + brand themes into a Claude Design (/design-sync) bundle of self-contained @DSCARD preview HTML files. - manifest.js: curated component list; class strings copied verbatim from component source (Button/Card/TagBadge/Text/etc.) so cards stay faithful. - gen-theme.js: compiles theme.css via @tailwindcss/postcss + DaisyUI scoped to the two brand themes only (scripthammer-dark/light), OKLCH tokens. - gen-cards.js: emits @DSCARD HTML, theme.css inlined, side-by-side dark+light. - build.js: orchestrates classes -> theme -> cards into a build dir (/tmp). - README.md: how /design-sync works, build (Docker-first), how to add a component, scope, and DaisyUI v5 class-drift notes. Output is a build artifact (/tmp inside the container) — nothing written to the repo. Covers tokens + the portable atomic/presentational tier; excludes state/data-driven components (auth/payment/admin/map/game). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds
scripts/design-sync/— a one-command builder that turns ScriptHammer's real DaisyUI components + brand themes into a Claude Design (/design-sync) bundle of self-contained@dsCardpreview HTML files.A live design system was already pushed to claude.ai from this generator (project "ScriptHammer": tokens + 15 components, each rendered in both brand themes). This PR commits the tooling so re-syncs / new forks are one command.
How
/design-syncactually worksIt does not publish npm or upload
.tsx. It writes self-contained preview HTML cards into a claude.ai design-system project; each card's first line is<!-- @dsCard group="…" -->and the pane builds its index from those markers.Files
manifest.js— curated component list; class strings copied verbatim from component source (Button.tsxetc.) so cards stay faithful.gen-theme.js— compilestheme.cssvia@tailwindcss/postcss+ DaisyUI scoped to the two brand themes only (scripthammer-dark/light), OKLCH tokens.gen-cards.js— emits@dsCardHTML,theme.cssinlined, side-by-side dark + light.build.js— orchestrates classes → theme → cards into a build dir.README.md— how it works, Docker-first build, adding a component, scope, DaisyUI v5 drift notes.Build (Docker-first)
docker compose exec -w /app scripthammer node scripts/design-sync/build.jsOutput goes to
/tmp/ds-bundleinside the container — a build artifact, nothing written to the repo. Verified end-to-end: producestheme.css+ 18 cards, every emitted class present in the compiled CSS, each card render-checked in Chromium (OKLCH resolves, dark ≠ light).Scope
Tokens + the portable atomic/presentational tier. Excludes state/data-driven components (auth/payment/admin/map/game).
Surfaced: DaisyUI v5 class drift
Building exposed several v4 classes the app still uses that are renamed/removed in DaisyUI 5 beta —
card-bordered→card-border,card-compact→card-sm, andinput-bordered/form-control/label-textremoved. The manifest uses the v5 names so cards render; the app components still carry the v4 names (dead, harmless, worth a future cleanup pass).🤖 Generated with Claude Code