AI NATIVE WORKFLOW
DESIGNING WITHOUT A CANVAS
Design System & Working Prototype
This is a look at terminal input, index output design. A credit monitoring app built entirely through Claude Code's terminal on a $20 Pro plan. Every session was logged. Every token was tracked. Credit monitoring has a look. I wanted to challenge what AI assumes that look should be.
Getting Organized
Every session starts with a file, not a conversation. Since Claude has no memory between chats, I built him a working memory. This project stayed lean by keeping each session focused on one area at a time, splitting the work across three clean files.
.claudeignore
View FileThe guard rail. This file tells Claude what not to touch. Protecting logic files from the start is what keeps your core behavior intact across every session.
styles.css
View FileThe vibe. Every shadow, texture, animation and surface treatment lives here. This is where Stonemorphism is defined and where most of the surgical edits happened.
Vantage Live
View PrototypeThe result. The fully functional prototype running in browser with all assets intact.
Protect your logic before you start.
The .claudeignore file tells Claude what not to touch, so set it up first.
Open a new session for every section.
The file is your continuity, not the conversation.
Use a free model to write your prompts.
Draft and refine in Gemini before you open Claude Code to spend tokens building, not thinking out loud.
Work by section, optimize your tokens.
Iterate inside a focused session, and start fresh when the section is done.
Do not tune global spacing until the pieces are locked.
Unfinished layouts shift, so wait to do it once at the very end.
↻ Rotate for best view
Workflow Tips
↻ Rotate for best view
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 struggling to get 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 repeatedly 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 approximately $158.00 compared to standard uncached input pricing.
THE COST
Every session was logged. Here is where the money actually went. The table contains the combined usage of 12 new sessions, over the course of 2 days casually between projects.
While Claude Code can connect to Figma through MCP, allowing simultaneous design and code. That option was skipped here intentionally. MCP increases token usage, and this is an index-only study focused on a native workflow.
A note on AI usage The prototype is the only AI native deliverable on this page. The banners and case study assets were designed in Figma. Figma remains my preferred tool for fine-tuning, asset creation, and establishing styles before feeding them into the index.
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.
PRECISION PROMPTING
One Instruction, One Location, Related Changes. When in doubt, use additional tooling to structure prompts assisted by your index file and a surgical prompting formula.
↻ Rotate for best view
My goal was to challenge the connections between modern design practices and known style trends to improve my understanding of AI design. The system emerged from the screen work, rules extracted from decisions already made. Claude assembled and documented it. I edited it into what you're reading.
Index Generated Design System
The Stonemorphism System
I established a lean design system focusing on "engraved" depth and semantic logic to ensure the AI-native workflow remained consistent during 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 were assigned functional meanings to provide immediate status feedback. The color tint lives entirely within the recessed shadows of the stone surface.
Typography & Constraints
To ensure legibility against the chiseled stone texture, I enforced an absolute 16px floor for all visible text—a constraint-first approach to UI development.
Score: 52px / 700 / -0.04em
CTA: 18px / 600 / 0.15em
Body: 16px / 400 (Min Threshold)
HOW IT STARTED
Static Stitch Output
Static Stitch Output
Starting Claude Output
Explore, it's functional. Hosted on Netlify.
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.
Thank you for reading
The app was never the point. This was about challenging AI to break its own conventions and understanding what that actually costs a working designer. Token pricing, session structure, and prompt discipline are not abstract concerns anymore. They are part of the job. The goal is to spend less time on regulated tasks and more time on research, strategy, and the problems worth solving.
I am still figuring it out. If you are too, I would love to compare notes, just send me a message. This is one of many ways I have found myself working alongside AI and it is nowhere near the last.