Every few months, someone on Twitter asks "what tools do design engineers actually use?" and the replies are always a mix of genuinely useful recommendations and tools people tried once for a blog post and never opened again. I wanted to write something different. These are the tools I actually open every single working day. The ones that have survived months of use, the ones I'd miss immediately if they disappeared. No sponsorships, no affiliate links, just honest recommendations from someone who lives at the intersection of design and frontend development.

My philosophy on tools is simple: keep it small, master what you have. I'd rather be excellent with five tools than mediocre with twenty. Every tool you add to your workflow has a maintenance cost: updates, keyboard shortcuts to remember, context switching overhead. So I'm ruthless about what stays in my toolbox. If it doesn't save me time or make my work measurably better, it's gone.

Let's break it down by category. I'll cover my code editor setup, design tools, development stack, browser extensions, component development workflow, AI tools, and daily resources. Whether you're just getting into design engineering or you're a veteran looking to sharpen your toolkit, there's something here for you.

Code Editor Setup

Your code editor is where you spend most of your day, so getting it right matters more than almost any other tool decision. I bounce between VS Code and Cursor depending on the task. For most React and Next.js work, Cursor's AI features give me a noticeable speed boost, especially for generating component boilerplate and writing repetitive Tailwind CSS patterns. For detailed debugging or when I need maximum control, VS Code is still king.

Editor Settings That Matter

Beyond extensions, a few settings make a big difference for design engineering work. I use a font with ligatures (JetBrains Mono or Fira Code) because the arrow and comparison ligatures make JSX easier to scan visually. I set my tab size to 2 spaces for consistent indentation with the React and Tailwind CSS ecosystem. And I enable format-on-save with Prettier so I never think about formatting. These sound like small things, but they compound. Every micro-decision you automate frees up brain power for actual design and engineering work.

Terminal Setup

I use the integrated terminal in VS Code with oh-my-zsh and a minimal prompt. Having your terminal right next to your code means you never lose context. I keep it split horizontally so I can see my dev server output while browsing files. For standalone terminal work, Warp is excellent with its AI command suggestions and block-based output format.

Design Tools

As a design engineer, you need to be fluent in design tools even if you're not the one creating the designs. You'll spend a lot of time inspecting designs, extracting values, and understanding design intent. Here's what I use daily.

• Figma - For inspecting designs, grabbing specs, and understanding component structure. Dev Mode is a genuine game changer for extracting CSS values and understanding spacing. I spend at least 30 minutes a day in Figma.
• Tokens Studio - Figma plugin for design tokens that syncs to GitHub automatically. This is the bridge between design and code. When a designer updates a token, it creates a PR in our repo. Incredibly powerful for maintaining a consistent design system.
• WebAIM Contrast Checker - I use this constantly for accessibility. Quick way to verify that your text color has sufficient contrast against its background. I have it bookmarked and open it multiple times a day when working on themes or new UI components.
• Phosphor Icons - Clean, consistent icon set with React components. They're lightweight, well-designed, and have great TypeScript support. I used to use Lucide but switched to Phosphor for the broader set of weights and styles.
• Coolors - For generating color palettes when I need to create or extend a theme. It's faster than tweaking HSL values manually and gives me good starting points that I can fine-tune.

My Daily Tool Flow:

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│  Figma    │    │  VS Code  │    │  Browser  │    │  Deploy   │
│  Inspect  │───▶│  / Cursor │───▶│  DevTools │───▶│  Preview  │
│  Design   │    │  Build    │    │  Test     │    │  Review   │
└──────────┘    └──────────┘    └──────────┘    └──────────┘
      │                │               │               │
      ▼                ▼               ▼               ▼
  Extract         Write React      Check a11y     Get design
  tokens &        components       responsive     feedback
  spacing         with Tailwind    dark mode      iterate

Development Stack

My go-to stack has been remarkably stable for the past year. Next.js with the App Router, Tailwind CSS for styling, shadcn/ui as the component foundation, and Framer Motion for animations. This combination gives me the best balance of speed, flexibility, and polish. Here's the exact setup I use when starting a new project.

Why This Stack Works

Every piece of this stack earns its place. Next.js gives me server components, file-based routing, and seamless deployment to Vercel. Tailwind CSS keeps styling co-located with components and eliminates CSS naming debates. shadcn/ui provides accessible, well-designed UI components that I own and can customize freely. Framer Motion handles the animations that make interfaces feel alive. And the utility trio of clsx, tailwind-merge, and class-variance-authority makes building variant-based component APIs a breeze.

The Utility Functions I Can't Live Without

The cn() utility from shadcn/ui combines clsx and tailwind-merge into one function. It lets you conditionally apply classes and intelligently merge conflicting Tailwind utilities. I use it in literally every component I build. If there's one utility function that defines modern React design system development, this is it.

