I’m not going to lie to you working with Webflow was something I wasn't expecting to do when I joined Skyrocket Digital as a contractor back in the pandemic arc of the world, I thought most of my work was going to be writing code to develop front and back end; And for a while it was, but that was not the only project I was working on with them. Another project I was tasked to do was a full Webflow build (bear in mind at this point, I’ve never used Webflow before), and I used to be the type of developer that would look at both no-code and low-code tools and make a face.
Fast forward about 4 years and I’ve launched 14+ sites between work and personal projects using Webflow. As a low-code tool, it allows designers and developers to launch websites really fast, but for me as a developer, it also has the flexibility for me to add functionalities that otherwise are not available in the platform.
Over time, I’ve built up a set of go-to tools I rely on for both work and personal projects for building great sites. Today I’m looking forward to sharing them with you all!
Getting started
This might be a surprise for a lot of people but I’d say planning is the most important step. I say it might be a surprise because throughout my career, I’ve seen a crazy amount of projects that start with “I need this product to be out by this day” without even going through a planning session, and I’m sure I’m not the only one getting this type of a problem. But to make something great, planning is the first tool. And for that I honestly cannot encourage you enough to generate a Product Requirement Document (PRD).
What is a PRD?
Just as I explained in my article High-Quality Software: what is it and why is it worth, it defines a product's purpose, features, functionality, and behavior. Essentially, it's a guide for development teams and stakeholders that makes sure everyone is aligned on what the product should be and why. I’m not going to explain how to make one here, for that you can read my linked article or you can take a look at this resource by Atlassian, which goes through it more thoroughly.
Even when I strongly believe that doing things yourself is how you fully understand what you need, I’m also aware that nowadays some people want to use LLMs to generate it all; so why not, here’s a prompt aimed to “Generate a PRD”
As Head of Product, I want you to approach this task with the mindset of crafting a world-class PRD. When given a brief description or request for any new product (software feature, website, service, physical product, etc.), follow these steps exactly:
### 1. Ask clarifying questions to gather detail. Cover:
- Problem/Goal: What problem does this product solve? What is the goal? Define the clear purpose of this product or feature or assumption test and its impact on users and the business.
- Target User: Who is the primary user or customer? including key user personas or segments.
- Core Functionality: What key actions must the user perform? What is the core of the product?
- User Stories: Provide user stories (As a [type of user], I want to [action] so that [benefit]).
- Acceptance Criteria: How will we know the product is complete? List success criteria.
- Scope/Boundaries: What is explicitly out of scope?
- Data/Resource Requirements: What data, materials, or resources must be displayed or used?
- Design/UX: Are there design mockups, style guidelines, physical dimensions, or user experience requirements?
- Edge Cases/Risks: List potential error conditions, manufacturing constraints, compliance issues, or unusual flows.
### 2. After receiving answers, generate a Product Requirements Document (PRD) in Markdown format with this structure:
- Introduction/Overview: Describe the product, problem it solves, and goal.
- Goals: List specific, measurable objectives.
- User Stories: Detail user narratives describing usage and benefit.
- Functional Requirements: Numbered list of explicit requirements (e.g., “The system must allow users to upload a profile picture.” or “The device must operate at temperatures between X and Y.”).
- Non-Goals (Out of Scope): List what this product or feature will not include.
- Design/UX Considerations (Optional): Link to mockups; describe UI/UX, physical design, packaging, or style components.
- Technical/Manufacturing Considerations (Optional): Note constraints, dependencies, materials, compliance, integration points, or suggested technologies.
- Success Metrics: Define how success is measured (e.g., “Increase user engagement by 10%,” “Reduce production costs by 15%,” “Achieve ISO certification”).
- Open Questions: List any remaining items needing clarification.
### 3. Name the file ```prd-[product-name].md``` and place it under ```/tasks/.``` Do not implement or build; only produce the PRD.
### 4. Present the draft PRD to the user. Invite feedback by asking if any sections require clarification, if ideas should be refined, or if the user wants to finalize. If the user indicates completion, stop.
Design
Now that we know what we’re making it’s time to decide how this is gonna look, and for that there are 2 paths: design it from scratch or use a template.
If you prefer to design from scratch you will need to get a design system in place and figure out color palettes, fonts, text sizes, etc. Not gonna lie, I’m really bad at getting those out of my sleeve, so to get all I need I usually go for the following tools:
Color palette:
To generate the color palette I would recommend using Coolors as a source. The tool is great and has already generated palettes made by the community or you can re-roll your palette until you find something you like.
.avif)
A small bonus for colors I like pairing coolors with RealTime Colors, an additional resource that allows you to see the color palette in real time and how it will feel in a website.
.avif)
Fonts and font sizes:
I really love the combo of Typescale and FontJoy. One helps you get matched fonts and the other helps you generate the typography and scale for every element on your site!
.avif)
Build
After this you can decide on a framework to use (if you want to ). A lot of people use Client First or Lumos. They both offer a large amount of customization and utility classes out of the box and believe me when I tell you the community loves them. In my case I go for something simpler, with only what I need and to add more over time, so I have my personal style guide which is also available for cloning and is what I used to create my website. Whether you go with a full system like Client First or build your own style guide like I do, having a framework will definitely save you time.
Using component libraries
I can’t say no to a good component library, they are always of great help and for Webflow I believe Relume is currently your best bet. Without a subscription you get enough components to build a simple website in just a couple of hours, but with the subscription you will get a huge amount of components to use and if you are into automated generation, their AI site builder uses their components to generate a full website based on your prompt which you can export to Webflow to style and wrap up. In Addition to that Flowbase also has a bunch of top-tier components for you to use.
All that considered, I don’t personally use their components as they are out of the box because I don’t use Client First BUT even then these pre-made components save me around 80% of the time it takes to build a site since I can get them and strip away anything I don’t want.
What about templates?
For templated websites I will go on and say if you’re using Webflow you can browse on Webflow’s template library with a wide range of free and paid options.
Extras
Once you build your site you may want to add additional functionalities to it, and believe me the ones I’m sharing here are just the tip of the iceberg. For adding functionalities like filters, merging CMS lists, CMS forms, CMS Carousels, form validations and more Finsweet Attributes is definitely the main choice. There are several other options like some scripts created by Flowbase or my own open-source library Webtricks, which also has CMS integrations as well as multiple utilities like read time for articles or marquees all using attributes. Now if you’re trying out other integrations like a CRM I would recommend Hubspot which offers a free plan that works well for most small businesses.
For carousels I would say Swipper is definitely the best option.
Really good looking animations with a little bit of code can be achieved by using Gsap Which is now owned by Webflow and can be included in every single website through the settings tab.
And many more that can be added through Webflow apps, I also know that Wized is used by a lot of people but I personally haven’t tried it out, this is supposed to rapidly write JavaScript in a low-code visual interface built for Webflow.
Automations are worth the time
Automated processes are the thing everyone is talking about and it seems to be the focus of every single article nowadays so to automate processes with your Webflow site. From setting the time to read an article to generate a complex process to send a carefully crafted reply email to your clients when requesting help using AI, Make.com is going to be your best ally, Zapier is also there but in my experience so far I prefer how Make works best.
Ready, Set, Build!
There you have it, those are the tools I use now or I’ve used in the past in order to work on Webflow and build some awesome sites. The Webflow subreddit is also a great community to join regardless of your level, I’m sure if anyone has an issue someone will definitely help or at least point you in the right direction. All I can say now is take this, check some tutorials and get to build; the best way to start making great things is working on smaller things first!
