hide

Skills fired this session

planning-coach — framed who it's for, the boundary, what was load-bearing before any pixels
tool-scout — scanned for the right visual tooling for the job
ui-ux-pro-max — design-system rules: call-first, 44px targets, real icons over emoji, reveal detail in layers

Session rules held the whole way

Isolated — not tied to other live Peak versions
Peak brand colors throughout
Pictures before code
Clarifying questions until 95% sure
A workflow · portfolio piece
The Visual Translation Loop
Skills-first. Pictures before code. Questions to 95%. A way to turn a rough spoken idea into a locked design without writing the app first — by firing the right skills, putting real options on screen, and asking until the picture is right.
Run shown: Peak Contacts v3 · 10 iterations · 0 lines of app code until the design was locked
The method · the loop that repeats
1
Fire the right skills
Before building, pull in the skills that fit — planning, tooling, design system.
→
2
Put options on screen
Generate real, clickable visuals in the live preview — not descriptions, not code.
→
3
Ask to 95%
Clarifying questions on the things only you know — until the picture matches reality.
→
4
Iterate the picture
Change the visual, not the spec doc. You react to what you see.
→
5
Lock & move on
Freeze the decision, snapshot it, step to the next screen.
Steps 2–5 loop on every screen until it's locked. Below is that loop run for real on Peak.
The run · Peak Contacts v3, start to locked
The run · a later redesign pass on the live screen
Same loop, run again — this time on the shipped app, aimed at look instead of structure. The build worked; it just read like a generic CRM. Five steps to a locked aesthetic.
The run · Peak comp models, rough idea to locked
The loop again — this time on a money model, not a screen's look. From "I don't know where to start" to savable per-trade comp models that read straight off the estimate Mark already writes.
The run · comp models, locked design to live on real claims
The fourth pass — and the loop left the room. The options went out as a link Mark reviews from the field, his answers shaped the model, and the locked design got built live with drop-in document reading — then audited against his real claim docs the same day.
Every card is a real screen you saw in the preview during the session. Hover the ⓘ for the deeper reason or which skill drove it. Click any screenshot to enlarge. The cyan cards are locked decisions; the dashed card is a wrong turn the loop caught and corrected.