Subscribe now

Hey friends,

I can’t stop thinking about this post.

I had a 1am moment last week where I genuinely asked myself if I had moved to the wrong city.

I’m two months into San Francisco, fresh from Singapore, and I’ve had the same dinner conversation three times now. Different people, same shape. Smart, accomplished, the kind of person who would be a star anywhere else in the world — sitting across from me doing math in their head about whether they got into the wrong building five years ago.

Then this post from at Menlo Ventures went viral and I realized it wasn’t just my table.

His diagnosis is brutal and simple. Over the last five years, ~10,000 people across Anthropic, OpenAI, xAI, Nvidia, and a handful of AI startups have reached retirement wealth, north of $20M. Everyone else, even people on well-paying engineering salaries under $500k, is quietly doing the arithmetic on whether they’ll ever get there. Layoffs are happening.

Engineers are watching the skill they spent a decade sharpening get commoditized in a year.

One line stopped me:

The wrong building.

I keep turning that over.

Because I don’t think what’s rattling people is the divide — divides have always existed. Google minted millionaires in 2004. Crypto did it in 2013. The rest of us survived being adjacent to them.

What’s new is that the scoreboard itself has consolidated. For this moment in SF, there is one game that counts. You’re inside the lab, or you’re outside it. You have liquid millions, or you have a story about why you don’t. Everything else — your craft, your company, your reputation — gets quietly reweighted overnight.

And here’s the part I’m still sitting with: I moved here on conviction. I run a mentorship platform. I believe the most underrated people in tech are the ones building things that don’t 10x on a cap table but compound on a generation.

I still believe that.

But two months in, in this city, on a Tuesday at 1am, that belief is harder to hold than it was in Singapore.

So I want to ask you, and I really mean it:

Did Deedy’s post hit you?

If you’re inside the bubble — what does it actually feel like in there? Is it as good as the outside imagines?

If you’re outside it, like most of us — are you climbing harder, switching games, or quietly wondering if you’re in the wrong building too?

I’ll read every comment. Let’s discuss. 🧠

Felix

Subscribe now

🎉 HUGEEEEE NEWS: We released ADPList’s entire design + AI + career course archive for free! This library includes 50+ masterclass videos (with top speakers and real examples). Content that covers everything from AI-first design to career growth ⭐️, all already waiting on the site!

All of it. Free. No paywall.

Get access to 50+ free masterclass

Friends, 👋

Anthropic just shipped Claude Design, and Figma’s stock dropped the same week.

I’ve been inside it since it launched on April 17th, and here’s my honest take:

This isn’t “another AI design tool.” It’s the first time I’ve watched a prompt generate something I can actually ship to production.

For designers in tech, this is the biggest workflow shift since Auto Layout. If you’re still pitching execs with static Figma mockups while your engineers are shipping with Claude Code, you’re about to get lapped.

This is everything you need. Set up in 15 minutes: the exact prompts I use and the 3 use cases quietly replacing design agencies.

Let’s go…

What Claude Design actually is

Two panels. Chat on the left. Live canvas on the right. You describe. Claude builds. You refine.

It runs on Claude Opus 4.7 (Anthropic’s strongest vision model), lives at claude.ai/design, and ships on Pro, Max, Team, and Enterprise.

What makes it different from v0, Lovable, or Figma Make:

• It reads your codebase and learns your actual design system, not generic “corporate blue.”

• It exports to Canva, PDF, PPTX, HTML, or straight into Claude Code for engineering

• It does prototypes, decks, landing pages, 3D, video, and internal tools, all in one canvas

• It packages a design for Claude Code with a single click (the killer feature)

The receipts: Brilliant says pages that took 20+ prompts in other tools now take 2. Datadog goes “from rough idea to working prototype before anyone leaves the room.” Canva is a launch partner; you push finished work straight into their editor.

That’s the bar. Now let’s set you up.

🦞 Part 1: Setting it up (do this once)

Most designers will skip this step and wonder why their output looks like AI slop. Don’t be that person. 15 minutes now = every prototype afterward inherits your brand automatically.

Step 1: Turn it on

Go to claude.ai/design. Pick your role: Design, Eng, PM, Marketing. This shapes the prompt suggestions Claude gives you throughout the session.

If you’re on Enterprise, Claude Design is off by default, your workspace admin has to flip it on in admin settings. Ping them now, don’t wait.

Step 2: Feed it your design system

This is the step that separates “AI slop” from “that actually looks like our product.”

You have three paths:

• GitHub repo → Claude reads your codebase, extracts colors, typography, components. Best for teams with a design system in code.

• Local folder → Drag-and-drop. Same result, no GitHub required.

• Brand assets → Upload fonts, logos, and a color palette. Fine for solo builders and pre-launch.

Pro tip: if you’re on a monorepo, don’t point it at root. Link a specific subdirectory like /packages/ui. Otherwise it chokes on scale.

Second pro tip: you can maintain multiple design systems. I keep one for ADPList’s product UI and one for our marketing site. They have different rules, different type scales, different personalities. Switch between them on a per-project basis.

Second pro tip: you can maintain multiple design systems. I keep one for ADPList’s product UI and one for our marketing site. They have different rules, different type scales, different personalities. Switch between them on a per-project basis.

(a video source: @nozmen on how Design System works in Claude Design)

Step 3: The prompt structure

The biggest mistake designers make is writing prompts like Midjourney. Aesthetic-first, vibes-heavy. Claude Design wants product context, not vibes.

Here’s the template I use every single time:

Goal: [what you’re building and why] Audience: [who uses it, on what device, in what context] Content: [what info to show] Layout: [how it’s arranged, grid, flow, hierarchy] Feel: [reference a product, “like Linear’s sidebar”]

A real prompt I ran this week for an ADPList test:

Goal: Mentor discovery page for career-switchers Audience: early-career designers on mobile, price-sensitive Content: mentor cards with photo, role, rating, price, “book” CTA Layout: 2-column grid on desktop, vertical scroll on mobile Feel: like Airbnb cards but lighter

Three variations back in under a minute. One was shippable.

Why this template works: Claude Design is trained to think like a product designer, not a graphic designer. It wants constraints the same way a senior designer would ask for them in a brief. Give it those constraints upfront and you skip 4-5 refinement rounds.

A sample of an ADPList mobile app wireframe in the 90s (see this!)

Step 4: Refine like a designer, not a prompter

Three refinement tools. Use the right one for the job:

Read more

Subscribe now

For more: Apply to learn Vibe-Coding for Designers | Claim your AI Design Guide for free | Get free 1:1 mentorship

Friends,

Every designer I know is asking the same question: “What should I actually be doing differently?”

Not “what AI tool should I try.” Not “is my job safe.” But: what are the specific, concrete things I can do right now to become a better designer in 2026?

So I made a list. 30 design ideas, organized by what you’re trying to accomplish. Every single one combines human taste with AI capability, because neither alone is enough anymore.

Inspired by ’s brilliant 35 Marketing Ideas for 2026, here’s the design edition.

Let’s go ;) bookmark this one ⭐️

I want AI-powered design workflows ⚡️

1. ⭐️ Vibe-design your first draft: Stop opening Figma for your first iteration. Tools like Paper + Claude Code let you describe a UI in plain English and get a working layout in seconds. You’re not designing less — you’re starting faster. The first draft is now a conversation, not a canvas.

2. 🧠 Build a personal “design brain” document: Create a master file with your 3-5 best case studies, your design principles, tone-of-voice samples, and visual references. Feed it to Claude or ChatGPT as context. Every output now sounds like you, not generic AI. I wrote about this in Becoming an AI-First Designer — when every designer uses the same tools, taste becomes the differentiator.

3. 🏎️ The 2-hour prototype: Compress weeks of traditional design into hours: 30 min of AI-assisted research → 20 min of Claude wireframing → 45 min of prototyping in Lovable or v0 → 10 min of AI design critique. Engineers estimate better from functional prototypes than static wireframes. I walked through this entire workflow in How to Future-Proof Your Design Career.

4. 🫟 Connect Figma to your AI agent: Figma MCP lets Claude read your design files directly — components, tokens, spacing, everything. This solves the translation problem where designs get lost in the developer handoff. Your AI agent now speaks your design language.

5. 🗒️ Design critique before the meeting: Before presenting to stakeholders, run your work through an AI critique prompt. Ask it to evaluate hierarchy, consistency, accessibility, and copy. It won’t replace peer review, but it catches 80% of the obvious stuff — and you walk into the room sharper. Julie Zhuo calls this the shift from maker to manager of AI.

6. ⚙️ Automate your design system doc: Nobody likes writing component docs. AI can auto-generate token names, usage guidelines, and variant descriptions from your existing components. Your design system stays documented without the soul-crushing manual labor. Into Design Systems calls these “agentic design systems” — and they’re already here.

I want a design career breakthrough🤘

1. 🚢 Ship a side project in a weekend: The new portfolio flex isn’t mockups — it’s shipped products. With Claude Code, you can go from idea to deployed site in 48 hours. I’ve seen designers build portfolio sites with AI chat features, growth analyzers with 500+ users in 3 days, even Tetris games from FigJam flowcharts. Ship it, don’t just show it.

2. 🤖 Become the “Barefoot Developer”: Maggie Appleton’s Home-Cooked Software thesis is the most important essay for designers right now. You don’t need to become a software engineer. You need to become someone who can build small, specific tools for real problems. LLMs make this possible for anyone with taste and context.

3. 🎙️ Interview prep as an AI workflow: Create a dedicated ChatGPT project with your portfolio, case studies, resume, and target job descriptions. Use it to simulate senior interviewer behavior — not to generate answers, but to stress-test your thinking. As we wrote in Stand Out in 2026: interviewers now prioritize how you think, not how polished your deck is.

4. 🎤 The “Show Your Process” portfolio: Record a 5-minute Loom of you working with AI — prompting, editing, making judgment calls. This is now more impressive than a polished Behance case study. It demonstrates the meta-skill: directing AI with intention. Hiring managers want to see you think, not just deliver.

5. 📚 Build your prompt library: Create a centralized doc of your most effective prompts — for research synthesis, copy generation, design critique, and competitive analysis. Share it with your team. Become the person who makes everyone faster. I outlined how in the AI Design Career Survival Guide: “Be the AI person before anyone else.”

I want to design things people love ❤️

1. 🥷 Steal cancellation flows (seriously): Figma’s cancellation flow is a masterclass in retention design — transparent renewal dates, loss aversion reminders, structured exit surveys. These patterns work because they respect the user. I broke down this and more in Steal These Brilliant Design Tactics. AI can help you audit your own flows against these patterns in minutes.

2. 🪻 Design for delegation, not just interaction. The shift from AI copilots to agents means users are delegating multi-step tasks, not just clicking buttons. This requires entirely new UX patterns: trust indicators, progress transparency, error recovery, and “undo” at every step. The Figma AI Report 2025 found that teams building agentic AI doubled from 21% to 51% — but most haven’t figured out the UX yet.

3. 🤝 The trust-first AI interface. Only 32% of designers trust AI output (Figma AI Report). If designers don’t trust it, users definitely don’t. Design for skepticism: show your work, provide sources, let users verify. NNGroup’s State of UX 2026 calls trust the single biggest design problem for AI products this year.

4. 👓 Transparent trial design: Blinkist’s transparent trial model — clear timeline, Day 5 reminder, honest terms — drove a 23% increase in signups and cut complaints by 55%. Opacity is a design debt. AI can help you A/B test transparency variants at a pace you couldn’t manage manually.

5. 🧾 Social proof as design system: Notion uses six types of social proof across their product: expert validation, celebrity endorsements, trust seals, data-driven metrics, customer feedback, and independent reviews. Don’t scatter testimonials randomly — systematize them. Use AI to audit where your product’s trust signals are weakest.

6. 🔁 Design the habit loop: Duolingo’s 55% DAU retention (vs. 4% for average courses) comes from a deliberate habit loop: trigger → routine → reward. Every consumer product should map this loop explicitly. I dissected the full playbook in How Duolingo Designs Product — and now AI can help you apply these patterns to your own product in a fraction of the time.

I want to achieve great craftsmanship 🐐

1. 🎬 AI Moodboards in 60 Seconds: Generate palette explorations, typography pairings, and concept boards from a single prompt. Use these as starting points, not final decisions. The human job is curation — picking the direction that resonates emotionally and aligns with the brand. AI generates options; you exercise taste.

2. 🫟 The “Design Review” screenshot test: Take a screenshot of any screen in your product. Ask Claude: “What’s wrong with this layout? Evaluate hierarchy, spacing, alignment, and visual consistency.” You’ll get a surprisingly useful first pass. Combine this with Emil Kowalski’s philosophy on invisible details — the polish that makes software feel great.

3. 🧞 Generate, don’t illustrate: For internal decks, blog headers, social assets — stop spending hours on custom illustrations. Use Midjourney or DALL-E for a first draft, then refine in Figma. Save your craft energy for the product, where it actually compounds. See my example here.

4. 🟩 Responsive design via conversation: Instead of manually creating 4 breakpoints, describe your layout logic to Claude Code: “Stack these cards on mobile, 2-column on tablet, 3-column on desktop. Maintain 16px gutters.” Review the output, refine the details. You just skipped an hour of mechanical work.

I want to do good research & strategy 🔍

1. 🔬 AI-Synthesized user research: After 5 user interviews, paste your notes into Claude and ask: “What are the top 3 patterns? Where do users contradict each other? What questions should I ask next?” This doesn’t replace talking to users — it makes each conversation more valuable. NNGroup found deep research is now more essential because it also informs how AI models get trained.

2. 📌 Competitive audit in 30 minutes: Prompt AI to analyze 5 competitor landing pages: positioning, social proof strategy, CTA placement, visual hierarchy. What you’d normally spend a full day on becomes a morning task. The strategic thinking — what to do about it — stays entirely human.

3. 📈 Design metrics that talk: Follow the pattern from products like Grammarly and Spotify Wrapped: send users their own success metrics. “You’ve completed 47 designs this month” or “Your team shipped 3x faster.” As I wrote in Steal These Brilliant Design Tactics, accomplishment metrics reduce churn because they make progress visible.

4. 🆙 The “what would a senior designer say?” prompt: When you’re stuck on a design decision, prompt: “You’re a senior product designer at [Company]. I’m considering [Option A] vs [Option B] for [context]. What would you recommend and why?” It’s not a replacement for mentorship — but it’s a great first gut-check at 2am.

I want to future-proof myself ⭐️

1. ⚙️ Learn to direct, Not just design: Jenny Wen (Head of Design at Anthropic, ex-Figma) told that the classic design process is dead. The new role is closer to creative director: setting intent, evaluating output, iterating on direction. Start practicing this muscle now — it’s the highest-leverage skill of 2026.

2. 👅 The Taste Moat: Julie Zhuo wrote about when AI has better taste than you — and her answer is provocative. AI is winning on capabilities and even taste (through pattern recognition). What remains uniquely human is agency: the will to champion work that reshapes culture. Your taste isn’t just what looks good. It’s what you’re willing to fight for.

3. ✈️ Join the 8,000: Over 8,000 designers enrolled in ADPList’s Vibe Code for Designers program. The vibe coding market is projected at $8.5B. This isn’t a niche — it’s a movement. Cursor for Designers, Claude Code guide, Figma MCP playbook — pick one and start this week.

4. 🎳 The 10-person company: Molly Mielke’s gen(Z)eralism thesis predicted that the next billion-dollar companies will be run by under-10-person teams. Designers who can research, design, and ship are disproportionately valuable in this world. You don’t need to become an engineer. You need to become a Claude-native designer — someone who can hold design, logic, copy, and code in one workflow.

5. % The 81% Rule. The Figma AI Report’s most important finding: teams that fundamentally changed their workflows showed 81% success rates on AI products. Teams that just added AI tools to existing processes? Much lower. The lesson is clear — and I unpacked it in Breaking Down the Figma AI Report. Don’t bolt AI onto your current process. Redesign the process itself.

The central insight

Every idea on this list shares one thing: human taste + AI capability.

AI can generate a moodboard in 60 seconds, but it can’t tell you which direction feels right. AI can synthesize 5 user interviews, but it can’t decide what to build. AI can write production code, but it can’t fight for the design that changes behavior.

The designers who win in 2026 won’t be the ones who use the most AI tools.

They’ll be the ones who know when to use them and when to trust themselves.

That’s the real skill. And no model can learn it for you.

If you find this guide helpful, ❤️ Like this to come back again, and repost or forward it, and share your thoughts. Because more designers can learn to build.

- Felix Lee
Let’s connect on LinkedIn

Subscribe now

⭐️ NEWS: Introducing the World’s First Vibe-Coding School for Designers!

Friends,

I’m shocked at how few designers know about this workflow. But I’m certain, we’re looking at the future of design.

There’s a new kind of designing I call “vibe-designing”, where you fully give in to the vibes, describe what you want, and forget the canvas even exists.

It’s possible because Paper runs on HTML and CSS, and Claude Code speaks that natively. I connected them via MCP and just... talked. “Add a hero with a bold headline, premium feel.” It appeared. “More whitespace. Gradient button.” Done.

I never touched the canvas.

I ask for things like “this feels flat, fix it,” and it does. Sometimes I screenshot and say, “What’s wrong with this?” and it tells me. When something breaks visually, I just describe what I see, usually that fixes it.

The design grows beyond my usual process. But I stay in flow the whole time.

It’s not really designing, I just see stuff, say stuff, watch stuff change, and ship stuff. And it mostly works.

Claude Code and Paper can now create designs 10x easier... I skipped Figma and made a beautiful app design using Claude Code + Paper in just one prompt.

I opened Paper. I opened Claude Code. I prompted: “Create an iOS app design of a stock trading app that looks like Robinhood. It must be beautiful and have a simple experience.”

And watched it appear on my canvas. In real time. No clicking. No dragging. No pixel-pushing.

I iterated: “Make me the stock screen and change the colors.”

Basically, it’s “Figma for AI Agents.”

