目录1. skill1.1 什么是 skill1.2 安装 ui-ux-pro-max skill1.3 使用skill1.4 skill 的组成2. 开发登录 / 注册页面3. 开发题目列表页4. 开发题目详情页5. 开发管理页面6. 开发大屏落地页1. skill1.1 什么是 skillskill是对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 中的描述开发一个 大屏落地页 风格和其他页面保持一致