Make AI‑Generated Web Pages Look Original with a Design JSON in 1 Minute

Step 1: Capture Screenshots and Create a JSON Style File

Find a website you want to emulate and take screenshots. If you only need part of the UI, capture that portion with a screenshot tool; for the whole site, capture the full page.

Open Chrome DevTools (F12) and press Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac).

In the command palette type screenshot and choose Capture full size screenshot.

Feed the screenshot to any AI tool (e.g., GPT, Cursor, Claude) with a prompt such as:

创建一个能体现该布局风格的设计.json 文件。包含结构、间距、字体和颜色等要素，以便我将其作为应用程序的设计系统使用。目标是帮助 AI 精准复现这种视觉效果。

In the example the author used codex to generate the file.

After this step you have a design.json style file representing the reference site.

Step 2: Generate the Page Using the Style JSON

When prompting the AI to generate a page, add a constraint to use the design.json for styling: 要求使用design.json 进行样式设计 For example, to create a landing page for a “nano banana” model image, the prompt (shown in the image) was used.

The resulting page is compared with the original reference; the left side shows the AI‑generated page, the right side the reference.

Summary

Constraining AI with a style JSON file is currently the simplest and most direct approach. Other methods include breaking the generation into multiple steps—first creating the UI framework, then filling in individual modules.