UsageMIT · agent-agnostic
Guides
Usage guide
How to write briefs that produce strong routes, enforce packs during implementation, and run the review loop without regenerating on every tweak.
Write briefs that compile well
DZINE routes your brief through product-aware intelligence — not generic “make it modern” prompts. Include enough context that the contract can enforce proof, hierarchy, and action priority.
Compile example
npx dzine-skill compile "public docs site for a design-contract CLI used by AI builders" --contract --out dzine-packBrief ingredients
- Product type — SaaS, docs, commerce, trust center, dashboard, portfolio…
- Audience — who must understand the page in five seconds
- Proof — artifacts, metrics, customer logos, live demos
- Primary action — one main CTA per viewport
- Constraints — austere vs editorial, mobile-first, accessibility bar
Brief examples
| Weak | Strong |
|---|---|
| modern AI homepage | SOC2-ready observability platform pricing page for platform engineers |
| nice docs site | API reference for a design-contract CLI with install path and score workflow |
| premium brand site | quiet-luxury hospitality booking site with proof-first hero and single reserve CTA |
Use the pack during implementation
| File | Agent should |
|---|---|
| design-contract.json | Treat as source of truth; never contradict clause paths |
| DESIGN.md | Read before writing components; follow forbidden patterns |
| route.json | Implement sections in order with stated jobs |
| tokens.css | Map tokens into your framework theme |
| scorecard.md | Run after first pass; fix [FAIL] rows only |
Review loop
- Generate pack with
--write-build-pack. - Inspect
contract-preview.htmland DESIGN.md before coding. - Implement with agent; commit pack beside app.
lintthenscoreagainst dev URL.repair→ agent patches → re-score.
Common mistakes
- One-shot prompt — asking the agent to design and build without a pack.
- Vague briefs — lint fails or produces generic routes.
- Polish without proof — pretty UI that fails hierarchy and action gates.
- Compressed mobile — stacking desktop columns instead of designing mobile.
- Ignoring scorecard — subjective “make it nicer” instead of clause repair.