This is vibe-designing. And it changes everything about how designers work.

What is Paper and Claude Code?

Paper is a design tool built for AI agents. Unlike Figma, everything you design in Paper can be done through your agents (Claude Code, Cursor, etc). And the output is great, you don’t have to touch it yourself.

Claude Code is an AI coding agent that takes plain-language instructions and executes them.

Connect them via MCP (Model Context Protocol), and Claude Code can read + write directly to your Paper canvas.

The result: you describe what you want, and it appears. You critique it, and it changes. You never touch the interface.

This IS NOT a plugin. It’s not autocomplete. It’s a bidirectional connection; the AI sees your design and manipulates it in real time.

Why this matters

Traditional design tools require you to:

• Click to create elements

• Drag to position them

• Navigate menus to change properties

• Manually adjust spacing, colors, typography

With Paper + Claude Code:

1. You describe what you want

2. It appears

3. You refine through conversation

The interface disappears. You stay in creative flow. And because Paper is built on web technology, LLMs understand it natively. They’re trained on HTML and CSS. The DOM is their native language.

After trying this more than 100 times, here’s my step-by-step guide for you.

Step 1: Install Paper Desktop

Go to: https://paper.design/downloads

Download and install Paper Desktop for Mac. Opening any file in Paper Desktop automatically starts the MCP server in the background. No configuration needed.

Step 2: Connect Claude Code to Paper

Open your terminal and run:

claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user

Once connected, you should see the Paper MCP server in the list of available MCPs when you run the /mcp command.

Troubleshooting (if the connection doesn’t work):

1. Make sure Paper Desktop is open with a file loaded

2. Restart Claude Code

3. Run /mcp again

Step 3: Start designing with prompts… This is the ‘aha’ moment

Open a new file in Paper. Open Claude Code. Start prompting.

How to create from scratch:

Create an artboard called "Hero Section" that's 1440x900px. Add a centered headline that says "Design Without Limits", a subtitle below it, and a primary CTA button.

How to iterate on the design:

Read more

Subscribe now

For more: Learn vibe-coding for designers (Claude Code and Cursor + new Figma MCP).

⭐️ We just announced Paper x Claude Code Course (added into the AI-First Designer School! Apply today and join 1.8K+ top designers shipping products!

Hi friends,

Designers are the most underrated people in tech.

Not because they’re hidden. Not because they lack ambition. But for years, the industry handed designers a role that was deliberately smaller than what they were capable of. Spec the screens. Hand off to engineering. Wait for feedback. Repeat.

That role is over. And the designers who realize it first will be untouchable.

While building ADPList (a global mentorship platform with 800K+ users). I also teach designers to build with AI. And the thing I hear most often from the designers I work with isn’t excitement. It’s unironically,

“Are we getting replaced?”

Now, let’s be real: that’s really the wrong question. And the fact that so many designers are asking it tells me exactly how much the narrative has gotten into their heads.

Here’s the question that actually matters: what happens when the best designers can also build?

That is what we’re living through right now.

Watch this video I made last week, it’s now going viral with 100K views; resonating with so many designers in tech around the world. 🤯

Designers now ship, not just on Figma

For years, Figma was the finish line. You’d craft the perfect frame, annotate every interaction, hand it off, and then wait. What came back was never quite right lol

The interaction ALWAYS felt clunky. The vision got lost somewhere between your design intent and the engineer.

Imho, Figma was never the problem. The handoff was.

That handoff is collapsing.

With tools like Claude Code and Figma MCP, a designer can go from a frame to a working, deployed product without writing a single line of code. I’ve done it. The designers I teach are doing it every week. Features that would have taken a two-week back-and-forth to ship now take a single afternoon.

Figma used to be where design lived. Now it’s where design starts. The designer who stops at the Figma file in 2026 is leaving the most important part of the job to someone else.

When you ship your own work, nobody interprets your vision.

Read that again twice.

Nobody simplifies the interaction because it seemed too complex. Nobody cuts the Polish pass because the sprint ended. What you design is what gets built, literally. Full creative control is fully returned to the person who had the vision in the first place.

This feels great as a designer.

Design taste is the last unfair advantage

AI can write your code.

What AI can’t do is know if it’s good.

(I tried “replicating” taste for hours, days, and weeks - still not there yet, if you have done it. Please dm me.)

That judgment, the ability to look at something and know instantly what’s off, what feels cheap, what will confuse a user, what will make someone trust a product or abandon it, that’s still all on you.

That judgment is worth more now, not less.

Again. Read that twice.

When everyone has access to the same AI tools, the output quality ceiling rises fast. The floor rises too. Average work gets better across the board. But the gap between good and great is more or less determined by taste. And it’s not something you can prompt your way to.

Designers who’ve spent years obsessing over the details, you have just become the most important people in any room with an AI.

You have the unfair advantage. You’ve had it for years. Now it shows.

Read this from Dylan Field (Figma’s CEO) at Y Combinator:

Zero barrier from idea to the world

Just two years ago, designers would design on Figma, and then face a choice: find a technical person, learn to code from scratch, or dismiss it. So many good ideas got shelved.

All because the path from idea to shipped product was too damn painful. Now, that’s gone.

I built my first personal website (with an AI clone of myself) with Claude Code in a few hours. Not a mockup. A functional product that did something real. I didn’t write the code. I described what I wanted, reviewed what Claude built, told it what was wrong, and iterated until it matched the vision in my head.

The entire process felt like designing.

What this means for every designer reading this:

Your ideas need zero permission. You don’t need to convince an engineer to build your side project (painful process, I know). You don’t need a technical co-founder to validate that something is worth making.

You can just build things.

This is the actual reality of building today. I suspect it’ll get even better.

Designers who ship are the most valuable people in tech.

I talk to a lot of founders and hiring managers through ADPList. And the thing I keep hearing, over and over, is that the people they can’t find are designers who ship.

Not designers who make beautiful Figma. Not designers with impressive portfolios. Designers who’ve taken something from idea to live product. Designers who understand both what it should look like and how it actually works.

Those people are extraordinarily rare (+ those with taste), like unicorn rare.

And they’re becoming extraordinarily valuable.

A designer who can design and build is a force multiplier. They can validate ideas before an engineer touches them. They can make product decisions using real prototypes rather than static screens.

Feedback loops become tighter, more accurate.

Where speed is a moat for companies, the designer who can move from idea to shipped product in a day is a valuable asset.

The part most designers are missing

The opportunity is real. The tools exist. The moment is now.

But here’s the honest version: most designers aren’t moving (idk why, please tell me).

They’re waiting to see how this plays out. They’re watching the AI conversation from the sidelines.

The designers who move now have a window. Not a permanent one.

The early advantage of being the designer who can build will shrink as more designers adopt these tools. That’s fine. But right now, in early 2026, the window is open, and most people are still standing outside it.

Well, the real question is whether you’re willing to spend a few uncomfortable weeks learning how to use them before the window closes.

Some critics/observers say designers should be scared. Personally, I think that’s backwards. Engineers can be replaced by AI faster than designers can.

If you can design + ship, you’re a super valuable designer.

Thanks for reading.

Now, go build something beautiful that people want. 🧡

Subscribe now

Apply to join our community (AI designer school) as a founding member (full courses for Vibe-Coding for Designers available): https://adplist.org/vibe-code-designers

It’s time to build, designers.

If you find this guide helpful, ❤️ Like this to come back again, and repost or forward it and share your thoughts. Because more designers can learn to build.

See you next week!

- Felix Lee
Let’s conect on LinkedIn!

Subscribe now

For more: Learn how to build and ship apps as a designer (Vibe-Coding for Designers Course)

Friends,

If you want to ship products you designed, stop using Figma only. Do it on Claude Code instead.

After vibe-coding for 4 months, I’m shocked by how much my workflow has changed (for the better).

Here’s how I actually design (and ship) products in 2026.

A few months ago, I was sitting at my desk trying to ship a feature for @ADPList. This would normally require a back-and-forth with an engineer: writing a brief, waiting for prioritization; a cycle I knew would take days.

Instead, I opened Claude Code, described what I wanted to build, and watched it happen.

Not a mockup. Not a prototype. A working app. In hours.

That was the moment I realized the game had completely changed.

Not just for me, but for every designer who’s ever been stuck on the wrong side of the “design/build” wall.

(this article is based on my learnings at Vibe-Coding for Designers School)

I’ve spent 7 years in design. First at Gotrade (YC S19), where I’ve watched our designers struggle with the same ceiling: they can see exactly what needs to be built, but they need an engineer to build it. They’re full of ideas and blocked on execution. Then later at ADPList again.

That ceiling doesn’t exist anymore. Not if you use Claude Code.

This piece is about how I actually work now. Not the theory. The workflow.

Why Claude Code and not an AI design-specific tool?

The market is full of AI tools built specifically for designers. Framer AI. Figma Make. Lovable. They all share the same thesis: designers need AI built specifically for design work.

I’ve tried most of them.

For someone who wants to go from idea to shipped product, a well-configured general-purpose AI is better. It’s not close.

The specialized tools are impressive for generating screens. But they stop there. Claude Code does all of it. In the same conversation.

The real leverage is the tool that can hold the full context of what you’re building: the design, the logic, the copy, the code, and move fluidly between all of it.

That’s Claude Code.

The video above shows how I used Figma MCP via FigJam and one-shot a Tetris game with Claude Code (no design and no code needed).

The 3 workflows I actually use (proven to be useful for designers):

1. Figma MCP: Your design file is now alive

The biggest unlock for me wasn’t Claude Code. It was the moment I connected Claude to Figma through MCP (Model Context Protocol).

Before this, the gap between design and code was a translation problem. You’d design something in Figma, hand it to an engineer, and watch them interpret it. Something always got lost.

With Figma MCP, Claude can read your Figma file directly. It understands your components, your design tokens, your spacing; all of it. When I ask Claude to build something, it’s not guessing at the design. It’s working from the source of truth.

Here’s the actual workflow:

Read more

Subscribe now

For more: 🔥 Apply to learn Vibe-Coding for Designers Course 🔥 | Claim your AI Design Guide for free | Get free 1:1 mentorship

⭐️ NEW: I’m starting an Instagram for designers who vibe-code (come build with me)

If you’ve been reading this newsletter, you know I’m obsessed with what happens when designers start vibe-coding.

Now I’m taking it to Instagram 🎉 → short-form breakdowns of everything I’m building, the prompts behind it, what worked, and what I’d do differently.

Think of it as the visual companion to this newsletter: faster, messier, and way more behind-the-scenes. Whether you’re a designer dipping your toes into AI-assisted coding or a non-coder who wants to actually ship things, this is your corner of the internet now.

🎉 Join me on Instagram

On to today’s guide →

Friends,

Your design to production workflow is delaying launches by 3x.

Everything you know about handing off to developers is wrong, because Figma MCP makes shipping 5x faster now.

After 100 days of vibe-coding as a designer, I found this to be the smoothest workflow for completing designs 5x faster (and with higher quality).

The new way: You ship it yourself! (bookmark this if you haven’t read it yet)

Now, when you use Figma MCP, Claude Code can read your actual Figma -> every color, every spacing, component variant.

Literally no more design-to-dev translation loss.

I built this game in a one-shot using Figma MCP <> Claude Code. It’s insanely mind-blowing.

And a diagram to show you the 2026 workflow:

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   BEFORE (Handoff Hell)                AFTER (Vibe Coding)              │
│   ────────────────────                 ───────────────────              │
│                                                                         │
│   Design                               Design                           │
│      ↓                                    ↓                             │
│   Spec doc                             Claude reads Figma directly      │
│      ↓                                    ↓                             │
│   Dev interprets                       You prompt: "Build this"         │
│      ↓                                    ↓                             │
│   Review                               Production code                  │
│      ↓                                    ↓                             │
│   Feedback loop ×10                    Ship 🚀                          │
│      ↓                                                                  │
│   "Close enough"                       Timeline: Minutes                │
│                                                                         │
│   Timeline: Weeks                                                       │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

No coding background required.

Here, I wrote a 101 guide on everything you need to know about working with Figma MCP and Claude Code.

Let’s set it up.

Part 1 > How to set up Figma MCP

Step 1: Get your Figma Token

Figma.com → Click profile (top-left) → Settings → Security
→ Personal access tokens → Generate new token → Copy immediately

Step 2: Connect to Claude Code

claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

Step 3: Verify connection

In Claude Code, type: /mcp
You should see: figma ✓ connected

Part 2 > How Claude Code sees your Figma

┌─────────────────────────────────────────────────────────────────────────┐
│                         YOUR FIGMA FILE                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   ┌─────────────────────────────────────────────────────────────────┐   │
│   │  WHAT CLAUDE CAN READ                                           │   │
│   ├─────────────────────────────────────────────────────────────────┤   │
│   │  ✓ Layer names & hierarchy    ✓ Auto Layout settings           │   │
│   │  ✓ Colors (fills, strokes)    ✓ Component variants             │   │
│   │  ✓ Typography styles          ✓ Spacing & padding              │   │
│   │  ✓ Effects (shadows, blur)    ✓ Constraints                    │   │
│   │  ✓ Design tokens/variables    ✓ Text content                   │   │
│   └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│   ┌─────────────────────────────────────────────────────────────────┐   │
│   │  WHAT CLAUDE CANNOT READ                                        │   │
│   ├─────────────────────────────────────────────────────────────────┤   │
│   │  ✗ Actual image pixels        ✗ Prototype interactions         │   │
│   │  ✗ Comments & feedback        ✗ Version history                │   │
│   └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Part 3 > full proven workflow template

Phase 1: Analyze your full design 🧪

Read my Figma design at:
https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]

Give me:
1. Overview of the page structure
2. List of main sections
3. Color palette being used
4. Typography styles
5. Any components you can identify

Phase 2: Extract design tokens 🪙

From the Figma file, extract and create:

1. A Tailwind config with:
   - Custom colors matching the design
   - Font families and sizes
   - Spacing scale based on what you see

2. CSS variables file as backup

Format the colors as semantic names (primary, secondary, accent, neutral).

Phase 3: Generate components ⚡️

Look at the [COMPONENT NAME] in my Figma file.

Generate a React component that:
- Matches the exact styling (colors, spacing, typography)
- Uses Tailwind CSS
- Supports all variants I've defined (if any)
- Is fully typed with TypeScript
- Includes hover/focus states based on the design

Phase 4: Build full sections 🖥️

Generate the [SECTION NAME] section from my Figma design.

Requirements:
- Match the design exactly
- Make it responsive:
  - Mobile (<768px): [describe layout]
  - Desktop (≥768px): [describe layout]
- Use semantic HTML (section, nav, main, article)
- Include all text content from the design

Part 4 > the 3 main Figma MCP use cases

┌─────────────────────────────────────────────────────────────────────────┐
│                           MCP IN ACTION                                 │
└───────────────────────────────┬─────────────────────────────────────────┘
                                │
        ┌───────────────────────┼───────────────────────┐
        ▼                       ▼                       ▼
┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
│                   │  │                   │  │                   │
│  Design files     │  │  Wireframes &     │  │  AI-generated     │
│  → Production     │  │  user flows →     │  │  UI → Inject      │
│  code             │  │  Working app      │  │  into codebase    │
│                   │  │                   │  │                   │
│  ⭐ MOST USED     │  │  🎯 POWERFUL      │  │  ⚡ FASTEST       │
└───────────────────┘  └───────────────────┘  └───────────────────┘
        │                       │                       │
        ▼                       ▼                       ▼
┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
│ "Build my landing │  │ "Read my user     │  │ "Take this Make   │
│ page from this    │  │ flow and create   │  │ design and add it │
│ Figma design"     │  │ the Next.js       │  │ to my existing    │
│                   │  │ route structure"  │  │ portfolio app"    │
└───────────────────┘  └───────────────────┘  └───────────────────┘

Figma MCP (FigJam) x Claude Code - from my AI First Designer School Tutorial

Part 5 > power user workflows for each

Workflow A: Design System → Full Site

STEP 1                    STEP 2                    STEP 3
───────────────────────────────────────────────────────────────────
"Read my design          "Generate base            "Build homepage
system file and          components: Button,       using these
extract all tokens"      Card, Input, Badge"       components"
        │                        │                        │
        └────────────────────────┴────────────────────────┘
                                 │
                                 ▼
                    STEP 4: Add pages one by one
                    "Now build the pricing page"
                    "Now build the about page"

Workflow B: speedrun a single page

"Read [URL], extract tokens, generate full page with all sections, 
make it responsive, use Next.js + Tailwind. Go."

     ┌──────────────────────────────────────────────────────────┐
     │  ⚠️  Works best when your Figma file is well-organized  │
     │     with proper naming and Auto Layout throughout       │
     └──────────────────────────────────────────────────────────┘

Workflow C: component first (for matured designers)

┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
│ Tokens  │ → │ Atoms   │ → │ Molecules│ → │ Sections│ → │  Page   │
│ (colors,│    │ (button,│    │ (card,  │    │ (hero,  │    │ (full   │
│ fonts)  │    │ input)  │    │ nav)    │    │ footer) │    │ page)   │
└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

Part 6 > Figma checklist (before you start)

┌─────────────────────────────────────────────────────────────────────────┐
│  NAMING                                                                 │
│  [ ] Layers use semantic names         hero-section ✓   Frame 427 ✗    │
│  [ ] Components are clearly named      Button/Primary ✓  Component 1 ✗ │
│  [ ] Variants have descriptive props   size=lg ✓        variant=2 ✗    │
├─────────────────────────────────────────────────────────────────────────┤
│  STRUCTURE                                                              │
│  [ ] Auto Layout on ALL containers     Flexbox ready ✓  Absolute mess ✗│
│  [ ] Flat hierarchy (minimal nesting)  Clean DOM ✓      Div soup ✗     │
│  [ ] Sections clearly separated        Easy parsing ✓   Chaos ✗        │
├─────────────────────────────────────────────────────────────────────────┤
│  TOKENS                                                                 │
│  [ ] Colors defined as styles          Extractable ✓    Hardcoded ✗    │
│  [ ] Typography as text styles         Consistent ✓     Random ✗       │
│  [ ] Spacing is consistent             Systematic ✓     Arbitrary ✗    │
└─────────────────────────────────────────────────────────────────────────┘

