Using agentic coding tools
Shipping experiments with agentic code.
With or without your voice.
Jaime Fausto
10 years of design experience
From enterprise platforms to consumer apps, across fintech, healthtech, and real estate.
SF Native
Born and raised in San Francisco.
Recent Experience
factory.fyi · live
dictumapp.com · live
gtrain.baby · live
What is agentic coding?
An agent accomplishes a goal on its own.
You describe the outcome. It picks the steps, uses the tools, and keeps going until the work is done.
The loop
Goal → act → observe → repeat.
Chat assistants answer once. Agents keep running until the goal is met.
What I use every day
Claude Code.
Anthropic’s agentic CLI. Lives in my terminal. Reads files, writes files, runs commands, commits to git — end to end in one prompt.
01 / 02Making gtrain.baby
Normal
claude.ai · web or desktop
Claude sees your project · you still move the code
02 / 02Making gtrain.baby
Code
terminal · claude code cli
Idea → shipped · one unbroken loop
Why it’s different
A hundred passes in one afternoon.
Before AI
2–3 passes
With Claude
~100 passes
Same clock. Thirty times more tries. That’s the unlock.
The setup
01 / 08
The stack
Layer 01 · Global
~/.claude/CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
04 · Memories
05 · Plans + Tasks
06 · Component library
07 · Deployment
08 · The prompt
Who I am. How I work. Voice rules. Loaded into every conversation, any project.
# Global
Jaime Fausto. Software designer, Factory Design.
Lightweight apps, one problem at most. Inspired
by art and music.
## Communication
- Direct and concise. No preamble, no filler.
- Don’t explain things I already know.
- Offer options instead of open-ended questions.
## Voice dictation
- "clawed" = Claude · "Jason" = JSON
- "X code" = Xcode · "rejects" = regex
- Strip filler, restore dropped articles
- If not obvious: say "I don’t understand”
The setup
02 / 08
The stack
01 · Global CLAUDE.md
Layer 02 · Project
~/Factory/active/g-train/CLAUDE.md
03 · Hooks
04 · Memories
05 · Plans + Tasks
06 · Component library
07 · Deployment
08 · The prompt
Stack. Conventions. Lessons. Do-not-touch list. Loaded when Claude is in this folder.
# Is the G Down?
## Stack
- Single HTML, no framework
- Vanilla JS + CSS
- Python server (polling + alerts)
## Data Sources
- MTA GTFS-RT live feed (60s)
- Socrata historical (4-8 week lag)
- Local alerts.json fills the gap
## Deploy
- Pull alerts.json first (server appends).
- Then run deploy-gtrain.sh.
The setup
03 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
Layer 03 · Hooks
~/.claude/hooks/
04 · Memories
05 · Plans + Tasks
06 · Component library
07 · Deployment
08 · The prompt
Shell scripts that fire on events — block bad writes, snapshot tasks, sandbox private modes, notify me.
sync-things.sh
SessionStart · snapshots Things 3 → tasks.json
block-todo-writes.sh
PreToolUse · blocks any TODO.md write in ~/Factory/
consigliere-sandbox.sh
PreToolUse · blocks writes / agents / git during private mode
notify.sh
Notification · macOS alert when Claude finishes
The setup
04 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
Layer 04 · Memories
MEMORY.md index
05 · Plans + Tasks
06 · Component library
07 · Deployment
08 · The prompt
Feedback, references, project facts. Written as I correct. Compounds every session.
- Deploy means run the script — "push"/"deploy" = deploy-{project}.sh, not git push
- Review deploys before confirming — dry-run; flag suspicious output
- No top borders on containers — Jaime dislikes colored accent borders
- Cold grays for UI chrome — tags/tabs/footers use cold neutrals
- Brainstorm visuals inline — ASCII in terminal, not browser companions
- Verify live data before claiming state — cross-check feed first
- Take reported symptoms literally — don’t default to "browser cache”
- Stop patching after two failures — propose a refactor, not a third patch
The setup
05 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
04 · Memories
Layer 05 · In-session
Plans + Tasks
06 · Component library
07 · Deployment
08 · The prompt
In-session work tracking. Plan a multi-step change, tick tasks as they land. Prevents drift in big refactors.
# PLAN · rubber-band rewrite (dictum)
1. [✓] Kill scroll-based detection; switch to touch
2. [✓] Add three states: idle · pulling · released
3. [✓] Spring-back cubic-bezier(0.34, 1.56, 0.64, 1)
4. [✓] preventDefault in touchmove past bottom
5. [✓] overscroll-behavior-y: none on html
6. [✓] Haptic pulse when crossing threshold
7. [ ] Desktop wheel fallback (next)
The setup
06 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
04 · Memories
05 · Plans + Tasks
Layer 06 · Tokens
Component library
07 · Deployment
08 · The prompt
Shared design tokens and CSS primitives. Every project imports the same palette, type, and components — so it all feels like one factory.
# studio/design/
tokens.css # --fd-paper, --fd-ink, --fd-accent, ramps
components.css # .fd-card, .fd-btn, .fd-badge, .fd-rect
principles.md # thin strokes · regal serif · industrial
fonts/ # Perpetua Titling · Guggenheim Sans
# In any project's CSS:
@import url("../../studio/design/tokens.css");
@import url("../../studio/design/components.css");
The setup
07 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
04 · Memories
05 · Plans + Tasks
06 · Component library
Layer 07 · Ship
Deployment
08 · The prompt
One script per project. Say “deploy” and Claude runs the right one — no more copy-paste rsync from memory.
# support/scripts/tools/
deploy-factory.sh # factory.fyi · rsync → production
deploy-gtrain.sh # gtrain.baby · pull alerts → push build
deploy-dictum.sh # dictumapp.com · site + iOS promo
deploy-jaimes.sh # jaim.es · portfolio
# I dictate:
push gtrain → Claude runs deploy-gtrain.sh
The setup
08 / 08
The stack
01 · Global CLAUDE.md
02 · Project CLAUDE.md
03 · Hooks
04 · Memories
05 · Plans + Tasks
06 · Component library
07 · Deployment
Layer 08 · Live
The prompt + skills
What I actually dictate. Slash commands shortcut repeated workflows.
/plan research a new idea → CLAUDE.md + RESEARCH.md
/ship pre-launch checklist
/humanizer strip AI patterns from writing
/triage process ~/Factory/ and Triage folder
/process sparks → studio library
/consigliere private-thought sandbox (hook-gated)
/daily-review end-of-day notes → Obsidian
/critique UX review with scoring
Same prompt — two tools
Making gtrain.baby.
Normal Claude, or Claude Code. Watch where your idea travels before it becomes shipped code.
Practice 01 · Plan + research
“The G has been down almost every other weekend for a year and a half.”
I wanted a funny G-uptime site — like status pages for Claude or AWS, but for the G.
4:32 PM · idea
/plan → research
CLAUDE.md + RESEARCH.md
7:59 PM · domain bought
11:17 PM · shipped
/plan # kick off research
Agent: research MTA GTFS-RT feeds, Socrata endpoints,
existing G-train status sites, subway-sign fonts,
week-grid visualizations, MTA alert text format
→ RESEARCH.md (data sources, competitive landscape, open questions)
The data
Two MTA feeds, one poller.
Live feed is the source of truth. Socrata gives history. Our poller fills the 4–8 week gap.
After practices 01 – 02
First version. Shipped day one.
V1 · minimal
Yes / No status · uptime bar · service map · list of alerts.
Polish
Free text → structured bullets.
BEFORE · MTA RAW
[G] Northbound [G] trains are running with delays because of signal problems at Court Sq. Expect longer wait times. Alternative: transfer to the [E] or [F] at Court Sq. Take the [G] shuttle bus between Court Sq and Queens Plaza.
→
AFTER · PARSED
G
Northbound · delays at Court Sq
Signal problems
Alternatives
E
F
at Court Sq · [G] shuttle bus
MTA ships one long paragraph. We parse it into lines, badges, and alternatives so you can read it while the train’s pulling in.
Where it broke
We lost hours to three things.
01 · TIMEZONE
9:27 AM alerts appearing as 1:27 PM on the week grid.
.toISOString() returns UTC. We now use localISO() everywhere.02 · SILENT CRASH
Whole week grid stayed on the skeleton — no error in the console.
renderWeek builds HTML in a string, sets innerHTML at the end. Any throw mid-loop kills the paint.03 · DEPLOY ATE DATA
rsync --delete wiped hours of server-collected alerts.
Deploy is now pull → transform → push → restart — never push over live data.
Every failure turned into a memory. Next conversation, Claude already knows.
After practices 03 – 04
Real data in. Bugs out.
V2 · factory reskin
Subway sign lockup · mosaic type · upcoming changes · station map.
Practice 05 · Memory, not repetition
Corrections become memories.
feedback_gtrain_deploy_pull_first.md
Server accumulates alert data. Pull → transform → push when modifying data, never the reverse.
feedback_verify_live_data.md
Always cross-check the feed before saying "no active alerts." Trust the source, not the model.
feedback_take_symptoms_literally.md
Don't default to "browser cache" when Jaime describes a specific visible bug. Read the code.
project_gtrain_socrata_baseline.md
Last Socrata drop: 2026-03-20, through 2026-02-27, 478,867 rows. State I would've had to re-articulate.
Every push-back saved. Next session, I don't need to say it twice.
After practice 05
Current build.
V3 · live
Tile station map · week grid · patterns · pizza rat · streak.
Practice 06 · Push your imagination
The pizza rat.
The mosaic.
The week grid.
Pizza rat
Animated rat runs the status tile.
Drops from right, grabs pizza at 45%, runs to the left edge with gravity-accelerated fall. Not in the brief — I just said "it needs a rat."
MTA tile mosaic
White ceramic. Green border. Mosaic letters.
Every status word rendered tile-by-tile as an MTA station sign. Name Sans Display Black on ceramic cream.
Week grid + uptime
90 days of G train history, hour by hour.
Live feed colors today. Local JSON fills the 5-week gap. Socrata shades the past. One canvas, three time horizons.
The boring version shipped. Then I kept asking: what else could this be?
How I talk to it
Voice in — intent out.
Most of what I send is messy dictation. Claude reads intent, not syntax.
Explicit · diagnostic
“The main padding is not doing anything.”
I SAID
“That main padding is not doing anything. So you need to rethink this. Everything you’ve been adjusting is not working.”
— —
INTERPRETED
Not asking for a different value — asking why the change has no effect. Find the real rule that’s winning, not keep tweaking this one.
— —
DID
Traced the CSS cascade. Found
.hero had scroll-snap-align: start + scroll-margin-top: 16px overriding main padding. Removed it. Padding worked.Pushback · simplifying
“You’re complicating this for no reason.”
CLAUDE WROTE
padding: max(80px, 10vh) for a responsive top padding.— —
I PUSHED BACK
It doesn’t need that complexity. Fixed
120px is fine.— —
CLAUDE DID
Simplified to
padding: 120px immediately. No argument, no justification of the original choice.Summary
Six practices. One build.
01 · Plan + research
Write it. Research it.
gtrain origin · /plan → CLAUDE.md + RESEARCH.md
02 · Draw for clarity
ASCII before code.
gtrain data · two MTA feeds diagram
03 · Real data
No lorem ipsum.
gtrain polish · raw MTA text → parsed
04 · Verify, don't patch
Two fails = refactor.
gtrain failures · timezone, renderWeek, guard
05 · Memory
Correct once, save forever.
gtrain memories · 4 saved feedback files
06 · Push imagination
Ask for another version.
pizza rat · mosaic · week grid → disco ball
The whole site is these six practices stacked.
Practice 06 · Push your imagination
Push your imagination.
V1
CSS 3D Tiles
V2
WebGL Raymarched
V3
Three.js Mirror Tiles
Same idea. Three mediums. Three different builds.
V4
The full one.
R3F + postprocessing. Mirror tiles, 24 point lights from per-tile reflection math, selective bloom.
Live · no rehearsal
Demo zone.
Pick a feature. We'll build it together, right here, from voice to shipped.
TBD
TBD
TBD