Personal Notes · AI Experiment · 2026

A Designer's
AI Field Notes

What happens when a visual designer builds an iOS app from scratch — with Claude as the dev. Minimal Xcode experience. 11 days (2 on a free account).

Author Hanani
Duration 11 days
Started 18 March 2026
Output 1 iOS app and HTML case study
01

The Brief

Update the Notion portfolio. And maybe build an iOS app powered by that content — just to see how far it could go.

Started: 18 March 2026  ·  Free account (first 2 days)  ·  Minimal Xcode experience

Claude Code + Figma MCP
All Xcode and GitHub work. Figma generation.
Claude Chat
Everyday questions, thinking partner, sanity checks.
Figma
UI design. The foundation everything else built on.
GitHub
Repository. Version control.
Notion
Content source. Documentation.
Claude Cowork
Gmail organisation. Notion content edits.
The App — MyFolioApp · iOS
MyFolioApp splash screen
Splash
Heya screen
Heya
Work screen
Work
Work detail screen
Case Study
CV screen
CV
Says screen
Says
02

Field Notes: The Journey

Phase 01  ·  Day 1–2
The Vibe Check
No Figma. No plan. Just a prompt, barely formed: build me a portfolio app. The first draft was, predictably, a disaster. Found a colour reference that felt right, built a mood board, sent it over as a screenshot. Told Claude to use it as the base. Slowly, things were getting there.
Phase 02  ·  Day 3–5
The Iteration Loop
Something acceptable landed after a few rounds. Asked Claude to translate what existed in Xcode into Figma. Was it pixel-perfect? Of course not — but 80% there is still 80%. The other 20%: no auto layout, fonts all over the place. Minor issues, but tedious to fix. Gave up on that approach and intentionally stepped away.
Phase 03  ·  Day 6–8
The Proper Figma Uplift
Coming back fresh, did things properly. Rebuilt everything in Figma — components, branding, colour, typography, slots. Once the foundations were solid, asked Claude to follow the Figma design pixel by pixel. The content was already there; it just needed reskinning.

For the splash screen animation, I asked Claude to suggest an approach first, then let it proceed. This way I could understand its thinking and tweak as we went — instead of accepting output blindly. And who knows — I might just like what it proposes.

Phase 04  ·  Day 9–11
The Better Workflow
Whenever something didn't feel right: explain what's wrong, explain how to fix it — but also ask Claude for its take. Keep the dialogue two-way. One discovery that changed everything: for animations, I proposed we do it in HTML first — open in the browser, adjust there — then move to SwiftUI once it's right. Much cleaner and faster. In the real world, that's what a POC is for.
03

Key Findings

What stuck — some of it technical, some of it harder to articulate.

Finding 01

Intentional Feedback

Explaining what doesn't work, how to fix it, and asking for the AI's input — plus options on how to get there. Over time, the system learns how you like things done. Design critique, brainstorming, and ideation with a collaborator that's always available.

Finding 02

Prototype in the right medium first

Test in the cheapest environment, validate, then commit. Figured out through friction, not theory — which is the best way to learn it.

Finding 03

Reading code well enough to direct it

Not writing SwiftUI — but reading it, catching issues, knowing when something doesn't match intent. You don't need to be an expert — just enough to understand what's happening under the hood.

Finding 04

How to scope and sequence a build

Starting messy taught what order things should go in — design foundation first, code follows. A hard lesson in not assuming AI can figure out the sequence on its own.

Finding 05

Managing a non-human collaborator

Claude doesn't get tired, defensive, or emotional — but it also won't push back unless asked. Knowing when to lead, when to ask, when to override, and when to step away: that's AI collaboration literacy.

04

Figma MCP: The Honest Breakdown

The Figma MCP is genuinely powerful. It is also still early. Here's what that actually means in practice.

What it does well
  • Reading your file structure, layers, components, metadata
  • Executing Plugin API code to create and edit nodes programmatically
  • Writing directly into your Figma file without you touching it
Where it's still flawed
  • Reads structure, not intent Sees layer names and positions — not why things are grouped or what the design means.
  • No auto layout awareness Can position things visually but won't infer layout intent. Fonts off. Spacing off. You'll feel this.
  • Component instances are brittle Often recreates from scratch rather than instancing properly from the library.
  • Images and assets don't transfer Any image slot comes through as a flat placeholder shape.
  • Blind without a screenshot Claude works from XML metadata. Pixel-perfect translation requires constant back and forth.

The right mental model: Figma MCP is Claude Code but for Figma files. Use it to automate, generate scaffolding, batch-update. Don't use it to design — that part is still mine.

05

Skills Audit

Entered as a visual designer. Left as something broader. Here's what changed in 11 days.

Before · Visual Designer
UI designer Working with devs Design work at scale AI (casual use) Stakeholder briefs
After · Something Broader
Read + direct SwiftUI Build + ship iOS app Figma as build foundation Surgical AI prompting Debug design–code gap HTML animation prototyping Full pipeline solo MCP prompting iOS animation logic Workflow sequencing
06

If I Started Over

Step 01

Define content structure first

Before any design, before any code — know what the app needs to show. Write it anywhere. Five minutes. Done. Everything downstream gets better when this exists.

Step 02

Design in Figma properly from day one

Tokens, colour styles, text styles, components, slots. Build the system before you build the screens — Claude's output becomes dramatically better downstream.

Step 03

Then bring Claude Code in

At this point Claude has a proper Figma file, a clear content structure, a defined scope. Better input, better output. Your prompts become cleaner because you're clearer.

Step 04

Prototype animations in HTML before SwiftUI

Test in the cheapest environment. Validate. Then commit. This one move alone saved hours of dead-end SwiftUI debugging.

Step 05

One feature at a time — ship it, then next

Don't build everything, then animate everything, then fix everything. Things can go downhill fast — and they did.

"A sword is only as good as the hand that wields it. AI is at our fingertips — there's no excuse anymore. If I could build this, imagine what the best in the room can do."

Hanani  ·  2026