04In developmentApache-2.0
Ask Design System
A local-first AI assistant that answers natural-language questions about your design tokens — with optional voice input and output — entirely in the browser.
Awaiting real capture — /media/ask-design-system/chat-session.mp4
Screen recording: a question about spacing tokens answered with a streamed response citing token names.
A question about spacing, answered from your own token file.
The problem
Design system documentation gets outdated the day it is published. Token files are comprehensive but not searchable in natural language. Cloud-based design system tools — Zeroheight, Supernova, Specify — require accounts and send your data to third-party servers. Solo designers, small teams, and privacy-conscious organisations have no equivalent: they either answer every question manually or accept that knowledge stays trapped in files nobody reads.
Awaiting real capture — /media/ask-design-system/model-loading.avif
The model loading screen showing a progress bar at 72 percent with the note that the download is one-time only.
The language model downloads once. After that, it loads in under three seconds.
How it works
It reads your tokens, not a generic rulebook.
Pass your design token JSON — DTCG, Style Dictionary, or plain nested format — and the assistant indexes it on load. Every answer is grounded in your actual data, not a generic set of best practices.
It retrieves before it reasons.
Each question is embedded and compared against your token chunks by cosine similarity. The top five matches are injected into the language model’s context, so answers cite your tokens by name instead of inventing plausible ones.
It speaks and listens, if you want it to.
Voice input transcribes speech into the text field via the Web Speech API. Voice output reads answers aloud through Kokoro TTS. Both are opt-in, and neither requires a network call after the initial model download.
It never leaves the machine.
The language model, the embedding model and the TTS model all run in your browser via WebGPU. Your token data is processed in memory and never transmitted. There is no account, no telemetry, and no server to trust.
What it does and does not do
Detected automatically
- Retrieval-augmented answers grounded in the token data you provided, with the top five matching chunks injected as context.
- Auto-detection of token format — DTCG, Style Dictionary, or plain nested JSON — with no manual configuration.
- Suggested starter questions derived from the token categories present in your schema.
Needs a human
- Whether an answer is correct. The model is small and quantized; it can misread a token name or invent a relationship that does not exist in the data.
- Whether a token value is current. The assistant sees the JSON you passed at initialisation, not a live feed from your repository.
- Whether the token structure is complete. If a category is missing from your JSON, the assistant cannot answer questions about it.
100% local.
Everything runs in your browser. The only network request is the one-time model download from Hugging Face (~500 MB for the LLM, ~23 MB for the embedding model, ~82 MB for TTS). After that, there is no fetch call — enforceable via Content Security Policy. There is no account, no analytics, and no error reporting to any external service.
Get it
- License
- Apache-2.0
- Status & roadmap
- Core and Vue packages in development. The headless class is functional; the Vue component is complete with chat, voice, and model-loading UI. Next: published npm packages and a hosted demo for embedding on this site.