在 Cursor 中规范化生成 UI 稿实践

最近在尝试用 BMAD-METHOD 从 0 - 1 写项目，但是在 BMAD 中并没有一个设计角色预先设计一套 UI 界面出来，导致在第一版代码生成后我对 UI 并不满意。于是我也想效仿这种配置 rules 的模式来创建一个 UI 设计 Agent 来生成 UI 界面。

rules 相关文件：rules

角色设计

关于 UI 设计相关的元素，我能想到的是色彩、字体、布局、风格等，所以在设计 UI 前我准备先分析产品文档，提取出相关的元素，再跟用户交互确定出最终的风格效果等内容。

等确认好基础内容后，在分析产品文档，配合已经定义好的基础风格解析出每个页面的 UI 文档。

最后再由页面 UI 文档生成可展示的 html 界面。

在设计 AI 角色上，我定义了几个指令，分别来完成这些工作

1. define-foundation - 根据PRD或用户输入，定义UI设计基础（应用类型、色板、字体等），并提供方案供用户选择
2. define-visual-style - 定义应用的整体视觉风格与美学
3. define-global-layout - 定义全局布局规范 (导航、外壳、网格等)
4. analyze-prd-all-page - 分析 docs/prd.md 文件，解析出所有页面、元素和功能，并为每个页面在 docs/ui/pages/ 目录下创建对应的 .md 文档
5. analyze-page: - 分析 docs/prd.md 文件，如果页面不存在则增量生成单个页面
6. generate-html - 根据所有设计规范，为一个指定页面生成HTML/CSS原型代码
7. generate-visual-prompt - 为指定页面总结一份详细的提示，用于驱动第三方AI工具生成视觉稿

（以上命令均支持用户输入自定义信息，并非必须要 prd.md 文档）

然后我以一个"健身打卡 H5"为例子，来生成这个项目的所有 UI。以下是产品文档，包含用户登录、个人信息，打卡、历史记录、统计等功能。

1. 项目概述
1.1. 项目背景
随着健康意识的提升，越来越多人开始关注个人健身。然而，市面上的健身App功能复杂、体积庞大，用户需要下载安装，流程较重。为了满足用户希望通过简单、轻便的方式记录和追踪自己健身情况的需求，我们计划开发一款基于H5的个人健身打卡工具。用户无需下载，通过浏览器或社交应用内分享的链接即可直接访问，快速记录，轻松坚持。

1.2. 产品目标
核心目标：为用户提供一个极其轻量、便捷的健身记录与追踪工具，帮助用户养成健身习惯。

用户目标：

快速记录每日健身内容，无额外负担。
直观地查看自己的健身历史和进步。
通过数据统计获得成就感和动力。

商业目标 (V1.0)：
验证核心功能，吸引种子用户。
收集用户反馈，为后续迭代提供方向。
提升日活跃用户数（DAU）和用户留存率。

1.3. 目标用户画像
健身初学者：刚开始健身，希望有一个简单的工具来记录，见证自己的每一步成长。
习惯记录者：有健身习惯，但不喜欢复杂App，偏爱轻量级工具来做日常追踪。
希望养成习惯者：尝试通过"打卡"这种形式来激励自己，坚持健身。

2. 功能详述
2.1. 用户模块 (登录/注册)
2.1.1. 需求描述
用户可以通过手机号进行快速登录或注册，建立个人账户，以保证数据安全和跨设备同步。

2.1.2. 功能细则

登录/注册入口：

用户首次访问H5时，若无登录状态，则自动引导至登录/注册页。
已退出登录的用户，在进行需要登录的操作（如打卡、查看历史）时，会跳转至登录页。

登录方式：

采用"手机号 + 短信验证码"的方式。
输入手机号，点击"获取验证码"按钮。按钮变为"xx秒后重试"的倒计时状态。
后端发送验证码短信至用户手机。
用户输入正确的验证码后，点击"登录/注册"按钮。

业务逻辑：

