| name | static-webpage-dev |
| description | 静态网页开发与GitHub Pages部署工作流。当用户需要开发网页、创建网站、部署静态页面、制作活动页时调用。包含完整的需求分析、资源验证、本地预览、GitHub部署流程。 |
静态网页开发工作流
功能
提供完整的静态网页开发流程,从需求分析到GitHub Pages部署。
触发词
- "开发网页"
- "创建网站"
- "部署网页"
- "GitHub Pages"
- "制作活动页"
- "静态页面"
工作流程
1. 需求确认
分析用户需求,确认项目类型、核心功能、视觉风格、资源需求。
2. 技术选型
根据需求选择技术方案:
- 简单页面 → 纯HTML/CSS/JS
- 复杂交互 → Vue/React CDN版
- 动画需求 → CSS动画优先
3. 资源获取与验证 ⚠️
关键步骤:必须验证后才能使用
资源获取路径优先级:
- CDN直链(jsdelivr、cdnjs)
- 免费资源站(Pixabay、Unsplash)
- 外链托管服务(kkkkmmmm)
- 开源项目引用
验证流程:
- WebFetch检查HTTP响应
- 确认内容正确
- 本地测试
4. 代码实现
按模块顺序:HTML结构 → CSS样式 → JS交互 → 资源集成
5. 本地预览验证
cd output && python -m http.server 8080
验证清单:
6. GitHub仓库准备
检查/创建仓库,确认Token有repo权限。
7. 推送到GitHub
使用GitHub MCP推送,避免网络问题。
8. 启用GitHub Pages
Settings → Pages → main分支
9. 线上验证
访问Pages地址,确认所有功能正常。
10. 完成交付
报告访问地址和使用说明。
使用方法
当用户提到网页开发相关需求时,自动执行工作流:
from workflow_runner import run_workflow
result = run_workflow("static-webpage-development")
验证规则
| 规则 | 说明 | 关键性 |
|---|
| 资源验证 | 所有外部资源必须验证可用 | ⚠️ 必须 |
| 本地预览 | 推送前必须本地预览验证 | ⚠️ 必须 |
| 线上验证 | 部署后必须验证线上版本 | ⚠️ 必须 |
常见问题处理
资源找不到
换路径继续搜索,不降级目标。
GitHub认证失败
提示用户检查Token权限(需要repo权限)。
Pages部署失败
检查仓库设置,确认仓库为public。
示例
用户请求:帮我做一个春节活动网页,要有抽奖功能
执行流程:
- 确认需求(春节主题、抽奖功能、喜庆风格)
- 选择纯HTML/CSS/JS方案
- 搜索春节音乐→验证外链可用
- 实现转盘抽奖、祝福卡片等功能
- 本地启动服务器预览
- 创建GitHub仓库
- 推送代码到GitHub
- 启用GitHub Pages
- 验证线上访问正常
- 交付访问地址给用户