Design packs

A design pack is a set of HTML/CSS/JS/JSX mockup files for a product’s UI — a place to keep interactive prototypes and reference designs alongside the docs that drive your work. Open the Design tool from the rail.

What’s in a pack

Each pack groups one or more files — .html, .css, .js, and .jsx/.dc.html mockups — that render together as a live preview. Packs are scoped per product and stored in the workspace.

Creating and importing

New pack — start an empty pack and add files.
Import — bring in existing mockup files (e.g. an exported design or a .dc.html reference).

Previewing

Open a pack to see its live preview, rendered in a sandboxed frame:

Inline CSS and JS run; JSX is compiled on the fly.
Sibling files reference each other (imports and <dc-import name="…"> includes resolve within the pack).

The preview shows the design exactly as the files define it.

Editing files

Each file opens in a code editor so you can tweak markup, styles, or component code and watch the preview update.

Notes

Attach notes to a design pack to capture intent, feedback, or decisions — scoped to the design.

When to use design packs

Keep a UI prototype next to the plan and prompts that describe it.
Hand an agent both the spec doc and the design pack as context.
Park reference designs where the rest of the product context lives.