[ SEC_01 // INTERACTIVE WORKBENCH ]
How I Design, Automate, &
Hand-off
AN OPEN INTERACTIVE OPERATING SYSTEM SHOWCASING LIVE AI AGENT PIPELINES, FIGMA MCP, AND PRODUCT CRAFT.
Vathana
WORKSPACE // IDEATION & LOGIC TREE
BENCH · LIVE
01 PERSONAS & JTBD
➔
02 EMPATHY MAP
➔
◇ EDGE CASE?
➔
04 WIREFLOWS
➔
⚡ VALIDATED IA
01 / PERSONAS
RESEARCH
👤 Fintech Ops Lead
GOAL: 1-Click Batch Approval
NEED: Biometric passkey & instant audit
NEED: Biometric passkey & instant audit
02 / LOGIC TREE
FLOW LOGIC
✓ VALID ➔ Instant Batch Execution
↳ TIMEOUT ➔ AI Async Fallback & Retry
03 / AI AUDIT
CLAUDE
"Stress-test 15 edge cases: network dropouts, permission revokes."
✓ 0 DEAD-ENDS · ZERO DEBT
"Validate mental models before writing 1 line of UI code."
01 FIGMA MCP
➔
02 CLAUDE & SKILLS
➔
03 ANTIGRAVITY IDE
➔
04 SUBAGENT QA
● ANTIGRAVITY AGENT // FIGMA MCP
140ms
"Inspect Figma variables via MCP, sync CSS tokens, and run browser subagent validation."
✓
Node fetched via MCP. Synced 24 tokens. Browser QA passed with 0 layout shifts.
"AI accelerates synthesis; human taste & architecture define the standard."
TOKENS
orange
#F48E3E
ink
#171717
line
#E4E4E7
Aa
font
Geist Mono
Button
Card
Badge
Modal
Input
Toggle
DOCS & SYNC
tokens.css
+ --color-orange: #f48e3e;
✓ 24 components rebuilt
"One token moves, entire system lands in parity."
01 RESEARCH (Claude)
➔
02 WIREFLOWS (Figma)
➔
03 AGENT CODE (Antigravity)
➔
04 PRODUCTION (Vite)
"Zero hand-off friction. Designers who code eliminate the gap between vision and reality."
· workspace initialized — notes, shapes, tokens loaded
✓ figma mcp connected: 42 tokens in parity with codebase
❯ track 01 live: flowchart & system architecture active
↳ Ask for it, draw it, ship it with Antigravity.
❯
try: switch track [1-4] or click node
[ SEC_02 // EXPERIENCE & PARTNERS ]
Where I've Worked &
Collaborated
FROM GLOBAL BANKS TO INDEPENDENT APPS — PRODUCT, BRAND, AND SYSTEMS FOR TEAMS OF EVERY SIZE.
Swift Financial
Senior Product DesignerSmart Axiata
Product & UX Designertwd. Digital
Design TechnologistKakcent
UI / Product DesignerTinh Ot
Product DesignerLifelthy
Lead UX DesignerHotel Grand
Brand & InterfaceAutomize AI
AI Workflow DesignerDesign Tokens
Design & AI Workflows
[ SEC_03 // SYSTEM ARCHITECTURE ]
Exploded SaaS Architecture
& Satellites
DECONSTRUCTING HIGH-DENSITY ENTERPRISE SYSTEMS INTO ATOMIC DESIGN TOKENS, LIVE AGENT PIPELINES, AND DATA TABLES.
DESIGN SYSTEM
TOKENS v2.4
--radius-enterprise: 10px;
--accent-brand: #f48e3e;
--font-data: "Geist Mono";
--elevation-core: 0 24px 60px;
FINTECH BATCH AUTH
Multi-Sign Passkey 2FA
$1,250,000.00
14 Loan Entities • Core Batch Ready
BIOMETRIC PASSKEY VERIFIED (12ms)
PERFORMANCE
+34.8%
4.2 min
Avg Origination Time (was 48 hrs)
AI AGENT MCP
LIVE STREAM
> Prompt: Stress-test 15 edge cases...> 0 dead-ends detected. (14ms)> Auto-fallback webhook: ARMED
POST
/v2/originate/batch
200 OK
9:41
●●●
URGENT BATCH
Commercial Facility
$450,000.00
Slide to Release ➔
ACTIVE PORTFOLIO
+18.4%
$24,850,000
142 active facilities
AVG VELOCITY
-74% time
4.2 min
Automated AI risk scoring
APPROVAL HEALTH
A1 Tier
99.2%
0 defaults flagged
Live Commercial Queue
3 SELECTED
| LOAN ID | BORROWER / ENTITY | AMOUNT | STATUS | |
|---|---|---|---|---|
#LN-89024 |
Phnom Penh Logistics | $650,000 | ● APPROVED | |
#LN-89025 |
Mekong Solar Grid | $520,000 | ● APPROVED | |
#LN-89026 |
Kirirom AgriTech | $250,000 | ⚡ 2FA |
Origination Velocity
● LIVE
Working Capital 58%
Infrastructure 42%
[ SEC_04 // SELECTED WORKS (06) ]
Everything,
Up Close.
EVERY PROJECT HERE WAS SHAPED WITH INTENTION — FROM LAYOUT AND ARCHITECTURE TO PRODUCTION CRAFT.
Vivid AI
2024
Automize AI
2024
Alexander Smith
2023
Lucis Production
2024
Swift Banking
2025