🔖 (Recommended) You definitely want to bookmark this.

Some final pro-tips on using Figma MCP

1. NAME LAYERS LIKE CSS CLASSES
   nav-links ✓    Group 5 ✗

2. WORK SECTION BY SECTION  
   Hero → Features → Testimonials → Footer
   (Don't ask for entire page at once)

3. REFERENCE FIGMA DIRECTLY
   "Look at the card in the Features section"
   (Not: "Create a card with rounded corners")

4. EXPORT ASSETS FIRST
   Images need manual export → /public folder
   Then tell Claude: "Hero image is at /public/hero.png"

5. SHARE YOUR STACK UPFRONT
   "I'm using Next.js 14 + Tailwind + TypeScript"
   (Claude will match your conventions)

Quick start reference:

I want to convert my Figma design to code.

Figma URL: [PASTE YOUR URL]

Stack: Next.js 14 + Tailwind CSS + TypeScript

Please:
1. First, analyze the design and tell me what you see
2. Extract the color palette and create a Tailwind config
3. Then I'll tell you which section to build first

Let's go step by step.

And you’re all ready to go. 😉🔥 Thank you for reading!

This article is based on my full Vibe-Coding course (if you’d like to learn more and also support this). It includes:

1. Installation walkthroughs (Mac + Windows)

2. Claude Code + Cursor orientation

3. First project tutorial

4. GitHub + version control

5. Vercel deployment

6. Custom domains

7. Supabase + OpenAI integration

8. NEW chapters on AI agents and Figma MCP!

🏛️ Apply to join our community (AI-first designer school) as a founding member (full courses available): https://adplist.org/vibe-code-designers

If you find this guide helpful, ❤️ Like this to come back again, and 🔄 repost or forward it and share your thoughts. Because more designers can learn to build.

See you next week!

- Felix
let’s connect on LinkedIn!

Subscribe now

For more: Get free 1:1 mentorship | Be first to win in career as an AI-First Designer | Claim your AI Design Guide for free

Hi friends,

Before we get into today’s newsletter, I’m so proud and excited to share the latest stuff we’ve been cooking (all taught by yours truly)…

NEWS: ⭐️ If you're a designer who wants to start building apps, here's your roadmap.

I am not a developer. I built 3 apps and shipped them in 2 weeks.

Designers who vibe-code, ship 10x faster. And get paid 10x more. ⭐️ Learn vibe coding with Claude Code & Cursor → go from Figma to shipped prototypes for only $249 $599 today. *including 3 new vibe-coding courses like Figma MCP, iOS Apps, and more. No coding background required.

Apply to join today

Friends,

Claude Code is the highest leverage skill you can learn this year.

You don’t want to miss this. So I’ve written a full guide for you.

For context...

I built my personal website, with an AI chat that answers questions about my work, in 48 hours. Three days later, I shipped a growth design tool.

I’m not a developer. I’m a designer. A year ago, I couldn’t ship a single line of code without an engineer. Now I deploy products on weekends.

Same person, different tool (no more Figma)!

This is the complete guide to using Claude Code as a designer -> step by step, command by command.

Claude Code for Designers

What is Claude Code?

Claude Code is a coding agent. You give it instructions in plain English, and it writes code for you. You prompt: “Create a landing page with a hero section, three feature cards, and a footer.” It executes.

Or something like. “Add an AI chat widget that answers questions about my portfolio.” It executes. You don’t need to understand syntax. You need to understand what you’re building.

Imho, this is even better than Cursor or anything else out there (as of today).

Things I’ve built

⭐️ Project 1: Tetris game

Okay, this one is insane: I built a Tetris game using only Figma MCP connected to FigJam, then back to Claude Code. I did not even design or touch a single line of code.

No joke, this one blew me away (see my reaction at 7s). 😂

⭐️ Project 2: Growth design tool

An internal tool for analyzing metrics and suggesting design experiments. Database-backed. User authentication. AI-powered recommendations. 3 days. Working product. Live on the internet.

How insane, got over 500 users now!

Now, let’s get you up to speed on these.

Step 1: Install Claude Code

On Mac: Open Terminal (search “Terminal” in Spotlight) and run:

npm install -g @anthropic-ai/claude-code

If you don’t have npm, install Node.js first from https://nodejs.org

Verify installation: Type ->

claude

Claude Code should launch. You’ll see a text interface where you can start typing instructions.

Step 2: Basic terminal commands

Claude Code runs in the terminal. Here’s what you need to know:

claude                    # Start Claude Code
cd folder-name            # Navigate into a folder
cd ..                     # Go back one folder
ls                        # List files (Mac)
dir                       # List files (Windows)
pwd                       # Show current location (Mac)

That’s it. You don’t need anything more than this to get started.

Step 3: Create your first project

Create a project folder (aka directory):

mkdir my-portfolio
cd my-portfolio
claude

Now you’re inside Claude Code, in your project folder.

Start with a plan ALWAYS (critical):

Before writing any code, ask for a plan:
I want to build a personal portfolio website with:
- A hero section with my name and tagline
- A projects section showing 4 recent works
- An about section with my bio
- A contact section with links to Twitter and LinkedIn

Research the best way to build this and create a plan.md file with:
1. Recommended tech stack
2. File structure
3. Design considerations
4. Step-by-step implementation plan
Claude Code creates a plan.md file. Open it and review.

Adjust accordingly (critical):

In the plan, change the tech stack to vanilla HTML/CSS instead of React. Keep it simple.

Implement:

Implement this project according to plan.md. Start with the HTML structure, then add CSS styling.

Watch as files appear: index.html, styles.css, images/.

Preview locally: How do I preview this in my browser?

For a local server:

npx serve

Open http://localhost:3000 in your browser.

Step 4: Iterate through prompts

This is where designers have an advantage. You already know how to give feedback.

Styling:

Make the hero section full-height (100vh). Center the text vertically.
The projects section looks cramped. Add more padding between cards — at least 32px.
Add a subtle hover effect on the project cards. Scale up slightly and add a shadow.
Change the font to Inter from Google Fonts.

Responsiveness:

Make it responsive.
On mobile, stack the project cards vertically.

The navigation should collapse into a hamburger menu on screens under 768px.

Functionality:

Add smooth scroll behavior when clicking navigation links.
Add a contact form that sends submissions to my email using Formspree.

Debugging: Each prompt → code change → refresh browser. The loop is fast.

Step 5: commit (aka save) to GitHub

Create a GitHub account: Go to https://github.com and sign up (free).

Create a repository: Click + → New repository

1. Name it (e.g., my-portfolio)

2. Keep it Public or Private

3. Don’t initialize with README

4. Click Create repository

Copy the repository URL.

Connect and push:

In Claude Code:

Initialize git in this project and connect it to my GitHub repository:

https://github.com/yourusername/my-portfolio.git

Or manually:

git init
git remote add origin https://github.com/yourusername/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin main

Create documentation:

Create a README.md that explains what this project is and how to run it locally.

Create a claude.md file that describes the project architecture and context for future sessions.

Your code is now saved and versioned.

Step 6: Go live/deploy to Vercel

Create a Vercel account: Go to https://vercel.com and sign up with GitHub (please do this so it can auto-deploy in the future).

Option 1 Vercel dashboard:

1. Click Add New → Project

2. Import your GitHub repository

3. Click Deploy

Option 2 through Claude Code:

Deploy this project to Vercel.

Result: You get a live URL like https://tetris-two-mu.vercel.app/ (real app btw, try it and beat the highscore). NOTE: Your site is on the internet. Every future push to GitHub auto-deploys.

Step 7: Add your custom domain

In Vercel:

1. Go to Settings → Domains

2. Add your domain (e.g., felixlee.dev)

3. Vercel shows DNS records to add

Update DNS at your domain provider:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Wait 5-30 minutes. Your site loads on your custom domain.

Step 8: Build into a web app (advanced)

Static sites are steps 1-7. Now let’s add users, data, and AI.

Research prompt:

I want to expand this portfolio into a web app with:

• Google sign-in authentication

• An AI chat widget that answers questions about my work

• A comment section where signed-in users can leave messages

Research the best approach and create an implementation-plan.md with:

1. Services needed (auth, database, AI)

2. Architecture overview

3. Security considerations

4. Step-by-step implementation phases

Set up environment variables:

Create a .env file for storing API keys. Also, create a .gitignore that excludes .env from GitHub.

Your .env file:

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyxxxxx
OPENAI_API_KEY=sk-xxxxx

🚨 Never commit this file.

Step 9: Supabase (database + auth)

Create a project:

1. Go to https://supabase.com

2. Create a new project

3. Go to Settings → API

4. Copy Project URL and anon key

Enable Google sign-in:

1. In Supabase: Authentication → Providers → Google → Enable

2. Go to https://console.cloud.google.com

3. Create project → APIs & Services → Credentials → Create OAuth Client ID

4. Copy Client ID back to Supabase

Then redploy!

Quick ref: prompts by category

Planning:

Research how to build [X] and create a plan.md with tech stack, structure, and implementation steps.

Implementation:

Implement this according to plan.md. Start with [component].

Adding features:

Add a [feature] that [behavior]. Use [service/API] if needed.

Debugging (good to include a screenshot of the error):

I'm getting this error: [error]. Find and fix the issue.

And you’re all set to redeploy! 🎉

This article is based on my full Vibe-Coding course (if you’d like to support) ⭐️. It includes:

1. Installation walkthroughs (Mac + Windows)

2. Interface orientation

3. First project tutorial

4. GitHub + version control

5. Vercel deployment

6. Custom domains

7. Supabase + OpenAI integration

8. NEW chapters on AI agents and Figma MCP

Apply to join today

Thank you for reading.

Final thought... I used to feel like half a builder. Like my ideas needed someone else to become real. Not anymore.

It’s time to build, designers.

If you find this guide helpful, ❤️ Like this to come back again, and 🔄 repost or forward it and share your thoughts. Because more designers can learn to build.

See you next week!

— Felix

Subscribe now

For more: Get free 1:1 mentorship | Be first to win in career as an AI-First Designer | Claim your AI Design Guide for free

My original article on X.

Master vibe-coding as a designer.

Designers Who Code Ship 10x Faster. And Get Paid 10x More. Learn vibe coding with Claude Code & Cursor → go from Figma to shipped prototypes in 7 days. No coding background required.

Apply to be a learner!

I’m not a developer. I’m a designer.

The future of design is here.

I’m going to walk you through exactly how this works - step by step, command by command, so you can do the same.

The new era

For a decade, the advice was the same: learn to code.

I tried. JavaScript tutorials. Codecademy. Each time, I hit a wall, because traditional coding optimizes for syntax and precision.

Designers think in flows, systems, and experiences.
Different operating system.

What changed everything was realizing that the bottleneck was never my coding ability. It was the translation layer between my vision and implementation. AI removes that layer entirely.

With tools like Cursor (an IDE) and Claude Code (a coding agent), you describe what you want in plain language, and the AI writes the code.

You don’t need to understand the syntax. You need to understand what you’re building.

This is what they call vibe-coding, and it changes the entire equation for designers.

Public love from the things I vibe-coded. Grateful for the support.

Now let’s dive in… (this is going to be a lot, so I suggest bookmarking/liking this first) 🔖

What this looks like in practice

Project 1: Personal website with AI chat

I wanted a portfolio that could hold a conversation. When someone visits, they can ask the AI questions about my background, my projects, my philosophy — and it responds intelligently.

Before these tools, I would have needed to either learn a stack (React, Node, OpenAI API integration) or hire someone. Instead, I described the experience I wanted, let Claude Code generate the implementation, and iterated in real time.

48 hours. Fully deployed (with custom domain)!

Project 2: Growth design tool

An internal tool for analyzing metrics and suggesting design experiments. Database-backed. User authentication. AI-powered recommendations.

5 days. A FULL working product. Live! So wild.

These weren’t prototypes in Figma. These were real applications. You can try it too, seriously.

My full workflow (step-by-step):

I wrote a complete 101 guide on this.

Here’s the full breakdown with exact commands and prompts.

Everything you need to know (designers/non-technical edition)👇

Step 1: Set up Cursor & Claude Code

You need two tools: Claude Code and Cursor.

Install Claude Code:

On Mac, open Terminal and run:

npm install -g @anthropic-ai/claude-code

If you don’t have npm, install Node.js first from https://nodejs.org

On Windows, use the native installer from Anthropic’s website.

After installation, verify it works by typing:

claude

You should see Claude Code launch in your terminal.

Install Cursor: Download from: https://cursor.com

Install like any normal app. Open it. That’s it.

How they connect:

Cursor has a built-in terminal. You can run Claude Code directly inside Cursor — so you see your files, your code, and your AI assistant all in one window.

To open the terminal in Cursor: View → Terminal or press Cmd+J.

Step 2: Cursor and Claude Code overview

The terminal:

This is where you talk to Claude Code. It looks like a black box with text. You type commands, press Enter, and things happen.

Key commands you’ll use:

claude                    # Start Claude Code
cd folder-name            # Navigate into a folder
cd ..                     # Go back one folder
ls                        # List files in current folder (Mac)
dir                       # List files in current folder (Windows)

Cursor Interface:

• Left panel: File tree (your project’s folders and files)

• Center: Code editor (where you see and edit code)

• Bottom: Terminal (where you run Claude Code)

• Right: Optional panels you can ignore for now

• You don’t need to understand every button. Just know where things are.

Step 3: Build your first project

Create a project folder:

In Cursor, go to File → Open Folder and create a new empty folder. Name it something like my-portfolio.

Open the terminal inside Cursor and start Claude Code:

claude

The Planning Phase (Critical):

Before writing any code, ask for a plan. Here’s the sample prompt I use:

I want to build a personal portfolio website with:
- A hero section with my name and tagline
- A projects section showing 4 recent works
- An about section with my bio
- A contact section with links to Twitter and LinkedIn

Research the best way to build this and create a plan.md file with:
1. Recommended tech stack
2. File structure
3. Design considerations
4. Step-by-step implementation plan

Claude Code will create a plan.md file in your project. Open it in Cursor and review it.

Approve or Adjust:

If something looks off, tell Claude:

In the plan, change the tech stack to use vanilla HTML/CSS instead of React. Keep it simple.

Implement:

Once the plan looks good:

Implement this project according to plan.md . Start with the HTML structure, then add CSS styling. Watch as files appear in your file tree: index.html, styles.css, maybe an images folder.

Preview Locally:

Ask Claude:

How do I preview this in my browser? Open in localhost

It will either open a local server or tell you to simply open index.html in your browser.

For a proper local server, you can run:

npx serve

Then open http://localhost:3000 in your browser.

Iterate:

Now the fun part. Look at your site and give feedback:

Make the hero section full-height (100vh). Center the text vertically.

The projects section looks cramped. Add more padding between cards — at least 32px.

Add a subtle hover effect on the project cards. Scale up slightly and add a shadow.

Change the font to Inter from Google Fonts.

Make it responsive. On mobile, stack the project cards vertically.

Each prompt → code change → refresh browser. The loop is fast.

Step 4: Save your work with GitHub

Think of GitHub like Google Drive for your code and everything you’ve done in an IDE (like Cursor).

Create a GitHub account: Go to https://github.com and sign up (free).

Create a new repository:

Click the + icon → New repository

• Name it (e.g., my-portfolio)

• Keep it Public or Private (your choice)

• Don’t initialize with README (we’ll create our own)

• Click Create repository

Copy the repository URL (looks like https://github.com/yourusername/my-portfolio.git)

Connect your project:

In Claude Code:

Initialize git in this project and connect it to my GitHub repository: https://github.com/yourusername/my-portfolio.git

Or manually:

git init
git remote add origin https://github.com/yourusername/my-portfolio.git

Create documentation:

Create a README.md that explains what this project is, what it does, and how to run it locally.

Create a claude.md file that describes the project architecture, my preferences for code style, and context for future sessions.

Commit and push:

Commit all files with the message "Initial commit - portfolio site" and push to GitHub.

Or manually:

git add .
git commit -m "Initial commit - portfolio site"
git push -u origin main

Your code is now saved online.

Step 5: Deploy -> Go live

Create a Vercel account:

Go to https://vercel.com and sign up with your GitHub account.

Deploy:

Option 1: Through the Vercel dashboard:

• Click Add New → Project

• Import your GitHub repository

• Click Deploy

Option 2: Through Claude Code:

Deploy this project to Vercel.

This one is straightforward, if you connect that repo to Vercel, it just deploys automatically when you commit (after your first time).

It will walk you through authentication and deployment.

Result:

Vercel gives you a live URL like https://growth-ux-analyzer.vercel.app/. Your site is now on the internet. Share it with anyone.

Automatic updates:

From now on, every time you push to GitHub, Vercel automatically redeploys. Your live site always matches your latest code.

Step 6: Add a Custom Domain

Buy a domain:

Options:

• Directly in Vercel (easiest — auto-configures everything)

• From Namecheap, Google Domains, Cloudflare, etc.

Connect to Vercel:

In your Vercel project dashboard:

1. Go to Settings → Domains

2. Add your domain (e.g., felixlee.dev)

3. Vercel shows you DNS records to add

Update DNS (if you bought elsewhere):

Go to your domain provider’s DNS settings and add:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Wait 5-30 minutes for DNS propagation.

ALWAYS Verify: Visit your custom domain. Your site should load.

Going further: Building real web apps

Steps 1 -> 6 cover static sites. Now let’s build something with users, data, and AI.

Step 7: Plan a Web App

I wanted to add to my portfolio:

• User authentication (visitors can sign in with Google)

• AI chat (ask questions about my work)

• Comment system (people can leave feedback)

Research prompt:

The growth design tool!

I want to expand this portfolio into a web app with:
- Google sign-in authentication
- An AI chat widget that answers questions about my work
- A comment section where signed-in users can leave messages

Research the best approach and create an implementation-plan.md with:
1. Services needed (auth, database, AI)
2. Architecture overview
3. Security considerations
4. Step-by-step implementation phases

Environment variables:

For apps with API keys, you need a .env file:

Create a .env file for storing API keys. Also create a .gitignore file that excludes .env from being uploaded to GitHub.

Your .env file will look like:

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyxxxxx
OPENAI_API_KEY=sk-xxxxx

Important: Never commit .env to GitHub. The .gitignore file prevents this. You can make sure of this by telling Claude Code agent or Cursor.

Step 8: Set Up Supabase + OpenAI

Supabase (database + auth):

1. Go to https://supabase.com and create an account

2. Create a new project

3. Go to Settings → API and copy:Project URL
   anon public key

Enable Google Auth:

1. In Supabase: Authentication → Providers → Google → Enable

2. You’ll need a Google Cloud OAuth client ID

3. Go to https://console.cloud.google.com

4. Create a project → APIs & Services → Credentials → Create OAuth Client ID

5. Copy the Client ID back to Supabase

OpenAI API:

1. Go to https://platform.openai.com

2. Create an API key

3. Store it in Supabase Edge Functions (not in frontend code):

   1. Settings → Edge Functions → Add Secret

   2. Name: OPENAI_API_KEY

   3. Value: your key

Implementation prompt:

Implement the web app according to implementation-plan.md.

Use:
- Supabase for auth and database (credentials in .env)
- OpenAI for the chat feature (key stored in Supabase Edge Functions)
- Google sign-in only (no email/password)

Start with authentication, then add the AI chat, then the comment system.

Testing locally:

Run the project locally and test:
1. Google sign-in flow
2. AI chat responses
3. Leaving a comment as a signed-in user

Debugging:

If something breaks:

I'm getting this error: [paste error message]. What's wrong and how do I fix it?

Common fixes involve database permissions. Claude will often generate SQL to run in Supabase:

-- Example: Allow authenticated users to insert comments
CREATE POLICY "Users can insert comments" ON comments
FOR INSERT WITH CHECK (auth.uid() = user_id);

Deploy:

Once it works locally:

Commit all changes with message "Add auth, AI chat, and comments" and push to GitHub.

Vercel auto-deploys. Add your production environment variables in the Vercel dashboard (Settings → Environment variables).

Deployed my growth design tool (https://growth-ux-analyzer.vercel.app/)

That’s it - and you’re ready to build your first app!

Subscribe now

🔖 Like/Bookmark this guide. (Full notion link here)

📘 Other free resources our team created: Design with AI eBook and 90 Moonshot Design Tactics ebook (from companies like Figma, Airbnb, etc).

Thank you for reading.

🔄 If you find this helpful, let’s repost or forward it and share your thoughts. Because more designers can learn to build!

Share

Thanks for reading,

Felix

Subscribe now

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free

Hi everyone,

Happy New Year! 🎉 Hope you had the best holidays!

Over the past few months, I’ve had several conversations with design students and junior designers on LinkedIn, including those preparing for internships, full-time roles, and, most often, design interviews.

What stood out to me was not a lack of talent. In fact, most of them had strong portfolios, thoughtful case studies, and a clear interest in building meaningful products. Yet, many of them shared the same concern:

“I’m not sure how to stand out anymore, especially now that everyone is using AI.”

Some were unsure whether mentioning AI tools in interviews would hurt their credibility. Others admitted they used AI extensively but struggled to explain how they did so without sounding as if they were outsourcing their thinking. A few didn’t use AI at all, worried that it would make their work feel generic or replace their design voice.

What became clear is that the challenge isn’t AI itself.
The challenge is knowing how to position yourself as a designer who thinks critically in an AI-assisted world.

Design interviews are changing. Interviewers are no longer just evaluating visual skills or polished mockups, but they’re paying close attention to how candidates think, structure problems, make decisions, and collaborate with tools, including AI.

This newsletter is an attempt to break that down from patterns I’ve observed across conversations, interviews shared by others, and how design teams are increasingly talking about AI in hiring.

In the sections below, I’ll explore how designers can stand out in interviews today by using AI intentionally, articulating their process clearly, and demonstrating judgment, not dependency.

Let’s get into it.

1. What interviewers are actually looking for in the age of AI

While working on this newsletter, I spoke to a few hiring managers and design interviewers across startups and agencies. I asked them a simple question:

“Now that AI tools are everywhere, what actually makes a design candidate stand out in interviews?”

What surprised me was how consistent the answers were. No one talked about perfect screens, pixel-level polish, or being fluent in the latest AI tool. Instead, the expectations have quietly—but clearly—shifted toward something deeper.

Here are the patterns that came up again and again.

1. Clarity of thinking matters more than the final output

Interviewers are far less interested in what you design and far more interested in how you got there. They’re listening for things like:

- How you frame the problem before jumping to solutions
- How you deal with ambiguity instead of avoiding it
- How you make trade-offs when time, data, or context is limited

With AI speeding up execution, the final output is no longer the strongest signal. Your thinking process, especially under imperfect conditions, is what helps interviewers understand how you’d actually work on their team.

2. Designers who use AI transparently build more trust

One interviewer mentioned that candidates who openly say something like, “I used AI to explore a few directions” often come across as more confident than those who avoid mentioning it altogether. What stands out isn’t the use of AI itself, but:

- Knowing when it’s helpful
- Knowing when it’s not
- Being able to critique, refine, or reject what AI produces

AI is increasingly seen as a collaborator, and those who can explain how they worked with it rather than around it tend to build more trust.

3. Strong communication is now a core design skill

Several interviewers pointed out that two candidates can solve the same problem in very similar ways. The difference is almost always in how clearly they explain their thinking. They pay close attention to:

- How structured your explanations are
- Whether your assumptions are clear
- Whether your decisions follow a logical flow

In live interviews, especially, how you talk through your work often matters just as much as the work itself. The candidates who stand out are using AI not to replace their voice, but to strengthen it.

Which brings us to the first and most important shift in how designers should approach interview prep today.

2. Treat AI as your interview prep partner

When preparing for design interviews, most candidates underestimate how much context they are expected to hold and articulate at once.

You are not just answering questions but you are expected to recall past projects, explain decisions, defend trade-offs, respond to critique, think out loud, adapt under pressure, and communicate clearly all in real time.

From my conversations with several design candidates, a recurring theme emerged: they knew their work, but struggled to retrieve and structure it under interview pressure.

Project details live in different places: portfolio decks, Figma files, Notion notes, old feedback, interview prep docs, half-written stories in your head.
During interviews, all of this context needs to come together instantly and that’s where most candidates freeze.

This is where AI can play a very specific role as a second brain that holds your interview context, challenges your answers, and simulates real interview conditions, before you ever sit across from a hiring manager.

Step 1: Create a dedicated ChatGPT Project for interview prep

Instead of using random chat threads, the first step is to create a single, persistent space where all your interview preparation lives.

In ChatGPT, go to the left sidebar and select “New project.”

Think of this Project as your personal interview room, one that remembers everything about you, your work, and the roles you are applying for.

Once inside the Project, the most important step is defining how this AI should behave.

Step 2: Give AI context

I’ve noticed candidates saying, “AI didn’t really help me prepare.” It’s usually because they treated it like a search engine or an answer generator. They asked vague questions, got vague responses, and walked away with surface-level confidence that quickly collapsed in a real interview.

Every Project includes an Instructions section.
This is where you tell the AI who it is and how it should interview you. Instead of vague prompts, be explicit.

Use this prompt:

"I am preparing for a design interview and want to use AI as a thinking and preparation partner, not as a shortcut for answers.

I’m applying for a [UX / UI / Product / Visual] Designer role at a [startup / scale-up / enterprise] company. The company primarily works on [mobile apps / SaaS platforms / consumer products / B2B tools], and the role emphasizes user-centered problem solving, clear decision-making, and impact-driven design rather than just visual output.

My current experience level is [student / junior / mid-level], and I want to prepare in a way that reflects realistic expectations for this level—while still showing strong potential, structured thinking, and growth mindset.

I want you to act as a senior design interviewer, mentor, and interview preparation partner. Your role is to:

- Think like an interviewer who has conducted many real design interviews
- Evaluate my responses the way an interviewer would (clarity, reasoning, depth, and trade-offs)
- Help me structure my thoughts, not write answers for me
- Ask probing follow-up questions when my thinking is unclear or shallow
- Point out gaps in logic, assumptions, or missing considerations
- Help me articulate why I made certain design decisions, not just what I did

When responding, prioritize:
- Problem framing and understanding user needs
- Decision-making under constraints (time, business goals, tech limitations)
- Trade-offs and alternative approaches
- Clear communication and storytelling
- Real-world design thinking rather than textbook definitions

Do not give generic or overly polished “perfect” answers. Instead, guide me to think, refine, and improve my own responses—similar to how a strong interviewer or mentor would during real interview preparation."

Step 3: Feed the project your complete context

Now comes the part most candidates skip — and the part that makes the biggest difference.

Your AI interviewer can only challenge you properly if it knows your work.

Use the “Add files” option inside the Project and upload everything relevant, such as:

• Your portfolio PDF

• Case study decks

• Resume

• Project write-ups

• Design critiques you’ve received

• Job descriptions you are applying for

• Notes from past interviews

• Even screenshots of Figma flows exported as PDFs

A useful mindset shift here is this:
almost everything you need to prepare for interviews already exists as text.

Once uploaded, the Project begins to understand:

• your design process

• your strengths and gaps

• patterns in your decision-making

• the kinds of projects you tend to talk about

Step 4: Use AI to deconstruct the job description

Now that the bot has the whole context and your previous work, you can put your current JD and ask it to deconstruct to understand better.

A job description is not just a list of skills it’s a compressed signal of the problems the team is trying to solve, the gaps they’re hiring for, and the type of designer they need right now. When candidates fail to unpack this, they often prepare for the wrong interview.

Using AI to deconstruct the job description helps you move beyond “Do I qualify?” to “What are they actually evaluating when they talk to me?”

Open the project and put this prompt along with the JD to help you understand it better:

"Here is the job description for the design role I’m applying to.
I want you to analyze it as a senior design interviewer or hiring manager, not as a keyword scanner. Assume this role receives many applications and interviews candidates regularly.

Please break the job description down into the following:

1. Core skills and competencies they are likely evaluating
- Distinguish between must-have skills vs. nice-to-have skills
- Identify both explicit requirements and implied expectations
- Call out design skills, soft skills, and business/product thinking separately

2. Types of interview questions I should realistically expect
- Portfolio walkthrough questions
- Case study or whiteboard challenge themes
- Behavioral and situational questions
- Follow-up questions that probe depth, not surface-level answers

3. Signals a strong candidate would demonstrate during interviews
- What interviewers would listen for in answers
- Behaviors, language, and mindset that indicate seniority or readiness
- Red flags or weak signals candidates often show unintentionally

Frame your analysis in a practical, interview-focused way so I can clearly understand what the interview is actually testing, not just what the job description says on paper."

Step 5: Clarify your own design story

Most interviews don’t fail because a candidate’s work is weak. They fail because the interviewer can’t form a clear picture of who this designer is and where they’re heading.

When candidates talk through their experience, it often sounds like a collection of disconnected projects and if you clarify your design story, it gives the interviewers the context.

Here’s a prompt to use:

Read more

Subscribe now

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free.

Hi friends,

Over the past few months, I’ve noticed something subtle but consistent in conversations with designers, PMs, and product teams.

A designer shares a prototype.
A PM presents a roadmap.
An engineer asks clarifying questions.

And somewhere in between, the same gap keeps appearing, where the idea looks good, but it doesn’t quite feel real yet.

Across startups, agencies, and in-house teams, designers kept circling back to the same frustration: they knew what the experience should feel like, but they couldn’t show it fast enough.

Almost everyone said some version of this:

“I don’t need more design tools. I need faster ways to make ideas real.”

That’s when AI design & prototyping tools entered the conversation, not as a trend, but as a response to friction.

I also wrote a two helpful guides:

• Figma Make Essentials

• Guide to Figma Make Part II

• Full Video series in Jan 2026 on AI-First Designer School

Very few designers have clarity on which tool to use, when to use it, and why. The tools looked similar on the surface, yet they solved very different problems depending on where you were in the design process.

So I started digging deeper.

Today, I’ll walk you through the AI design & prototyping tools that matter right now, including Figma Make, v0, Framer AI, and Lovable, and, more importantly:

• What part of the design process do they actually support

• Where they create real leverage (and where they fall short)

• How designers are using them to communicate intent earlier and more clearly

By the end, the goal is simple:

To give you a clearer mental model for choosing the right tool so your ideas spend less time being explained and more time being experienced.

Let’s dive in.

1. How to understand the tools out there (from a designer’s lens)

When we talk about AI design & prototyping tools, we’re not talking about design inspiration or pretty visuals, but we’re talking about tools that help designers move faster from idea to interface, create interactive and high-fidelity prototypes, and communicate intent more clearly to PMs, stakeholders, and engineers.

At a high level, today’s AI design & prototyping ecosystem has four key players:

• Figma Make

• v0

• Framer AI

• Lovable

All four tools are strong, and over time, they will continue to build toward feature parity. But they are optimized for very different moments in a designer’s workflow.

If we had to describe when to use each tool in a single sentence, it would be:

• Figma Make → AI-powered design inside your existing design system

• v0 → Beautiful, production-style UI with minimal effort

• Framer AI → From prompt to live, responsive website

• Lovable → Product-like prototypes that actually behave like apps

Here’s the layer deeper on each.

Figma Make

Figma Make is best understood not as a new tool, but as an AI layer inside the designer’s home base. It’s about working within existing design systems, generating layouts and flows that feel native to Figma, and speeding up early exploration without breaking established processes.

Figma Make is not built to generate production-ready code or simulate complex product logic; it’s best for early exploration within a design system. For example, here’s a prompt you can use and try:

Act as a senior product designer working inside an established design system.

Context:
– This is a B2B SaaS dashboard for marketing managers.
– We already have typography styles, spacing tokens, and button components defined.

Task:
– Generate a dashboard layout focused on “Campaign Performance Overview.”
– Use existing components only (cards, tables, charts, filters).
– Prioritize clarity and scannability over visual flair.
– Assume data density is medium-to-high.

Constraints:
– Desktop-first layout
– 12-column grid
– Clear hierarchy between primary KPIs and secondary metrics

Output:
A structured screen layout with component placement, hierarchy notes, and interaction hints that can be directly refined in Figma.

v0

Next, we have v0 that excels at generating polished, modern front-end UI extremely fast. Its outputs look closer to real products than traditional design mockups, which makes it ideal for high-fidelity demos, stakeholder presentations, and pressure-testing UI concepts before full design investment.

Here’s a prompt you can try:

Act as a front-end UI designer creating a polished, modern interface.

Context:
– This is a consumer-facing fintech product.
– Target audience: Gen Z users familiar with apps like Revolut and Notion.

Task:
– Generate a clean, modern home screen UI.
– Emphasize strong typography, spacing, and visual hierarchy.
– Include sections for balance summary, recent transactions, and quick actions.

Style Direction:
– Minimal, light theme
– Subtle shadows and rounded corners
– Modern sans-serif typography

Output:
A production-style UI layout that looks close to a real app interface, suitable for demos and stakeholder reviews.

However, it remains front-end focused and is less concerned with flows, systems, or long-term design structure. Think of it as a UI accelerator, not a design system builder.

Framer AI

Framer AI is optimized for designers who want the output to be live. Its biggest strength is closing the gap between design, prototyping, and publishing. From a single prompt, designers can generate responsive layouts, animations, and fully deployed websites.

It’s especially powerful for portfolio sites, brand campaigns, landing pages, and marketing-led design work.

Here’s a prompt you can try:

Act as a digital brand designer creating a live marketing website.

Context:
– Brand: Premium skincare startup
– Goal: Explain the product clearly and drive sign-ups

Task:
– Create a responsive landing page structure.
– Include hero section, value proposition, product benefits, social proof, and CTA.
– Use clear scroll-based storytelling.

Design Direction:
– Soft, minimal aesthetic
– Neutral color palette with one accent color
– Large typography and generous spacing

Output:
A fully responsive, live website layout with animations and interactions that feel refined but not distracting.

Framer AI is less suited for complex product flows, but it’s unmatched when speed-to-live matters more than system depth.

Lovable

Lastly, Lovable sits closest to product behavior, not just visual design. Its strength lies in creating prototypes that respond to user input, simulate real product logic, and feel closer to a working app than a mockup.

Designers using Lovable are often validating UX flows, testing interaction-heavy concepts, and collaborating closely with PMs and engineers.

Here’s a very powerful prompt:

Act as a UX concept architect translating raw ideas into structured wireframes.

Requirements:
– Interpret the provided text description and break it into clear page sections (hero, features, CTA, navigation, etc.).
– Define hierarchy, spacing intent, and content grouping as if preparing a wireframe for Figma.
– Describe component placeholders (images, headings, body text, buttons, icons) with size and importance notes.
– Ensure layout logic is responsive-friendly (desktop-first but adaptable).

Context:
– This is an onboarding flow for a productivity app.
– The goal is to guide users from signup to first task completion.

Output:
A structured, section-by-section wireframe blueprint written in an HTML-like or Figma-friendly format.

It has a slightly steeper learning curve than pure design tools, but in return, it produces far more realistic, decision-ready prototypes.

Chatbots (where ChatGPT fits for designers)

These are adjacent tools. They don’t replace design platforms, but they significantly shape how designers think, explore, and communicate ideas.

ChatGPT is particularly strong at helping designers:

• Translate vague ideas into structured flows

• Write and refine UX copy

• Generate user scenarios, edge cases, and micro-interactions

• Sanity-check IA, navigation, and user journeys

Here’s a prompt to quick hack it:

Act as a senior UX designer helping me clarify a product concept.

Context:
– I’m designing a feature for a habit-tracking app.
– Users often drop off after the first week.

Task:
– Identify 3–5 UX problems that could cause early drop-off.
– Propose interface-level solutions (not business logic).
– Suggest micro-interactions or feedback moments that reinforce habit formation.

Output:
A clear, structured breakdown that I can directly translate into screens and flows.

It can also generate basic front-end code or prototype logic, but most designers don’t use it as a place to iterate visually. Instead, they use it to think faster before designing.

Claude, with its Artifacts system, allows designers to view and run small prototypes or UI concepts directly inside the chat. However, it’s best suited for single-file experiments and quick explorations, not ongoing iteration.

2. How these tools change the design process

So now the question comes that with these new AI design & prototyping tools, how should designers actually be using them?

The biggest shift isn’t speed; it’s where design work happens in the product lifecycle. For years, design has been treated as a phase; AI is turning it into a continuous layer.

But let’s look at what changed.

The old way: design as a phase

Here’s what most design workflows have looked like for the past decade:

Ideation

Ideas live in documents, whiteboards, or loose conversations. Designers rarely prototype at this stage — only a small minority do (~10%). Most ideas remain abstract.

Planning

Designers produce early sketches or low-fidelity wireframes. Prototypes exist, but they’re often static and incomplete. Real interaction is postponed.

Discovery

In many teams, this phase is skipped entirely. Where it does exist, research relies on explanations instead of experiences.

Design exploration

This is where design finally “starts.” High-fidelity screens are created in Figma, often without validation of the underlying flow.

Handoff

Design is passed to engineering as static files. Engineers reinterpret intent and rebuild everything from scratch.

Iteration

Feedback cycles are slow. Changes require redesign, re-alignment, and re-implementation.

This workflow made sense when prototyping was expensive. But AI has fundamentally changed that cost.

The new way: design as the interface to thinking

Forward-thinking design teams are now using prototypes throughout the entire process, not just at the end. Design is no longer the output but it’s the language.

Here’s how the new workflow looks.

1. Ideation → from thought to interface

Designers are using AI tools to:

• Explore multiple directions quickly

• Visualize ideas before committing to structure

• Test assumptions visually instead of verbally

How designers do this today:

• Use ChatGPT to clarify flows, edge cases, and UX logic

• Generate early layouts using Figma Make or v0

• Treat outputs as disposable thinking, not final design

Try this prompt:

Act as an experienced UX designer.
Help me explore three different ways a user could complete the following task:
[describe the task]

Focus on flow logic and user thinking, not visual design.

For each approach, explain:

1. User mindset
How the user expects this task to work

2. Starting point
What triggers the flow and where the user begins

3. Step-by-step flow
Key steps, decisions, and branches
Where users might hesitate or get confused

4. Tradeoffs
What this approach does well
What it gives up

5. Edge cases
Common mistakes or drop-off points
How the system helps users recover

After outlining all three, briefly:
- Compare the approaches
- Call out the main assumptions behind each
- Suggest what to prototype first to validate them

Treat these flows as thinking tools, not final UX.

2. Concept development → from screens to systems

Once a direction feels promising, designers shift from exploration to structure. This is where AI helps designers:

• Establish hierarchy

• Compare layout approaches

• Reduce time spent on repetitive setup work

Typical tools:

• Figma Make for system-aligned exploration

• v0 for pressure-testing visual polish

3. Discovery → let users experience the idea

Instead of explaining ideas, designers now show them. AI-powered prototypes allow teams to:

• Validate flows with real users

• Identify confusion early

• Test interaction logic, not just layout

Tools that shine here:

Read more

Subscribe now

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free.

This newsletter is proudly supported by Appy AI.

Turn your design instincts into income. Appy AI helps you package your expertise into AI-powered tools that handle the busywork—like research, accessibility checks, and design reviews — so you earn money while clients get faster, sharper decisions powered by your taste.

Build & sell your first design agent

Hi friends,

As someone who works closely with designers and founders, I’ve noticed something interesting: Designers aren’t overwhelmed because design is hard…

They’re overwhelmed because context is never in one place.

Every design team has a universe of unwritten rules: the tiny system decisions, the invisible preferences, the “don’t do this again” mistakes, the visual quirks only insiders understand. 🥹

And no matter how talented the designer is, they waste hours every week simply recreating the same mental map: where the tokens live, how the components behave, why a past decision was made, which version is the right version, and what the brand is trying to express right now.

A few days later, I ended up chatting with a design manager who told me something similar:

“We don’t need more tools. We need something that remembers everything we forget.”

And that’s when it clicked for me.

Designers don’t need AI for inspiration; they already have that. They need AI for structure, memory, consistency, and speed. They need a partner that remembers the rules they keep forgetting, catches inconsistencies they no longer see, and understands the brand as deeply as the team does.

Not a generic design bot. Not an AI that spits out templates. But a Design Copilot that knows your brand, your system, your files, your patterns, your way of thinking.

So this newsletter is about exactly that: how to build a Design Copilot that behaves like a senior teammate — one that you can onboard, train, and collaborate with the same way you would a real designer.

By the end of this newsletter, you’ll learn how to:

• Set up a design AI copilot with clear personality and behaviors

• Train it on your brand, design system, and team rituals

• Build an AI memory using your documents and assets

• Create initiative-specific threads for real design work

• Use AI for critiques, explorations, audits, and decision-making

This post is inspired by Lenny’s copilot for product managers!

Let’s dive in.

What can a design copilot actually do?

A design copilot isn’t about replacing creativity — it’s about expanding what designers are capable of. One design lead told me something recently that reminded me of a quote I love:

And that’s exactly where a copilot becomes transformative.

Once design teams build a copilot that understands their brand system, tokens, rules, and patterns, they stop using AI for “quick answers” and start using it to think with them. Designers use their copilots to explore directions, challenge assumptions, analyze flows, and apply design principles with more clarity than they could alone.

Their copilots help them brainstorm creative territories, refine concepts, surface edge cases, and identify where a journey feels confusing or incomplete. They use them to run pattern analysis, evaluate hierarchy, compare variations, and articulate rationale when the work is still rough and fragile.

And suddenly, the things that used to feel heavy no longer do.

Because once the copilot knows your components, your naming conventions, your brand personality, your spacing rules, your accessibility guidelines, and your team’s taste, it becomes a partner that handles the operational burden designers were never meant to carry.

Design teams use these copilots to generate clean documentation, normalize tokens, draft UX copy in their brand voice, and prepare handoff notes that engineers actually understand. And because the copilot holds living context, the real details of the team’s evolving system, designers are often one message away from getting a polished, structured spec they can paste directly into Figma or Notion.

And yes, copilots also handle the work designers avoid admitting takes too long: writing review templates, auditing inconsistencies, rewriting messy rationale into clear storytelling, summarizing scattered feedback, and catching the spacing, color, and accessibility issues no one had time to look for.

One team built a copilot that teaches junior designers their system. Another built one to standardize critique. A third created a cross-functional version that helps product managers understand design principles. And a designer I spoke to last week used her copilot to onboard into a new company>

How to build your design copilot?

Most people think building a design copilot means doing something technical. It doesn’t. If anything, it’s closer to onboarding a new designer than configuring a tool.

We’ll use any LLM system that supports projects with persistent memory: ChatGPT Projects, Claude Projects, Gemini Gems, or even M365 Copilot.
The platform doesn’t matter. The process does.

Think of it like this: You’re not “setting up an AI.” You’re hiring someone who will sit beside you on every project.

Step 1: “Hire” your Design Copilot

The first step is to create a new project. Give it a name that feels like you’re adding a real human to the team, something like “Design Copilot — Brand X” or “ABC’s Design Partner.”

Every copilot begins with a project space — a container where it can store context, understand your world, and behave consistently over time.

Inside the project, your job is to “hire” a design partner by defining who they are, what they value, and how they behave. Most people skip this part and then wonder why the AI “doesn’t get” their brand. This step is the equivalent of writing a hiring brief for a senior designer: you’re defining their craft sensibilities, their temperament, the type of critiques they deliver, and the standards they uphold.

Here’s how you “hire” it:

Create a new project

You’ll do this using the project’s persistent instructions, your copilot’s operating system.
These are far more durable than any chat prompt. Use this space to tell your copilot that you want a partner with opinions, not a neutral assistant. Tell it to prioritize brand fidelity, design-system consistency, and accessibility. Tell it to call out weak reasoning, to push you on tradeoffs, and to balance craft against speed. Be clear about when you want expansive ideation versus production-ready clarity.

These instructions should reflect your team’s design philosophy: the principles you adhere to, the quality bar you expect, and the cultural norms that matter. And remember, this isn’t static.

Set its personality & role

To make this easier, paste the following starter prompt into your project instructions. Replace the placeholders with what’s specific to your design role, your company, and your design system:

I am a [your role] at [company name], and you are my senior design partner — an expert in product design, brand systems, visual craft, UX strategy, and interaction patterns. Your role is to collaborate with me, challenge my thinking, and elevate the quality, clarity, and coherence of all design work we produce together.

I will provide you with information about our brand, design system, product constraints, user research, team rituals, stakeholder expectations, and our broader company strategy. This includes our brand voice guidelines, component libraries, accessibility standards, and any past design decisions that shape our current workflows.

In each conversation, I will share the specific design problem or initiative we’re working on so you can help me reason, explore, critique, and refine. You should proactively ask clarifying questions when needed, surface missing context, and offer informed alternatives — always explaining the rationale behind your suggestions.

I expect you to:
• call out inconsistencies with our design system, tokens, or brand principles
• provide accessible and inclusive design recommendations by default
• challenge weak reasoning, unclear intent, or design decisions without rationale
• offer multiple options when useful, and make tradeoffs explicit
• ground recommendations in usability heuristics, pattern libraries, and user needs

Encourage me to: [list behaviors you want to strengthen — e.g., documenting rationale, exploring variants, testing assumptions, pushing for clarity, prioritizing accessibility, referencing patterns before inventing new ones]

I want you to balance: [describe preferred collaboration style — e.g., craft rigor with speed, creativity with practicality, friendly honesty with constructive critique, playfulness with precision]

This is your Copilot’s “operating system.”
Everything it does will align with this definition.

Tell it how you want it to behave

Most teams don’t do this, but it makes a massive difference.

Examples you can add:

• “Be proactive when you see inconsistencies — call them out.”

• “Always reference our existing patterns before suggesting new ones.”

• “If my reasoning is weak, challenge it.”

• “When I ask for feedback, evaluate hierarchy, spacing, and accessibility by default.”

• “Prefer clarity over cleverness in UX writing.”

When you specify the expectations, the copilot becomes predictable — not chaotic.

Permit it to think with you

The biggest shift teams make is understanding that a Design Copilot is not an assistant — it’s a collaborator.

You want it to:

• ask questions

• critique ideas

• highlight risks

• provide alternatives

• help you explore direction

If you don’t permit it to challenge you, it will behave passively.
If you do, it will start shaping your design thinking.

This step is the foundation

Once you’ve “hired” your copilot, every other step becomes easier.

Because now, instead of acting like a tool, it acts like a designer with context:

• It remembers your patterns.

• It understands your brand voice.

• It keeps track of your naming conventions.

• It knows what “good” looks like for your team.

Step 2: Onboarding design copilot

Once you’ve “hired” your copilot, the next step is to teach it everything you’d teach a real designer in their first week. A copilot is only as strong as the context you give it — and most teams dramatically under-onboard their AI tools.

Think of this the same way you would onboard a senior designer joining your team. What do they need to understand before they touch a single Figma file or weigh in on an initiative? What foundational context informs all design decisions across the team, independent of specific projects, deadlines, or stakeholders? This is the material you’ll upload to your project knowledge.

Brand context (what your copilot should feel)

This is where you transfer the soul of your brand:

• Tone of voice:
  Is your brand calm and timeless? Bold and expressive? Clinical and minimal?
  Upload real examples — landing pages, campaign headlines, microcopy — so your copilot learns the texture of your brand.

• Tagline principles:
  If your brand stands for “effortless elegance” or “precision engineered for trust,” your copilot needs to internalize those concepts and reference them in critiques.

• Visual identity philosophy:
  Explain why your brand looks the way it does:
  “We avoid drop shadows unless necessary,”
  “Photography is always human-first,”
  “Motion is slow, intentional, and smooth.”

• Examples of ‘perfect’ designs: Your copilot learns extremely fast when you show it: “This is what good looks like.” Add 3–5 Figma exports or screenshots you’d show a junior designer on day one.

Here are some examples of valuable context for your Design Copilot:

• Your brand guidelines (PDF export)

• Your design system documentation, token library, and component references

• Product principles and design philosophy decks

• Your Figma files exported as PDFs (brand library, core patterns, UI kit)

• Accessibility guidelines your team follows

• User research insights and personas

• Competitor UX/visual audits

• Product strategy, roadmaps, quarterly planning docs

• Team rituals, critique frameworks, and review processes

• Any design rationales or “why” documents from past decisions

If you don’t have much documentation, no problem. Ask your LLM to interview you to fill the gaps. Think of this like sitting down with a curious new colleague who wants to understand your brand, your users, and your design constraints as quickly as possible.

Use a prompt like this:

Please review what I’ve shared with you so far and ask me sequential questions to help complete your understanding of our brand, design system, product, and design culture.

Focus on foundational, long-lasting knowledge that will help you support me across all present and future design initiatives.
Focus less on temporary variables (e.g., sprint resources, short-term deadlines, individual personalities).

Your goal is to fill gaps in areas such as:
• brand identity & visual direction
• design tokens, components, and rules
• accessibility expectations
• user needs, behaviors, and pain points
• product purpose & long-term vision
• principles we use to make design decisions

Ask me your questions one at a time, starting with the most crucial.
I will answer in detail so you can build accurate shared context.

When we finish, create a document with only the new information you learned during this conversation.
Do not include any remaining gaps or questions — only confirmed knowledge.
Use my exact phrasing for important insights.
Format it cleanly so I can upload it directly into project knowledge.

Team expectations (what your copilot should enforce)

This is the “culture” part — the unwritten rules every design team secretly has:

• Review criteria:
  What does your team evaluate first?
  Clarity? Craft? Alignment with brand? Conversion logic?

• Definition of ‘done’:
  Some teams require QA-ready designs. Others require motion specs. Others require prototypes.
  Tell your copilot, so it holds you to the same standard every time.

• Non-negotiables:
  The rules no one is allowed to break, ever.
  “Buttons never exceed 12 characters.”
  “Primary CTA always uses the brand blue.”
  “We never introduce new iconography without approval.”

• Banned patterns:
  Every team has a list — even if they pretend they don’t.
  “No dropdowns for more than five items.”
  “No ghost buttons on dark backgrounds.”
  “No full-width modals on mobile.”
  Upload these. Your copilot will instantly flag them.

Once your copilot generates the document, download the file and upload it into the project knowledge.

You’ve now given your Design Copilot the same onboarding any thoughtful senior designer would get in their first week — enough to make informed, consistent, brand-aligned design decisions moving forward.

Step 3: Kick off a project

Now that your Design Copilot is fully onboarded with your brand, design system, and team expectations, it’s time to bring it into real projects. Think of this like giving a new senior designer their first assignment—they know the team, the rules, the style, and the standards—but now they need context about the specific work.

Create a dedicated chat thread for each project

Treat every initiative like its own “workspace.”

Examples:

• Redesigning the onboarding flow

• Revamping the product page

• Launching new design tokens

• Preparing a campaign microsite

Why separate threads? Because each initiative has its own context, stakeholders, and constraints. Your copilot can track every nuance and decision without getting overloaded or mixing up projects.

Start with a messy brain dump

Here’s your starting prompt (customize it!):

Read more

Subscribe now

For those who care about making wonderful things for each other and elevating human experiences through design. Or will, one day.

Dear readers,

This essay took me six months to reflect on and write.

But I think it’s worth it, very close to heart - what I wish someone had told me earlier, both as a founder and a designer.

Read on.

After startups raise their first round, one of their first hire is usually a founding designer. It turns out this is also one of the hardest to get right, and it has consequences if founders get it wrong. In a world where software is commoditized, good taste will be the differentiator, and much of taste comes from the first designer you hire.

If you don’t hire your first designer well, you will not have a great outcome in product when you’re ready to grow. There is probably no way any good startups can run long without a good designer in 2025 onward. It’s easy to delude yourself that a founder has the best taste, but that doesn’t often scale.

In this essay, you’ll get deep insight into:

1. When to hire

2. What you’re looking for

3. How to evaluate portfolios

4. How to interview designers

5. Bad design hires

6. Common mistakes working with designers

Here are honest, hard-won lessons on hiring founding designers:

*When to hire

Earlier than you think, but later than most designers tell you. The common wisdom I argue against is “get a designer before PMF.” This is wrong. The uncommon wisdom is “you don’t need design at all, look at Craigslist.” This is also wrong in 2025, but less wrong than you’d expect.

Is there a right time? Yes, it falls between having early traction and the experience itself becoming the bottleneck to growth. In a case like: strong retention, but weak onboarding, is churning out many leads. The best way to think of it is: when you have users who want to do a thing in your product, and what you’ve built is preventing them from succeeding at scale.

But don’t be tempted to hire just because the interface looks ugly or users complain about accessibility (unless you’re in this market).

If you’re pre-PMF and spending time on design hiring, you’re wasting precious time. If you’re not a designer, my advice is to take help from designer friends, but don’t make it a formal hire yet. Most founding teams waste time hiring a designer at 3 months when they should be hiring one at 6 months.

The forcing function should be: “We understand what users need to accomplish, we have evidence they want to accomplish it in our product, and our current design makes this harder than it should be in measurable ways.” If you can’t articulate this, you’re too early.

One exception: if your product is fundamentally a design product (design tool, creative software, consumer social), you need design as a first hire. You already know this. If you’re reading this section, wondering if you’re the exception, you’re not.

*What you’re looking for

This is probably the biggest question my founder friends ask me.

You’re looking for someone who thinks like a product person but crafts the details like a designer. This is way rarer than you think.

The profile you want is: opinionated about problems, highly in tune with users (intuition and data), high craft, high product sense, and thinks about business. A fair warning, often most good designers miss the last part. Your first designer needs to have the confidence to ignore just product visuals, but the judgment to know what’s MVP and what’s premature optimization.

Here’s the parallel to software engineer: you wouldn’t hire a Google SRE to be your first infra hire. They’re great at operating mature systems at a massive scale, but they’ll over-engineer everything and move too slowly. You want someone who’s built 0-1 before, probably at a startup, definitely not someone whose entire career has been at FAANG.

“The most common error of a smart engineer is to optimize a thing that should not exist.” - Elon Musk. I’d argue the same for designers.

Red flags that founders miss: someone who talks a lot about process, design systems, research operations, or team rituals. That’s all important at scale. Right now, you need someone who can look at a problem, prototype a solution in a day, test it with 5 users, and ship the winner by the end of the week. Process people are hire #3 or #4, not hire #1.

Green flags you should look for: They ask about your metrics. They want to understand your business model before they look at your product. They’ve shipped products that real people use, even if those products are dead now. They have strong opinions about design patterns, but change their mind when shown data. They can vibe code, at least a little, to prototype.

The best designers I’ve seen are people who share the same trait as great product managers. They understand business context, they prioritize ruthlessly, and they have taste. The worst founding designers are people who want to make beautiful things and think user research means asking their friends (yes, this really happens…).

You want someone who says, “I looked at your signup flow and 60% of users drop off at step 3, here’s why,” not “I have some ideas to make the homepage more engaging.”

*Generalist vs specialist

You will need a generalist.

Your first designer needs to do product design, visual design, basic user research, write copy, make the icons, vibe code a little, and probably build the design system later. They need to own the entire experience from positioning to pixels. If they can’t do all of this at a baseline level of competence, they’re not your first design hire.

Most importantly, they must be good enough at all of it as a foundation to be dangerous enough. The classic example of this was when I branded and designed Gotrade (YC S19) “Robinhood of Southeast Asia” entirely as the first designer. Another good friend, Hannah Ahn, did the same for Superpower (raised $34M).

The specialist trap is appealing to startups because it mirrors how you think about engineers. You hire a backend engineer, then a frontend engineer. But engineering tasks are more separable than design tasks. A designer who only does “product design” but can’t make things look good is like a backend engineer who writes great algorithms but doesn’t understand databases.

It’s not actually a complete skill set and certainly not what you want in a startup.

Here’s the test: ask candidates what they can’t do. If they say, “I’m not great at visual design” or “I prefer to work with a researcher,” they’re a specialist. If they say, “I haven’t done much motion design, but I can learn it,” or “I’m not an illustrator, but I can create a visual system,” they’re a generalist. You want the second type.

The one specialist you might hire first is a product designer who’s exceptional at thinking through complex interaction problems and decent at visual design. They should be embarrassed to ship something ugly, but willing to do it anyway.

Do not hire a visual designer first. Do not hire a UX researcher first. Do not hire someone who “focuses on strategy.” These are critical skills, but they’re supporting skills for a team of 3-10 designers, not the founding skill set.

Also: be suspicious of designers who describe themselves as “full-stack designers.” This is usually someone who learned Webflow, not someone who can design a complex SaaS application. Generalist means breadth of design skills, not that they can also write production code.

*How to evaluate portfolios

This is where founders panic because they think they can’t evaluate design. Most founders can; they’re just asking the wrong questions.

First, ignore aesthetics entirely - that’s your bare requirement. If you don’t like the aesthetics, just move on. But what you’re evaluating is thinking, not styling.

Here’s the framework: look at each project and ask yourself, “What problem were they solving, how do I know if they solved it, and what were the results?” If you can’t answer this from the portfolio, they’re not showing their thinking. Good portfolios tell you the problem, the constraints, the solution, and the outcome. If it’s just pretty screenshots with paragraphs about their “design process,” skip to the next candidate.

Look for someone who shows their work. Can you see the evolution from bad idea to good idea? Do they show the things they tried that didn’t work? Do they explain why they made specific decisions? They should be able to articulate these if they owned it clearly.

Specific things to look for:

Evidence of product thinking. Do they mention business metrics? Do they talk about technical constraints? Do they explain why they didn’t pursue certain directions?

They look at details. Pick one project and zoom in on the details. How do they handle empty states? What happens when an error occurs? These are tells. Anyone can design the happy path. Great designers obsess over the edge cases.

They have range. They should have solved different types of problems—not just mobile apps, not just web apps, not just dashboards. If everything looks the same, they have one solution they apply to every problem.

Real products that shipped. Be skeptical of everything that’s a concept or a case study for a company they didn’t work at. You want to see things that actual users have used. It’s fine if the product failed, but it should have been real.

Here’s the part founders get wrong: you think you should look for portfolios that match your aesthetic. This is like hiring an engineer because they use the same code editor as you. What matters is whether they can think through complex problems with good principles and make good tradeoffs under constraints. The visual style then comes next.

If you’re looking at a portfolio and thinking, “I don’t know if this is good,” ask yourself: “Can I understand why they made these decisions? Do the decisions seem rational given the problem they described?” Most of the time, you’ll realize you can evaluate this just fine.

*How to interview

Please don’t ask them to redesign your product in the interview; they have no context, and it will unlikely yield any exceptional results – it selects for the wrong skills and designers hate it, too.

Here’s what actually works:

The portfolio deep-dive. Pick one project and go extremely deep. “Walk me through how you decided to solve this problem. What were the alternatives? Why did you reject them? How did you know this was working? If you could do it again, what would you change?” Spend 30-45 minutes on a single project. You’re evaluating their ability to think systematically, make tradeoffs, and learn from outcomes.

You’re not judging whether their solution is the one you would have built. You’re judging whether they can articulate their reasoning, whether they considered alternatives, and whether they understand tradeoffs.

The constraints question. “Tell me about a time you had to ship something that wasn’t as good as you wanted because of constraints. What did you cut and why?” This tells you everything. Bad designers blame constraints. Good designers work within them and know exactly what tradeoff they made.

The metrics question (critical). “How do you know if your design is successful?” If they talk about user satisfaction or qualitative feedback, that’s a yellow flag. If they talk about specific metrics (conversion rates, retention, or revenue growth), that’s a green flag. You want a designer who thinks in growth outcomes in the early days.

I further elaborate on what the most important metrics early design hires should measure. You can read the full thread here.

The product question. “Spend 10 minutes using our product and tell me the three biggest problems you see.” This isn’t about whether they identify the same problems you know about. It’s about whether they can quickly build a mental model of what you’re trying to do and identify gaps between intent and execution. Good designers will ask clarifying questions about your users and your business model. Bad designers will tell you your visuals are wrong.

The technical question. “What’s the most technically complex project you’ve worked on? What made it complex? How did you work with engineering?” You’re looking for someone who understands technical constraints and doesn’t treat engineering as an implementation detail. If they can’t articulate what was technically hard about any of their projects, they probably don’t think about technical constraints at all.

I can confidently say that all great designers who worked in startups have had some form of technical constraints; it’s important to understand how they dealt with it.

The taste/judgement question. “What’s a popular product with great design? What’s a popular product with terrible design? Why?” This tells you about their taste and their ability to separate business success from design quality.

Do not ask brain teasers. Do not ask them to critique your favorite app. Do not ask them what kind of tree they would be. These tell you nothing.

The final question you should always ask: “Why do you want to work on this problem?” Their answer should focus on the problem space and mission, not on your company. The best designers are problem-driven. They want to work on climate or dev tools because they care about that domain. If they just want to work at a startup, any startup, they’re probably not going to stick around.

*Bad design hires

While I write about who you’d want to hire, here’s also a list of bad first designer hires you’d want to look out for generally.

Hiring someone from big tech because they worked on a product you admire. This is the most expensive mistake founders make. That designer at Meta who worked on Instagram they were one of 40 designers on that product. They implemented someone else’s vision within an established system. They’ve never had to build 0-1. They’ll expect a level of process, support, and resources you don’t have.

A rule of thumb is to hire someone who’s been the first or second designer at a startup before.

Caring too much about visual. Your product doesn’t need to look like Linear. Linear looks like Linear because they’ve spent years on polish and hired world-class visual designers. Your product needs to be clear, usable, and solve the problem to deliver outsize value. Pretty comes later. If a candidate’s portfolio is all style and no substance, they’re optimizing for the wrong thing at your stage.

Slow speed to production. Lots of designers are great at thinking and terrible at fast, high-quality execution. Ask them: “What’s your typical timeline from ideation to complete design handoff?” If they say anything longer than 2 weeks for most projects, they’re too slow for you. Early-stage startups need people who can iterate in days.

Hiring someone who needs a lot of direction. Your first designer needs to be extremely self-directed because you don’t know how to direct them. If they’re asking you what to work on next or waiting for you to review things, you’ve hired wrongly; fire them fast. You need someone who will come to Monday’s standup and say, “I identified these three problems, here’s what I’m prioritizing and why.”

The inverse trap. “Design is subjective so I can’t evaluate it.” Design is never subjective, art is. Good design measurably improves outcomes. It reduces support burden. It increases conversion. It makes complex things simple. Design is about solving problems under constraints and doing it elegantly.

Hiring too early and hiring too late. You’ll hire too early because other founders/X told you to. You’ll hire too late because you don’t think it’s important. The right time is when your interface is measurably preventing growth. Not when it’s ugly. When it’s preventing users from doing what they need to do.

*Common mistakes to avoid

Not involving them in product decisions. The biggest mistake post-hire: treating your designer as a contractor who makes things look good. Your first designer should be in every product conversation, every user interview, every roadmap discussion. They should have opinions about what you build, not just how it looks. If you find yourself saying “just design what I specced,” likely, you’ve hired the wrong person or you’re using them wrong.

Expecting them to understand your business without explanation. You need to teach them everything you know about your users, your market, your business model, your technical constraints. The best designers ask questions constantly. If they’re not asking questions, they’re either genius (even geniuses ask questions) or they’re just executing without thinking. It’s usually the latter.

A final note on compensation: don’t lowball your first designer. The market rate for a senior product designer at a startup is $140-200k base plus meaningful equity (0.5-1.5% at seed stage). If you’re paying less than this, you’re hiring someone who couldn’t get a market-rate offer. There are exceptions, but they’re rare. Design talent is as expensive as engineering talent. Budget accordingly.

The best first design hires I’ve seen came from founders who treated design hiring like they treat engineering hiring: rigorously, with clear evaluation criteria and high standards. You can evaluate design. You just need to evaluate the right things. Focus on thinking, not aesthetics. Focus on outcomes, not process. Focus on solving your actual problems.

Founders still tend to undervalue design until it’s too late, then overvalue it and hire the wrong person. Hire when you need it, hire a generalist who can ship, increase their quality of thinking rather than only style, and treat them as a core product partner.

I hope you get your first design hire right.

Thank you to Almas Sapar, Zeth Lee, Gerald Chan, Hannah Ahn and Alexis Wynn for helping read the draft.

If you find this essay useful, please give this by sharing it forward — with your thoughts too. 🔄 I’m sure founders & teams can benefit from hiring extraordinary designers.

Share

Thank you for reading. If you have any questions/comments, you can find me on X and LinkedIn.

Subscribe now

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free.

Hi friends,

Over the past few months, I’ve been speaking with numerous designers from various agencies and startups. And I noticed a pattern: designers love their jobs but are drowning in the tasks around design.

It usually starts casually with someone venting about tight deadlines, messy Figma files, endless feedback loops, or another late-night sprint polishing microcopy for the hundredth time.
And every single time, I ask them the same question:

“But… why aren’t you automating this with AI?”

And there is always a random answer like “I know AI is everywhere, but I still don’t really trust it with my actual design work”, or “I don’t want my work to feel generic”, or my personal favorite, “I don’t even know what to ask it to do.”

Honestly, I get it.

A few weeks ago, I was on a call with a friend who was drowning in a project. She had 150+ layers to rename, multiple breakpoints to create, documentation to write, and a client presentation to finalize.

Designers aren’t struggling because the work is hard. They’re struggling because the boring parts keep getting in the way of the meaningful parts.

So I started digging deeper.
I interviewed designers.
I shadowed their workflows.
I asked what they wished they could eliminate, speed up, or hand off entirely.

And almost every designer admitted something quietly:

“If I could automate 30% of my tasks, I’d finally have time to think, explore, and design better.”

So that’s what this newsletter is for.

Below, I’m going to walk you through 40 specific designer tasks you can automate with AI, like

• AI renaming hundreds of messy layers into clean, consistent, designer-friendly labels

• AI rewriting inconsistent UI copy right inside a component library

• AI checking whether a layout will break across tablet or mid-size screens

• AI generating clean, shareable documentation straight from a Figma file

• AI organizing and cleaning up color tokens

• AI writing developer-ready annotations

• AI converting a desktop-only layout into a mobile-friendly version

• AI turning chaotic brainstorm notes into polished moodboard descriptions

By the end, the goal is simple:
You’ll walk away with a toolkit that removes hours of boring work from your week, so you can spend more time doing the part you actually love: designing.

Let’s dive in.

1. Generate wireframes from text or ideas

What it solves
Designers spend hours translating concepts into initial wireframes. AI can speed up ideation by creating structured layouts from descriptions.

Example
Text input: “Create a landing page with hero, 3 feature sections, and CTA footer.”
AI generates a structured wireframe with placeholders for images, text blocks, and CTA buttons.

Prompt

“Act as a UX concept architect translating raw ideas into structured wireframes.

Requirements:
– Interpret the provided text description and break it into clear page sections (hero, features, CTA, navigation, etc.).
– Define hierarchy, spacing intent, and content grouping as if preparing a wireframe for Figma.
– Describe component placeholders (images, headings, body text, buttons, icons) with size/importance notes.
– Ensure layout logic is responsive-friendly (desktop-first but adaptable).

Output: A structured, section-by-section wireframe blueprint written in an HTML-like or Figma-friendly format.”

Example Output:

Tools

• Uizard

• Galileo AI

• Diagram Automator

2. Create multiple layout variations

What it solves
Generating alternatives for A/B testing or client options can be tedious. AI creates multiple layout options in minutes.

Example
A landing page with 3 hero designs: stacked, grid, or split-screen. AI outputs 3 variations automatically.

Prompt

“Act as a creative layout strategist generating multiple UI variations for testing.

Requirements:
– Produce 3 distinct visual layout interpretations of the same content.
– Keep the core hierarchy intact, but alter grid usage, content alignment, density, spacing rhythm, and visual weight distribution.
– Highlight what’s unique about each variation and what design principle it emphasizes (e.g., clarity, storytelling, conversion).

Output: A comparison table listing: Layout → Structural Approach → Key Differences → Use Case.”

Example Output:

Tools

• Figma Variants + AI Plugin

• Galileo AI

• Uizard

3. Transform desktop → Mobile designs

What it solves
Manually converting screens to mobile is slow and error-prone. AI automates responsive adjustments.

Example
Desktop homepage → Mobile-friendly design with stacked components, reduced padding, and resized text.

Prompt

“You are a responsive design specialist translating desktop screens into mobile layouts.

Requirements:
– Convert the given 1440px layout into an optimized 375px mobile structure.
– Define stacking rules, padding adjustments, typography scaling, image resizing, and interaction changes.
– Identify which elements should collapse, reorder, or convert to mobile-first patterns (carousels, accordions, etc.).

Output: Mobile version blueprint with a section-by-section explanation of layout and behavior changes.”

Example Output:

Tools

• Uizard

• Galileo AI

• Figma Auto-Layout

4. Write tooltips & microcopy for forms

What it solves
UX copy is inconsistent or unclear. AI generates concise, helpful tooltips for users.

Example
Fields like “API Key” or “Webhook URL” receive clear, actionable tooltips.

Prompt

“Act as a UX copywriter specializing in clarity-oriented microcopy.

Requirements:
– For each form field provided, write a tooltip (max 15–18 words) explaining purpose, required action, or context.
– Use simple, user-friendly language and avoid jargon.
– Maintain a helpful, supportive tone informing users what they should do and why.

Output: Table: Field Name → Tooltip → Rationale.”

Tools

• Writer.com

• Claude / ChatGPT

• Notion AI

5. Organize scattered brainstorm notes

What it solves
Early design ideas are often messy. AI turns scattered notes into structured insights.

Example
Handwritten notes → Moodboard descriptions, research themes, user flow suggestions.

Prompt

“You are a synthesis expert transforming chaotic brainstorm notes into structured design direction.

Requirements:
– Categorize raw notes into themes: visual style, layout ideas, functional insights, tone, UX opportunities.
– Identify repeated patterns, core concepts, and missing connections.
– Suggest potential moodboard concepts, early user flows, and content groupings based on the notes.

Output: A structured summary grouped into Design Themes, Layout Ideas, Content Buckets, and User Flow Suggestions.”

Example Output (Chatgpt + Miro):

Tools

• Notion AI

• Miro + ChatGPT

• Perplexity AI

6. Auto-generate high-fidelity concepts from wireframes

What it solves: Converting rough wireframes into polished screens is repetitive. AI speeds up refinement.

Example: Wireframe hero section → polished design with spacing, typography, and imagery applied.

Read more

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free

Subscribe now

Friends,

Today’s post will give you a preview of 2026.

The 31-point gap nobody’s talking about on (Figma AI Report 2025).

Here’s the most revealing stat from Figma’s latest AI Report: 78% of designers say AI makes them more efficient, but only 47% say it makes them better at their role.

That 31-point gap tells you everything about where we are with AI in design right now.

Over 3,000 designers and developers shared how they’re actually using AI in 2025—not the hype, not the speculation, but the messy reality of shipping AI-powered products. And the data reveals something surprising: the teams winning with AI aren’t the ones using it the most. They’re the ones who fundamentally changed how they work.

More Figma users are shipping AI products than last year.

This year, 34% of Figma users say that they’ve shipped applications and software that includes generative AI compared to 22 % last year. Meanwhile, 56% of Figma users report their companies are integrating AI into their existing products this year, and 43% are creating new products with AI capabilities .

Let me break down what actually matters in this report.

The Trust Problem Is Real (And Getting Worse)

Only 32% of designers trust AI output. This is the lowest score across every metric Figma measured.

Think about that for a second. One in three designers trusts what AI produces. Yet most of us are using it daily. We’re in this weird limbo where AI is embedded in our workflows, making us faster, but we’re constantly second-guessing everything it produces.

The trust gap gets even wider between disciplines. 68% of developers say AI improves their work quality. Only 40% of designers agree.

Why the disconnect? Design work is fundamentally more subjective. A developer can run tests to verify AI-generated code works. A designer? You’re evaluating if a layout “feels right” or if copy “sounds on-brand.” That’s harder to verify, harder to trust, and harder to defend to stakeholders.

This creates a real problem: If you can’t trust the output, you spend more time reviewing than you save by generating. The efficiency gains evaporate.

The Paradox: More AI Products, Same Expected Impact

Here’s what should make you pause:

The percentage of teams shipping AI products jumped from 22% to 34%—a 55% increase. But the number of people who believe AI will significantly impact their work barely moved: from 23% to 27%.

Translation: We’re shipping more AI features, but we’re not more convinced they matter.

This isn’t necessarily bad news. It might actually signal something healthy: designers are moving past the hype phase into the “let’s see what actually works” phase. The novelty is wearing off. We’re getting pragmatic.

But it also suggests something troubling: many teams might be shipping AI features because they feel they have to, not because they’ve solved real user problems.

For small companies, this pressure is intense. The importance of “AI features” for market share tripled among smaller teams. If you’re competing for attention and funding, you need an AI story. Whether that AI actually improves your product is almost secondary.

The Real Shift: From Copilots to Agents

While everyone was focused on “AI is making us faster,” the real transformation happened quietly in the background.

The percentage of teams building agentic AI more than doubled—from 21% to 51%.

This is the actual story. We’re moving from AI as a tool you direct (copilot) to AI that can complete multi-step tasks independently (agent). That’s not an incremental change. It’s a fundamental shift in how products work.

What this means for designers:

You’re no longer designing interfaces for humans to complete tasks. You’re designing systems where AI completes tasks and humans verify, redirect, or intervene. The entire interaction model is inverted.

Most designers aren’t ready for this. Our training, our processes, our tools—they’re all built for human-directed interfaces. Agentic AI requires designing for delegation, error handling, and trust calibration in ways we haven’t systematized yet.

“52% of designers say design becomes MORE important for AI products”

This tracks. When the AI is doing the heavy lifting, the interface design becomes critical. It’s the difference between AI that feels magical and AI that feels frustrating.

The One Thing Successful Teams Do Differently

Here’s the data point that matters most:

75% of successful AI products came from teams with tight design-development collaboration.

But here’s the kicker: 81% of teams whose process was “significantly different” from their usual workflow were successful.

Connect those dots. The winning formula isn’t just collaboration—it’s changing how you collaborate.

What “significantly different” actually looks like:

Based on the patterns in successful teams, here’s what changed:

1. Earlier technical involvement: Designers and developers are pairing during exploration, not just handoff. When you’re designing for AI capabilities, you need to understand what’s actually possible—not just what’s theoretically cool—before you commit to a direction.

2. Faster iteration cycles: AI features are harder to get right through traditional specs. Successful teams are prototyping with real models, testing with actual output, and iterating based on what the AI actually does—not what they hoped it would do.

3. Shared evaluation criteria: When 68% of developers think AI improves quality but only 40% of designers agree, you need explicit conversations about what “good” looks like. Successful teams defined these criteria together, upfront.

4. New review processes: That 32% trust problem? Successful teams built new review workflows specifically for AI-generated content. They’re not treating AI output the same as human work.

The Skills Gap Nobody’s Preparing For

85% of designers say learning AI skills is essential to their future success.

But here’s what the report doesn’t say: most designers are still figuring out what those skills even are.

Is it prompt engineering? Understanding model capabilities? Designing evaluation frameworks? Training data literacy? All of it?

The honest answer: we don’t know yet. The field is moving too fast.

But here’s what we do know:

The designers who are succeeding with AI aren’t necessarily the most technical. They’re the ones who are comfortable with uncertainty, who iterate quickly, and who’ve built strong cross-functional relationships.

Those “soft skills” everyone said were important? They’re now table stakes. You can’t ship good AI products in a silo. The gap between design vision and technical reality is too large to bridge alone.

What To Actually Do With This Data

If you take nothing else from Figma’s report, take these three actions:

Read more

Subscribe now

For more: 🏛️ Get free 1:1 mentorship | ⭐️ Be first to win in career as an AI-First Designer | 📘 Claim your AI Design Guide for free

Hi friends,

Over the past few years, working alongside designers, marketers, and builders experimenting with AI, we’ve noticed something fascinating: a clear difference between those who merely use AI tools and those who build with them.

So, while most people still approach their creative or strategic work in a straight line (brief → execute → deliver → move on), the best AI-first builders operate in loops. They design, test, tweak, and automate, again and again, constantly learning from every iteration.

It’s this cyclical rhythm that gives their work its distinctive edge like, sharper ideas, faster execution, and outputs that evolve instead of stagnate.

Introducing D.I.A. Framework — short for Design, Iterate, Automate. It’s a mental model for building with AI rather than against it, for learning faster, creating smarter, and scaling effortlessly.

And once you start to see work through this lens, it changes everything.

Why does “Design” come first?

The challenge most people face with AI isn’t the lack of tools; it’s the lack of clarity.
AI amplifies whatever you feed it, which means that unclear thinking produces unclear results faster.

That’s why Design is the first step of the D.I.A. Framework.
And by “design,” we don’t just mean aesthetics or interface. We mean intentional thinking, like the act of shaping problems before solving them.

At this stage, the goal isn’t output. It’s orientation.
You need to pause before you act, and ask:

• What am I really trying to achieve here?

• What constraints or principles will guide this?

• What role should AI play — assistant, collaborator, or challenger?

This is where human intelligence sets the foundation for machine intelligence.
You’re not telling AI what to do; you’re designing a system of collaboration that guides how it learns with you.

In traditional workflows, design is often a static phase — you finish the blueprint, then move on to execution.
But in the D.I.A. model, design is alive. It evolves through each loop. Every iteration feeds back into how you think about the problem, refining the frame, sharpening the goal, and improving the questions you ask next.

Because ultimately, AI is only as good as your curiosity.

Iteration: turning feedback into intelligence

Iteration is where most people give up too early.

When using AI, your first output will almost never be your best. But that’s the point.
The goal isn’t to get a perfect result; it’s to use each result as a mirror that reflects how your thinking can evolve.

In this phase, speed becomes a teacher. You’re not judging outputs as right or wrong; you’re using them to learn, refine, and adapt.

• A product designer might generate 50 wireframes and study which patterns feel most intuitive.

• A writer might prompt 10 different openings for the same idea, comparing rhythm, tone, and structure.

• A marketer might test 20 headlines and find the subtle emotional cues that drive response.

What unites them isn’t the tool, but it’s the loop.

Each round of iteration creates data, not just for the AI, but for you.
It helps you see your assumptions more clearly. It exposes what you didn’t know you didn’t know.

And slowly, through this feedback loop, the line between “human learning” and “machine learning” begins to blur.
You start to realize that both are growing through each cycle.

That’s when AI stops being a tool and starts becoming a thinking partner.

Automation: scaling judgment, not just output

Most people misunderstand automation. They see it as a way to eliminate human input, to make the machine do more, so they can do less.

But for the best AI-first builders, automation is the opposite. It’s about preserving insight, not avoiding work.

Every time you iterate, you gain knowledge — about what works, what doesn’t, and why. Automation captures that. It encodes your judgment into systems so you can move faster without losing thoughtfulness.

In other words: automation isn’t about doing things automatically; it’s about doing them intelligently by default.

For instance, a founder who documents prompts, workflows, and naming systems isn’t building bureaucracy; they’re building compounding intelligence.

In the D.I.A. loop, automation is never the end. It’s the starting point for the next design cycle, a way to free mental bandwidth and make every future iteration faster and smarter.

Thinking in loops

The D.I.A. Framework is powerful because it turns work into a living system.
Instead of isolated projects, you start to see everything as part of a continuous evolution, with ideas feeding ideas, processes improving, and knowledge compounding naturally.

The loop becomes a kind of creative metabolism. Each pass refines your taste, your judgment, and your clarity. Each iteration strengthens both you and your AI.

Part I: Design

Principle: Clarity creates freedom

In human design, we often treat constraints like cages.
In AI design, they’re the opposite; they’re compasses.

AI thrives on direction. It doesn’t find creativity in randomness; it finds it in reference, context, and contrast.

So when we frame our prompt, we’re not just giving instructions; we’re drawing a boundary for brilliance.

Something like:

“Design a homepage that feels serene yet structured — like the calm of a Japanese garden with the order of Swiss design.”

That one sentence gives AI a north star.

It’s the same psychological principle behind the Stanford study on “challenge and support.”
When students received feedback framed as high expectations + belief in potential, their performance skyrocketed.
Design works the same way.
Your AI, like your brain, performs best when the challenge is clear but achievable, when the constraints support exploration, not suffocation.

Here’s how we apply it in design practice:

• Define the goal and the mood. (“Modern minimalism that feels human, not sterile.”)

• Add one unexpected tension. (“Make it playful without being childish.”)

• Give a clear use case. (“It should look good on both mobile and print without losing detail.”)

The tension between clarity and creativity is where truly great design emerges.

The translation principle: Prompts as dialogue

One of the biggest mistakes we see designers make is treating prompts as commands.
But design is never one-way. It’s always a conversation.

Prompts are not about “telling AI what to do.” They’re about asking AI to think with you.

That’s why we treat prompting like sketching.
We start rough, see what emerges, then refine the details. Each prompt is a feedback loop — a call and response between my intuition and the machine’s interpretation.

Here’s the mindset shift:

• Don’t deliver prompts; explore them.

• Don’t expect answers; look for questions.

• Don’t talk at your AI; design with it.

For example, after an initial AI output, I’ll pause and ask:

“Why did this layout feel balanced?”
“What happens if I change the emotional tone?”
“Can I make this idea more human?”

Each of these questions refines not only the design butxi
It’s no longer about producing; it’s about learning.

The more we iterate this dialogue, the more coherent my design language becomes.
We start to see patterns in what resonates.
And slowly, we build a vocabulary that’s not just aesthetic but strategic.

The designer’s conversation

The purpose of this stage isn’t to create outputs. It’s to create alignment.

Between you and your intent.
Between your constraints and your creativity.
Between your intuition and your AI’s logic.

That’s why I always remind myself, design isn’t about giving instructions; it’s about initiating understanding.

Like a good feedback conversation, it’s less about how well you speak and more about how deeply you listen.

When you design with that level of clarity, every prompt becomes more than a query.

Part II: Iterate

Turning curiosity into craft

If “Design” is about setting intention, Iteration is about building understanding.

Iteration is where good design becomes great design. It’s where intuition sharpens through contrast. And it’s where, paradoxically, speed and depth begin to coexist.

Unlike traditional workflows, where revision often feels like rework, AI turns iteration into exploration. Each loop isn’t a correction; it’s a conversation.
Every time we prompt, refine, or remix, we’re training not just the tool, but our own taste.

And that’s what separates AI-first designers from the rest: we don’t just iterate to fix — we iterate to learn.

The iterative mindset: Feedback as fuel

One of the best lessons we learned early on was this:

“Iteration is not about getting closer to perfection, it’s about getting closer to truth.”

When we say truth, we mean the emotional accuracy of a design that invisible resonance when form and function align with intent.

AI gives us an unprecedented opportunity to reach that truth faster. But only if we treat iteration as feedback, not failure.

Most of us were trained in environments that reward polish over process. The unspoken message is: the fewer revisions, the better the designer.
But in the AI era, that mindset is completely inverted.

The best designers we know are prolific iterators. They test twenty micro-variations before deciding which one feels right. They don’t rely on a single “good idea” but manufacture serendipity through deliberate experimentation.

Iteration becomes a feedback loop not just with the tool, but with ourselves. We begin to see how our instincts shift. We start asking better questions. We notice patterns in what feels right versus what looks right.

That’s the power of iterative thinking, it trains perception.

How to think in iterations?

Read more

Subscribe now

For more: Unlock your career as an AI-First Designer | Get free 1:1 mentorship | Claim 1 month free Perplexity Pro + Comet Browser

Friends,

Today, I’m excited to introduce a unique edition of AI First Designer: a special guest post by Stu Green—designer, entrepreneur, and SaaS founder who brings the energy and wisdom of a true creator at the intersection of design and technology.

Stu has spent months experimenting with Vibe Coding—the art of the rapid prototyping using AI-powered tools. In this subscriber-only piece, he’ll walk you through why designers hold a new kind of power in today’s AI-driven era, and how you can leverage your creative instincts to build products that go beyond bland, engineering-driven outputs.

You’ll get:

• A crash course in “Vibe Coding” and why emotion is your edge over machines

• Step-by-step guidance on merging design thinking with AI to ship functional, beautiful products fast

• Real prompts, practical workflow, and “Vibe Hacks” for rapid iteration and prototyping

• Inspiration—and tactical advice—from someone who’s built a $20K/month SaaS business while staying rooted in great design

Whether you’re new to AI tools or looking to level up your product-building game, Stu gives you an inside look at how to translate “designer vibes” into living, breathing applications. Get ready to reimagine your process—and discover how creativity, intuition, and logic are converging in this new wave.

You can follow Stu Green on X.

How to vibe code as a designer? Read on 👇

I believe that we, designers, have an edge when it comes to AI-driven product building. You may not believe it, but you are special!

Why? Because right now, everyone who has access to the Internet is out there building the apps they’ve always dreamed of making, for free. And they are all using the same AI tools.

Guess where those AI tools got their learning data from? You!

What sets us apart is that the first part of our process involves emotion, and that is what makes us different from machines. Emotion is the foundation for any design or UX project. Every part of the UI, the interactions, the color palette, they all come from an emotion, and they invoke emotions. These emotions create empathy, which ultimately leads to sales. That is why you get hired.

Vibe Coding (or Vibe Designing as I like to call it), is this new hybrid skill that merges your design intuition with AI’s execution speed. In this article I want to give you a crash course into how to use AI to become an expert Vibe Coder that has an edge above everyone else.

So where will tonight take you? (read on and I’ll explain…)

Please note: this article was completely written by hand, by a human! Typos and bad grammer are left in!

The Traditional Approach to Vibe Coding

Most AI-generated products will fall short because they start from engineering lead requirements, not from feel. Designers work differently from engineers, we start from emotion, from the experience we want the user to have.

A simple engineering-lead prompt will look something like this:

Build an event booking platform called “EventsVibe”.
It must have the following features:

- User authentication (login/signup)
- Event listing page with search and filter functionality
- Individual event detail pages
- Shopping cart for ticket purchases
- Checkout flow with payment integration
- Admin dashboard for event management
- Database schema for users, events, tickets, and orders
- RESTful API endpoints
- Responsive design using Bootstrap
- Form validation on all inputs

Technical requirements:
- React frontend
- Node.js/Express backend
- PostgreSQL database
- Stripe for payments
- JWT authentication

If you want you could ask the LLM to build you a Product Requirements Document (PRD) based on that initial prompt, that would look something like this:

This will give the LLM explicit instruction on how to build your application. If you have the time, you could go through the PRD line by line and check it’s inline with what you want, or you could just “vibe it”.

Most product builders will create a task list for you automatically, so you can see the progress the agent makes as it vibes your app.

Once you approve the plan, the LLM will start building out your application based on what it knows; what it has learnt. The LLM will spit out something that is functional, but will be beige, bland and will rarely feel good. This is where designers come in and bring their edge.

As I mentioned before, your job is to inject the human element into a product build process, regardless of whether you are using AI or not. So what exactly does that look like with regards to Vibe Coding?

The Designer’s Approach to Vibe Coding

Let me ask you a question. How do designers typically approach any project they are presented with?

They get a brief (the vibe), then they get inspiration and begin to flow with mood boards, sketches, pinning ideas and getting a ‘feel’ for the project. After that they will begin low fidelity mockups, and eventually high fidelity mockups in Figma before presenting to a client. That’s how I work anyway, or used to.

With Vibe Coding, you can bring that approach in the same way, but bringing your unique angle. You can just extend the traditional approach with this approach and take your aesthetic, UX and emotional instincts and feed them directly into the LLM to bring life.

Now open a tool like Lovable, Replit or just go straight to the LLM (e.g. using Cursor, or Claude.ai), and we will get Vibe Designing.

Your prompt would look more like this, taking the engineering prompt we created earlier, but adding more color:

Create an event booking platform that feels premium and confident, not
transactional.

We want User Experience to be at the forefront, where every interaction feels
well thought out, and provides the user with what they need in as few clicks
as possible.

VISUAL DIRECTION:
Reference: Airbnb’s clarity + Stripe’s restraint + Linear’s precision
High-quality photography, generous whitespace, deliberate interactions.

Inspiration links: 
https://dribbble.com/shots/25551949-Real-Estate-Web-Design
https://dribbble.com/shots/25585528-Event-Booking-App
https://dribbble.com/shots/25840939-Live-Entertainment-Website

COLOR PALETTE:
Dark navy (#0F172A) primary
Purple (#A855F7) for actions and accents  
Neutral grays for hierarchy
High contrast, easy to scan

TYPOGRAPHY:
Clean sans-serif, well-spaced
Headlines are large and confident
Body text prioritizes readability over density

PAGES:

Read more

Subscribe now

Hello friends,

I’ve been working on something game-changing (secret).

For the past months, we’ve worked endlessly on a brand-new, full-color book: The Design Moonshot Guide—90 Genius Design Tactic. It’s finally ready for you to download, and this guide is yours to keep as a PDF! 🎁

Inside, discover 90+ powerful moves for modern design:

• ⚡️ Instantly actionable strategies—transform how you design and grow

• 🏆 Secrets proven to 5x results at Duolingo, Uber, Airbnb, and more

• 📈 A practical checklist of design wins that convert

• 👑 Frameworks to get you to #1 and design great products in the AI era

• 🦄 Rarely taught anywhere else – true first-mover tactics in design

Design Moonshot Guide is the newest insider resource from ADPList, created for designers/founders who move fast, think big, and want to win more opportunities with less effort.

But here’s the twist 🍬

The Design Moonshot Guide isn’t available anywhere else online, not on Udemy, not on our platform, or anywhere.

The only way to get it? Be a paid member of AI-First Designer School.

💎 If you’re already a member, congrats! Your PDF will arrive shortly.

🪨 Not yet a member? This is the moment. For this week only, you can lock in a special 40% off lifetime membership—yes, you heard that right, it’s a one-time fee.

Claim 40% off + Download eBook

[Of course, annual subscribers of this newsletter get the book too].

One more thing 🎁

The book is just the sweet cherry on top… 🍒

Here are ALL the exclusive goodies you’ll get as an AI-First Design School Member:

1) 🚀 Cutting-Edge Design & Career Masterclass

Join the ADPList 6-week video series that’s teaching designers to:

• Design for the age of AI (not just wireframes)

• Lead GenAI products for unicorns

• Land jobs at top AI startups—fast

• How to make your portfolio stand out!

These are the frameworks that top freelancers, senior designers, and builder leaders are now using to stay relevant (and get paid more than ever).

Apply today - $129/lifetime access

2) 🏛️ FREE 90-Day Premium Newsletter

Instant full access to the AI First Newsletter Pro (usually $190 value). Unlock deep dives, exclusive interviews, and the latest strategies from the frontlines of AI product design.

• 📘 A guide on how to win AI-first design interviews

• ✨ How to be instantly 10x persuasive in job interviews

• 📋 Portfolio checklist for AI-first designers

• 🏛️ 12 brilliant AI design laws

• 🏆 The ultimate prompt guide for designers

Apply today - $129/lifetime access

3) 🏆 AI-First Designer Certification

Graduate from the course and receive official certification as an AI First Designer—direct from ADPList’s global community platform. Go beyond badges; show you’ve mastered what the market truly wants.

Apply today - $129/lifetime access

4) 👥 Private Designer Network

Meet your future collaborators, get feedback from top AI design leads, and access private group chats only for course alumni. No annoying Slack or Discord. Just a quick & direct chat.

Apply today - $129/lifetime access

*This launches early next year.*

5) 📕 The Design Moonshot Book (190-page PDF)