后端验证：验证手机号格式是否正确，验证码是否正确且在有效期内。
新用户：如果该手机号未注册，则自动为其创建新账户，并进入信息初始化流程（或直接进入首页）。
老用户：如果该手机号已存在，则直接登录成功，跳转至应用首页。
用户状态保持：登录成功后，在浏览器或App内嵌webview中保持登录状态（例如通过Token），用户下次打开无需重复登录。

2.2. 个人信息模块
2.2.1. 需求描述
用户可以设置和修改自己的基础信息，这些信息将用于后续的个性化展示和数据统计。

2.2.2. 功能细则

信息字段：

头像：允许用户从手机相册上传图片作为头像。默认提供一个系统头像。
昵称：用户自定义，必填项，有长度和字符限制（如2-15个字符）。
性别：男 / 女，选填。
身高 (cm)：允许用户输入数字，用于未来可能的BMI或其他健康指标计算。选填。
体重 (kg)：允许用户输入数字，同上。选填。

页面交互：

提供一个"我的"或"个人中心"入口，点击后进入个人信息页。
页面展示当前用户的头像、昵称等信息。
提供"编辑资料"按钮，点击后进入编辑模式，可对以上字段进行修改。
提供"保存"按钮，点击后保存修改，并返回个人信息展示页。

提供"退出登录"按钮。

2.3. 健身打卡界面 (核心功能)
2.3.1. 需求描述
这是应用的核心页面，用户可以在此完成一次健身活动的记录。界面需要简洁、操作快捷。

2.3.2. 功能细则

打卡入口：

应用首页应有非常醒目的"开始打卡"或"+"按钮。

打卡表单：点击入口后，进入打卡信息填写页，包含以下字段：
打卡日期：默认为当天，允许用户选择修改（补卡场景）。
运动类型：提供常见分类供用户选择，如"力量训练"、"有氧运动"、"拉伸"、"瑜伽"等。支持单选。
运动项目/内容：一个文本输入框，让用户自由填写具体内容，例如"卧推 5组x10次"、"跑步 5公里"、"全身拉伸"等。
运动时长（分钟）：提供快捷选项（如15, 30, 45, 60）和手动输入。
心得/备注 (选填)：一个多行文本框，供用户记录当日感受、心得或下次计划。
上传图片 (选填)：允许用户上传1-3张健身照片（如健身房环境、运动后的自拍等）。

提交操作：

点击"完成打卡"按钮。
前端进行必填项校验（如运动类型、运动时长）。
提交成功后，给予用户积极的反馈，例如"打卡成功！你真棒！"的提示，并自动跳转到历史记录页或首页。

2.4. 历史记录界面
2.4.1. 需求描述
用户可以按时间倒序查看自己所有的健身打卡记录，回顾自己的努力。

2.4.2. 功能细则

展示形式：

采用列表形式，按打卡日期从近到远排序。
支持下拉加载更多（分页加载）。

列表项信息：每一条记录应简洁地展示核心信息：

打卡日期（例如 "8月19日 星期二"）。
运动类型。
运动项目/内容摘要。
运动时长。

记录详情：
点击任意一条历史记录，可以进入该次打卡的详情页。
详情页展示该次打卡时填写的所有信息，包括心得备注和上传的图片。
详情页提供"编辑"和"删除"功能。

2.5. 统计界面
2.5.1. 需求描述
通过数据可视化的方式，向用户展示其健身成果，提供持续的动力和成就感。

2.5.2. 功能细则

核心数据指标：

累计打卡天数：用户总共打卡的天数。
连续打卡天数：当前连续不间断的打卡天数。
累计运动时长（小时）：所有打卡记录时长的总和。

图表可视化：

打卡日历：用一个月的日历视图展示，已打卡的日期会用特殊颜色或标记高亮，让用户直观看到自己的出勤情况。
运动时长趋势图：以周或月为单位的柱状图，展示每周/每月的总运动时长变化。
运动类型分布图：一个饼图，展示不同运动类型（力量、有氧等）所占的比例。

