Front-end workflow tips for making the most of the Windsurf code editor

Navigating AI-Assisted Front-End Development

As of today, there are many AI assisted code editors. Today I will focus on the Windsurf editor and ways you can guide the code generation process as a front-end developer.

After spending some time with the Windsurf editor and Cursor, I have found there are some capabilities that stand out with the WindSurf Editor and that starts with context. In order to better guide AI through the process of building a front-end application, I have written a few tips that hopefully will help you save valuable time and accuracy in your development process.

It’s also worth mentioning, it can also prompt you to run commands and check the results to determine if the code is correct. You will be prompted to allow those commands to run in your environment and it will check the results for you.

How can we reduce the unpredictable code generation process?

I’ve been seeing some interesting patterns that I think are worth sharing. Where developers start by defining a product requirements document “PRD” and then using that to guide the AI code generation process. This way, you can refer to this evolving document and as you iterate, you can update the document as you go.

Here’s a PRD outline and example of one project that I’m working on which may help you frame this:

• Project Structure
• Common Practices
• VSCode settings
• Directory Structure
• Technical Specifications
• How to extend a component with TailwindCSS and variants
• Variant Class Composition
• Visual Editor (Builder.io)
• Testing
• Deployment

The Hidden Costs of Unguided AI Coding

When AI is used without guidance, it can go amazingly well at first and you will see great progress. Eventually you will end up where the code may get into a place where it’s hard to debug based on introducing a mix of patterns because when it comes to refactoring, you will see that sometimes even existing types can be changed.

This inevitably leads to inefficient development cycles and can be avoided by guiding the AI to follow a clear set of patterns. It’s also helpful if you have built projects before and a keen sense of what to avoid in keeping things simple.

At least at first, my suggestion is to delay making decisions around data handling until you have a working prototype. It can be as simple as a local JSON file or mocked API data that you think might be needed later. This will keep the project scalable and maintanable as you focused on the actual value and user experiences. You can then start to see if this is something that you want to support and invest time on.

Creating a Comprehensive Project Outline

This is where you can begin thinking about adding relevant documentation from the libraries you want to leverage. It’s fairly easy to pull in markdown references from a component library you are using and begin to add a few solid examples to the document and project to refer to.

It may seem like quite a lot of work upfront to create this “PRD” document but you will quickly see the value in having this because it can become the project’s primary source of truth (README.md). If you start to scale, it’s an excellent way to bring people onto the project and ramp up very quickly.

Define Clear Component Requirements

When you decide on how you want to create your components, it’s important to define clear requirements on how components will be created and variations applied. Give concrete examples and a throughough list of common practices that you want the AI to follow.

Here’s something I want to share that has worked rather well for me in my figma to code workflow. I wanted each newly created component to be developed with a TDD mindset:

There should be a bias towards creating components using a TDD mindset. This allows us to create components that are easy to test and reuse. For each new component, let’s start with a test, then implement the component. If the component is not working as expected, let’s fix it. This way, we can create a component that is easy to test and reuse.

Part of this strategy was to implement a storybook approach and by creating a example with all of the variations the component has available. This also includes a mocking strategy for the component in using unit tests.

1. Generate a component from figma and sync the code
2. Create a unit test for the component with a mocking strategy
3. Create a storybook example with all of the component variations

Iterate and Refine Processes

As you go, you might want to add specific examples and try and keep them concise and illustrating the patterns you want to see in your project. For things like common components (modals or forms), you will find having some clear instructions for these will be very helpful.

Best Practices for Front-End AI Coding

Treat AI as a collaborative tool that augments, not replaces, developer expertise.

I’ve found after several weeks of evaluating this new Windsurf editor, that it is an excellent tool but doesn’t replace the developer’s expertise. It’s an amazing way to augment and accelerate the development process for those that can harness it and guide the code generation process.

Implementation Strategy

By establishing a repeatable process for integrating AI-generated code while maintaining design integrity and performance standards, you will find your project is more maintainable and efficient. You will avoid many of the pitfalls of using unguided AI coding and have a much more focused and accurate development process.

It may seem like a lot of effort at first but then you realize that you can repurpose this outline for furture projects, thus saving you more time as you go.

I hope this has been helpful to you and if so, please share and subscribe to my newsletter below!