Based on master thousands of design experimentations from top products like Duolingo, Uber, Airbnb, Notion, Figma, OpenAI, and more.

In this guide, you will learn:

• ✓ Win the market with proven design frameworks

• ✓ A practical checklist of design wins that convert

• ✓️ Proven 90 genius design experiments you can use instantly

Claim 40% off + Download eBook

Hurry up, this limited sale ends next Tuesday—which we will also be sending even more premium newsletters weekly (as usual) and goodies.

Think about this differently:

• ❌ Traditional design schools charge thousands for access.

• ✅ For $129 (one-time), you’ll get exclusive 6 weeks’ worth of exclusive masterclasses, 90 days of premium newsletter every week + our ENTIRE playbook for you.

Claim 40% off + Download eBook

See you inside! 💙

- Felix

Subscribe now

More resources: Unlock your career as an AI-First Designer | Get free 1:1 mentorship | Claim Perplexity Pro for 1 month free | Get AI Design eBook (free)

I went viral on Twitter (X)’s design feed last week.

For applauding a copied design.

The post I made about? Perplexity’s AI browser, Comet.

Even Aravind, Perplexity’s CEO, retweeted this.

In July, Perplexity first launched its AI browser, Comet. Thousands of tech people from San Francisco, New York, to New Delhi and Singapore were raving for it, while it is an invite-only browser.

