AI won't replace designers. It replaces those who can't direct it. 15 years in UI/UX. I turn rough briefs into developer-ready Figma systems with Claude.
Ho Chi Minh City, Vietnam
- Tweets 224
- Following 107
- Followers 16
- Likes 51
Pinned Tweet
A design file that looked fully tokenised had 127 raw hex values typed straight in. Each one passed visual review, because a raw value gets chosen to look right. They all surfaced the moment someone asked for dark mode. I take briefs to Figma systems that survive that test.
127
Bind a button to color.brand.500 and dark mode has nothing to swap.
That is why most token sets look right in Figma and break the week someone adds a dark theme.
698 tokens, 2 tiers, W3C DTCG, Figma import plugin. Free.
phongdesigns.com/en/tokens.h…
29
Check out my latest article: Claude and Figma: don't score a name that is already in the catalogue linkedin.com/pulse/claude-fi… via @LinkedIn
Made with AI
1
10
Check out my latest article: Claude Design: shadows are two layers, not one linkedin.com/pulse/claude-de… via @LinkedIn
11
Give it an onboarding, not a task.
A model receives the request and nothing else, so it answers like a good contractor on day one: competent, reasonable, and slightly wrong exactly where your team has strong feelings.
#phongdesigns
Made with AI
1
14
What goes in the onboarding is smaller and stranger than people expect. Wrote it up in full.
phongdesigns.com/course/clau…
7
Your design system documents the states somebody once fought about.
Everything else got decided too. Quietly. One person, two seconds, no feeling of having decided anything.
That quiet half is the part a model never receives.
#phongdesigns
1
11
Wrote up how I hand that half over before the model builds anything, and the one thing I add so it stops and asks instead of filling the gap.
phongdesigns.com/course/clau…
5
Atlassian measured it. A single DESIGN.md cost 7.21M tokens and 45 turns. The same system wired through MCP cost 3.75M and 35.
Same rules. 92% more tokens, because the model reads the whole book for every small decision.
#phongdesigns
1
13
Vercel ran the other half of this. design.md cut known defects 57%, and all six test pages still had a blocking issue. Rules that can't fail a build are documentation.
phongdesigns.com/course/clau…
12
In fifteen years no developer has ever asked me for a redline. Not once.
They ask three things. What happens if this is empty. What happens if this fails. Is this the same component as the one on the other screen.
Every question is a decision nobody made.
#phongdesigns
1
2
Wrote up what I send instead of redlines, and the short list of things developers reliably ask for that no design file answers by default.
phongdesigns.com/course/clau…
6
I once spent a day building infrastructure for a project that needed a day of drawing.
The infrastructure was excellent and irrelevant.
Overhead is fixed. The benefit scales with whatever comes after it. Below a certain size, nothing comes after it.
#phongdesigns
1
1
Wrote up the four cases where I skip most of my own process, and the three things I keep even on the smallest job. The tell is when the process gets more interesting than the problem.
phongdesigns.com/course/clau…
3
AI overrides decisions you made an hour ago, because a chat log isn't a source of truth. Conversations decay. As context fills, the earliest material gets least attention — and that's where the key decisions were made. The model is the worker, not the record. #phongdesigns
7
Two screens, three months, pixel identical. One built from a token, one from a value that matched by chance.
Nobody could tell them apart until the token changed and only one moved.
A value cannot carry a reason. If it does not travel separately, it is gone.
#phongdesigns
1
30
The whole process this comes from, breakages included. The refusal log exists because I lost a decision inside a conversation once and could not reconstruct why it had been made.
phongdesigns.com/course/clau…
17
Everyone says AI can't hold continuity across screens. True, but that isn't the expensive part. Completeness is. The model can't notice what you forgot, because from where it sits nothing is absent. Empty, loading, error, confirm. A third of the work, discovered too late.
16
Everyone says AI-generated UI is missing its interaction states. It isn't. Hover, pressed, disabled all share the same class — separated only by a style rule and a position on the page. A human reads that instantly. A machine has to guess. #phongdesigns
1
28
The fix is naming the states before anything gets generated, so the output has a closed set to fail against instead of a description to agree with. Full path I run: phongdesigns.com/course/clau…
26
After an AI refactor touches a thousand values, you have no idea what it quietly broke. Flip to dark mode. You'll know in one second. Any block that stays frozen was hard-coded and never went through your token system at all. #phongdesigns
1
36
The fix is not a dark mode variant. The value never had a name, so nothing could switch it.
Full path I run, brief through to the Figma handoff: phongdesigns.com/course/clau…
37