用 Cursor 做页面 · 一看就懂

你记住这几步就行

把 Cursor 当成帮你干活的助手：你先说清需求 + 幅度 + 端，路由表定唯一主 skill；FRAMEWORK_WEB_PATH / FRAMEWORK_MOBILE_PATH 是实现阶段按 FRAMEWORK-BASELINE.md 写出来的（不是开会前先「选一款框架」的单独步骤）。

0

路由优先，壳层跟上

先对齐 A/B/C 与端，主 skill 由路由定。开工时 AI 再 Read FRAMEWORK-BASELINE.md，把本次 FRAMEWORK_*_PATH 写进任务（项目内有目标文件就写仓库路径；否则可用文档里的默认壳路径）。

1

分幅度

局部（含截图小改）？多页能点？整包 L2（PRD/目录/多页）？——对应路由表里的「局部 / 多页 / L2」。

2

再说端

只要电脑后台？只要手机？两个都要？需求里写清即可；双端时实现阶段会各声明一条 FRAMEWORK_*_PATH（或默认壳）。

3

查 PATTERN-INDEX

只打开和你界面有关的 1～2 个 pattern，不通读大示例库。

4

加载框架再改

先 Read 本次框架壳层与变量；改用户仓库文件前先备份（.bak 或 git）。在框架主区内增量，禁止空手写壳。

5

做完要检查

开 Premium、选强一点的 model 跑 leniu-delivery-acceptance（见第 ③、⑤ 节）；验收时对照声明的框架路径与 FRAMEWORK-BASELINE。

需求·幅度·端→ 路由定 skill→ 查 PATTERN-INDEX→ 定结构前确认 model→ 做页面→ 检查→ OK 再给你

「定结构前确认 model」：凡要写页面清单、目录、壳层、总入口、PRD 骨架前，按 LENIU-UI-ROUTING.md — AI 须先建议 Premium + 具体 model，你明确说已切换并选好后它再动壳层与清单。纯单块 L0、不涉及新壳/新清单时可与用户核对是否跳过。

📐

样子会统一

大家按同一套 skills 做，页面不会东一个样西一个样。

✓

先能点开再美化

电脑和手机都要时须有总分流页（PORTAL-ENTRY-TEMPLATE）；L2 还要先分清扩展现有项目还是新建目录（仍复制标准框架起稿），见 FRAMEWORK-BASELINE §6。

三种活儿，你是哪一种？

别先想「这是哪个业务」。先把幅度（局部 / 多页 / L2）和端说清，用下面路由表映射主 skill；业务词只影响文案与字段。壳层与 FRAMEWORK_*_PATH 在动手改文件前按 FRAMEWORK-BASELINE.md 声明即可（不必当成和需求分开的「先选框架」）。

A

类型 A · 局部

改一块、截图微调、加模块：仍在已选标准框架上增量，不空写壳。

B

类型 B · 多页

多页能点：跨文件协同——每页从对应端框架复制再改主区；侧栏/底栏链、高亮与公共资源引用要一致。

C

类型 C · L2

整包：建议 Agent 模式先对齐目录预览再批量落文件。Phase 0 锁路由结果并声明 FRAMEWORK_*_PATH（或默认壳）；先判扩展现有还是新建（新建仍复制标准框架），再跑流水线。

定好主技能后：打开 PATTERN-INDEX，只读 1～2 个 pattern；大示例仅关键词跳读。

幅度 + 端（简记）	主 skill	你要拿到什么	实现时壳层（摘要）
局部 · 只要 Web	`leniu-web-fragment`	主区内改动，壳不变	Read `FRAMEWORK_WEB_PATH`，备份后改目标文件
局部 · 移动 Tab/母版	`leniu-mobile-new-flow`	壳上增 panel/入口/高亮	Read `FRAMEWORK_MOBILE_PATH`（默认 canteen-mobile-shell）
局部 · 移动单页无 Tab	`quick-ui-mock`	一页或轻量移动	复制移动标准框架再起稿
局部 · 双端	Web + 移动各选一格	总入口分流页	两条 `FRAMEWORK_*_PATH` + `PORTAL-ENTRY-TEMPLATE`
多页 · Web	`quick-ui-mock`	多后台页可点	每页复制 Web 框架；侧栏补链与 active
多页 · 移动（Tab 壳）	`leniu-mobile-new-flow`	Tab + 宫格 + 子页	在移动母版上增量
多页 · 移动（无 Tab 壳）	`quick-ui-mock`	多 H5 页互跳	每页复制移动标准框架；补链路与返回
多页 · 双端	`quick-ui-mock` + 总入口	PC+移动点通	双端框架 + 分流 index
L2 · 整包	`custom-demo-generator`	文档 + 多页 + 预览	Phase 0 固定路径；§6 扩展 vs 新建

