一种依托多模态大模型实现网页设计仿真的方法

看到一个好看的网页，很多人第一反应是：能不能让AI照着做一个？

比如看到一个电商首页：浅色背景、黑色细边框、四列商品网格、胶囊按钮，促销区居中排版。现在要做一个 CNC 设备展示官网，业务完全不同，但希望页面有类似的视觉气质。

如果只对模型说：

参考这个网页风格，帮我生成一个 CNC 设备官网。

直接上来就让它写 HTML，结果通常不会太理想。AI可能记住了浅黄色背景、黑色文字、橙色按钮，却漏掉更重要的结构：卡片为什么没有间距，边框怎么分隔，标题和价格怎么排，首屏左右分栏是什么比例。

方法：先提取设计规格，再生成 HTML

更好用的做法是先让有多模态能力的AI模型看截图，把关键的设计规格提取出来，再让AI按这份规格生成页面。

这样产生的“复刻”可以迁移它的视觉语言：配色、排版、卡片、按钮、分隔线、商品列表，以及那些一眼能看出来、但很难一句话讲清楚的细节。

这个方法分两步，简单说，就是先看图写规则，再按规则写页面。

第一步，用多模态模型读取网页截图，提取设计元素。截至目前，性价比最高的模型是 Gemini 3 Flash。它看图效果好，速度快，成本也低。

第二步，把这些元素整理成的设计规格 JSON，交给AI模型进行HTML代码生成。

这份规则可以叫“设计规格 JSON”，也可以叫“设计指南”。它有点像给模型看的 design tokens，但范围更大。传统 design tokens 通常是颜色、字号、间距、圆角；这里还会写布局、网格、边框、组件关系、文字排列、图片和标签的位置。

第一步：从截图里提取设计元素

第一步的 Prompt 会让模型扮演像素级 UI/UX 检查员和设计系统逆向工程师。它不评价页面好不好看，只提取截图里的视觉规则，最后输出 JSON。

比如没有阴影，就写没有阴影。没有圆角，就写直角。后面生成 HTML 时，模型拿到的是明确规则，而不是“简洁”“高级”“现代”这类很难执行的形容词。

可以直接使用这段 Prompt：

# Role: Pixel-Perfect UI/UX Inspector & Design System Reverse Engineer
 
## 🎯 Objective
Your task is to analyze the provided UI screenshot and extract a **High-Precision Design Specification** in JSON format.
**Do not summarize.** You must inspect specific visual attributes based on the detailed checklist below. 
If an attribute is missing (e.g., no shadow), explicitly state "None".
 
## 🔍 Inspection Checklist (The "Rulebook")
 
You must evaluate the image against these specific dimensions:
 
### 1. Global "Physics" (Base Rules)
* **Colors:** Identify specific usage. Don't just list colors; define which is `Background`, `Surface`, `Primary Brand`, `Border`, and `Text-Muted`.
* **Corner Strategy:** Look at buttons and cards. Are they `Sharp (0px)`, `Slight (4px)`, `Modern (8-12px)`, or `Full (Pill)`?
* **Shadows:** Are elements flat? Or do they have `Diffuse Shadows`, `Hard Borders`, or `Glows`?
 
### 2. Layout Topology (Structure)
* **Container:** `Fluid (100%)` vs `Fixed (e.g., 1200px)`.
* **List Pattern:**
    * `Uniform Grid`: All items identical size (e.g., 4 columns).
    * `Masonry`: Items aligned vertically but varying heights.
    * `Bento/Hierarchy`: First item large, others small.
 
### 3. Component Deep-Dive (CRITICAL for Accuracy)
* **Spatial Relationships (Overlays):**
    * Check Date Badges/Tags: Are they *inside* the image? *Overlaying* the edge? *Floating*?
    * Check Metadata: Is it aligned with the title or the badge?
* **Internal Micro-Layouts (Flex Logic):**
    * **Vertical Stack vs. Inline:** For a date badge, is "15" above "Oct", or are they side-by-side "Oct 15"?
    * **Alignment:** Is text Center-aligned or Left-aligned?
* **Decoration:** Look for *underlines*, *colored bars*, *icons*, or *background patterns*.
 
---
 
## 📝 FORCED OUTPUT JSON SCHEMA
 
Please fill out the following JSON. The values provided in the schema are **examples/options** to guide your analysis. Replace them with actual observed data.
 
