Skip to content

CreatorTrack Design System (claude.ai/design)

URL: https://mkdocs.justinsforge.com/memory/general/reference_creatortrack_design_system/

Built + pushed 2026-07-13. A claude.ai Design System project holding CreatorTrack's real tokens and 14 rendered component cards, so any Claude session can pull the brand/UI kit by reference (no copy-paste) when mocking up new UI.

Locations

  • claude.ai project: CreatorTrack Design System, projectId 58990838-dc85-411b-b2b4-5cf48eb74d3c (Justin-owned). A second project "Gus The Bass Design System" (2026-04-28) also exists.
  • Local bundle (source of the push): forge/design-systems/creatortrack/
  • tokens.css: verbatim copy of /home/justinwieb/creatortrack/app/theme.css (THE token source; dark default + :root[data-theme="light"])
  • previews/*.html: 14 self-contained cards (no JS, no external assets, full tokens inlined)
  • BRIEF.md: the authoring contract workers follow (marker line, token-only styling, fidelity from real component source + its studio.tsx)
  • Remote layout: README.md, tokens/tokens.css, previews/<name>.html

Cards (groups)

Foundation: colors, typography, spacing-radii-elevation. Components: buttons, inputs, segmented, select-chips, menu, modal-drawer, alert-progress, statcard, datagrid, sidebar-nav, topbar.

How a session uses it

DesignSync list_files / get_file on the projectId above, or read the local bundle directly on Console. For mockups: pull tokens/tokens.css + the 2-3 closest preview cards, build static HTML with var(--token) only, screenshot for review (assets venv Playwright: /home/justinwieb/.forge-venvs/assets/bin/python), implement only the approved winner. Cheap workers (sonnet) do the mockup loop; Fable/Opus only the final implementation.

How to update (INCREMENTAL, never wholesale)

  1. Re-copy app/theme.css -> bundle tokens.css if tokens changed.
  2. Author/refresh the affected preview per BRIEF.md (previews inline the FULL tokens css, so a token change means re-inlining into touched previews).
  3. DesignSync: finalize_plan (localDir = bundle dir, writes = just the changed paths, deletes as needed) -> write_files -> register_assets for NEW cards only (hand-authored project, no _ds_manifest.json; cards were registered explicitly).
  4. Update Gotchas here if the contract changes.

Reading Justin's OWN Claude Design creations (the reverse direction)

list_projects is filtered to design-SYSTEM projects, but get_project / list_files / get_file work on ANY project Justin owns once you have the projectId (extract it from a claude.ai/design share URL: /design/p/<uuid>). Known design projects: - acda876c-89e7-4268-9705-a37eb02811a7 "Media kit links block design" (regular PROJECT_TYPE_PROJECT; Links-app block designs built ON the CT design system: Media Kit Links Block + YouTube Links Block v1/v2, .dc.html interactive specs). WebFetch on share links gets 403; the API path above is the way.

DISCOVERY without a URL: claude.ai creates a NEW project per design, so /design-pull (skill at .claude/skills/design-pull/) runs scripts/forge_claude_design_discover.py (patchright, dedicated ~/.forge-browser-profiles/claude-design profile, headless) to enumerate all projects via the internal /api/organizations/<org>/projects endpoint, auto-registers unknown IDs in design-systems/registry.json, and pulls new files per design-systems/seen-manifest.json into design-systems/incoming/<slug>/. Needs a one-time BY-HAND claude.ai login in that profile (script --login flag, headed on :99, watch via browser.justinsforge.com); exit 2 = session expired, redo login. Never automate the Google sign-in.

Gotchas

  • finalize_plan requires the deletes array even when empty.
  • Preview files are FRAGMENTS (marker comment + one <style> + markup, no doctype/html/head/body); the pane wraps them.
  • :root[data-theme="light"] can't theme a nested div; colors.html demonstrates light mode via a .light-scope class restating the light values.
  • Known source quirks captured in the cards: Menu hover uses --card2 (not --hover); Combobox/MultiSelect panels use --elev-3; SectionLabel hardcodes 12px; Alert "warning" borrows --opt-orange-ink (no --warn token); MultiSelect chips are neutral in-app (colored --opt-* chips are the database Cell OptChip).

[Claude Code]