一、整体介绍

概述

UI/UX Design 数据集面向 modern, high-aesthetic, interaction-rich webpage generation tasks，每条任务均围绕真实网页设计与 AI 辅助前端生成工作流构建，完整记录从用户初始需求、后续多轮交互修改、最终网页生成、视觉截图、动效录屏到轨迹文件沉淀的端到端过程。

每条数据包含用户初始 Prompt 与后续交互 Prompt、最终生成网页的完整截图、最终网页各完整页面及核心动效录屏、可直接运行的 HTML 文件、Trajectory.jsonl 轨迹文件、截图不可见动效的自然语言描述，以及该网页所属领域和场景标签。

与传统单轮 Prompt-Response 数据不同，本数据集强调 Prompt → Multi-turn Interaction → Final Webpage → Preview / Video Evidence → Trajectory 的完整配对关系。模型不仅需要理解用户对页面类型、风格氛围、核心组件、配色布局和动效的要求，还需要在多轮交互中持续修正页面结构、视觉细节、交互状态和动效表现，最终生成一个可打开、可预览、可录屏验证的完整网页。

围绕这一范式构建的 UI/UX Webpage Generation Trajectory 数据资产，天然具备以下特征：

• Prompt-grounded：每条数据保留用户初始 Prompt 与后续交互 Prompt，完整体现用户需求如何被拆解、补充和修改。

• Trajectory-backed：通过 Trajectory.jsonl 记录模型生成与交互过程，支持模型学习真实多轮网页生成工作流。

• HTML-executable：最终产物为可直接打开和运行的 HTML 文件，而非静态图片或不可复现 mockup。

• Preview-verified：通过最终完整网页截图验证页面视觉结果，包括首屏、核心模块和页面整体结构。

• Video-evidenced：通过 video.mp4 记录最终网页各完整页面与关键动效，补足静态截图无法呈现的交互状态。

• Interaction-aware：对于截图中不可见的隐藏动效、点击后状态、滚动触发效果、弹窗、抽屉、轮播、拖拽等交互，部分数据额外提供自然语言描述。

• Multi-turn refined：数据不是一次生成结果，而是经过多轮用户指令修正，体现真实网页设计中的迭代、反馈和收敛过程。

• Scenario-tagged：每条数据带有所属领域和场景标签，可支持按营销落地页、后台/仪表盘、电商/展示、内容/博客、手机 App 等方向定向切包和训练。

• Aesthetic-filtered：数据以 Awwwards、Godly.website、Land-book、Aceternity UI、Magic UI、Shadcn/ui 等现代网页和组件案例为审美参考，强调现代、高质量、低 AI 味的网页生成结果。

数据价值

UI/UX Design 数据集的核心价值在于，它把网页生成任务拆解为可训练、可验证、可复用的多模态轨迹数据资产，使模型从"根据一句话生成一个页面"升级为"理解用户需求、持续交互修改、生成可运行 HTML、实现真实动效，并通过截图和录屏验证最终结果"。

2.1 数据资产形态

2.2 能力提升映射

2.3 工具级能力提升

二、数据详情（~2400 条）

数据场景分布

本数据集覆盖主流网页、App 设计场景，保证任务分布不集中于单一类型，支持模型学习不同业务语境下的 UI/UX 信息架构、视觉语言和交互范式。

三、数据生产与治理

专家画像

为保证数据可靠，我们匹配了一批兼具良好教育背景、设计审美能力、前端工程理解和实际项目经验的优质专家。这样的专家构成能够有效保障数据在视觉质量、交互合理性、代码可用性、多轮需求跟随和最终交付一致性上的整体质量。

生产流程

为保证 UI/UX Design 数据的专业性、稳定性、可运行性与训练价值，所有任务均由具备多年行业设计/前端经验的专家按统一规范设计，并经过 AI 辅助生成、多轮交互修改、人工精修、运行验证、截图录屏和质检入库，形成标准化生产流程：

