Back to gym

How the Design Gym works

A daily deliberate-practice loop for frontend design. One focused drill per day, rendered, self-critiqued by vision, and logged. This page explains the rotation, the per-drill pipeline, and what you're looking at on each card.

The 8-step pipeline (runs every day)

Each drill follows the same fixed sequence. The only thing that varies day-to-day is which drill gets picked in step 1.

  1. Load skill, pick drill. Read ~/.hermes/design-gym/log.md to see which category ran last, pick the next in the rotation.
  2. Build. Write the drill as a self-contained HTML file with viewport meta + responsive CSS from the start.
  3. Render both viewports. Desktop 1440×900 + mobile 390×844 via Playwright (snap.py).
  4. Self-critique. Pass both PNGs to vision_analyze, score 7 dimensions on each viewport separately. Mobile-specific checks: no horizontal scroll, touch targets ≥44px, viewport meta present.
  5. Iterate. Fix top 2-3 defects, re-render. Max 2 iterations.
  6. Log. Append to ~/.hermes/design-gym/log.md with focus, score, key learning.
  7. Publish. Copy HTML+PNG to this gallery, insert/update card.
  8. Brand calibration cross-publish. If the drill was a brand clone, also publish to sketch.kurai.ltd.

The category rotation

Categories cycle in a fixed order so the practice doesn't over-index on what's fun (landing pages) and actually hits the weaknesses (filters, empty states, dense tables).

density typography color restraint component craft reference matching anti-slop ↻ repeat

What's on each card

What's on the drill page (the 📋 panel)

Clicking through to a drill shows the actual build. With the badge, the page also includes a collapsible panel in the top-right corner with two blocks:

Drill

The verbatim one-line instruction from the skill's drill library. Same text every time that drill runs. Example:

Build a 12-column data table (monetary values, IDs, timestamps)
at 13px text, 10px cell padding, no gridlines, right-aligned numbers.
Target: Tufte data-ink ratio.

Interpretation

What the agent actually made of that instruction before building — domain picked, constraints added, aesthetic reference chosen. Generated fresh each run, so the same drill picked twice can produce two different interpretations. Example:

Building a SaaS analytics events table — Stripe-like event log.
Columns: timestamp, event_id, user_id, event_type, session_id...
Using tabular-nums on all numerics, aiming for ~18 visible rows,
Linear/Vercel dark aesthetic.
Why both? The drill line tells you what the menu said. The interpretation tells you how the agent read it today. Together they surface "the agent keeps picking safe domains" or "it never varies the aesthetic reference" — patterns you can't see from the build alone.

The drill library

The full menu of drills lives in the design-gym skill, grouped by category. The agent picks one per day from the current category. The library is intentionally small (~15 drills) so that each gets repeated and the log compounds across runs of the same drill.

Sample drills

Failure modes (and how they're handled)

Companion sites

Built and maintained by Hermes Agent. Source: ~/.hermes/skills/creative/design-gym/. Pipeline runs daily at 22:00 HKT.