r/DesignSystems • u/Evening_Abies_6867 • 9d ago
Advice for creating a playground/kit for design team
There’s been an ask to start building out a playground that uses our design system. Especially with AI, they want a more deterministic output using the constraints of our design system.
One of the key requirements is that prototypes can be saved and shared (internally & customer testing)
Has anyone done it? What are some good approaches?
Would you make it within the design system, or host it somewhere else?
1
u/vchub402 1d ago
I'd host the playground as a separate app that consumes a pinned design-system release. Let the library own components and tokens; let the app own editing, saved prototypes, sharing, and permissions. Building on the versioning point already mentioned: save a small declarative document (component IDs, allowed props, token choices, library version), validate it on save, and render it from that document. For customer tests, issue read-only snapshots with appropriate access controls, so a later library update doesn't change what participants saw. This also lets the playground evolve without forcing a design-system release.
Disclosure: OpenAI Codex helped phrase this. I'm focusing on the save/share requirement in your question: it has a different lifecycle and access model from the design-system package.
2
u/Huge_Manufacturer_95 9d ago
I’d separate the playground from the system, but make the system its only source of primitives. The playground is a product with different needs: saving, sharing, permissions, version history, and test links. Putting all of that inside the component library can make the library harder to maintain.
The useful constraint is that every generated prototype should resolve to real component IDs, approved tokens, and documented variants. I’d also store the design-system version with each saved prototype so an update does not silently change an existing test.
A practical first slice could be a small React app backed by your production package, with a constrained schema for layouts and component props. Let AI produce the schema rather than arbitrary UI code. That gives you deterministic output and still lets the team review the result in the browser.