All work
Live Own practice Practice owner · design and deployment approver
03 · hirler.works

A design system carried from brief to production.

Friedrich set the positioning, visual direction, review gates, and deployment rules. Agents produced options and implementation inside those boundaries. The evidence below shows what survived the handoff, what changed in production, and how a motion regression was corrected before release.

Handoff against production. Same theme, state, scale, and crop. The production page retains the hierarchy and system-map intent while adapting route-aware behavior and runtime styling.
the record
Problem
Turn a positioning and visual-system brief into a production site without losing the structure during implementation.
Role
Practice owner, design approver, implementation reviewer, and final deployment authority.
Constraint
Keep the brand system intact across a static HTML handoff, Astro routes, runtime-created SVG, and a manually approved production release.
Decision
Let agents produce bounded options and implementation, then require explicit review gates for visual fidelity, motion, security, and deployment.

From brief to production.

The operating model separates production work from production authority. Agent output moves forward only after the relevant human gate is passed.

  1. 01Positioning and visual rules
  2. 02Bounded design and implementation
  3. 03Visual and interaction review
  4. 04Security and deployment confirmation
  5. 05Production smoke checks

The prototype moved. The production page did not.

Runtime-created SVG elements were not reliably reached by Astro-scoped CSS. The correction moved the relevant page styles to global scope, retained the approved structure, and added explicit motion and interaction verification.

A production-specific correction. The handoff structure stayed. The CSS scope changed because runtime-created SVG elements sit outside Astro's generated scope attributes.

Deployment remained a human decision.

The production path required manual confirmation before build and deploy, followed by loopback and public smoke checks. The record is evidence of a review gate, not a claim that automation removed accountability.

Manual release gate. Run 29119320392 records confirmation, build, deploy, and two smoke checks. Hostnames, paths, addresses, and secrets are intentionally omitted.

What changed.

  • The approved editorial systems language became a working multi-route Astro site.
  • The Terminal H mark, typography, spacing, and coordination-map vocabulary remained consistent through production.
  • A scoped-CSS motion regression was corrected without replacing the approved interaction structure.
  • Build and deployment stayed behind explicit review and manual confirmation gates.

HTML handoff · Astro · runtime SVG · global motion styles · GitHub Actions · staged review · production smoke checks

Visit hirler.works See how Clockwork works
Book a systems call Email