```json
{
  "1_global_design_tokens": {
    "palette_logic": {
      "page_background": "#HEX (e.g., #F9F9F9)",
      "card_surface": "#HEX (e.g., #FFFFFF)",
      "primary_brand": "#HEX (Used for: Buttons/Links)",
      "text_main": "#HEX",
      "text_muted": "#HEX (Used for: Dates/Meta)",
      "border_color": "#HEX (e.g., #E5E5E5 or None)"
    },
    "shape_rules": {
      "global_corner_radius": "e.g., 8px",
      "button_shape": "e.g., Pill-shape (Full Rounded)",
      "input_field_style": "e.g., Gray background, no border"
    },
    "typography_vibe": {
      "headings": "e.g., Bold, Tight spacing (-0.02em)",
      "body": "e.g., Relaxed line-height (1.6)"
    }
  },
 
  "2_layout_structure": {
    "section_container": "e.g., Centered Fixed Max-width ~1200px",
    "grid_system": {
      "type": "Uniform Grid / Masonry / Asymmetrical",
      "columns_desktop": "e.g., 4 Columns",
      "gap_size": "e.g., 24px (Approx)"
    },
    "section_header_style": {
      "alignment": "Center / Left",
      "decorative_elements": "e.g., 'Small orange bar (40px) under title' OR 'None'"
    }
  },
 
  "3_component_anatomy_analysis": {
    "primary_card_component": {
      "container_style": {
        "border": "e.g., 1px Solid #EEE / None",
        "shadow": "e.g., Large diffuse shadow on Hover",
        "padding": "e.g., 0px (Image flush) or 20px (Internal padding)"
      },
      "media_image": {
        "aspect_ratio": "e.g., 16:9 / 4:3 / 1:1",
        "position": "Top / Left"
      },
      "complex_elements_topology": {
        "date_badge": {
          "is_present": true,
          "position_type": "e.g., Absolute Overlay / In-Flow / Straddling Edge",
          "exact_location": "e.g., Bottom-Left of Image area",
          "internal_layout": "e.g., 'Vertical Stack (Day on top of Month)' OR 'Inline Single Line'",
          "visual_style": "e.g., Orange Background, White Text"
        },
        "meta_info_row": {
          "is_present": true,
          "content": "e.g., Eye Icon + Count",
          "position_relative_to_badge": "e.g., 'To the right of the badge' OR 'Below the title'",
          "vertical_alignment": "e.g., Center-aligned with badge"
        }
      },
      "text_content_flow": {
        "title": {
          "weight": "Bold",
          "margin_top": "e.g., 16px from image"
        },
        "excerpt": {
          "lines": "e.g., Clamped to 2 lines",
          "color": "Muted Gray"
        }
      }
    }
  }
}

这段 Prompt 把“网页风格”拆成一组关键设计指标。

关键设计指标包括：

颜色用途：背景、卡片表面、品牌主色、边框、弱化文字。
形状规则：卡片、图片、按钮、输入框是直角、小圆角、大圆角还是胶囊形。
阴影与边界：靠阴影做层次，还是靠边框、分隔线或发光效果。
页面结构：容器是全宽还是固定宽，板块之间怎么分隔。
列表模式：统一网格、瀑布流，还是 Bento 布局。
组件关系：标签、日期、价格、标题、图片之间怎么摆放。
内部微布局：日期上下堆叠还是横向排列，文字居中还是靠左。
装饰元素：下划线、色条、图标、背景块、横线、竖线是否参与风格表达。

这些指标作为网页设计的关键指标。后面生成 HTML 时，页面像不像参考页，主要看这些信息有没有提取到位。

举个例子。只写 #F49F1C 没什么用。写成“这个颜色用于主按钮和促销标签”，模型才知道怎么放。

布局也一样。浅黄色背景、黑色 1px 分隔线、四列商品网格、卡片零间距，这些都要写进规格里。

设计规格大概是什么样

一份提取出来的的设计规格大概是这样：

{
  "1_global_design_tokens": {
    "palette_logic": {
      "page_background": "#FDF2D0",
      "card_surface": "Transparent (Inherits page background)",
      "primary_brand": "#F49F1C",
      "text_main": "#000000",
      "text_muted": "#666666",
      "border_color": "#000000"
    },
    "shape_rules": {
      "global_corner_radius": "0px (Sharp edges for containers/images)",
      "button_shape": "Pill-shape (Full Rounded for Email/CTA buttons)",
      "input_field_style": "Pill-shape, white background, thin black border"
    },
    "typography_vibe": {
      "headings": "High-contrast Serif (e.g., Cheltenham or similar), Bold, Tight tracking in hero text",
      "body": "Clean geometric Sans-serif, Uppercase labels for secondary metadata",
      "links": "Underlined sans-serif for 'Add to Cart'"
    }
  },

  "2_layout_structure": {
    "section_container": "Fluid 100% width with internal gutters; heavy use of 1px black horizontal and vertical dividers",
    "grid_system": {
      "type": "Uniform Grid for products; Asymmetrical 2-column for feature blocks",
      "columns_desktop": "4 Columns (Product grid)",
      "gap_size": "0px (Items separated by 1px borders)"
    },
    "section_header_style": {
      "alignment": "Left-aligned for main copy; Center-aligned for 'Hold the phone!' promo",
      "decorative_elements": "Thin black hairline dividers (1px) separating major site sections"
    }
  },

  "3_component_anatomy_analysis": {
    "primary_card_component": {
      "container_style": {
        "border": "1px Solid #000000 (Grid layout)",
        "shadow": "None",
        "padding": "20px internal gutter"
      },
      "media_image": {
        "aspect_ratio": "3:4 (Portrait focused bottles)",
        "position": "Center-aligned within the grid cell"
      },
      "complex_elements_topology": {
        "date_badge": {
          "is_present": false,
          "notes": "Uses Product Tags instead"
        },
        "product_tag": {
          "is_present": true,
          "position_type": "In-Flow / Absolute Top-Left of cell",
          "exact_location": "Top-Left corner of the product grid cell",
          "internal_layout": "Single line pill",
          "visual_style": "Pill shape, White background, 1px Black border, Small sans-serif text"
        },
        "meta_info_row": {
          "is_present": true,
          "content": "Heart (Wishlist) icon",
          "position_relative_to_badge": "Opposite side (Top-Right corner)",
          "vertical_alignment": "Top-aligned with product tag"
        }
      },
      "text_content_flow": {
        "title": {
          "weight": "Bold / Semi-bold Sans-serif",
          "margin_top": "12px below image area"
        },
        "price": {
          "weight": "Regular Sans-serif",
          "color": "#000000",
          "position": "Immediately below title"
        },
        "cta": {
          "style": "Text link, Underlined",
          "alignment": "Bottom-left of cell"
        }
      }
    },
    "promo_banner_component": {
      "style": "Image-led with text overlay or adjacent blocks",
      "cta_style": "Large Orange Pill Button for 'Sign Me Up!' or Text + Arrow for 'Learn More'"
    }
  }
}

比如 card_surface 写的是继承页面背景，表示商品卡片不应该另起白底。gap_size 写的是 0px，并说明卡片之间靠 1px 边框分隔，模型就不容易写成常见的圆角白卡片。

提取出来的设计规格

第二步：让模型生成 HTML

有了设计规格，就可以生成页面。最短可以这样写：

设计一个卖 cnc 设备的展示官网。
使用 single html 和 tailwindcss。
遵循下面的指南：

后面接第一步生成的设计规格 JSON。

如果需要更加详细的约束，可以补充更加具体的描述内容：

请根据下面的设计规格，生成一个单文件 HTML 页面。
 
页面主题：一家销售 CNC 设备的展示型官网。
技术要求：
- 使用 single HTML
- 使用 Tailwind CSS
- 不依赖构建工具
- 页面需要能直接在浏览器打开
 
页面结构：
- 首屏
- 产品能力
- 应用场景
- 技术参数
- 客户案例
- 联系转化区
 
设计要求：
- 严格遵循设计规格 JSON 中的颜色、字体、圆角、边框、网格、按钮和分隔线规则
- 内容可以替换，但视觉规则要保持一致
- 图片可以用占位块，并写清楚 alt
- 移动端不能出现文字溢出
 
设计规格 JSON：
{...}

参考站可能是卖酒的，生成页面可以是卖 CNC 设备的。参考站可能是生活方式电商，生成页面可以是保温杯产品页。业务内容变了，但颜色策略、网格结构、按钮形状、边框系统和排版节奏，通过设计规格JSON文件，来进行复刻。

示例效果

下面是一个复刻出来的页面示例。浅色背景、黑色细边框、首屏左右分栏、商品四列网格、促销区居中排版、胶囊按钮，都保留下来了。