• 初始 Prompt 编写 确定网页所属领域和具体场景，如 SaaS 官网、Dashboard、电商详情页、结账页、博客文章页或手机 App 页面，确保数据覆盖不同业务类型和页面形态。专家基于所选场景，编写用户初始 Prompt。

• 模型生成第一版网页 模型基于初始 Prompt，生成第一版 HTML 网页，形成初始页面结构、视觉风格和基础交互。

• 多轮交互修改 专家通过后续 Prompt 对页面进行至少 3 轮有效修改，包括布局调整、间距优化、配色修正、动效增强、交互补充、模块增删和视觉一致性优化。多轮修改完成后，沉淀最终网页 HTML 文件。该 HTML 应可直接打开和运行，页面结构完整，交互行为真实存在。

• Preview 完整截图与录屏导出 对最终网页进行完整截图，覆盖首屏及核心页面内容，用于验证最终静态视觉效果。并对最终网页的各完整页面和核心动效进行录屏，包括页面滚动、点击/悬停状态、弹窗、抽屉、轮播、筛选、卡片动效等，确保动态行为可被审查和训练。

• Trajectory.jsonl 导出 导出完整轨迹文件，记录用户初始 Prompt、后续交互 Prompt、模型响应、生成过程和修改过程，为多轮 UI generation / agent workflow 训练提供轨迹信号。

• 质检、返修与入库 对 Prompt、Preview、Video、HTML、Trajectory 和动效描述进行至少两轮的格式一致性审核和页面设计审核；不合格数据进入返修环节，合格后入库。

数据控制

UI/UX Design 数据集致力于为 multimodal UI generation、webpage generation、frontend agent、interaction-aware model training、trajectory-based model training 提供高质量训练数据。审核体系围绕三大核心指标设计：视觉结果高质量、HTML 结果可运行、交互过程可验证。

3.1 "六级漏斗"数据验证流程

我们构建了一套工业级的"机器自动化流水线 + 专家深度复核"的多级漏斗把控体系，确保数据纯净度与质量：

3.2 严苛的三大核心数据标准

• 标准一：Prompt 与 Trajectory 具备真实多轮训练价值

  初始 Prompt 不能过于简单，必须包含页面类型、风格氛围、核心组件、配色布局和动效方向。

  后续交互 Prompt 不能只是形式化补充，应真实推动页面质量提升，例如调整布局、优化配色、补充动效、修正错位、增强交互。

  Trajectory.jsonl 应完整记录从初始生成到最终收敛的过程，能够反映模型如何根据用户反馈逐步改进网页。

  拒绝无效轨迹：如多轮交互没有实质变化、修改指令与最终页面无关、轨迹缺失关键上下文等。

• 标准二：最终网页具备高审美、完整页面和可运行 HTML

  • 最终 HTML 必须可直接打开和运行，不应依赖本地不可复用资源。

  • 页面视觉应符合现代网页审美，具备清晰网格、合理留白、明确字体层级、和谐配色和统一视觉语言。

  • Preview 截图必须完整呈现最终网页，而不是只截取局部模块；页面不能停留在普通模板、低质登录页、简单卡片堆叠或无设计感布局。

• 标准三：动效和隐藏交互真实存在、可被验证

  • 所有按钮和可交互组件必须具备 hover 和 active 状态，且视觉区分明显。

  • 若描述存在轮播、折叠、弹窗、抽屉、筛选等交互，HTML 中必须具备真实功能逻辑。

  • Video.mp4 必须覆盖最终网页的各完整页面和核心动效，不能只录静态页面。

四、Sample Data

最终交付数据结构

[task_id]/
    ├── prompt.md
    ├── preview.png
    ├── video.mp4
    ├── Source_code 文件夹（如有）
        ├─ index.html
    ├── trajectory.jsonl

字段说明

Sample 1

Sample 2

Sample 3

Sample 4

Sample 5