数据周期：
页面顶部提供筛选项，允许用户查看"本周"、"本月"或"全部"的统计数据。

定义设计基础

在 Cursor Agent 模式下，输入命令

@ui *define-foundation

UI Agent 会读取 docs/prd.md 产品文档解析出基础的设计内容，同时也支持用户自定义输入

@ui *define-foundation 这是一个给儿童设计的移动端教育App

可以看到，UI Agent 对项目的基础方案进行了定制，包含"应用程序类型"、"核心目标用户"、"设备与屏幕"。

用户可以自己修改各个方案的选项，也可以自定义修改。

回复"确认"后，UI Agent 就开始执行任务，生成 foundation.md 文件

定义视觉风格

在 Cursor Agent 模式下，输入命令

@ui *define-visual-style

同样地，也支持用户自定义风格输入

然后 UI Agent 会根据之前生成的 foundation.md 和 prd.md 产品文档推荐风格、色调、字体、交互、图表等视觉元素。用户同样可以修改选项或自定义修改。

回复"确认"就可以把以上选择的视觉元素整合成一份 UI 视觉设计文档 visual-style.md。其中色调的配置我强调了使用 tailwind css 自定义样式配置，如果不使用 tailwind css 可以提前说明一下

考虑到有些用户可能会有一些风格参考图，define-visual-style 也支持图片解析风格，使用支持多模态的模型上传图片即可，比如

总体看，分析得还算准确。

定义全局布局

define-global-layout 命令会根据产品文档和之前生成的设计文档、视觉文档产出产品的布局为所有页面的空间组织提供统一、和谐的设计基准。

输入命令

@ui *define-global-layout

define-global-layout 内部会根据这个产品的属性分成 3 大类布局方案呈现，比如宏观结构、内容组织、视觉原则等。按上文"健身打卡 H5"的产品例子，这里就推荐了一些移动端的布局方案。

回复"确定"就可以生成全局的布局文档。

页面分析

基础文档、视觉文档、布局文档都已经生成，接下来就可以对产品文档进行解析，分析出所有的页面，结合基础的 3 个文档，生成单个页面的 UI 文档。

输入命令

@ui *analyze-prd-all-page

UI Agent 会读取之前生成的规范文档，解析产品文档，分析出有哪些页面并逐一生成。

analyze-prd-all-page 会一次性解析出所有页面，复杂的产品可能会有非常长的任务流程，可以使用 analyze-page 命令进行产品文档分析页面，以增量模式生成单个页面的文档。

@ui *analyze-page

UI 界面生成

通过 UI 文档生成命令，最后得到了 6 个页面的 UI 文档，然后继续用 generate-html 命令来逐一生成 html 代码，展示出 UI 界面

输入命令并指定文档路径

@ui *generate-html docs/ui/pages/LoginPage.md

最后生成 6 个 html 页面

整体来看风格还是非常统一的，按视觉文档中"橙色"系风格，布局文档中卡片式布局。

提示词总结

大家可能依赖于第三方的 UI 生成工具，比如 superdesign、v0、readdy ai 等，最后还有一个 generate-visual-prompt 命令，它会 根据指定页面的 UI 文档，总结并生成一份详细的提示词，其中包含了页面的场景、艺术风格与氛围、色彩方案等

输入命令，指定 UI 文档路径

@ui *generate-visual-prompt docs/ui/pages/ProfilePage.md

同样会根据之前生成的一系列规范文档，总结出提示词。

后记

通过 rules 定义 UI Agent 并不局限于 cursor 中，在 claude code、cline等都是支持的，需要改变一下对应的 rules 规范。

这种形式生成的 UI 稿可以统一风格、布局，能解决直接用 AI 生成在多个页面的风格、布局不一致问题，但不能保证一定好看。

对于 UI 美观度总感觉对比 readdy ai 还差了许多，估计需要内置一些经典的布局、配色方案。

最后目前也只是生成 html，如何打通 figma，还需要有待研究。