Prompted: We Put AI Code Assistant Cursor to the Test

Since generative AI tools first took the stage, coding assistants have been hogging the spotlight. Because code is basically a highly precise, systematic language, it’s a perfect fit for large language models’ ability to recreate language patterns. This natural compatibility aligns with AI’s promise to democratize digital skills and speed productivity. To put that promise to the test, our Content Studio’s design team took top AI code editor Cursor for a spin. The test? Building a new module for the Tier One website. Spoiler alert: It delivered, but needed a hefty helping of human expertise.

The Challenge

We were already pretty familiar with Cursor here at Tier One. (We even highlighted it in a previous edition of Prompted.) Cursor is a favorite AI tool for designers and developers because it allows users to generate new code and troubleshoot existing code using natural language commands. Its intuitive interface makes testing and iterating on results easy, a challenge developers often face when using more traditional coding environments.

Though we’ve used Cursor for help with debugging and small tasks, now we wanted to test a full project. Our module needed to display a wall of client logos and be sortable by industry to help prospects get an at-a-glance view of our areas of expertise.

The Initial Prompt

Starting with a specific, detailed prompt is key to getting good results from any AI tool. Our initial prompt instructed the AI on layout, looks, and behavior:

“​​Create a 3x3 logo wall module in html with three breakpoints. The logo wall should be 3 wide on desktop, 2 wide on tablet, and 1 on mobile. Rows that only have 2 or 1 logo should be centered. Above the logo wall should be three buttons that, when clicked, hide logos that are outside a specified category. When the buttons are clicked, smoothly animate the transition between logos fading in and out of view.”

One of our designers’ favorite Cursor features is the ability to easily preview content directly from the coding window. We were in a pretty good place after our initial prompt — though it needed a few tweaks.

Troubleshooting

While your first prompt is important, AI’s power really shines when you continue the conversation. Cursor stands out among other coding tools because it makes troubleshooting easy, highlighting areas where adjustments can be made, explaining its reasoning, and allowing users to quickly accept or reject those changes.

Working with Cursor’s editing capabilities, we added a show all option to the module. After experimenting, our designers also decided a drop down menu would be more user-friendly than buttons, and prompted Cursor to make that change.

Where a Human Comes In

After a few more adjustments, we were ready to bring the module into HubSpot, our website platform. Here’s where human expertise became essential. Because HubSpot is designed for drag-and-drop website building, its backend speaks a specific language to allow for more customizability — one our designers are familiar with, but Cursor was not. Instead, we took the code the tool generated and adapted it for the HubSpot platform, adding additional functionality to make the module easy to use and edit on the frontend. Without prior knowledge of HubSpot and its language, standard AI assistants would get totally lost attempting to make these changes.

The Result

In only a couple of hours, we had a totally usable, fully customized website module (though we'd make a few more tweaks before taking it live):

While our designers thought it would take about the same amount of time to create the same module from scratch, Cursor’s targeted troubleshooting capabilities stood out. The tool can detect exactly where issues are in the code and eliminates the need to comb through the entire code to make simple edits. The main downside: We weren't able to get a final product from Cursor — human input (and expertise!) were required to polish and finalize the design to meet our standards.

If You’re Going to Use Cursor…

Overall, we recommend Cursor with a few caveats. If you’re considering an AI assistant to help with design and development, set yourself up for success with these three tips:

• Start with the right prompt: Picture your end product when crafting your initial prompt and make sure you provide enough details — AI can’t read your mind.
• Iterate, iterate, iterate: If you aren’t satisfied with your initial product, keep the conversation going and help the AI learn what you need.
• Never forget the human touch: We’ve said it before and we’ll say it again: AI has its limits, and there’s no replacing real human creativity and knowledge.

Need some extra expertise to make your AI-driven designs easy to use and easy on the eyes? The Tier One team of (human) editors, storytellers, designers, and UX/UI experts is here to help.