Figma / Figmamake
Wireframe structure, design system, component library, final frames
Coin Baron
How I used AI to sketch, build, and half-wreck a crypto portfolio platform, and what it took to actually finish it.
How I used AI to sketch, build, and half-wreck a crypto portfolio platform,and what it took to actually finish it.
What is Coin Baron?
CoinBaron started as a personal experiment. I wanted to see how far I could push AI tooling across the full product design stack,from the first wireframe all the way to a polished, shippable landing page and dashboard. The result is something I'm genuinely proud of, even if the path there was humbling.
This is an honest account of a project that went exactly the way most AI-assisted design projects go: faster than expected at the start, messier than expected in the middle, and only good once a human sat down and fixed things by hand.
AI gave me a 60% solution in 20% of the time. The other 40% took 80% of the time, and no AI touched it.
AI gave me a 60% solution in 20% of the time. The other 40% took 80% of the time, and no AI touched it.
What follows is a breakdown of the process, the tools, where the AI actually helped, where it failed, and what the final product looks like as a result of all the iterations, reversions, and manual cleanup that happened in between.
What I used and why
The workflow was built around three core tools, each covering a different phase of the process. This wasn't a rigid plan,it evolved as the project did.
Claude Code
Rapid UI prototyping, component generation, layout iteration
Midjourney
Visual asset generation hero visuals, backgrounds, abstract brand imagery
The interesting thing about this stack is that each tool had a clear lane,Midjourney for visual mood and raw assets, ChatGPT for thinking through structure and copy, Claude Code for turning ideas into working UI, and Figma as the source of truth that everything fed back into. It's faster than starting from scratch each time, but errors compound across the chain. A bad structural decision made in version 3 is still there in version 35.
Phase by phase, honestly
Wireframes in Figma
Started with rough layout scaffolding in Figma. Used FigJam for early concept sketches and sticky-note information architecture before committing to frame structures. This part worked well,having a spatial canvas to figure out page hierarchy and navigation structure before writing a single line of code saved real time.
Claude Code for rapid UI sketching
This is where things got exciting,and then complicated. Claude Code produced full React component trees, page layouts, and even some reasonably good chart implementations faster than I could have done manually. The first landing page version took a few hours. By version 9, the dashboard had a sidebar, a portfolio selector, eight metric cards, four charts, and a fully functional transaction table with modals. The downside: the code was structurally unpredictable. Things that should have been simple components were sometimes monoliths.
The inevitable revert
Around version 9 of the "Generate from uploaded guides" project, navigation had drifted enough that I asked Claude to revert the dashboard structure entirely. It did,cleanly,but this was a pattern that repeated. AI gets 80% of the way, then drifts on the remaining 20% until a full revert is necessary. The version history in Framer became the most important tool I had.
Design system consolidation
This was the single most valuable thing I did manually. Establishing a proper color system (a dark base of #0d0d0f with cyan #00d4ff as the primary accent, plus semantic greens and reds for P&L data), a typography scale using JetBrains Mono for financial data and Inter for UI copy, and a component set for cards, tables, and modals. Once the design system was locked in Figma, AI-generated output became significantly more consistent,it had constraints to work within.
Hand-cleaning everything
This is the part no one talks about enough. Even with a strong design system, AI- generated UI needed substantial manual cleanup: alignment issues, inconsistent spacing, navigation structures that didn't make semantic sense, hover states that were slightly off, responsive breakpoints that broke on mobile. The final Figma file with all its pages,Landing, Dashboard, Portfolios, Market, What If, Coming Soon, Components, Design System,that's primarily handwork.
The one thing AI can't fake
If there's a single lesson that shouts through this project, it's this: a solid design system is the multiplier that makes AI-generated output tolerable. Without it, each iteration drifts. With it, iterations converge.
The CoinBaron design system was built by hand in Figma, incorporating the choices that had already emerged organically through the AI iteration process,the color palette that actually worked, the type scales that felt right for financial data, the component patterns that appeared repeatedly across different screen designs.
The color logic was deliberate: the background stack (0d0d0f → 141416 → 1e1e24 → 222222) creates depth without drama. Cyan (#00d4ff) carries all primary interactive meaning. Green and red are reserved exclusively for positive and negative financial values,never used decoratively. Amber appears only for warnings and the "Coming Soon" badge state.
This kind of semantic color discipline is what separates a design that looks like it was generated from one that looks like it was designed. It's also the thing that takes longest to do right, and no AI prompt shortcut it.
Where AI helped. Where it didn't.
The temptation with these case studies is to be breathlessly positive about AI tooling. It's a genuinely useful set of tools and I'll keep using them. But the honest story is more nuanced.
Where AI delivered
- First 60% of every screen, fast
- Exploring layout variations quickly
- Complex table structures with sorting logic
- Navigation routing and page scaffolding
- Iterating on specific components in isolation
- Version control and clean reverts
- Consistent application of described rules
Where AI fell short
- Visual polish and fine-tuned spacing
- Maintaining structural coherence over many versions
- Responsive behavior and edge cases
- Typography hierarchy that feels intentional
- Design system adherence without constant reminders
- Knowing when not to add a feature
- The last 20% that makes something feel finished
By version 35, I had a coming soon page that unified four features into one. That was smart structural thinking. But every card still needed its padding adjusted by hand.
By version 35, I had a coming soon page that unified four features into one. That was smart structural thinking. But every card still needed its padding adjusted by hand.
The version history in Framer tells the real story. 35+ versions on the wireframe project alone. Each version was either an AI contribution, a correction of an AI contribution, or a manual revert. The ratio is probably 60/40 AI to manual work by count of changes, but inverted by importance of changes. The manual work is what made it ship-ready.
Was it worth it?
Yes,with an asterisk. This project produced a real, solid product design with a coherent visual language, a full design system, multiple pages and states, and something that genuinely looks like it could be a funded crypto startup's website. It took a few weeks rather than months.
But the "AI did it" narrative that's easy to reach for isn't really true. AI gave me speed on the first draft and useful iteration velocity throughout. The thing that's actually good about CoinBaron's design is the design system, the color discipline, the typographic choices for financial data, the navigation hierarchy,and all of that came from manual, considered, human work.
The honest summary: AI is an exceptional production accelerator for someone who already knows what good design looks like. It is not a shortcut past knowing what good design looks like. If you can't recognize when the output is wrong, faster output doesn't help.
FigJam IA sketch → Midjourney for visual direction → ChatGPT for structure decisions → Claude Code for UI generation → import back to Figma → identify what's wrong → fix by hand → update design system → repeat until it stops being wrong more than it's right → animate → ship.
FigJam IA sketch → Midjourney for visual direction → ChatGPT for structure decisions → Claude Code for UI generation → import back to Figma → identify what's wrong → fix by hand → update design system → repeat until it stops being wrong more than it's right → animate → ship.
That cycle is the job now. It's actually a pretty good job. You just have to be honest about which parts of the loop require a human, and not pretend the AI can do those parts because it sounds better in a case study.