路由不清 → leniu-ui-router。交付前 → leniu-delivery-acceptance（对照任务里声明的 FRAMEWORK_*_PATH 与 FRAMEWORK-BASELINE）。

怎么选 model：Auto、Premium 和 Max

Cursor 里先选 Auto 或 Premium（两档大开关），再在列表里选具体哪一个 model。界面要求高、要定方案、要验收时，多用 Premium + 强一点的 model；重复劳动、改小地方可以 Auto 或便宜 model。特别卡的时候再开 Max。

Auto

啥时候用 Auto

问一句、改一小段、跟着 skills 做简单步骤。
已经定好结构，只要批量生成很多页、改文案、对齐样式。
想省时间、省额度：在 Auto 里选手动挑一个快/便宜的 model（如 Haiku、GPT-4.1 mini、Gemini Flash 等，看你账号里有啥）。

Premium

啥时候用 Premium

定结构：做几页、每页叫什么、电脑还是手机、要不要总入口——动笔前按 skill 先走「建议 model → 你确认 Premium + 已选定」。
界面要求高：复杂表格、多状态交互、双端一致、要贴公司视觉规范。
写 PRD（产品需求说明书）、拆大包、按 skill 走完整流程。
检查与验收：跑 leniu-delivery-acceptance、写检查报告——别开太弱的 model。

🎯

按界面需求换不同 model（在 Premium 或手动选里点）

定方案 / 难交互 / 整体验收：Sonnet、GPT-4.1、Gemini 2.5 Pro 等偏「强」的（你列表里有哪个用哪个）。
很多页、结构重复：可换 Haiku、GPT-4.1 mini、Gemini Flash 等偏「快」的提速。
手机壳、列表、表单、详情：没有唯一答案——难就强 model，简单就快 model。

Max

啥时候开 Max 模式

普通对话反复改不对、逻辑很长、上下文很杂。
某一页特别难（复杂组件、奇怪布局），Premium + 当前 model 仍搞不定。
会更耗额度；过关后关回 Auto 或普通 Premium，别一直挂着。

🧠

小提示

有的 model 带「脑子」图标（thinking），一般更贵、更慢；简单排版别一直用。

📋

你可以直接复制发给 AI

1）定结构：开 Premium，选一个强 model（如 Sonnet / GPT-4.1 / Gemini Pro），定好几页和名字。
2）批量出页：可切 Auto，或 Premium 里换快 model（Haiku / mini / Flash 等）批量生成。
3）某一页太难：Premium + 强 model；还不行对当前对话开 Max，过了再关。
4）整体扫一遍：Premium + 强 model。
5）按 skill leniu-delivery-acceptance 出检查报告：开 Premium，验收这一轮固定用 Claude Opus 4.6（你列表里没有就换同档最强的）；不过关改到过关。

🔍

检查的时候要「挑刺」

检查用 Premium + 强 model；团队示例里常写死 Claude Opus 4.6 做验收，避免「说检查了其实用了弱模型」。
对照：PATTERN-INDEX、FRAMEWORK-BASELINE、任务开始时写的 FRAMEWORK_WEB_PATH/FRAMEWORK_MOBILE_PATH、公司配色说明、还有你自己说的必须满足的几条。
同一件大事连着两次没修好，就停下来问你怎么办。

别这样：全程 Auto + 最弱 model，容易漏事；全程 Premium + Max，又慢又贵。

`rules` 和 `skills` 是什么？

rules：写在 Cursor 的 rules 里，管 AI 怎么回你（语气、长短、别乱加东西）。skills：技能包，管「这类界面活怎么一步步做」，每个 skill 一个文件夹 + SKILL.md。

你的 `rules` 里可以写（示例）

回答要短、直说怎么做。代码只要必要的，不要堆注释和空行。太长就先一句话说明，再问要不要展开。别主动加一堆你没要求的东西。

⓪ 任务开始先写清 FRAMEWORK_WEB_PATH / MOBILE_PATH ① 先分清幅度与端，再选主 skill ② 先查 PATTERN-INDEX，只看 1～2 个文件 ③ 先 Read 标准框架再改；改仓库前先备份 ④ 电脑+手机要有一个总入口 ⑤ 没让你加的别加 ⑥ L2 先问扩展还是新建 ⑦ 交给别人前要检查 ⑧ 不过关就改到过关

