【9. 开发前端页面】：介绍 skill，并利用 skill 开发前端页面

[1. skill](#1. skill)

[1.1 什么是 skill](#1.1 什么是 skill)

[1.2 安装 ui-ux-pro-max skill](#1.2 安装 ui-ux-pro-max skill)

[1.3 使用skill](#1.3 使用skill)

[1.4 skill 的组成](#1.4 skill 的组成)

[2. 开发登录 / 注册页面](#2. 开发登录 / 注册页面)

[3. 开发题目列表页](#3. 开发题目列表页)

[4. 开发题目详情页](#4. 开发题目详情页)

[5. 开发管理页面](#5. 开发管理页面)

[6. 开发大屏落地页](#6. 开发大屏落地页)

1. skill

skill是对LLM能力的进一步规范和扩展，本质上是一组 "提示词" + "示例代码/数据"

LLM 脑子里已经存在很多很多知识了，都"学杂了"，skill 就是告诉 LLM，在某个指定场景中，使用哪个知识技能，是"更好的选择"。

发展到现在，LLM开发网页前端的能力已经很强了，已经可以很容易地开发出视觉效果非常棒的页面了。

但是我们仍然可以通过专业的skill对LLM的能力进行强化，使他能开发出更专业的网页。

能够辅助LLM进行前端开发的skill有很多，比如frontend-design、user-interface-designer、sketch-implement-design等。

我们此处选用一个社区热度很高的 ui ux pro max skill。

安装：

bash 复制代码

npm install -g uipro-cli

cd /path/to/your/project # 进⼊项⽬路径 

uipro init --ai opencode

通过 /skill 命令使用该 skill，可以进行搜索。

会在当前项目中，添加一个这样的目录，里面放该 skill 的提示词（SKILL.md），和对应的示例数据（data） / 程序（scripts）

只是把 skill 安装到当前项目中，也可以安装在全局，但是一般更建议按照项目维度安装，因为 LLM 上下文窗口是有限的。

上述 skill 不需要提交到 git 仓库上，因此可以在 .gitignore 文件中添加：

html 复制代码

.opencode/

/ui-ux-pro-max @SPEC.md 根据文档中的描述，开发 Phase 5 中的登录页面和注册页面，开发成深色简约主题.

此时会读取内容，根据提示词的描述，先进行页面的系统设计，形如：

这份系统设计中，就包含了页面风格、主题配色、字体搭配、视觉效果。这些设计风格，都是该内置好的，会自行决定页面的样式如何编写。

这次不用新开对话，这一轮的提示词需要和注册登录页在同一个会话中，此时已经知道当前的页面风格了，就会顺着这个风格继续做下去。如果另外起新会话，可能会忘记之前的设计风格，导致页面风格不统一。

按照同样的风格，开发 "题目列表页面"

这一轮提示词中，我们需要明确表明：提交结果展示合并到题目详情页中（这个地方没必要分成两个页面，虽然计划中是列成了两个步骤）；使用ace.js这个第三方库来实现代码编辑器效果（避免AI尝试手搓一个编辑器）

继续开发题目详情页面和提交结果展示（田炯结果展示包含在题目详情页中即可），题目详情页中，使用 ace.js 实现代码编辑器功能.

我们在调试问题时，如果能够给AI一个明确的定位方向，并且主动添加日志收集更多线索，能够使AI更高效地发现并解决问题。

在之前的页面开发会话中：

@SPEC.md 开发 Phase 5 中的 "管理后台" 页面，也买你风格和其他页面统一.

页面效果：

@SPEC.md 按照 Phase 5 中的描述，开发一个 "大屏落地页" ，风格和其他页面保持一致