AI NATIVE DESIGN WORKFLOW
DESIGNING WITHOUT A CANVAS
Design System & Working Prototype
Credit monitoring has a standard aesthetic. Vantage explores how more deliberate prompt writing can intentionally break that convention.
Vantage is a working credit app prototype built entirely through Claude Code's terminal on the $20 Pro plan. No canvas, just typed instructions and indexed output. Every session logged, every token tracked, to better understand the cost of designing.
Designed Hero banner, built in Figma.
Every session starts with a file, not a conversation. Since Claude has no memory between chats, I built it a working memory. The project stayed lean by keeping each session on one area at a time, split across three clean files.
Working Principles
Set the guard rail before the first token.
The .claudeignore file defined the boundary before any session opened.
Sessions were scoped. The file was the continuity.
Each session covered one area of the build, start to finish. The conversation closed; the file held the state.
Prompts were drafted in Gemini, built in Claude Code.
Thinking out loud costs tokens. Refinement happened before the session opened, not inside it.
One area per session, start to finish.
Iteration stayed inside the focused session. Once a section was locked, a fresh session opened.
Global spacing went in once, at the end.
Tuning layout before content is locked compounds rework. It was the last adjustment, not an ongoing one.
Getting Organized
Designed Prototype, built in Claude Code from my index and spec.
Cost Analysis
Designed Banner, built in Figma.
Every session was logged. Here is where the money actually went: the combined usage of 12 sessions over two days, worked casually between other projects.
Phase
Cost
Explanation
Initial Setup and Index Split
$4.10
The initial start plus the heavy lifting of splitting the original file into separate HTML, CSS and JS files.
Surgical Edits
$4.98
Targeted structural refinements and minor code adjustments to the newly separated files.
Alignment and Assets
$4.99
Adding textures and fixing visual alignments, with costs amplified by a missed context compacting step.
Radials and Redesign
$4.69
Overhauling the visual design and getting the AI to properly render radial gradients.
Micro Adjustments
$6.74
Five quick sessions for tiny tweaks and bug fixes, paying mostly for the AI to re-read the project history.
Major Additions
$6.40
Over 600 lines of new features in one heavy session with a massive context cache.
Total
$31.90
Approximately 535,000 output tokens generated. Around 58.7 million cached tokens read, saving roughly $158.00 against standard uncached input pricing.
Precision Prompting
One instruction, one location, related changes. When in doubt, structure the prompt against your index file with a surgical formula.
File named
Claude knows exactly where to work.
Class named
No searching, no guessing.
Value specific
A number, not a direction.
Constraint included
Tells Claude what not to touch.
Index Generated Design System
Designed Banner, built in Figma.
I wanted to see how AI connects real design fundamentals to current trends. The system emerged from the screen work, rules pulled from decisions already made. Claude assembled and documented it. I edited it further.
Design System
The Stonemorphism System
A lean system built on engraved depth and semantic logic, so the AI native workflow stayed consistent through rapid iterations.
Download system specs (.txt)The 4 Core Metaphors
Technical Shadow Stack
inset 1.5px 1.5px 0 [Rim Color],
inset 8px 12px 20px [Ambient Color],
inset 12px 20px 40px rgba(0,0,0,0.10),
0 1px 0 rgba(255,255,255,0.7);
Semantic Color Mapping
Colors carry functional meaning for instant status feedback. The tint lives entirely inside the recessed shadows of the surface.
Typography and Constraints
To stay legible against the chiseled texture, I enforced a hard 16px floor for all visible text, a constraint first approach to UI.
Score: 52px / 700 / -0.04em
CTA: 18px / 600 / 0.15em
Body: 16px / 400 (Min Threshold)
How It Started
Stitch gave me a clean starting point. The layout was intentionally bare, just enough structure to hand off without noise. From there Claude Code took the index and the real build began.
AI Stitch starting output.
AI Stitch starting output.
AI Claude starting output.
Explore, it's functional. Hosted on Netlify.
Thank You For Reading
The app was never the point. This was about challenging AI to break its own conventions, and learning what that actually costs a working designer. Token pricing, session structure, and prompt discipline becoming their own toolstack. With a designer's goal to reduce regulated tasks to focus more on research, strategy, and the problems worth solving.