Design Tools for Developers
Not every project comes with a designer. Sometimes you're building an internal tool, a side project, or an MVP where hiring a designer doesn't make sense yet. You still need it to look decent.
Good news: you don't need design skills to make things look professional. You need the right tools and a willingness to steal from things that already work.
The Developer's Design Problem
Developers tend to make two mistakes with design:
- Ignoring it completely until the end, then slapping on styles that don't work together
- Spending days choosing the perfect color palette while features go unbuilt
The sweet spot is using tools that give you good defaults so you can focus on building. Here's what works for us.
UI Component Libraries
Starting from scratch is a trap. Use a component library and customize from there.
shadcn/ui
This has become our default for React projects. Unlike traditional component libraries, shadcn/ui copies the code into your project. You own it completely and can customize anything.
The components are clean, accessible, and work great with Tailwind. We've shipped production apps using mostly shadcn/ui components with minimal customization.
Radix UI
If you need unstyled components with perfect accessibility, Radix is excellent. It handles all the hard parts like keyboard navigation, focus management, and ARIA attributes. You add your own styles.
Headless UI
Similar to Radix but from the Tailwind team. Great for dropdowns, modals, and other interactive components. Works beautifully with Tailwind.
Design Systems as Starting Points
When building something from scratch, start with an existing design system and adapt it:
- Tailwind UI - Paid, but worth it. Hundreds of well-designed components you can copy and modify.
- Flowbite - Free Tailwind components, good variety.
- DaisyUI - Tailwind plugin with pre-designed component classes.
These aren't cheating. Professional designers use references constantly. You should too.
Colors Without the Pain
Picking colors is where developers often get stuck. These tools eliminate the guesswork:
Tailwind's Default Palette
Seriously, just use it. Tailwind's color scales are carefully designed to work together. Pick a primary color from the palette and you're done. slate-900 for text, slate-50 for backgrounds, your primary for accents.
Realtime Colors
A free tool that generates color palettes and shows them in a realistic UI. You can see immediately whether colors work together.
Coolors
Quick palette generation with a space bar. Keep hitting it until something looks right, then lock the colors you like.
Typography Made Simple
Bad typography ruins good designs. These rules keep you safe:
- Use one font family. Inter is an excellent default for UI.
- Use 3-4 font sizes max. More creates visual chaos.
- Default line height around 1.5-1.6 for body text
- Max width around 65-75 characters for readability
Tailwind's typography plugin handles this automatically for prose content. For UI text, stick to the scale: text-sm, text-base, text-lg, text-xl. That's usually enough.
Font Resources
- Google Fonts - Free, easy to use. Inter, Plus Jakarta Sans, and Space Grotesk are solid modern choices.
- Fontshare - Free high-quality fonts. Some unique options you won't see everywhere.
- System fonts - Using the system font stack is perfectly fine and loads instantly.
Icons
Icons matter more than you'd think. Inconsistent icons look amateur.
- Lucide - Our go-to. Clean, consistent, MIT licensed. Covers most use cases.
- Heroicons - From the Tailwind team. Two styles that work well with Tailwind UI.
- Phosphor - Huge library with multiple weights. Good for more expressive interfaces.
Pick one icon set and stick with it. Mixing icon styles looks jarring.
Layout and Spacing
Most design problems are actually spacing problems. Consistent spacing makes everything look better.
Use Tailwind's spacing scale and stick to it. Don't use arbitrary values like p-[13px]. Use p-3 or p-4. The constraints help.
General rules:
- Group related elements closer together
- More space between sections than within them
- Cards and containers need consistent padding
- Align things to a grid (Tailwind's grid classes help)
Quick Mockups: Excalidraw
Before building, sketch it out. Excalidraw is free, runs in the browser, and the hand-drawn style sets expectations appropriately. It's a sketch, not a promise.
Spending 10 minutes sketching a layout saves hours of coding the wrong thing.
Learning From Others
The best design education is studying what works:
- Dribbble - Search for "dashboard" or "landing page" to see current trends
- Mobbin - Screenshots of real apps, searchable by pattern
- Lapa.ninja - Landing page inspiration
- Refactoring UI - Book/tips specifically for developers. Worth reading.
Don't copy designs wholesale. But borrowing a color scheme, a card layout, or a navigation pattern? That's how everyone works.
When to Get a Real Designer
These tools get you 80% of the way. For some projects, that's enough. But consider a designer when:
- The product's success depends on user experience
- You're building something consumer-facing
- You keep getting feedback that it "looks off"
- You're spending more time on design than development
A good designer isn't just about making things pretty. They think about user flows, accessibility, and edge cases you haven't considered.
The Shortcut
If you remember nothing else: use shadcn/ui with Tailwind, pick colors from Tailwind's palette, use Lucide icons, and space things consistently. That combination produces clean, professional interfaces without any design expertise.
Good enough ships. Perfect never does.