axonhub: Skill for Claude Code

Design System — a system kept in local files

This skill is a local build of the claude.ai Design System artifact type: the rules below are the type's own, with the Artifact tool replaced by files on disk and this skill's scripts/artifact.mjs (The calls). A design system is a folder, <root>, that keeps its content in ITS OWN FILES under <root>/project/; icons and images are uploads (project/_blobs/), named by the index. The page (scripts/editor/, served by artifact.mjs open) reads those files and saves the user's edits back into them.

Write only under <root>/project/: a file elsewhere never shows; never write inside project/_blobs/. (A file you draft only to upload it sits in <root>/src/: Creating, step 2.)

A system kept in files

Its index is project/design-system.json, nothing else, holding a createdOnFiles or convertedFrom object, the marker (read it first; no project/design-system.json: an empty system, see Creating; for a clean-up, stop and say so): {"v":3, "layout":"files", "createdOnFiles":{"v":1,"at":"2026-09-14T18:20:00Z"}, "title":"Acme", "namespace":"Acme", "libraries":[{"name":"react","version":"18"},{"name":"react-dom","version":"18"}], "sections":{}, "groups":["Logos","Icons"], "assetGroups":{"Logos":{"name":"Logos","tile":"l","order":[],"files":{}}}, "blobs":{}, "docs":{"readme":"project/README.md","sections":[]}}. "editing": "off" in the index turns off editing on the page; it, or a source entry not marked upgraded, has the page offer a clean-up (“Finish setting up”, was “Finish the migration”). Asked for one in words, not by its button, first ask if they want its files reorganized into this format. Then do so by Revising. Files the format has no place for (kits, some foundations pages) stay put. Keep authors' words; add nothing in their voice. Pictures, fonts and scripts stay files, moved where format.md puts them, paths repaired: upload none, inline none, whatever else these pages say. Remove files only by craft.md's Move aside. Remove editing and source in the LAST write, once files follow format.md. Other changes are just made, both kept. "editing": "code": synced from code (page read-only). Asked to change it, have them edit the code and rerun /design-sync in Claude Code (from-code.md, end). Everything under assets/<Group>/ that is not text (icons, logos, images, SVG too, video, PDF) is an asset upload, named by a record assetGroups.<Group>.files.<file>: {"name", "blob": "<id>", "size", "type"}: name = its path below the group folder (acme-mark.svg), the key the same with bytes outside [A-Za-z0-9_./-] written ~ + two hex; <id> from the /_blob/<id> the upload returned; size in bytes; type its media type (upload --group prints the record, its key and next steps). A group's order lists those names in tile order; groups orders the groups. Leave sections, blobs and docs to the page (new index: {}, {}, {"sections":[]}). To revise: write only the project/ paths you change. The index is written ONCE, LAST in your work, never in the small steps before it (a write replaces the whole file: a copy read earlier would undo a rename, or drop the record of an icon a person added meanwhile): read it right before, change those (its lastChange and the keys your change touches: title, libraries, an asset record), keep every other key and the marker. A system YOU start (no index yet) gets project/design-system.json with createdOnFiles exactly so, at = now. A project/design-system.json with no marker is not an index: the page opens read-only; say so, write nothing over it.