网页

使用HTML、CSS、JavaScript及主流框架，构建、调试并部署高质量网页项目，支持中文交互和自动化流程。

核心功能: 本技能提供中文交互、化工作流场景等能力。

Web Development

付费版扩展能力

能力	免费版	付费版
基础功能	支持	支持
代码静态分析与质量评分	不支持	支持
依赖漏洞检测与升级建议	不支持	支持
批量代码审查与报告生成	不支持	支持
CI/CD流水线集成	不支持	支持
代码复杂度可视化与重构建议	不支持	支持

功能能力

• Build, debug, and deploy websites using HTML, CSS, JavaScript, and modern frameworks following pr

快速入门教程

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

详细的输入输出格式请参考下方章节说明。

适用范围

场景	输入	输出
网站构建	页面需求和技术栈	HTML/CSS/JS代码和项目结构
前端调试	网页URL和问题描述	调试分析和修复代码
网站部署	构建产物和部署目标	部署配置和上线检查清单

不适用于：非Web前端的后端系统开发和数据库设计

操作步骤

1. 确认运行环境满足依赖说明中的要求
2. 根据适用场景选择合适的使用方式
3. 执行操作并检查输出结果
4. 如遇错误，参考错误处理章节

请求格式

参数名	类型	必填	说明
project_desc	string	是	网站项目描述和需求
tech_stack	string	否	技术栈, 可选: vanilla/react/vue/next, 默认: vanilla

结果格式

json

{
  "success": true,
  "data": {
    "overall_grade": "A",
    "total_score": 92,
    "max_score": 100,
    "summary": "处理完成",
    "details": [
      {
        "item": "代码风格",
        "status": "pass",
        "score": 95,
        "comment": "符合规范"
      },
      {
        "item": "安全合规",
        "status": "warn",
        "score": 80,
        "comment": "符合规范"
      }
    ],
    "improvements": [
      {
        "priority": "high",
        "suggestion": "建议优化",
        "expected_gain": "+5分"
      },
      {
        "priority": "medium",
        "suggestion": "建议优化",
        "expected_gain": "+3分"
      }
    ]
  },
  "error": null
}

运行环境

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux

工具依赖

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent内置LLM提供

API Key 配置

可用性分类

• 分类: MD+execute()
• 说明: 基于Markdown的AI Skill,

API Key配置方式:

bash

export API_KEY="${API_KEY:?请设置环境变量}"

配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统.

错误恢复策略

错误场景	原因	处理方式
LLM响应超时或无响应	网络延迟或模型负载过高	请求重试；确认Agent平台LLM服务正常
输入内容格式不正确	用户输入不符合skill预期格式	检查输入是否符合skill使用说明中的格式要求，参考示例章节
执行结果与预期不符	指令描述不够明确或上下文不足	提供更详细的指令描述，补充必要的上下文信息
命令执行失败	运行环境不满足要求或权限不足	确认运行环境符合依赖说明中的要求；检查命令权限设置

差异化分析

效率提升量化分析

操作步骤	手动耗时	自动化耗时	时间节约	准确率提升
页面布局调整	2小时	15分钟	1小时45分钟	20%
CSS样式编写	4小时	1小时	3小时	75%
JavaScript功能实现	8小时	2小时	6小时	50%
网站性能优化	12小时	3小时	9小时	25%
网站部署上线	4小时	30分钟	3小时30分钟	25%

差异化对比

对比维度	本技能	手动操作	Python脚本	专业软件
操作便捷性	高	低	中	高
学习成本	低	中	中	高
代码质量	高	低	中	高
代码复用性	高	低	中	高
功能丰富性	高	低	中	高

核心痛点解决

痛点	描述	影响范围	解决方案	量化效果
代码重复	重复编写代码导致效率低下，容易出错	项目开发周期延长，维护成本增加	提供代码复用功能，减少重复工作	开发周期缩短20%
调试困难	手动调试代码耗时，影响开发效率	项目进度受阻，开发成本增加	提供自动化调试工具，提高调试效率	调试效率提升30%
部署复杂	网站部署流程复杂，容易出错	网站上线时间延长，影响用户体验	提供自动化部署工具，简化部署流程	部署时间缩短50%

