目录
1. skill
1.1 什么是 skill
1.2 安装 ui-ux-pro-max skill
1.3 使用skill
1.4 skill 的组成
2. 开发登录 / 注册页面
3. 开发题目列表页
4. 开发题目详情页
5. 开发管理页面
6. 开发大屏落地页
1. skill
1.1 什么是 skill
skill是对LLM能力的进一步规范和扩展，本质上是一组 “提示词” + “示例代码/数据”
LLM 脑子里已经存在很多很多知识了，都“学杂了”，skill 就是告诉 LLM，在某个指定场景中，使用哪个知识技能，是“更好的选择”。
1.2 安装 ui-ux-pro-max skill
发展到现在，LLM开发网页前端的能力已经很强了，已经可以很容易地开发出视觉效果非常棒的页面了。
但是我们仍然可以通过专业的skill对LLM的能力进行强化，使他能开发出更专业的网页。
能够辅助LLM进行前端开发的skill有很多，比如frontend-design、user-interface-designer、sketch-implement-design等。
我们此处选用一个社区热度很高的 ui ux pro max skill。
github 仓库：github ui-ux-pro-max skill
中文文档（第三方）：中文文档 ui-ux-pro-max skill
安装：
npm install -g uipro-cli cd /path/to/your/project # 进⼊项⽬路径 uipro init --ai opencode1.3 使用skill
通过 /skill 命令使用该 skill，可以进行搜索。
1.4 skill 的组成
会在当前项目中，添加一个这样的目录，里面放该 skill 的提示词（SKILL.md），和对应的示例数据（data） / 程序（scripts）
只是把 skill 安装到当前项目中，也可以安装在全局，但是一般更建议按照项目维度安装，因为 LLM 上下文窗口是有限的。
上述 skill 不需要提交到 git 仓库上，因此可以在 .gitignore 文件中添加：
.opencode/2. 开发登录 / 注册页面
/ui-ux-pro-max @SPEC.md 根据文档中的描述，开发 Phase 5 中的登录页面和注册页面，开发成深色简约主题.
此时会读取内容，根据提示词的描述，先进行页面的系统设计，形如：
这份系统设计中，就包含了页面风格、主题配色、字体搭配、视觉效果。这些设计风格，都是该内置好的，会自行决定页面的样式如何编写。
3. 开发题目列表页
这次不用新开对话，这一轮的提示词需要和注册登录页在同一个会话中，此时已经知道当前的页面风格了，就会顺着这个风格继续做下去。如果另外起新会话，可能会忘记之前的设计风格，导致页面风格不统一。
按照同样的风格，开发 "题目列表页面"
4. 开发题目详情页
这一轮提示词中，我们需要明确表明：提交结果展示合并到题目详情页中（这个地方没必要分成两个页面，虽然计划中是列成了两个步骤）；使用ace.js这个第三方库来实现代码编辑器效果（避免AI尝试手搓一个编辑器）
继续开发 题目详情页面 和 提交结果展示（田炯结果展示包含在题目详情页中即可），题目详情页中，使用 ace.js 实现代码编辑器功能.
我们在调试问题时，如果能够给AI一个明确的定位方向，并且主动添加日志收集更多线索，能够使AI更高效地发现并解决问题。
5. 开发管理页面
在之前的页面开发会话中：
@SPEC.md 开发 Phase 5 中的 "管理后台" 页面，也买你风格和其他页面统一.
页面效果：
- 展示当前数据库中的所有题目
- 右侧可以编辑/删除/新增题目
6. 开发大屏落地页
@SPEC.md 按照 Phase 5 中的描述，开发一个 "大屏落地页" ，风格和其他页面保持一致