Everyone wanted to try it.

Their design? It was eerily similar to Chrome, if not 99% same. Except for their AI agent on the side nav.

This stolen design interface may seem different from new browsers like Arc and Dia at first.

But it’s actually genius to just copy Chrome’s design.

Ironically, Arc and Dia’s design decision to innovate on a new UX was absolutely terrible.

One year ago, when I saw Arc’s launch and all its Twitter (X) hype, the designer in me couldn’t stand it.

I remember looking at it and thinking, “Why would busy professionals who want to get things done quickly, abandon their work to pick up a new browser AND learn all new interactions?”

Then, in 2025, Arc browser announced they’d no longer be continuing its development.

And yes, the designer in me felt, “Knew it. Jakob’s Law is right.”

The Jakob Law of Design states:

When Perplexity launched its browser, Comet, I felt this was going to be it—people will adopt it.

Purely from a design standpoint.

Look, you can literally smell the similarity with Chrome:

I’m going to show you exactly why they did and how because you can copy this for your own product.

Here’s a masterclass in product sense you need to know.

Product sense for designers 🏛️

“This is a billion dollar lesson in design.

I bet whoever led Comet has got an extraordinary product sense. It is such an incredible product and ux, not because it’s new—because it isn’t. User ease into it, knows how to navigate around, with some AI integration and not intrusive or forceful to learn. and unlike any other new browser say arc/dia where they want to be all new… comet puts the best experience by not letting users think.

