// this page was vibe-coded — designed by kunlin · built by claude · verified by a harness 0 lines hand-written ✓

ai-lab.md · build: passing ✓ · authored by kunlin × claude

Exploring Agentic AI in Product Design

Field notes from both sides of the loop — shipping an enterprise AI agent at work, and vibe-coding my own tools after hours. Different scales, same method: a living spec, an AI that executes, a designer who owns the judgment.

product-designer · role description edited by AI · changes accepted ✓

deliverable

Static mockups & 40-page decks A living spec that humans and agents both read

craft

Pixels Rules, constraints, guardrails

handoff

Over the wall, then wait A loop — AI drafts, I direct

the edge

Execution speed Judgment — the final 20% no model has

AI didn't shrink the design job. It moved it upstream — from drawing every screen to defining what "right" means.

// the loop — one method, two scales

spec (.md) AI executes human judgment write back

⟲  the last step feeds the first — the spec never goes stale

01

01 / enterprise scale

NIA — designing an AI agent inside a $1.4B B2B platform

GenAI Agent MCP + Figma Living Spec ↑22% faster purchase flow

🚀 The method, anonymized: every feature starts as a markdown spec merged from vendor docs and raw user data — one file that stays alive from research to launch. In the design phase, AI drafts ~80% of the Figma first-pass through MCP; my job is the 20% that decides if it ships.

fig.01 — nia, persistent sidebar agent · shipped to production

// workflow — the spec is the product

vendor-input.mdpartner docs, requirements
+
Raw user dataresearch, tickets, analytics
feature-spec.mdmerged · the living document
Research Design Build Test Launch
MCP ↔ Figma · AI drafts components & first-pass pages generated from the spec
AI ~80%me 20%
Designer — the 20% review, refine, decide what's right for the user & the system
every decision written back into feature-spec.md — until launch

// what made it work

The spec never went stale. Docs usually die after kickoff — this one ate every decision we made and briefed the AI better each week. The designer's real deliverable was the document, not the screens.

02

02 / personal scale

Vibe Coding — I don't write code. I write the rules AI follows.

Claude Code Custom SKILL.md Zero hand-written code Shipped solo

🚀 Two working tools: a Claude skill that tailors my resume without breaking a pixel-locked layout, and a live job-search dashboard in Next.js. Same loop as the enterprise one — plus a harness: automated checks every build must pass before I even look.

claude — ux-resume-optimizer
$ claude --skill ux-resume-optimizer ▸ loaded SKILL.md · 14 rules · layout: locked ▸ building… tailoring resume → senior-product-designer.pdf harness ─ width precheck ……………… PASS harness ─ keyword bleed grep ………… PASS harness ─ render diff @200dpi ……… FAIL Δ line 42 overflows +2.3pt ▸ patching rule → max-width guard @ skills.tail ▸ rebuilding from clean master… harness ─ width precheck ……………… PASS harness ─ keyword bleed grep ………… PASS harness ─ render diff @200dpi ……… PASS ✓ shipped · 0 lines hand-written · new check added to harness

Job Tracker ● Live

127

applications tracked · Next.js

fig.02 — one build cycle: red, patch the rule, green, ship

// workflow — two loops, and the harness only grows

Ideaa tool I actually need
SKILL.mdrules first: layout locks · injection sites · honest gap reports
Claude buildscode, pipelines, UI — the whole 80%
Harness — auto checkswidth prechecks · bleed grep · render diff — every build must pass
I judge the restdesign review for what checks can't measure — taste, clarity, honesty
Ship ✓the skill stays, reusable
red? the agent fixes itself against the harness — I'm not in this loop
my review fails it? I patch the rules — and the failure becomes a new harness check

// the unlock

Two loops. The harness catches everything measurable — and it only grows: each failure I catch by eye becomes a new automated check. The agent I work with next month is strictly better than this month's. Continuous learning, designed — not hoped for.

// EOF — anonymized to method level. happy to go deeper in a conversation.

say hi →