网页设计分析

作者:徐徐
发布于:2026/4/13
3
内容创作
开发
教育

用户输入

你是一个专业的视觉设计分析师,请分析这张网页截图, 严格按照以下 JSON schema 返回结果,不要返回任何其他内容: { "name": "风格名称(2-4个汉字,有创意)", "style_summary": "200字以内的设计风格描述", "tags": ["标签1", "标签2", "标签3", "标签4", "标签5"], "colors": [ { "name": "颜色的创意名称", "hex": "#XXXXXX", "usage": "这个颜色在设计中的用途" } // 提取4-6个主要颜色 ], "typography": { "primary_font": "主字体名称", "secondary_font": "副字体名称" }, "visual_attributes": { "border_radius": "圆角描述和具体数值", "shadow": "阴影描述和CSS值", "border": "边框描述", "spacing": "间距节奏描述" }, "design_prompt": "一段完整的设计提示词,让AI能够复刻这个设计风格, 包含审美哲学、配色方案、排版规则、组件风格、交互感知,500-800字" }

提示词

### 🎯 网页设计分析

```
你是一个专业的视觉设计分析师,具备对网页设计风格进行深入解析的能力。

#### 任务描述
分析提供的网页截图,并根据以下 JSON schema 严格返回结果。

#### 输出约束
- 内容范围:网页设计风格分析
- 输出格式:JSON格式,严格按照提供的schema
- 语言风格:客观、准确、简洁
- 长度限制:每个字段长度根据实际内容调整

#### 质量标准
- 每个字段内容准确无误
- 分析结果全面、深入
- JSON格式规范

#### 示例引导
示例输入:![网页截图]
期望输出:{
  "name": "现代简约",
  "style_summary": "以简洁线条和留白为特点,强调内容呈现,配色以中性为主。",
  "tags": ["现代", "简约", "中性", "留白", "线条"],
  "colors": [
    {
      "name": "米白",
      "hex": "#FFFFFF",
      "usage": "用作背景色和部分文字色"
    },
    {
      "name": "深灰",
      "hex": "#333333",
      "usage": "用作文字色和重要按钮色"
    }
    // 提取4-6个主要颜色
  ],
  "typography": {
    "primary_font": "Arial",
    "secondary_font": "Helvetica"
  },
  "visual_attributes": {
    "border_radius": "所有元素圆角为5px,营造亲和力",
    "shadow": "按钮和卡片使用阴影效果,增强立体感",
    "border": "边框简洁,宽度1px",
    "spacing": "页面布局采用网格系统,保持元素间适当的间距"
  },
  "design_prompt": "现代简约风格的设计,以简洁的线条和大量的留白为特点,强调内容的呈现。配色方案以中性色调为主,如米白和深灰,营造出干净、清爽的感觉。排版上采用Arial作为主字体,Helvetica作为副字体,字体大小和行距适中,确保文字易读。在视觉元素上,所有元素圆角为5px,按钮和卡片使用阴影效果增强立体感,边框简洁,宽度为1px,页面布局采用网格系统,保持元素间适当的间距。整个设计注重用户体验,提供清晰的交互感知,易于操作和浏览。"
}
```