D D D D Design & & & & & P P P P Prototyping
From prototype to pixel-perfect component
Most teams design in Figma, throw a PDF over the wall, and hope the implementation matches. It never does. The gap between "designed" and "built" is where visual quality goes to die — lost in translation between tools, frameworks, and the compromises developers make when a design system does not actually exist.
SBX eliminates that gap with HTML sandbox prototyping. Before any framework code is written, 5+ variants are built in pure HTML and CSS — isolating visual decisions from technical complexity. The winning prototype becomes the implementation spec. No interpretation, no drift. What you approved is exactly what ships.
47 Components, One Design Language
The @sbx/core-ui library is the single source of truth for every UI element across all applications.
Every component ships with typed traceability metadata linking it back to the user story that required it, 3-mode preview coverage (small card, split light/dark, full tabbed), and mandatory brand-token compliance — no hardcoded hex values, no one-off styles.
When a component exists in the library, it is used. When it does not exist, it is built, tested, and added before any page consumes it.
Token-Driven Brand Compliance
Brand YAML is the source of truth — accent colors, typography scales, spacing tokens, and surface palettes are defined once and consumed everywhere.
The sbx brand generate-app-css command converts brand tokens into CSS custom properties, and sbx brand check-drift scans every Svelte file for hardcoded hex values that violate the token contract.
Drift detection runs before every PR ships, so brand violations are caught at the governance layer, not in design review.
Prototype Before You Build
The sandbox workflow eliminates ambiguity about what "done" looks like. Before any Svelte component is written, 5+ pure HTML/CSS variants are generated and evaluated in isolation — no framework overhead, no state management, no routing. The winning prototype becomes the implementation specification. Screenshot comparison between the prototype and the final component is the acceptance test. If the pixels do not match, the implementation is not done.
HTML Prototype
Generate 5+ pure HTML/CSS variants exploring layout, typography, and interaction patterns in isolation from framework complexity.
Sandbox Review
Evaluate each variant against requirements, pick the winner based on visual fidelity, responsiveness, and component composability.
Svelte Component
Implement the winning prototype as a Svelte 5 component with typed props, brand tokens, and traceability metadata.
3-Mode Preview
Verify the component renders correctly in small (card), split (light/dark), and full (tabbed) preview modes.
Design Commands
The design workflow is driven through CLI commands that manage components, brand tokens, and UI verification — no context switching between tools. Select a command below to see its usage and output.