Designing UI and falling in love with "artifacts"

👟 Topic: Designing UI and falling in love with "artifacts"

🏷️ Sale: The Network Playbook Sale Ending Soon

👾 Get my AI Coding file: I’m documenting everything I learn about AI coding so you don’t have too. Get my personal notes below

Tech moves fast, but you're still playing catch-up?

That's exactly why 100K+ engineers working at Google, Meta, and Apple read The Code twice a week.

Here's what you get:

All delivered twice a week in just 2 short emails.

Join 100K+ engineers

Let’s talk about UI design. Or more specifically, the part where you go from “meh” to “ok I can work with this.”

On today’s episode of building SayMail, this week was all about creating the first designs.

One of my favorite discoveries in this whole vibe-coding journey is seeing your designs side-by-side with your code in real-time. This isn't exclusive to Claude Code, it's just something I didn't fully appreciate until I started using it.

And honestly, it's changed how I approach building.

Let me walk you through how I went from a bland first design to something I'm I can actually work with.

After a couple of initial prompts in Cursor, I had my first version of the main dashboard.

Clearly this isn’t going to win any design awards.

But it’s a start, and the first step is to always get that first draft in, no matter how shitty it looks.

Here's where things got interesting.

I actually jumped out of Cursor and went to Claude's regular website.

(Pro tip: Separate your planning chats from your building chats. Keeps the context clean.)

Keep in mind, I don’t have an artistic bone in my body, I had no idea what design direction to go with.

Modern? Friendly? Professional? All of it sounded good, which meant none of it was specific enough.

So I did something kinda ironic: I asked AI to ask me questions.

Claude started throwing out prompts like:

↳ "How would you describe the app in 1 word? Here are a few options: efficient, warm, bold..."

↳ "Should users feel cozy, confident, or inspired when using SayMail?"

↳ "Think about your target users right before they open the app. What emotion are they feeling?"

These questions forced me to actually nail down the vibe I was going for. Not just "looks good" but what kind of good.

Turns out, specificity matters a lot more than I thought.

This is where the magic happened.

Claude has this feature called artifacts, basically, it lets the AI create prototype UI for you in real-time. You can see the design update as you refine your prompts, right next to your conversation.

And after a few iterations, we got these:

The main dashboard:

The voice-to-email page:

This is where the core feature lives. You see your contact's info, recent activity to reference, and that big recording button front and center.

Simple. Focused. No distractions from what matters.

I'm still working on the CRM detail pages, but the foundation is there.

Obviously we’re still far from the final look, but I can actually work with these mockups.

Once I'm happy with a few more screens, we're moving into actual user testing.

I can't promise an exact date yet, but I'll be reaching out to those who filled out the survey first. If you haven't yet, now's your chance to get on the early access list and help shape what SayMail becomes.

That’s all for today. If you enjoyed this post, share it with a friend!

If they subscribe, I’ll send you my personal AI coding doc!

To refer, use your unique link.

See you next Tuesday 🤝

-Michael Ly

After Nov 28th, I’ll be archiving the playbook to focus on other projects.

Only 3 more days left for sale. Get it below at 75% off!

flowkey is the all-in-one piano app for players of any level. Start from scratch with step-by-step interactive courses or dive into the sheet music library. With over 1000 songs across all genres, you’ll always find something you love to play.

Start learning today

{{rp_personalized_text}}

Or copy and paste your unique link to them: {{rp_refer_url}}