Examples

DZINE-only flagship example

AI Product Site

A cinematic workflow operating room for revenue teams: source evidence, agent plan, human approval, audit trail, and rollback in one glance.

LedgerPilotworkspace / skyline-health
run_4827Renewal risk changed

Agent found a 22% billing delta, two unresolved support issues, and an expansion clause expiring in 11 days.

01Inspect sources02Draft next step03Human approval
Audit trail writtenNo autonomous sendRollback owner assigned
ai-native-copilotContract-led curated UI

Disclaimer: DZINE-coded interface scene. The product UI is curated from the ai-native-copilot route and should be scored against the final implementation URL before production claims.

ai-copilot-landing

Production-looking route experience

A full product site for an AI workflow tool: hero, live artifact console, trust drawer, use cases, integrations, and action path.

LedgerPilotSourcesReviewsAudit
Agent workflow operating room

Revenue work that shows its sources before it asks for approval.

For operators evaluating AI agents, LedgerPilot makes each recommendation inspectable: task intent, source trail, confidence, human review, and rollback.

run_4827Review required
Trigger

Renewal risk changed for Skyline Health.

Sources

CRM notes, billing delta, support thread, signed addendum.

Draft

Three evidence-backed next steps prepared.

Visible source drawercrm/account-notes.mdbilling/delta.jsonsupport/thread-1842.eml
Human control

No autonomous send

Approval is required before customer-facing actions. Rejected runs write a repair note back to the contract.

State maturity

Empty brief, loading sources, failed source, approved run, and rollback states are designed before implementation.

SOC2 boundarySource freshnessFallback ownerRollback logAdmin policy
Integrated DesignContract proof

The proof path is inside the experience.

The contract forces the page to lead with artifact proof, inspectable generated files, CLI workflow, QA clauses, and one clear primary action.

Route inputs
UI/UX architectureProduct journey: CreateTemplate: ai-copilot-landingToken preset: ai-native-product
Proof moments
  • Source labels appear before the demo CTA.
  • Human approval and rollback are visible in the first product scene.
  • Empty, loading, error, and success states are named as part of the trust story.
Score and repair flow01npx dzine-skill compile "premium AI product site for teams using agents" --contract --out dzine-pack02npx dzine-skill lint dzine-pack/design-contract.json03npx dzine-skill score --contract dzine-pack/design-contract.json --url http://localhost:3003/examples/ai-product-site/ --out dzine-pack/score-report.json04npx dzine-skill repair --contract dzine-pack/design-contract.json --scorecard dzine-pack/score-report.json --out dzine-pack/repair-prompt.md
Before to after

DZINE changes the product decisions before styling.

Generic output

A familiar AI landing page: centered promise, generic dashboard art, soft feature cards, and no proof that the product works.

  • Centered generic AI claim
  • Decorative fake dashboard
  • No provenance, review, or rollback
  • CTA asks for trust before proof

DZINE route

Visitors can see the interface, the files that shaped it, and the checks that confirmed it instead of trusting taste language.

  • Workflow proof appears in the first viewport
  • Files, score, sources, and review state are visible
  • Trust drawer explains permissions and rollback
  • CTA describes the next concrete action
Review run_48274 sources verifiedPASS proofRequirementsPASS rollback.path

Mobile proof

Mobile is redesigned, not compressed.

  • Hero keeps the workflow object above the fold.
  • Artifact console collapses before dense proof.
  • Primary CTA remains a 44px touch target.
12contract clauses8QA gates to verify4agent handoff files