Component Contract Lab

The implementation gap

Traditional design artefacts communicate visual intent well, but leave many execution-critical decisions implicit. A component can look close to a reference and still fail in behaviour, states, semantics or implementation constraints.

Once implementation could be generated, ambiguity in the design intent became the real constraint.

Design intent survives implementation when the rules that matter are explicit enough to execute and validate, not just interpret.

The important question was not how to make the generator better. It was what implementation was being forced to infer because design had never made it explicit.

Making intent executable

I reframed the gap around explicit execution intent. The contract records the decisions that matter strongly enough to constrain implementation and define acceptance, rather than leaving them to silent inference.

• Structure
• Behaviour
• States
• Geometry
• Accessibility expectations
• Constraints
• Dependencies
• Validation criteria

Controlled implementation workflow

I designed the execution boundary from design intent through contract, implementation and validation. AI can assist inside the implementation step; it does not define the acceptance boundary.

What the contract changed

A secondary-button example makes the boundary concrete: an implicit implementation choice becomes an explicit execution rule and then a reviewable result.

Contract anatomy

The format matters less than the boundary it declares: intent, behaviour, constraints and validation in one reviewable shape. Missing decisions stay visible instead of being silently guessed.

A simplified readability view of the model.

component: SecondaryButton

intent:
  purpose: Provide a lower-emphasis action without competing with the primary action.
  decision: Keep the button compact, layout-safe and dependency-free.

execution:
  visual:
    - default stroke
    - hover stroke
    - compact focus treatment

  constraints:
    - Do not import external fonts.
    - Do not stretch to fill the container.
    - Hover must not change layout dimensions.
    - Focus treatment must remain compact.

validation:
  criteria:
    - No external dependencies are introduced.
    - Hover and focus do not create layout shift.
    - Generated output matches the declared constraints.
    - Missing decisions are flagged instead of guessed.

Controlled results

I directed controlled comparisons to test the mechanism rather than rely on a convincing demo. The result was measured as first-pass conformance.

What I designed

I defined the model and the decisions around it, from the upstream design problem to the boundary between deterministic execution and human judgement.

• 01

  Move the problem upstream

  I reframed implementation fidelity as a design problem: what is being forced to infer because intent was never made explicit?

• 02

  Define the contract boundary

  I decided which choices needed to constrain execution, and where inference was acceptable versus where it had to be flagged.

• 03

  Separate checks from judgement

  I split deterministic PASS / FAIL checks from deferred criteria that still required human review and acceptance.

• 04

  Bound correction

  I shaped correction as a contract-led rerun against explicit criteria, rather than unrestricted regeneration.

• 05

  Test the mechanism

  I directed controlled comparisons to test whether the model changed first-pass conformance, not just whether a demo looked convincing.

Proof