Viewrule

Design guidance and executable review.

Viewrule gives coding agents design guidance before implementation, then checks rendered interfaces against explicit boundaries and returns cited findings. People make the final judgment.

How Viewrule works

One set of design rules, used before and after implementation.

The guide shapes the interface; the checker measures what the browser actually rendered.

Before code Design intent Task · content · constraints

Viewrule · Guide Consult design guidance Rules · examples · evidence

Better first draft Patterns chosen with reasons

After render Rendered interface Page · component · state

Viewrule · Check Measure explicit boundaries Browser measurements · configured rules

Cited findings What failed · why · repair guidance

Human judgment remains the control point. An author or agent repairs the interface; a person approves the result.

Same data. Different picture.

Parcels processed · One example day · Two fictional facilities

Before · Boundaries left implicit

Oakland distribution center — North 240

0250 parcels

Oakland distribution center — South 360

0375 parcels

01Clipping hides which facility is which.
02Separate scales make unequal volumes look equal.

After · Two boundaries applied

Oakland distribution center — North 240

0400 parcels

Oakland distribution center — South 360

0400 parcels

Illustration, not a live scan. Viewrule checks configured boundaries; the author or agent makes the repair.

Consult the design guide →Task-centered patterns, cited evidence, original examples, and explicit limits. Read the same Markdown that agents retrieve offline. Open the mock application →Navigation, charts, filters, shipment drawers, tabs, and carrier comparisons. Turn on deliberate defects in the Design lab. Explore individual examples →Eight good/bad comparisons with focused explanations and live measurements.

Fictional data. Reference layouts illustrate selected principles; the browser demo does not run the Viewrule engine.