Since generative AI instruments first took the stage, coding assistants have been hogging the highlight. As a result of code is mainly a extremely exact, systematic language, it’s an ideal match for big language fashions’ capacity to recreate language patterns. This pure compatibility aligns with AI’s promise to democratize digital expertise and velocity productiveness. To place that promise to the check, our Content material Studio’s design staff took prime AI code editor Cursor for a spin. The check? Constructing a brand new module for the Tier One web site. Spoiler alert: It delivered, however wanted a hefty serving to of human experience.
The Problem
We have been already fairly aware of Cursor right here at Tier One. (We even highlighted it in a earlier version of Prompted.) Cursor is a favourite AI instrument for designers and builders as a result of it permits customers to generate new code and troubleshoot present code utilizing pure language instructions. Its intuitive interface makes testing and iterating on outcomes simple, a problem builders typically face when utilizing extra conventional coding environments.
Although we’ve used Cursor for assist with debugging and small duties, now we needed to check a full venture. Our module wanted to show a wall of shopper logos and be sortable by trade to assist prospects get an at-a-glance view of our areas of experience.
The Preliminary Immediate
Beginning with a selected, detailed immediate is essential to getting good outcomes from any AI instrument. Our preliminary immediate instructed the AI on format, seems to be, and conduct:
“Create a 3×3 brand wall module in html with three breakpoints. The emblem wall must be 3 vast on desktop, 2 vast on pill, and 1 on cell. Rows that solely have 2 or 1 brand must be centered. Above the emblem wall must be three buttons that, when clicked, cover logos which might be outdoors a specified class. When the buttons are clicked, easily animate the transition between logos fading out and in of view.”
Considered one of our designers’ favourite Cursor options is the power to simply preview content material instantly from the coding window. We have been in a reasonably good place after our preliminary immediate — although it wanted a couple of tweaks.
Troubleshooting
Whereas your first immediate is necessary, AI’s energy actually shines whenever you proceed the dialog. Cursor stands out amongst different coding instruments as a result of it makes troubleshooting simple, highlighting areas the place changes may be made, explaining its reasoning, and permitting customers to shortly settle for or reject these adjustments.
Working with Cursor’s modifying capabilities, we added a present all choice to the module. After experimenting, our designers additionally determined a drop down menu could be extra user-friendly than buttons, and prompted Cursor to make that change.
The place a Human Comes In
After a couple of extra changes, we have been able to deliver the module into HubSpot, our web site platform. Right here’s the place human experience turned important. As a result of HubSpot is designed for drag-and-drop web site constructing, its backend speaks a selected language to permit for extra customizability — one our designers are aware of, however Cursor was not. As a substitute, we took the code the instrument generated and tailored it for the HubSpot platform, including further performance to make the module simple to make use of and edit on the frontend. With out prior data of HubSpot and its language, normal AI assistants would get completely misplaced trying to make these adjustments.
The End result
In solely a few hours, we had a very usable, totally custom-made web site module (although we would make a couple of extra tweaks earlier than taking it stay):
Whereas our designers thought it could take about the identical period of time to create the identical module from scratch, Cursor’s focused troubleshooting capabilities stood out. The instrument can detect precisely the place points are within the code and eliminates the necessity to comb by means of the whole code to make easy edits. The principle draw back: We weren’t in a position to get a remaining product from Cursor — human enter (and experience!) have been required to shine and finalize the design to satisfy our requirements.
If You’re Going to Use Cursor…
General, we advocate Cursor with a couple of caveats. In case you’re contemplating an AI assistant to assist with design and improvement, set your self up for achievement with these three ideas:
- Begin with the best immediate: Image your finish product when crafting your preliminary immediate and ensure you present sufficient particulars — AI can’t learn your thoughts.
- Iterate, iterate, iterate: In case you aren’t happy along with your preliminary product, hold the dialog going and assist the AI be taught what you want.
- Always remember the human contact: We’ve mentioned it earlier than and we’ll say it once more: AI has its limits, and there’s no changing actual human creativity and data.
Want some additional experience to make your AI-driven designs simple to make use of and straightforward on the eyes? The Tier One staff of (human) editors, storytellers, designers, and UX/UI specialists is right here to assist.