Tips & resources

Icons

I'm a fan of line icons. These are the libraries I keep going back to:

You're not going to find every icon you need in one library. Combine icons from different libraries, just make sure you match the style (stroke weight, corner radius, optical size).

Design systems & UI kits

I don't personally use a pre-built UI kit for my design work, but for frontend development I use Shadcn. It's clean, composable, and it just works.

That said, if you're trying to learn and get better faster, I highly recommend studying existing design systems. I did this a lot early on and it helped me understand how real products handle components, tokens, and patterns at scale. Here are the ones I'd point you to:

• A great starting point for understanding the fundamentals. Base design system
• Really well-documented and thoughtful in how they handle patterns. Polaris design system (Shopify)
• Just found this one recently and it is nice. Clean and practical. Wise design system

You don't need to use these kits in your projects. Study them. Look at how they name things, how they handle spacing, how they document variants. That's where the real learning happens.

Colour & theming

My main tool for colour work is Coolors.

My process isn't standard and it isn't linear. When I'm designing, I make a first frame before I start saving colours to styles. I let the design breathe a bit before locking things down.

For dark themes, I study dark-themed designs to understand how others handle contrast, surfaces, and readability. When I was working at PHPSandbox, I specifically studied dark themes from VS Code, since we were building a code editor and that was the most relevant reference for our users.

Dark mode isn't just inverting your colours. Study how apps you already use handle it. Pay attention to surface hierarchy, not just background swaps.

Typography

My go-to platform is Google Fonts. It is free, web-safe, and covers most use cases.

I love large display typefaces, but licensing limits how often I can use them in production. I keep a personal library of typefaces I've collected, mostly inspired by sites on Awwwards. You can browse it here.

Before you use any font outside Google Fonts, check the license. The fines for unlicensed font usage are serious.

Design-to-code

This is where things get fun. Converting my designs to code isn't a linear process. I use different tools and models depending on how complex the project is.

When I first started learning this, I used Cursor (which I still use). But now my main tool is Claude Code. The quality of output and the way it handles context is better for the kind of work I do.

• Claude Code on Antigravity, VS Code, and Cursor
• Figma MCP, which lets the IDEs pull element properties from my designs locally on my machine. This is a game changer for accuracy.
• I hardly use the terminal directly for most of my workflow

One thing that makes a huge difference in the quality of AI-generated code: make sure your designs are in auto layout. This helps the models understand the arrangement faster and produce cleaner, more structured output. If your frames are just absolute-positioned layers, you're going to have a bad time.

The better structured your design file is, the better your code output will be. Think of auto layout as your design speaking the same language as CSS flexbox.

AI for designers

I actively use Claude Code as my primary AI tool. I use it to convert my UI to code using the best frontend framework for the project. I also use GitHub for version control and host on Vercel when working on web projects.

• On Cursor, I use Opus 4.6 (thinking mode) because it gets the implementation right faster compared to other models
• Also on Cursor, I use Gemini (the highest model) for interactions and quick questions
• For longer, more complex builds, Claude Code is my go-to

For designers who are nervous about AI: just start integrating it into your workflow. It helps you deliver quality faster. But here's the thing that doesn't change, AI or no AI: you still need to know your craft. AI is a multiplier, not a replacement. If you don't understand spacing, hierarchy, and user behavior, no AI tool is going to fix that for you. Learn your onions first, then let AI help you cook faster.

Don't try to learn every AI tool at once. Pick one, get good at it, then expand. I started with Cursor and it changed everything.

Learning paths

You can learn anything for free with consistent practice. The real cost is time and focus, not money. Here are the resources I actually recommend:

• Great breakdown of how design systems work and how to build one. Design systems
• If you want to understand how Claude Code works for design-to-code workflows. Claude Code
• Practical walkthrough of taking a design and turning it into real code with Cursor. Converting your design to code using Cursor
• The official Figma channel has playlists for everything from basics to advanced prototyping. Figma (official playlists)

Inspiration

Where I go for inspiration depends on what I'm looking for:

• For clean, simple interfaces. When I need a reminder that less is more. Dead Simple Sites
• For big typefaces, bold interactions, and pushing creative boundaries. Awwwards
• For landing page inspiration specifically. Great for studying layout patterns. Lapa.ninja
• A portfolio I admire for its personality and craft. Amelie Schlueter

Don't just look at portfolios in your niche. Some of the best design ideas come from architecture, editorial design, and physical product design.