Examples

DZINE-only flagship example

Docs Knowledge Base

A searchable support system for developers: task gateway, article shell, API example, version trust, and support escalation.

DZINE API Docs

Quickstart / v0.1.0 / updated Apr 24

Score an implementation URL

Run this after the local UI is available. Failed clauses produce a repair prompt instead of taste notes.

npx dzine-skill score --contract dzine-pack/design-contract.json --url http://localhost:3003/examples/ai-product-site/ --out dzine-pack/score-report.json
Expectedscore-report.json plus clause-level pass/fail notes.
docs-knowledge-baseContract-led curated UI

Disclaimer: DZINE-coded interface scene. The docs UI is curated from the docs-knowledge-base route and should be scored against the final implementation URL before production claims.

docs-knowledge-base

Production-looking route experience

A real docs shell with search, task paths, article layout, API examples, version trust, feedback, and escalation routes.

DZINE API docs

Searchable support for teams shipping contract-led UI.

Tasks, reference, copyable commands, expected output, and recovery paths live in one product-grade docs shell.

Quickstart / version 0.1.0 / updated Apr 24

Score an implementation URL

Use the score command after the UI is running locally. Failed clauses generate a focused repair prompt instead of vague design notes.

npx dzine-skill score --contract dzine-pack/design-contract.json --url http://localhost:3003 --out dzine-pack/score-report.jsonExpected output: score-report.json plus clause-level pass/fail notes.
EmptyNo contract selectedErrorURL did not respondSuccessScorecard generated
Status: operationalFeedback capturedChangelog visibleAgent recipe copied
Integrated DesignContract proof

The proof path is inside the experience.

The contract turns docs into a usable shell: grouped navigation, quickstart commands, API reference blocks, right rail anchors, and handoff recipes.

Route inputs
UI/UX architectureProduct journey: EvaluateTemplate: docs-knowledge-baseToken preset: devtools-docs
Proof moments
  • Search, version, and feedback are treated as trust surfaces.
  • The API example includes expected output and recovery states.
  • Agent recipes appear as a task path, not a hidden afterthought.
Score and repair flow01npx dzine-skill compile "developer docs knowledge base for an API and CLI product" --contract --out docs-pack02npx dzine-skill lint docs-pack/design-contract.json03npx dzine-skill score --contract docs-pack/design-contract.json --url http://localhost:3003/docs/ --out docs-pack/score-report.json
Before to after

DZINE changes the product decisions before styling.

Generic output

A long Markdown page with no task paths, no sidebar depth, no copyable commands, and no proof that an agent can use it.

  • Single-column Markdown wall
  • No role-based entry points
  • Code examples lack output or recovery states
  • No update, feedback, or support trust

DZINE route

The docs feel like a product surface, not a document dump, and the route can be re-scored when the generated UI changes.

  • Search and top tasks orient the user
  • Sidebar, article, and right rail carry distinct jobs
  • Code block includes expected output and error recovery
  • Version, changelog, and feedback are visible trust surfaces
Score implementationscore-report.jsonError: URL unavailable

Mobile proof

Mobile is redesigned, not compressed.

  • Sidebar becomes task cards before article content.
  • Command blocks wrap without horizontal scrolling.
  • Support and feedback remain available after the quickstart.
6task paths3language tabs24 Aprvisible update date