Integrations & exports
Hand out what is actually stored
An export is a promise that what you download matches what the product is. These 13 are generated from the same modules this site renders from — the stylesheet, the catalog data, the token values — and each page prints the exact bytes the endpoint serves. Two more integrations are routes rather than files: the embed serves frames and the badge serves an SVG per asset.
Design tokens (DTCG)
Colours, radii and font stacks in the W3C design-token format, parsed out of the stylesheet.
Tailwind preset
A CommonJS preset with the site's tokens, ready for tailwind.config.js.
Figma variables
The same tokens as Figma colour and number variables, with the values it cannot hold left out.
Catalog metadata
Every component and prompt with its stored scores — the data the site itself renders from.
VS Code snippets
Five snippets for the layout patterns this site repeats, using its real utility classes.
Changelog feed
RSS for the studio log, with each entry's measured size change carried in the description.
Storybook decorator
A decorator that hands your stories this site's palette as custom properties.
Print stylesheet
The @media print block this site compiles, served as a file so it can be copied into another project.
React token provider
The one component a package could ship honestly: tokens as custom properties on a subtree.
Single-file starter
One self-contained page — inline tokens, zero requests, no script — for the layout vocabulary.
CodeSandbox file set
Three files to paste into a sandbox, because the one-click deep link cannot be verified here.
Palette bookmarklet
The script behind the drag-to-bookmarks palette reader; it sends nothing anywhere.
Three integrations that are not downloads
The Open Graph helper builds a block per asset instead of shipping one download, and the embed route serves frames rather than bytes — it is a page other sites point an iframe at, with the frame headers printed beside the markup. The score badge is a route too: one SVG per asset, built from the stored scores. All three are excluded from the download list above because none of them is a file you fetch once.
How these are generated
src/app/globals.css @theme block → src/lib/exports.ts → /api/exports/<file> src/lib/data.ts catalog → " → printed on each page
The endpoint and the pages call the same builder, which is the only way to keep a download and its documentation honest. A change to a token or a catalog score shows up in the file, on the page and in the exports list in one step — and the harness holds the two sides together: every endpoint must answer with a content type, anything unknown must 404, both served scripts are parsed with `node --check`, the tokens page must print every colour the tokens endpoint serves, the print page must carry the block from the stylesheet it serves, the catalog must agree with the counted total printed on /quality, the feed must carry every entry the changelog lists, and a badge must carry the score stored in its record.
What is still missing, and inside which feature
Every bullet in this section shipped something real. None of them shipped the whole idea, and these are the five remainders: the part that needs a registry, a server, or a third-party round trip this build cannot make. The count in the heading is the point — five gaps in fourteen deliverables, each one named where it belongs rather than discovered later.
- One-click CodeSandbox linkCodeSandbox export — the file bundleThe three files ship and work. A define link encodes the project with lz-string parameters fetched from a third party, and this build cannot make that round trip to verify its own output, so it prints the files instead of a URL that might open nothing.
- Embed allowlistFramer-style code embed — the routeThe chrome-free route ships for all 289 assets with frame-ancestors and noindex set. Restricting frames to named partners means reading the Origin header per request, which needs a server this build does not have.
- Publishing to npmReact wrapper, Storybook decorator, CLIAll three files are real and run from disk. There is no registry entry behind any of them, so no install command on this site would work, and none is printed.
- Saving a paletteBrowser bookmarklet — reading and copyingThe bookmarklet reads the custom properties on any page and copies one declaration per click. Saving a set needs storage and an identity to attach it to, so the reader gets a clipboard and nothing else.
- A pipeline behind the badgePer-asset score badgeThe badge route serves a real SVG carrying the asset's stored editorial score. No test run, build or CI service stands behind the number, and the SVG's own description says so.
These are listed here rather than left out of the page, because “integrations” is the section where a missing bridge is easiest to fake with a screenshot of somebody else's.