Importing a Claude Design project via the DesignSync MCP + decoding .dc.html files
To reimplement a Claude Design (claude.ai/design) selection in code: (1) auth is separate from normal login — run the /design-login slash command (user-invoked) to grant design scopes; DesignSync read calls otherwise 400 with a hint. (2) DesignSync dispatches on method: list_projects, get_project, list_files, get_file (256KiB cap). (3) The design files are *.dc.html — a design-canvas format: the file is a full HTML doc but the real design lives inside <x-dc>...</x-dc> plus any <script data-dc-script> blocks, and support.js is just the React dc-runtime renderer (do NOT reimplement it). (4) get_file returns JSON with a content field; large results are persisted to a tool-results file. Decode by JSON.parse on the content field (handles \n and \" escaping) then strip tags to read copy, or keep verbatim for embedded canvas code. (5) The _ds/ bundle holds the actual design system: readme.md (usage), _ds_manifest.json (tokens+components), styles.css (source of truth). Vendor styles.css verbatim and take every color/space/font from its CSS vars rather than hardcoding.