01 · Foundations
Design fundamentals
Spacing, type, hierarchy, colour and states. The foundations that make a UI feel right, and the part AI can't do for you.
Handcrafted by @xitij
Future-Proof Your
UI/UX Design Career.
Ship the new way.
Ship the new way. Anyone can vibe code. Few can make it look real. Master the craft that can’t be faked.
0:00
0:00
Free guide · Figma to Live
- Step-by-step written guide
- Copy-paste Claude prompts
- Free tools only
What designers think
What changed for designers once their work left Figma and went live.
-
@harshil_designer
This guy has always been a creative beast. Give him Claude, and he builds insane shit that’s actually useful. 🔥
-
@their_handle
Keep it in their own voice: what they shipped, how it felt, and what changed after. The card shows three lines of it, so the opening sentence matters most.
-
@their_handle
Their words, exactly as they gave them. Longer quotes are fine: the card shows the first three lines and ends with an ellipsis, so every card stays the same size.
-
@their_handle
Keep it in their own voice: what they shipped, how it felt, and what changed after. The card shows three lines of it, so the opening sentence matters most.
-
@their_handle
Their words, exactly as they gave them. Longer quotes are fine: the card shows the first three lines and ends with an ellipsis, so every card stays the same size.
-
@their_handle
Keep it in their own voice: what they shipped, how it felt, and what changed after. The card shows three lines of it, so the opening sentence matters most.
Design like it’s 2027.
Be irreplaceable.
Layoffs are moving fast. Companies keep people who do it all.
Nobody lets go of the person they can’t work without.
-
01
Teams are getting smaller.
Fewer people, the same roadmap. Every seat that’s left covers more ground.
-
02
One skill is a risk.
If all you hand over is a Figma file, you’re the easiest line in the budget to cut.
-
03
Useful people stay.
The designer who can also ship the frontend is the last one they let go.
Don’t get weak. Get useful.
A straight answer, from XT
Everyone can vibe code now. Developers, product managers, founders. They can get an app running in an afternoon.
And almost all of it looks the same. Spacing that's slightly off. Generic type. No hierarchy. Nobody thought about the empty state, the hover, the error message. I run a design studio, so I see this every day.
Building got easy. Making it good didn't.
That's the gap. The person who can design it properly and own the frontend, down to the last detail, is the person every product team is looking for. Your design foundation isn't going anywhere. It's what makes you that person.
That's what I teach: the fundamentals, the taste, and the frontend. This guide is where it starts.
XTXitij Thakkar, founder of Extee Studio
What you'll learn
From the idea in your head to a product on the internet.
AI didn't replace design fundamentals. It made them the thing that decides whether what you build looks real. Three skills, one workflow.
02 · Translate
Turn design into prompts
Describe exactly what you see in your head, the way Claude understands it. Precise design thinking in, precise UI out.
03 · Ship
Let Claude build. You ship.
Claude writes the code. You direct it, refine it and polish it, then put it live. Real products, not mockups.
To be clear: this isn't a coding course, and it doesn't skip UI/UX foundations. It's built on them. You'll learn exactly enough to make what you design real.
Where this skill takes you
One skill set. Three ways to use it.
Design plus frontend is rare, and rare gets paid. Here's where people take it.
Design engineer
The role between designer and developer. You design it and build the frontend, so nothing gets lost in a handoff.
~$145Kaverage yearly total pay for design engineers in the US*
Sell the design and the build
Deliver a live website instead of a Figma file, and charge for both. Work with clients anywhere, from wherever you are.
Launch your own product
Design it, build it, ship it. You don't need a developer to make your idea look like a real product.
*Levels.fyi, 2026, US design engineers, total compensation. Pay varies a lot by country, company and level. This is market data, not a promise of income.
What's inside
Five steps from a frame to a live URL.
- 01
Foundations that survive code
Spacing, type, hierarchy and states. The fundamentals that decide whether a design still looks right once it's real.
- 02
Set up Figma so it translates
Auto layout, naming and variables, set up so Claude reads your file the way you meant it.
- 03
From frame to real UI with Claude
The exact prompt I use and how I feed it a design. Copy it, paste it, use it today.
- 04
Make it look designed, not generated
The small details vibe-coded apps always miss, like states, spacing, type and motion, and how I fix them on every build.
- 05
Ship it
Put it on a real URL with free tools. Something you can send to a client or put in your portfolio.
Send me the guide
Free · lands in your inbox in a few minutes
Be honest with yourself
Who this is for, and who it isn't.
This is for you if
- You're good in Figma but have never shipped what you design.
- You can vibe code, but everything you build looks generic.
- You freelance and want to sell more than a file.
- You're a student who wants a portfolio of live work, not mockups.
- You're a founder who designs your own product.
It's not for you if
- You want a shortcut that skips learning design properly.
- You're an engineer looking for a coding course.
- You'd rather read hype than follow a workflow.
Who's writing this
Hi, I'm Xitij. Most people call me XT.
I run Extee Studio, where we design and build websites and products for clients. Most of my work now goes from a Figma file to a live site, and Claude is a core part of how I build.
I started ExteeUni to teach what I wish someone had taught me: learn design properly first, then learn to make it real. No hype, no "learn to code in 30 days". Just the workflow, the way I actually do it.
Questions
Straight answers.
Anything else, just reply to the email. It comes straight to me.
Is it really free?
Yes. No card, no trial, no catch. You give me your email, I send you the guide.
Do I need to know how to code?
No. If you're comfortable in Figma, you can follow it. Whenever code shows up, I explain what it does in plain language.
What tools do I need?
Figma and Claude. The free plans are enough to start, and putting the site live doesn't cost anything either.
I'm not in the US. Does this work for me?
Yes. Everything is online and the tools work worldwide, whether you're in India, the US or anywhere else.
What will you email me after the guide?
New resources when I write them. No daily emails. If it stops being useful, unsubscribe with one click.
Are you going to sell me something?
Honest answer: eventually, yes. I'm building a paid community for designers who want to go deeper, and you'll hear about it. You'll never need it to use anything I give away for free.
Figma to Live · free guide
Become the designer every team wants to hire.
Your design foundation got you here. Get the guide, ship one real thing with it, and see how far it takes you.