Webflow Toolkit

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. Claude — AI Support for Webflow Development

An AI assistant that can work directly with Webflow, helping to automate and streamline development and content management tasks.

Claude has become an invaluable part of my Webflow workflow thanks to its ability to interact directly with Webflow via the Model Context Protocol (MCP). Instead of manually updating content or carrying out repetitive administrative tasks, I can simply describe what needs to be done, and Claude can handle much of the process for me.

Whether it's creating new CMS items, updating existing content, or managing wide-scale changes across a site, the Webflow MCP integration significantly speeds up tasks that would otherwise be time-consuming and repetitive.

It's not a replacement for understanding Webflow, but it does speed up the manual work involved in managing a website. That allows me to spend more time focusing on design, development and delivering value to clients.

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 Claude help with Webflow development?

Yes — Claude can streamline many aspects of a Webflow workflow. Thanks to its Webflow MCP integration, it can help create and update CMS content, manage collections, and automate repetitive tasks that would otherwise be done manually. It's not a replacement for understanding Webflow, but it's a powerful tool for improving efficiency.

What tools should every beginner Webflow developer learn?

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