Frontend App Builder

Skill 用途

新前端应用、落地页、仪表盘与整体改版。从视觉概念、设计系统到浏览器验收，构建或重做完整前端应用。

它适合材料、目标和验收标准都能说清的真实任务。先用小范围样本验证，再决定是否扩大处理范围。

输入和输出

适合场景与触发条件

用户要求从零构建可视化前端，或明确提出重做、现代化和提升整体视觉质量时。

开始前还要准备：可运行的前端项目或新项目目录；图像生成与真实浏览器检查能力。如果任务很小、没有重复价值或无法判断结果是否正确，按当前任务直接处理会更合适。

核心工作流程

1. 整理完整页面信息架构
2. 生成并评审视觉概念
3. 提取设计令牌和组件
4. 实现交互与响应式
5. 用浏览器截图逐项验收

安装与启用

来自 OpenAI Plugins 的 build-web-apps 插件；启用插件时应连同引用资料完整安装。

1. 从官方插件仓库确认当前 Skill 目录、引用资料与依赖。
2. 按 Codex Plugins 当前安装方式启用完整插件，不要只复制一个 SKILL.md。
3. 在一个低风险小任务中明确点名 Frontend App Builder，并给出材料、范围和验收要求。
4. 完成后按预期输出逐项检查：完整视觉概念和设计系统；可运行实现与多视口浏览器证据。

插件安装方式可能随 Codex 版本变化，执行前以官方仓库和当前客户端界面为准。

使用方法与结果验证

1. 整理完整页面信息架构
2. 生成并评审视觉概念
3. 提取设计令牌和组件
4. 实现交互与响应式
5. 用浏览器截图逐项验收
6. 最后核对交付是否同时包含：完整视觉概念和设计系统；可运行实现与多视口浏览器证据。

验收时要回到原始材料、目标输出和任务边界逐项检查，不能只看是否生成了结果；发现稳定问题后，再把修正写回工作流。

权限风险

• 会读取和修改前端源文件
• 可能调用图像生成与本地浏览器
• 部署和生产账号操作需要单独授权

联网、账号授权、外部写入、部署、发布或其他不可逆操作都需要按实际风险单独确认，先从只读和小范围任务开始。