WebCraft Pro 网页锻造师

一份原创、可移植的 Agent Skill，用来提升 AI 制作网站、Landing Page、作品集、Dashboard 与轻量 Web App 的成品质量。

它不提供固定模板，也不强制一种审美。WebCraft Pro 让 Agent 先理解真实用户任务，再选择合适技术路线、建立可检查的视觉方向、实现完整状态，并用构建与浏览器证据交付。

核心能力

• 现有项目优先，避免随意替换技术栈与设计系统
• 空项目按复杂度选择静态网页或 React + Vite + TypeScript
• 使用原创 CRAFT 流程：Context、Route、Art direction、Fabricate、Test、Transfer
• 防止编造客户 Logo、评价、指标、价格与产品截图
• 同步完成响应式、键盘操作、触控、状态反馈与降低动态效果
• 区分“构建成功”“浏览器验收完成”“已部署并验证”
• 附带零依赖的网页源码审查脚本

安装

使用支持 Agent Skills 的安装器：

npx skills add https://github.com/bingxijun/webcraft-pro-skill/tree/main/skill/webcraft-pro

也可以把 skill/webcraft-pro 整个目录复制到 Agent 的 Skills 目录，例如 Codex 的 ~/.codex/skills/webcraft-pro。

使用

使用 $webcraft-pro，为我的产品制作一个完整官网。
保留现有技术栈，完成桌面和手机验收，未经确认不要公开部署。

也可以直接提出自然语言需求，例如“重做这个 Landing Page”“给现有 React 项目增加运营仪表盘”或“把这个页面做得更有设计感并检查移动端”。

CRAFT 工作流

阶段	关键产物
Context	事实、假设、用户任务与能力边界
Route	最小可行技术路线与页面形态
Art direction	可检查的设计指纹
Fabricate	可运行、响应式、状态完整的实现
Test	构建、静态审查、浏览器与截图证据
Transfer	精确的完成状态和后续交接

网页审查脚本

需要 Node.js 20 或更高版本，不需要安装第三方依赖：

node skill/webcraft-pro/scripts/audit-web-project.mjs /path/to/project
node skill/webcraft-pro/scripts/audit-web-project.mjs /path/to/project --json

脚本检查可观察的源码信号，例如标题与描述、viewport、图片替代文本、焦点样式、降低动态效果、占位文案和空链接。它是静态提示工具，不代替真实浏览器、无障碍或性能测试。

开发验证

npm test
python /path/to/skill-creator/scripts/quick_validate.py skill/webcraft-pro

Windows 非 UTF-8 区域设置可先启用 Python UTF-8 模式：

$env:PYTHONUTF8 = "1"
python C:path	oquick_validate.py skillwebcraft-pro

包结构

• SKILL.md：CRAFT 主流程
• references：按阶段加载的详细指导
• audit-web-project.mjs：零依赖静态审查
• THIRD_PARTY.md：研究来源与原创边界

RedSkill 上传时直接选择 skill/webcraft-pro 目录，与 GitHub 安装使用同一份版本化内容。

Originality

WebCraft Pro uses original wording, examples, workflow design, and code. It was informed by recurring strengths in prominent open-source Agent Skill projects; see THIRD_PARTY.md for research sources and licenses.

License

MIT © 2026 bingxijun