上面圆点适合写进你的 rules（团队约定）；下面表格是每个 skill（技能包）干什么。

skill 名	干什么用	注意啥
leniu-ui-router	总路由：幅度 + 端 → 唯一主 skill；壳层变量按 FRAMEWORK-BASELINE 在开工时写清	先需求口径，再声明 FRAMEWORK_*
leniu-web-fragment	Web 局部：在 FRAMEWORK_WEB_PATH 主区内改	禁止空写整站壳；先备份
quick-ui-mock	L1 多页：每页复制对应端框架	补导航与高亮；非 L2 大包
leniu-mobile-new-flow	移动 Tab 母版：FRAMEWORK_MOBILE_PATH 上增量	无 Tab 单页见 quick-ui-mock
custom-demo-generator	L2：Phase 0 锁路由并声明 FRAMEWORK_*（或默认壳）	扩展 vs 新建见 FRAMEWORK-BASELINE §6
analyze-requirement-doc	把 Word/PDF 需求拆成条目	不负责画界面
leniu-delivery-acceptance	交付前检查	对照 FRAMEWORK_*_PATH 与标准壳层

做完怎么检查？

用 skill leniu-delivery-acceptance。说明文件（路径按本机 %USERPROFILE%\.cursor\skills\ 替换）：SKILL.md · DELIVERY-ACCEPTANCE.md

📝

你要告诉 AI

你最在意的几条（原话写下来）。
希望别人怎么点、点完应看到什么。
文件在哪个文件夹（例如从哪个 index 打开）。
可选：指定验收用哪个 model，例如「验收请用 Claude Opus 4.6」。
没说清楚也没关系，AI 会按默认清单查。

🤖

AI 要做的事

换更认真的模式，把做好的文件真的看一遍。
写一张「检查单」：过 / 不过，哪里不对。
不过就先改，改完再查，直到过。
过了再跟你说怎么用、从哪打开。

✓

默认会查这些（摘要）

有没有做「你没让做的一大坨」。
有没有按表只看了该看的小文件。
壳层是否仍与声明的标准框架一致（顶栏/侧栏/底栏、主题变量、高亮逻辑），禁止无依据换壳。
电脑整页是否继承 Web 框架；两个端有没有总入口（若双端）。
颜色、手机宽度是不是和公司说明一致；按钮能不能点通。

你可以复制这段话发给 AI：
请按 leniu-delivery-acceptance 帮我检查；验收这一轮请用 Claude Opus 4.6（我账号里若不可用再告诉我换哪个同档）。
任务开始时声明的 FRAMEWORK_WEB_PATH / FRAMEWORK_MOBILE_PATH 是：…（或：用 Skill 默认路径）
请对照 FRAMEWORK-BASELINE：壳层、变量、侧栏/底栏与高亮是否仍与标准框架一致。
我特别在意的点：1）… 2）…
请你从 xxx 文件开始点一遍：先点…再点…，应该看到…
如果不过，你自己改到过了再告诉我怎么用。

连不上网、选模型就报错？

很多人要开网络代理才能连上 Cursor 里的模型。开了还不行，按下面做。

🔧

改 Cursor 设置

按 Ctrl + Shift + P，输入 Open User Settings (JSON)，把下面贴进去（端口改成你的），保存，重启 Cursor。

"http.proxy": "http://127.0.0.1:7897",
"http.proxySupport": "override",
"http.proxyStrictSSL": false,
"http.noProxy": ["localhost", "127.0.0.1"],
"cursor.general.disableHttp2": true,
"cursor.general.disableHttp1SSE": true

7897 只是例子，换成你自己的。

复制这些话发给 AI

不用背。复制改几个字就能用。

万能开头

需求：一句话说清楚要做什么（改哪、几页、双端与否）
类型：A / B / C（三选一）— 由路由定主 skill，不必先「选框架」
端：电脑 / 手机 / 两个都要
交到哪一步：能看 / 能点且整齐 / 文档也要
改动落在哪个仓库路径？（可选，有则写；无则让 AI 按路由 + FRAMEWORK-BASELINE 默认壳起稿）
界面大概有啥（可选）：按钮、弹窗、表格…
你最在意啥（可选）：必须怎么点、不能怎样
验收用哪个 model（可选）：例如 Claude Opus 4.6
实现时：AI 按 FRAMEWORK-BASELINE 写出 FRAMEWORK_WEB_PATH / FRAMEWORK_MOBILE_PATH（双端两条；无项目路径可写「用 Skill 默认绝对路径」）

