Route intelligence
Maps any product brief to a page type — SaaS, docs, commerce, trust center, dashboard, and 50+ routes in the public corpus.
Public · MIT · design skill OS
Design contracts before your agent writes UI.
DZINE is an open-source CLI for teams using AI builders. Compile a brief into route architecture, tokens, forbidden patterns, and QA gates — then score what gets built.
37style routes
228agent skills
v1DesignContract
MITlicense
Install via npx dzine-skill — see Getting started.
Live pack excerpt · route ai-native-copilot · source examples/design-contracts/sample-ai-product
01# DZINE Design Contract02 03Version: `dzine.contract.v1`04Route: `ai-native-copilot`05Generated: 2026-05-15T07:58:2506 07## Brief08 09- Product type: AI workflow product10- Audience: teams evaluating AI-assisted work11- Primary action: Inspect generated contract pack12- Secondary action: Run the CLI locally13 14## Non-Negotiables15 16- Build from this contract before styling.17- Use one visually dominant primary action per viewport.18- Show route-specific proof before or near persuasion.19- Preserve keyboard, focus-visible, responsive, and reduced-motion behavior.20- Do not ship forbidden patterns.21 22## Proof Requirements23 24- `proofRequirements.1.requirement`: working artifact preview (real product, data, policy, media, artifact, or clearly labelled fallback)25- `proofRequirements.2.requirement`: source/freshness label (real product, data, policy, media, artifact, or clearly labelled fallback)26- `proofRequirements.3.requirement`: human review state (real product, data, policy, media, artifact, or clearly labelled fallback)27 28## Section Jobs29 30### 1. hero31Five-second clarity hero with route-specific media/proof/action32 33Acceptance:34- sectionJobs.hero.job is visible in the implemented page architecture35- sectionJobs.hero.requiredContent has no placeholder content36- sectionJobs.hero.states are represented or explicitly not applicable37 38### 2. context39Context/problem section naming the concrete user job40 41Acceptance:42- sectionJobs.context.job is visible in the implemented page architecture43- sectionJobs.context.requiredContent has no placeholder content44- sectionJobs.context.states are represented or explicitly not applicable45 46### 3. proof47Route-specific product/work/content proof section48 49Acceptance:50- sectionJobs.proof.job is visible in the implemented page architecture51- sectionJobs.proof.requiredContent has no placeholder content52- sectionJobs.proof.states are represented or explicitly not applicable53 54### 4. decision55Decision/conversion module with states56 57Acceptance:58- sectionJobs.decision.job is visible in the implemented page architecture59- sectionJobs.decision.requiredContent has no placeholder content60- sectionJobs.decision.states are represented or explicitly not applicable61 62### 5. trust63 64… (truncated for homepage preview)
01{02 "version": "dzine.contract.v1",03 "route": {04 "slug": "ai-native-copilot",05 "confidence": 2,06 "rationale": "Selected `ai-native-copilot` from DZINE route hints and product context.",07 "alternatives": [08 "commerce-editorial"09 ],10 "sectionKit": "style-systems/dzine-taste-framework/sections/by-route/ai-native-copilot.md",11 "template": "ai-copilot-landing",12 "templatePath": "style-systems/dzine-taste-framework/templates/by-route/ai-copilot-landing.md"13 },14 "primaryAction": {15 "label": "Inspect generated contract pack",16 "secondaryLabel": "Run the CLI locally",17 "rule": "one visually dominant primary action per viewport",18 "clause": "primaryAction.label"19 },20 "sections": [21 {22 "id": "hero",23 "order": 1,24 "job": "Five-second clarity hero with route-specific media/proof/action",25 "requiredContent": [26 "route-specific copy",27 "real proof or explicit fallback",28 "state-aware primary control"29 ],30 "states": [31 "default",32 "hover",33 "focus-visible"34 ],35 "acceptanceCriteria": [36 "sectionJobs.hero.job is visible in the implemented page architecture",37 "sectionJobs.hero.requiredContent has no placeholder content",38 "sectionJobs.hero.states are represented or explicitly not applicable"39 ]40 },41 {42 "id": "context",43 "order": 2,44 "job": "Context/problem section naming the concrete user job",45 "requiredContent": [46 "route-specific copy",47 "real proof or explicit fallback",48 "supporting evidence"49 ],50 "states": [51 "default",52 "hover",53 "focus-visible"54 ],55 "acceptanceCriteria": [56 "sectionJobs.context.job is visible in the implemented page architecture",57 "sectionJobs.context.requiredContent has no placeholder content",58 "sectionJobs.context.states are represented or explicitly not applicable"59 ]60 },61 {62 "id": "proof",63 "order": 3,64 "job": "Route-specific product/work/content proof section",65 "requiredContent": [66 "route-specific copy",67 "real proof or explicit fallback",68 "supporting evidence"69 ],70 "states": [71 "default",72 "loading",73 "empty",74 "error"75 ],76 "acceptanceCriteria": [77 "sectionJobs.proof.job is visible in the implemented page architecture",78 "sectionJobs.proof.requiredContent has no placeholder content",79 "sectionJobs.proof.states are represented or explicitly not applicable"80 ]81 },82 {83 "id": "decision",84 "order": 4,85 "job": "Decision/conversion module with states",86 "requiredContent": [87 "route-specific copy",88 "real proof or explicit fallback",89 "state-aware primary control"90 ],91 "states": [92 "default",93 "loading",94 "empty",95 "error"96 ],97 "acceptanceCriteria": [98 "sectionJobs.decision.job is visible in the implemented page architecture",99 "sectionJobs.decision.requiredContent has no placeholder content",100 "sectionJobs.decision.states are represented or explicitly not applicable"101 ]102 }103 ]104}
01:root {02 /* DZINE DesignContract v1: ai-native-copilot / ai-native-product */03 --dzine-background: #f7f6f1;04 --dzine-surface: #ffffff;05 --dzine-text: #111111;06 --dzine-muted: #66645e;07 --dzine-border: rgba(17, 17, 17, .14);08 --dzine-action: #111111;09 --dzine-focus: #5b5bd6;10 --dzine-success: #067647;11 --dzine-warning: #9a6b2f;12 --dzine-danger: #b42318;13 --dzine-radius: 8px;14 --dzine-space-sm: 8px;15 --dzine-space-md: 16px;16 --dzine-space-lg: 32px;17 --dzine-space-xl: 64px;18}19 20[data-dzine-contract] {21 background: var(--dzine-background);22 color: var(--dzine-text);23}24 25[data-dzine-contract] :focus-visible {26 outline: 3px solid var(--dzine-focus);27 outline-offset: 3px;28}
01# DZINE Contract Scorecard02 03Contract: `dzine.contract.v1` / `ai-native-copilot`04 05Status: **Contract-ready** — run `score` (structural) or `score --strict` against your implementation URL to mark gates pass/fail.06 07## Clause Gates08 09- [TODO] `primaryAction.label` — One primary action: Exactly one dominant CTA appears in the first viewport.10- [TODO] `proofRequirements` — Proof before persuasion: At least one required proof object is visible before or near the primary ask.11- [TODO] `sectionJobs.hero.acceptanceCriteria` — Hero clarity: Category, audience, promise, proof, and action are understandable within five seconds.12- [TODO] `componentContracts.states` — State coverage: Key controls include focus-visible, loading, empty/error, and disabled states where relevant.13- [TODO] `componentContracts.accessibility` — Accessibility gate: Semantic structure, labels, keyboard path, contrast, and reduced-motion rules are verified.14- [TODO] `sectionJobs.responsive` — Responsive intent: Mobile/tablet layouts preserve the decisive content without horizontal overflow.15- [TODO] `forbiddenPatterns` — Forbidden pattern check: Implementation avoids every listed generic or unsafe pattern.16- [TODO] `tokenP17 18… (truncated for homepage preview)
Brief: Premium AI agent product site for teams. Show generated files, human review state, command workflow, pricing, and proof …
Product
Three layers that turn prompts into enforceable design judgment.
DesignContract v1
Emits a versioned pack (JSON, Markdown, tokens, scorecard) that any agent can implement against.
Score and repair
Structural score (v0) checks HTML heuristics; --strict adds browser preflight. Repair targets failed clauses only — not generic design advice.
Workflow
Brief → compile → build → score. Same loop in CLI, docs, and CI.
Brief
Describe product, audience, and primary action.
Compile
Generate route, tokens, forbidden patterns, and gates.
Build
Hand the pack to Claude, Codex, Cursor, or any file-capable agent.
Score
Verify the implementation against the contract.
Quality gate · structural v0
Default score checks HTML heuristics (landmarks, h1, proof tokens). Use --strict for browser preflight. Neither replaces human visual review.
FAIL / hierarchy
Three equal CTAs, proof below the fold, decorative mockup instead of artifacts.
REVISE
One primary CTA, visible pack preview, copyable install command.
PASS
A new visitor can clone the repo, generate a pack, and understand the workflow in one sitting.
Why it matters
A contract replaces loose prompts that default to generic SaaS UI.
Prompt only - modern AI product homepage - bento cards + gradient hero - abstract dashboard art - no proof, no review gates
With DZINE + route-specific section jobs + design-contract.json + scorecard + forbidden patterns listed + URL scored against clauses
Agents
File-based handoff works across mainstream AI builders.
AgentHandoffReadsReview
Claude CodeCommit pack to repoDESIGN.md, route.jsonScore after first pass
CodexTask contextcontract JSON + DESIGN.mdRepair from scorecard
CursorProject rulesbuild-pack/Lint + score in CI
v0 / LovablePaste route + tokensPartial packManual score review
Free to clone, fork, and use in production apps.
Open-source CLI; optional MCP bridge for agent tools.
Golden-brief regression and contract smoke in GitHub Actions.
Get started
Free for everyone. Clone the public repo, run the CLI in your project, commit packs with your app.
Open source
Full public corpus
Anyone can clone the GitHub repo, run the CLI, and generate design contracts — no accounts, checkout, or license keys.
- 37+ catalogued routes · 53 in full corpus
- DesignContract v1 compile, lint, and score
- Agent handoff docs and MCP bridge
- Sample packs and browser QA scripts
Your workflow
Use it in your app
Generate a build pack in your project directory, commit it beside your code, and score implementations in CI like any other artifact.
- Works with Claude, Codex, Cursor, v0, and more
- Packs land in ./build-pack/ in your cwd
- Same commands contributors run in CI
- No vendor lock-in for agents or hosting
Ready to ship better first passes?
Install the CLI, generate a pack, and score your first implementation.