My Essential Toolkit for Web Design and Webflow Development

1. Webflow — Speed Without Sacrificing Control

A visual web design and development platform for building responsive websites without writing code manually.

Webflow is my primary build environment, whether I’m designing from scratch or translating a client’s finished design into a working site. It combines the creative freedom of visual design with the precision of clean, semantic HTML and CSS.

Efficiency in Webflow isn’t just about drag-and-drop. Keyboard shortcuts, reusable components, and project-to-project copy-paste let me work quickly while keeping the structure consistent.

For dynamic, content-driven projects, features like CMS collections help keep sites scalable and easy to maintain long after launch.

2. Relume — Wireframes, Site Maps, and Client-First Classes

An AI-powered wireframing and sitemap tool with Webflow-ready components.

Relume is a tool I use on almost every project — whether I’m leading the design or focusing purely on development. Its biggest advantage is speed, turning ideas into structured layouts in minutes.

The built-in Client-First class naming system keeps everything organised from the start, making the build phase cleaner and faster. Combined with visual sitemaps, it ensures everyone is working from the same structure before detailed design begins.

3. Figma — Design and Collaboration in One Place

A collaborative interface design tool for creating and sharing website and app layouts.

Figma is my main space for developing page layouts and sharing them with clients. It’s equally valuable when I’m working as a developer with a client or another designer providing the visuals, acting as a single source of truth for accurate translation into Webflow.

Clients can view, comment, and approve designs in real time, making collaboration smoother and avoiding long revision cycles.

4. PageSpeed Insights — Measuring More Than Just Speed

A free Google tool that analyzes a webpage’s performance, accessibility, and SEO.

PageSpeed Insights goes beyond simple load-time scores to provide a detailed breakdown of how a site performs for real users. It highlights opportunities for optimisation across performance, accessibility, SEO, and best practices — from image compression and efficient code delivery to stable layouts as pages render.

The report doesn’t just flag issues — it prioritises them — helping me focus on the changes that will have the biggest impact on speed, user experience, and search visibility.

5. Chrome DevTools — Seeing the Site as It Really Is

A set of built-in browser tools for inspecting and debugging websites.

Chrome DevTools lets me see the live code exactly as it’s delivered in the browser, rather than relying solely on Webflow’s visual Designer view. This matters because the Webflow canvas doesn’t always match the final output — extra classes, inherited styles, or browser-specific quirks can all affect how a site renders.

By working directly in DevTools, I can pinpoint the exact cause of a layout or styling issue and test adjustments in real time, ensuring fixes are precise and efficient.

6. BrowserStack — Cross-Browser Testing Without the Hardware

A platform for testing websites on real browsers and devices without having to own them all.

No matter how polished a site looks in Webflow, it still needs to be tested in the environments your audience will use. BrowserStack makes that process quick and reliable, letting me check performance across a wide range of browser and device combinations.

It’s particularly helpful for spotting inconsistencies in font rendering, layout alignment, and even the occasional missing images in Safari — all before the site goes live.

7. ChatGPT — AI Support for Development and Content

An AI chatbot that can generate text, write code, and answer questions in natural language (and no, it can’t actually make you a coffee… yet).

ChatGPT has become a daily companion in my workflow. I use it to draft quick JavaScript snippets, troubleshoot tricky CSS issues, and brainstorm possible approaches to technical challenges.

It’s also useful outside of pure development — for example, drafting this blog post or reframing technical explanations in plain language for clients. While it doesn’t replace expertise, it accelerates problem solving and frees up more time for creative work.

Conclusion

While new tools appear all the time, these have proven their value across countless projects. They help me work efficiently, keep projects organised, and deliver websites that are not only visually strong, but fast, accessible, and built to last.

Frequently Asked Questions

Do I need Figma to build a website in Webflow?

No — you can build a Webflow site without Figma, but using Figma makes the design process smoother. It’s a powerful way to create and share layouts before development. I can also work from other design files or a pre-designed Webflow template.

Can I use Relume without knowing Webflow?

Yes — Relume works as a standalone wireframing tool, but it shines when paired with Webflow. Its components are optimised for Webflow, so you can import them directly without reorganising or renaming classes.

What’s the best wireframing tool for Webflow projects?

For speed and seamless integration, Relume is hard to beat. It offers AI-assisted wireframing, visual sitemaps, and the Client-First class naming system, making it highly efficient for planning a Webflow site.

Is Google PageSpeed Insights enough to test a Webflow site’s performance?

PageSpeed Insights is an excellent free tool for performance, accessibility, SEO, and best practices. For the clearest picture, I pair it with Webflow’s audits and cross-browser testing.

How can I test a Webflow site in Safari without a Mac?

Use BrowserStack to preview your site on Safari, iPhones, and other Apple devices without owning the hardware. It’s also useful for testing older browsers and uncommon screen sizes.

Can ChatGPT help with Webflow development?

Yes — ChatGPT can accelerate your workflow by drafting quick code snippets, suggesting fixes for tricky issues, and generating placeholder content. It’s not a replacement for a developer, but it’s a strong productivity booster.

What tools should every beginner Webflow developer learn?

Start with Webflow, Figma for collaborative design, and Relume for wireframing. Then add PageSpeed Insights for performance testing, Chrome DevTools for debugging, and BrowserStack for cross-browser checks.