例子 A

需求：账户管理里加「批量冻结」和确认弹窗，只动这块。
类型：A
端：电脑
交到哪一步：能看
界面：按钮 + 弹窗
仓库（可选）：admin/xxx.html（没有就写「按路由用 Web 默认壳只改主区」）
验收：请用 Claude Opus 4.6 按 leniu-delivery-acceptance 检查后再交付
实现时声明 FRAMEWORK_WEB_PATH：有仓库就写项目内路径，否则 Skill 默认 WEB-ADMIN-FRAMEWORK

例子 B

需求：餐券审批，电脑 4 页手机 3 页，要能点通（跨文件协同、导航与高亮要齐）。
类型：B
端：两个都要
交到哪一步：能点且整齐
验收：请用 Claude Opus 4.6 出检查报告，不过别交付
实现时：按路由用 quick-ui-mock + 双端；FRAMEWORK_* 用 Skill 默认或你指定的仓库路径；总入口 PORTAL-ENTRY-TEMPLATE

例子 C

需求：整包，含 PRD、页面、预览；放 D 盘项目里。请用 Agent 模式先对齐目录预览再批量落文件。
类型：C
端：两个都要
交到哪一步：文档也要
验收：请用 Claude Opus 4.6 跑 leniu-delivery-acceptance，过了再给我总结
实现时 Phase 0：锁 FRAMEWORK_*_PATH（或默认壳）；新建仍复制标准框架起稿

📌

你可以按这个顺序聊

先发万能开头（可以复制上面的）。
主 skill 由类型 A/B/C + 端定；AI 再按 FRAMEWORK-BASELINE.md 写出 FRAMEWORK_*_PATH（默认可用 Skill 内路径）。
AI 会查 PATTERN-INDEX，告诉你它打算看哪几个说明文件。
若涉及定结构（清单、目录、壳层、总入口、PRD 骨架）：AI 先建议 Premium + 具体 model，你明确说已切换并选定后它再动壳层与清单（见 LENIU-UI-ROUTING.md）。
你补充：必须要啥、不要啥。
它做，你中间看一眼。
它按 skill leniu-delivery-acceptance 自查（你可指定例如 Claude Opus 4.6 只做验收）；不过关它会改到过关。
你再打开页面点一遍，还有问题再说。

话可以说死一点

只做我说的，别多加页面。
先 Read 我声明的 FRAMEWORK_WEB_PATH（和移动路径），改文件前先备份。
PATTERN-INDEX 里说看哪几个文件就看哪几个，别整本通读大示例。
检查没过就别跟我说做完了。
验收请用 Claude Opus 4.6，按 leniu-delivery-acceptance 出报告。
先做能点的简陋版，再慢慢好看。

⑧ 大家一起用时

👥

可以这样做

找一个人负责更新 skills 和 rules。
每周拿两个例子说说哪里容易踩坑。
新人先练 A，再 B，再 C。

📣

第一句话可以这样写

需求:… | 类型:A/B/C | 端:… | 交到哪:…（壳层路径实现时再写即可）

例：需求:餐券 4+3 页能点通 | 类型:B | 端:都要 | 交到能点

✓

交给别人前对一下

类型选对没有？
任务里写清 FRAMEWORK_WEB_PATH / FRAMEWORK_MOBILE_PATH 没有？
有没有先查 PATTERN-INDEX，只打开该看的文件？
壳层是否与标准框架一致？两个端有没有总入口？
点得通吗？
验收 skill leniu-delivery-acceptance 跑过了吗？过了才说「给你」。
大包的话文件夹和 PRD 齐不齐？

⑨ `skills` 在电脑哪？（进阶）

这一栏给想打开文件看的人。新人可以跳过。下方「打开」链接若无效：把路径里的用户名改成你的，根目录一律为 %USERPROFILE%\.cursor\skills\。

这一页主要讲「需求想好了之后怎么做出页面」。分析 Word 需求书是另一件事，这里只提一下。

标准框架基线（必读）

FRAMEWORK-BASELINE.md — 路径、加载、备份、§6 扩展 vs 新建

指路

leniu-ui-router — 先需求与路由，再壳层变量

电脑：patterns 里的按钮、弹窗、表格… 手机：列表、表单、壳子… 都在 custom-demo-generator 文件夹里。

其他常用文件

怎么分类 · 场景举例 · 颜色和公司说法 · WEB-ADMIN-FRAMEWORK（默认 Web 壳） · PORTAL-ENTRY-TEMPLATE