What you can do here
Generate a design system
Describe a look in a sentence or two and get a full design system: tokens, a DESIGN.md spec, and dark plus light previews.
Remix a template
Browse the gallery by category, preview any template live, and remix it into your own project.
Import a brand
Point at an existing website and the surface extracts its colors and generates a design system from it.
Build on it
Design projects run in the same live sandboxes as Code projects, so a generated design is a working site, not a static image.
Real, running designs
Generated designs are working code in an isolated cloud sandbox with a live preview, the same infrastructure the Code surface uses. That means every design you generate can be inspected, iterated on in chat, screenshotted, and taken all the way to a deployed site. See Sandboxes. Beyond the core flow, the surface includes a visual design editor with AI-assisted component generation, Figma import and export integration, and 3D website generation built on Three.js and React Three Fiber.Design systems everywhere
A design system created here is not decoration; it is a set of machine-readable artifacts (design tokens, a DESIGN.md specification, and HTML previews) that agents across ProductOS consume when they build UI. The Design System Agent on the Build surface produces the same artifacts as part of the full pipeline. See the Design System Agent.Where to start
- Open design.productos.dev. You can browse templates without an account; generating and remixing require sign-in, and the free tier needs no credit card.
- Either describe a design system you want, import a brand from a URL, or remix a template.
- Iterate in chat, then take the result to GitHub or a live URL like any other ProductOS project.