Browser Extensions

Your browser is your testing environment. These extensions turn it into a powerful inspection and debugging tool for web development. I use Chrome as my primary browser for development because of the DevTools, but most of these work in Firefox too.

• axe DevTools - Find accessibility issues on any page. It catches WCAG violations, missing alt text, poor contrast ratios, and more. I run this on every page I build before considering it done. It's the single most impactful accessibility tool I use.
• VisBug - Inspect and edit any page visually. Drag elements around, change colors, tweak spacing. Great for quick experiments and showing designers what a change would look like without writing code.
• Responsive Viewer - See multiple screen sizes at once in a single tab. Way faster than resizing the browser window back and forth. I use it for responsive Tailwind CSS layouts.
• ColorZilla - Grab colors from any webpage with an eyedropper. Useful when trying to match a design or investigate how another site handles their color system.
• Fonts Ninja - Identify fonts, sizes, and line heights on any website. Great for design research and competitive analysis.
• React DevTools - Inspect component trees, props, and state. Essential for debugging React applications and understanding component hierarchies.

Component Development Workflow

Building UI components in isolation is a best practice that dramatically improves both quality and speed. When you build a component in context (on a full page), you tend to miss edge cases because you only see one configuration. Building in isolation forces you to think about all the variants, states, and edge cases upfront. Here are the tools that support this workflow.

• Storybook - Build React components in isolation. Show all variants, states, and props combinations in a single place. It's also amazing documentation for your design system. When a new engineer joins the team, they can browse every component visually.
• Chromatic - Visual regression testing that catches unintended UI changes in pull requests. Every PR gets screenshots compared against the baseline. If a button shadow changes by 1px, you'll know about it before it ships.
• shadcn/ui - Copy-paste components that you own. The best starting point for any design system. I don't use it as-is for production. I use it as a foundation and customize heavily. That's the whole point.

My Component Building Process

I have a consistent process for building every new component. It sounds rigid but it saves me from constantly going back to add things I forgot. Start with the component API (what props does it accept?), then build the structure with semantic HTML, add styling with Tailwind CSS, implement interactive states, add accessibility attributes, and finally polish with animations. I'll detail this workflow below.

Component Building Pipeline:

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│  1. API   │    │  2. HTML  │    │ 3. Style  │    │ 4. A11y  │
│  Design   │───▶│  Semantic │───▶│  Tailwind │───▶│  ARIA    │
│  Props    │    │  Structure│    │  Tokens   │    │  Focus   │
└──────────┘    └──────────┘    └──────────┘    └──────────┘
                                                      │
                    ┌──────────┐    ┌──────────┐      │
                    │ 6. Test   │◀───│ 5. Polish│◀─────┘
                    │  Edge     │    │  Motion  │
                    │  Cases    │    │  Hover   │
                    └──────────┘    └──────────┘

AI Tools That Actually Help

I'm selective about AI tools. There's a lot of hype and a lot of tools that sound amazing in demos but don't hold up in real daily work. Here are the ones that have genuinely stuck in my workflow and that I reach for regularly.

• Cursor - AI coding assistant built into a VS Code fork. Great for generating React component boilerplate, writing repetitive Tailwind CSS patterns, and autocompleting based on context. It's not perfect, but it's fast enough that the time savings outweigh the occasional wrong suggestion. I use it daily.
• v0 by Vercel - Generates React and Tailwind CSS components from text descriptions. The quality is surprisingly good for starting points. I use it when I need a component structure quickly and want to skip the boilerplate phase. I always rewrite the output, but it gives me a solid skeleton.
• Claude - For rubber-ducking design decisions, reviewing component APIs, brainstorming interaction patterns, and writing documentation. It's excellent at thinking through the edge cases of a component API design. I also use it to draft accessibility strategies for complex UI components.

Where AI Falls Short

AI is great for scaffolding but terrible for final polish. It generates decent structure but mediocre design taste. It can write a form component but it won't obsess over the 2px spacing adjustment that makes it feel right. The detail work, the craft, the design sensibility, that's still 100% human. Use AI to go fast, then slow down and apply your own judgment for the finishing touches.

Websites and Resources I Check Daily

Staying current in the frontend development space requires intentional information consumption. Here are the resources I actually visit regularly, not just bookmarked and forgot about.

My Daily Workflow

Here's what a typical day of design engineering work looks like for me. The order matters because each step builds on the previous one. Skipping steps or doing them out of order usually leads to rework.

The Short Version

The tools don't make the design engineer. Your eye for detail, your understanding of user experience, and your ability to bridge the gap between design and code, those are what make you valuable. But the right tools remove friction and let you focus on the craft instead of fighting your environment. Find the tools that work for your workflow, master them, and don't chase every shiny new thing that shows up on your timeline. The best toolbox is one you actually use every day.