常见问题FAQ

Q2: Web Development支持哪些技术栈？

A: Web Development支持vanilla、react、vue、next等主流技术栈。

Q3: Web Development如何进行代码质量检查？

A: Web Development提供代码静态分析与质量评分功能，可对代码进行质量检查。

Q4: Web Development如何进行网站部署？

A: Web Development提供自动化部署工具，可简化网站部署流程。

Q5: Web Development是否支持团队协作？

A: Web Development支持多人协作，可方便团队成员共同开发网站。

问题处理指引

错误现象	可能原因	诊断步骤	解决方案
代码编译错误	代码语法错误	检查代码语法，修复错误	修复代码，重新编译
网页无法加载	网络问题	检查网络连接，刷新网页	检查网络连接，刷新网页
网页样式错乱	CSS样式错误	检查CSS样式，修复错误	修复CSS样式，刷新网页
JavaScript功能异常	JavaScript代码错误	检查JavaScript代码，修复错误	修复JavaScript代码，刷新网页
网站部署失败	部署配置错误	检查部署配置，修复错误	修复部署配置，重新部署

安全免责声明

1. 确保网站代码的安全性，避免SQL注入、XSS攻击等安全漏洞。
2. 对敏感数据进行加密处理，防止数据泄露。
3. 定期更新网站依赖库，修复已知安全漏洞。
4. 设置合理的权限控制，防止未授权访问。
5. 对网站进行安全扫描，及时发现并修复安全漏洞。

安全风险防范

风险项	等级	防护措施	验证方法
API密钥泄露	高	通过环境变量配置，禁止硬编码	定期检查代码和配置文件
命令执行风险	高	仅执行白名单命令，避免拼接用户输入	使用沙箱环境测试
网络通信安全	中	使用HTTPS协议，验证SSL证书	定期检查证书有效期
敏感数据暴露	高	输出结果中不包含密钥、令牌等敏感信息	日志脱敏审查
未授权访问	中	限制访问权限，实施认证机制	定期审计访问日志

核心属性

• 自动化执行: 用HTML/CSS/JS与现代框架建调部署网站。Build, debug, and deploy websites us
• 文件处理: 支持多种文件格式的读取、解析和写入操作
• API集成: 通过标准化接口调用外部服务并处理响应
• 命令执行: 在安全沙箱中执行系统命令并收集结果

故障处理体系

针对网页使用中可能遇到的常见问题,提供以下排查方案:

错误类型	原因分析	解决方案
API认证失败(401)	API密钥错误或过期	检查密钥配置,重新生成token
接口限流(429)	请求频率超出限制	降低调用频率,启用重试退避策略
响应超时(504)	网络延迟或服务端负载过高	增加超时阈值,检查网络连接
文件不存在	路径错误或文件未创建	检查路径拼写,确认文件已生成
文件格式不支持	扩展名不在支持列表中	转换为支持的格式后重试
权限不足	当前用户无读写权限	检查文件权限,以管理员身份运行
命令执行失败	参数错误或环境依赖缺失	检查命令语法,确认依赖已安装
进程超时	命令执行时间过长	增加超时设置,优化命令参数
网络连接失败	DNS解析失败或防火墙拦截	检查网络配置,确认代理设置

网页通用排查步骤

1. 检查输入参数: 确认所有必填参数已提供且格式正确
2. 查看日志输出: 定位具体错误行和异常类型
3. 验证环境配置: 确认依赖库版本和运行环境满足要求
4. 逐步调试: 缩小问题范围,隔离故障模块

依赖说明

运行环境

• Agent 平台: 支持SKILL.md的任意AI Agent
• 操作系统: Windows / macOS / Linux

可用性分类

• 分类: MD（纯Markdown指令，通过自然语言驱动Agent完成操作）
• 说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent完成操作。