Cursor and v.0 integration
Skills: digital design, front-end development, project implementation
In the Britannica art team, we have historically used a combination of slide-based products (such as Infogram and Flourish) and Adobe programs (namely Animate) to produce interactive assets. When projects arose that fell outside the bandwidth of those limited tools, we would contract freelance developers to create bespoke HTML products. However, our content is constantly evolving—as are the ADA AA standards our educational content must meet. In order to eliminate breaks in our workflow, ensure our interactives could be maintained in-house, and push our multimedia content to the next level, we decided to integrate vibecoding agents into our set of tools.
However, I, like the rest of my team, was cautious about using AI in our design process. We did not want out work to lose the hand-crafted feel we spent so long cultivating, nor produce errors that could undermine the credibility of the Britannica brand. Starting in July 2025, I was part of a small team tasked with creating a set of templates, workflows, and documentation to ensure these vibecoding tools were used to support our work, not hurt it.
Our goal was to develop documentation that
Visually adaptable, giving editors the tools they need to create unique, beautiful work that does not look like AI slop
Detailed, specific, and easy to use, ensuring all new work meets ADA AA guidelines and could be smoothly displayed on Britannica.com
Was cost effective within each product, allowing us to optimize these expensive tools for various use cases
Project planning, testing, and analysis
The first step in designing our template was to test the limitations of our new tools. After extensive research and with the guidance of our product team, we decided to start with v.0 by Vercel: the tool is known for its “Design Mode” that allows tight control over UI and design specifications. We immediately started testing v.0 on new projects, and developed a series of calculators and drag-and-drop games. For each project, I extensively documented each chat and media upload, developing guidelines that were shared among the team to streamline our workflow.
Immediately, the benefits of using vibecoding to create HTML interactive were obvious. The pace of work and capabilities of our new interactive far outpaced what our former tools were able to do. However, three major problems arose:
Because v.0 used React instead of HTML, and React is incompatible with our site, we had to convert each interactive into HTML after the fact. This created visual and content inconsistencies that were almost impossible to remedy.
Even with the design tools, v.0 products were hard to customize. The simplicity in font and UI options made our work look flat and monotonous.
v.0 has limited ability to integrate media and large volumes of data (API, GeoJSON files, etc), which limited the complexity of our final product.
On the left and right are some previews of our initial documentation process, including copies of our chat entries. In the center is a preview of some of our first bespoke HTMLs built in v.0.
Building and refining our documentation
That’s why, about seven months after launching the project, we transitioned to Cursor. In order to account for the lack of “Design Mode”—in Cursor, all edits go through a chat box—I helped create a thorough guide to help editors customize color palettes, UI components, and typography systems. I also created a series of template file trees and spreadsheets that corresponded to common interactive types (image sliders, photo zooms, calculators, etc). This way, editors can drop in the photos they are using, input simple copy into the spreadsheets, and expect Cursor to deliver a predictable product that meets our brand guidelines and is ADA compliant. After meeting with numerous subject and media editors, we refined these templates and guidelines to make them clearer and fix display issues.