Imo, best product of 2025 hands down.”

- Felix Lee (source)

Comet isn’t obsessed with “new.” It’s obsessed with invisible ease.

• You switch from Chrome, you don’t even notice.

• No onboarding PDF. No “watch this 5-minute demo.” Just browsing.

• AI is there, not shouting in your face. It helps when you need it, but never gets uppity.

Copy familiar patterns—then innovate quietly.

Where 99% of designers go wrong ❌

Let me give you a test.

You’re designing a next-gen browser in 2025.

Your mission: make the web feel intelligent — not static.

How do you design it?

Be honest. What’s the first thing you’d build?

Most designers would start with surface polish:

“Redesign the tab system.”
“Add a sidebar for AI.”
“Give it fancy gradients and playful animations.”

Sounds cool. But it’s wrong. ❌

You just made it look like every other “smart” browser: visual flair on top of old logic.

A coat of paint on a filing cabinet.

Perplexity did something way smarter.

They didn’t design a prettier browser.

They designed a thinking companion. ✅

In Comet, the user doesn’t browse — they ask.

Arc redesigned the house; Comet introduced a browser.

Look at this masterpiece of "copied” design:

What others say:

If you want to get your hands to try out the design—the invite is on me ✉️ (not sponsored) → explore and experience their design:

Claim your 1-month free Pro and Comet

