{
  "id": 794347,
  "title": "To keep the AI from breaking my design, it only writes JSON. I built that out for real, and the JSON turned into code",
  "url": "https://urgent.news/2026/08/13/to-keep-the-ai-from-breaking-my-design-it-only-writes-json-i-built",
  "topic": "ai",
  "section": "AI",
  "published": "2026-08-13T18:34:59.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/mxhlix/to-keep-the-ai-from-breaking-my-design-it-only-writes-json-i-built-that-out-for-real-and-the-318h"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "AI programmed to generate only JSON data",
    "JSON approach resulted in thin-looking page",
    "Design-system approach provided richer page with better localization"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}