To keep the AI from breaking my design, it only writes JSON. I built that out for real, and the JSON turned into code
While mass-producing web tools with an AI, I've changed how I lock the design in three stages. The previous post I wrote about that got this comment: "I'd like to see the JSON approach and the design-system approach side by side." Taken at face value, I should just put the two side by side. But first, let me add a short preface. I don't want to frame this as "the JSON approach versus the…
The AI was programmed to only generate JSON data for mass-producing web tools, with the JSON then converted into code. The design was locked in three stages, with the JSON approach resulting in a thin-looking page, while the design-system approach produced a richer-looking page. The JSON approach lacked the ability to localize the BMI calculator to other languages, as the fixed template hard-coded the English labels without a corresponding JSON key.
In contrast, the design-system approach produced the four-band labels in all five languages on the spot, preventing localization issues. The JSON approach also had a stray background color violation in the scale marker, which went unnoticed as it didn't affect the displayed color. The design-system approach had a marker that overlapped the BMI band, making it difficult to read, but this could be caught by a machine check.
Overall, the design-system approach provided a richer-looking page with better localization and fewer hidden flaws, despite both approaches ultimately producing the same BMI calculator screen.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