The Anti-Original Design Playbook 📕

(a.k.a. how to ship design people actually use — not just admire)

You don’t need another “original” UI. You need a useful one.
Here’s the step-by-step to escape novelty traps and build design that moves work forward.

1) Screenshot the sameness: Open a doc. Paste 10 screenshots from your category (home, core flow, settings). Circle every pattern you see repeated (modal stacks, clever tabs, new nav metaphors). Label them “industry costume”.

2) Run the 3 real tasks: Pick the top 3 outcomes users actually want (buy, book, send, file, compare). Time each in your product vs. rivals. Count clicks, modes, and dead ends. The slowest step is your design debt. Fix that first.

3) Replace “views” with “verbs”: Rewrite your primary UI objects as actions: From: “Search” → To: “Find & Decide” From: “Results” → To: “Do the next step” (add to cart, schedule, draft). Every screen must answer: What gets finished here?

4) Design the mistake path first: List the 5 most likely failures (wrong item, auth fail, bad data, network). For each, design undo, inspect, retry. Ship those affordances before polish.

5) Kill “interesting”; keep “inevitable”: Flag every element added to feel clever (novel navs, rotating metaphors, ritual clicks). Ask: Would a tired user at 11:57pm thank me for this? If no, delete. If maybe, hide behind “Advanced”.

6) Write your anti-original stance. Two bullets only: What your product does shockingly well (be blunt). What the category’s users are exhausted by (be blunter).

7) Choose one “Done Flow” and overbuild it: Pick the single workflow that defines value. Make it absurdly good. Budget: latency, shortcuts, previews, inline edit, 0-to-done in one surface. Everything else may be “good enough”. This one must be legendary.

8) Name the creed, not the feature: Finish this: “People who use [your product] are the kind who ________.”

9) Keep a weekly “Friction Kill” ritual: Every week: one metric, one user clip, one removal. Ask: “What did we delete that made finishing faster?” Deleting is a design output.

Your move 💣

This is a billion-dollar design lesson.

Don’t try to be clever, be clear.

Pick your design to “steal”. Make enemies, make friends. Give people a clear reason to adopt—don’t overwhelm. Comet went from beta to the fatest growing browser.

The “originals” are often ignored.

See you next week. Thank you 🙌 (want an invite to Comet? claim here)

Felix

Subscribe now

For more: Unlock your career as an AI-First Designer | Get free 1:1 mentorship | Claim 1 month free Perplexity Pro + Comet Browser

Hi AI-First friends,

If there’s one thing that’s changing how we work, think, and grow — it’s AI.

Just last month, Salesforce CEO Marc Benioff confirmed 4,000 layoffs, bluntly saying, “I need fewer heads with AI.”

Not only Salesforce, but Duolingo also quietly restructured its content team, replacing dozens of contract writers with AI-generated lessons and proudly calling itself an “AI-first company.”

These are pure signals.

Signals that the way we work and the value we bring can be replaced easily.

But here’s the good news that survival doesn’t require coding skills or a robotics degree.

It requires adaptability. It’s about becoming the person who thinks with AI, who uses it to work smarter, faster, and more creatively than anyone else in the room.

In this piece, I’ll walk you through the real survival guide for 2025, how to stay relevant, indispensable, and even thrive in a world where AI is no longer “new.”

We’ll cover:

• How to shift from AI anxiety to AI adaptability

• How to identify what to automate (and what not to)

• How to become your team’s go-to “AI translator”

• How to communicate AI’s value to leadership

• And how to future-proof your career

By the end, you’ll have a playbook to not just survive AI adoption at work but to turn it into your biggest advantage.

If you’re the person who experiments, documents what works, and helps others bridge the confusion, you immediately stand out.

You become the one who translates AI chaos into clarity.

While most are waiting for the company to “figure out its AI policy,” you’re already the one shaping how it’s done.

But how to start? Let’s dive in 👇

#1 Become the “AI translator” for your team — Bridge confusion with clarity

Every team has that one person who actually gets how to make AI practical — be that person. Most employees aren’t trained or confident with AI. They might have heard about ChatGPT, Notion AI, or Jasper, but don’t know how to actually apply it. Your role is to bridge that gap — to translate AI potential into tangible, everyday work improvements.

Step 1: Identify the friction points

Start by observing or asking your team which tasks drain their time like:

• Summarizing meeting notes and design feedback

• Updating design system components

• Drafting repetitive emails or proposals.

• Generating weekly reports or dashboards.

• Updating project status trackers.

• Preparing design handoff documentation

• Compiling competitive or trend research

Step 2: Pick the right AI tools for the job

You realize, you don’t have to look for tools individually for them. You can use websites like Saasaitools.com or TheresAnAIForThat.com and search for AI tools that solve these exact problems.

Once you find something that might help them, approach them with the solutions.

Step 3: Track impact and share results

Measure the time saved or productivity gained. Example for designers:

• Automating feedback summaries saves 2–3 hours per review session.

• Batch-updating components with AI reduces manual errors by 90%.

• Automating inspiration boards saves 4–5 hours/week for UX research.

Sharing these results with your team and manager highlights your impact. Don’t just experiment with AI, but create some measurable efficiency gains.

#2 Build a simple prompt library for your team — Empower, don’t overwhelm

Once you’ve started automating tasks, the next step is systematizing AI usage. A prompt library is your team’s go-to resource for consistently leveraging AI — without confusion, chaos, or overwhelm. Think of it as the cheat sheet that makes everyone look like an AI pro.

Step 1: Identify common tasks across your team

Observe which repetitive tasks are shared by multiple teammates. Examples include:

• Summarizing long Slack threads or meeting notes

• Drafting emails or outreach messages

• Writing social captions or ad copy

• Generating UX research insights or competitor analysis

• Creating initial design drafts or variations

For product designers specifically:

• Summarizing stakeholder feedback from Figma or Miro

• Creating microcopy for buttons, tooltips, and error messages

• Generating mood boards or design inspiration

• Drafting user flows or wireframe suggestions

Step 2: Create a shared “Prompt Library” document

Keep it simple. A single doc in Notion, Google Docs, or Confluence works perfectly. Structure it by task categories, and include:

• Task description

• Recommended AI tool

• Example prompt

• Expected output

Step 3: Add practical prompts

Here are some examples your team can immediately use:

For Designers:

• Summarize design feedback:

“Summarize all comments in this Figma file. Categorize them into UI, UX, and content suggestions, and highlight any critical issues that must be addressed this week.”

• Generate microcopy for buttons and tooltips:

“Create 5 friendly, concise microcopy options for a ‘Submit’ button that encourages user confidence and clarity.”

• Draft wireframe ideas from description:

“Generate a 3-step mobile onboarding flow for a habit-tracking app. Include screens for welcome, goal setup, and first activity. Describe layout and suggested interactions.”

• Competitive UX research:

“Analyze the onboarding flow of these 3 apps. Summarize key steps, unique interactions, and best practices in a table format.”

For General Teams:

• Summarize meeting notes:

“Summarize the following meeting transcript into 5 key action items, including responsible team members and deadlines.”

• Draft outreach emails:

“Write a professional, friendly outreach email to a potential client introducing our new AI-powered product. Keep it under 150 words and include a clear call-to-action.”

• Brainstorm ideas:

“Generate 10 creative campaign ideas for launching a new sustainable packaging initiative. Include one-line descriptions for each.”

Step 4: Make it easy to use

A library is only valuable if your team actually uses it. Tips:

• Include short example videos or GIFs showing how to paste the prompt and edit outputs.

• Keep prompts clear, concise, and categorized — no one wants to scroll through 50 unstructured prompts.

• Update it weekly or monthly as new tools or use cases emerge.

Step 5: Share wins and encourage experimentation

When someone uses a prompt successfully, highlight it in your team channels. For instance:

“Shoutout to Jane for using the ‘Summarize Figma feedback’ prompt — saved 3 hours of work this week!”

This reinforces adoption and inspires others to try AI themselves.

#3 Share cool AI tools (know the limit)

Discovering an AI tool is exciting—but dumping 20 links into a Slack channel at once? That’s overwhelming. Instead, strategic sharing is key. Think of yourself as a curator, not a promoter. The goal isn’t to show how “smart” you are—it’s to make your team’s work easier, faster, and better.

Step 1: Choose one tool at a time

Pick the tool that solves a clear, immediate problem your team is facing. For example:

• For designers: Runway ML to quickly generate prototype visuals or animations

• For marketers: Copy.ai for brainstorming ad copy or social captions

• For researchers: Perplexity AI to summarize long reports or competitor data

Frame it with context:

“Found this for anyone writing blog posts or LinkedIn updates—Copy.ai can draft multiple caption options in seconds.”

Step 2: Show it in action

People adopt tools faster when they see real examples. Record a 30–60 second screen share or GIF showing how the tool works. For example:

• For designers: Demo how Runway ML can turn a sketch into a polished UI concept in under a minute.

• For marketers: Show how ChatGPT can generate 5 ad copy variations with a single prompt.

• For product managers: Highlight how Notion AI summarizes a 20-slide presentation into 5 bullet points.

Step 3: Make it actionable

Include a ready-to-use prompt or step:

• Designers:

“Prompt for Runway ML: ‘Convert this wireframe sketch into a sleek mobile dashboard with soft colors, modern typography, and interactive buttons.’”

• Marketing:

“Prompt for ChatGPT: ‘Write 3 LinkedIn post drafts introducing our new AI tool. Keep tone professional but friendly, under 150 words.’”

Step 4: Limit frequency, maximize value

One tool per week is often enough. The idea is to build anticipation, not fatigue. Tag team members who might benefit the most, or share it in a dedicated “AI Tools” channel.

This approach does two things:

1. Positions you as the go-to AI curator.

2. Encourages team members to experiment without feeling pressured.

By sharing strategically and with context, you turn AI from an abstract concept into a practical, everyday productivity booster. You’re not just introducing tools, but you’re making AI useful for everyone.

#4 Create AI assistants (fancy word for Custom GPTs)

“I built a new AI agent for our team!”
Sounds impressive, right? That’s because it is. But really, what you’ve built is a Custom GPT—an AI assistant tailored to your team’s workflow and style. Think of it as prompts on steroids: it doesn’t just generate output, it understands your team’s tone, processes, and needs.

Why it matters

Most teams struggle with consistency, emails sound different, reports lack uniformity, and content quality varies. A Custom GPT solves this by acting as a smart co-worker that:

• Follows your brand or team voice

• Automates repetitive tasks

• Provides instant suggestions without constant human guidance

Step 1: Identify a repetitive pain point

Start by observing where your team spends unnecessary time. Examples:

• Marketing: Drafting LinkedIn posts or email campaigns

• Product design: Writing microcopy for UI elements

• Sales: Creating outreach emails or follow-ups

Step 2: Build your Custom GPT

OpenAI allows you to create Custom GPTs using:

• Instructions on tone and style

• Example outputs your team approves

• Task-specific workflows (summaries, formatting, brainstorming)

Example for a marketing team:

“This GPT will take a product update brief and generate 3 LinkedIn posts in a friendly, professional tone. Include emojis sparingly, highlight benefits first, and close with a CTA.”

Example for designers:

Read more