网页设计工程师
把网页创作从“能用”提升为精致、可交互且具有视觉辨识度的体验。
证据显示技能要求事实核验、用户确认设计系统与关键决策、明确浏览器验收触发门槛，并强调占位符、真实素材和版本副本，未见恶意、窃密或破坏性默认行为。扣分在于外部搜索、CDN、品牌素材获取和浏览器工具的数据流、权限边界、失败回滚与敏感数据处理未完整说明；发布者身份亦未验证。
工作流、适用范围和若干代码规范较清晰，且包含部分异常输入与验收失败处理要求。静态材料未提供覆盖关键路径的可执行测试套件或CI证据；引用的多个参考文件未全部提供，部分模板依赖外部CDN，故仅给有限的静态可靠性分数。
适用输出、非适用范围、隐式触发配置和多种设计场景写得较明确，并提供中英文文档。扣分在于触发语义仍较宽泛，浏览器、字体和素材流程存在海外网络依赖，未说明中国大陆不可达时的替代方案；对非React/非浏览器环境的边界也不够具体。
信息架构、渐进式工作流、安装布局、manifest版本、MIT许可证、示例和限制说明较完整。扣分在于未见明确维护负责人、更新路径和变更日志；参考文件依赖较多，部分安装与依赖可用性假设隐藏在文档中。
技能直接针对视觉网页产物，包含设计系统、v0、完整构建和自检流程，理论上可减少通用化设计并产出可直接使用的HTML。静态审查无法验证画廊和示例的真实质量，且“stunning”等目标主观、部分输出仍需人工素材、事实和浏览器检查，因此未接近满分。
文件提供了可审计的提示词、manifest、模板、demo路径和若干对比说明，具备有限可追溯性。扣分在于没有本次静态材料中的独立执行结果、测试报告或第三方复核，许多“validated”“real artefact”等表述无法由当前文件独立证实。
- 核心流程可能依赖海外搜索、字体CDN、图片CDN或其他外部资源；应准备本地镜像、离线字体和失败时的降级策略。
- 不要把README中的画廊、对比Demo或“validated”表述当作已验证测试结果；交付前仍需执行关键路径、响应式、可访问性和素材加载检查。
- 应补充明确的权限/数据流披露、敏感信息处理规则、维护负责人、更新路径和变更日志。
这个 Skill 能做什么，适合哪些场景？
web-design-engineer 是 Garden Skills 中专注于设计与前端实现的独立技能。它用于创建或重设计网页、仪表盘、交互原型、HTML 幻灯片、动画、UI mockup、数据可视化和设计系统探索。工作流要求先理解产品与设计背景，再声明设计系统、尽早展示 v0 草稿，并在完整构建后进行自检。它适用于 HTML、CSS、JavaScript 和 React，但不适用于后端、CLI、纯逻辑开发、长篇文章转换或旁白驱动的视频演示。
读取用户提供的截图、Figma、代码库、UI kit、设计系统或现有页面，并提取颜色、字体、间距、圆角、阴影、动效和文案风格；根据任务建立 Design Read 和设计系统声明；创建带占位内容的 v0；随后实现 HTML/CSS/JavaScript/React 网页工件、交互状态、响应式布局和动效；在明确要求验收、QA、浏览器测试或响应式检查时运行浏览器验收流程；对设计进行五维度批评或执行交付前清单。
- 产品设计师需要把一个品牌或产品简报转成高保真的落地页，并希望先确认视觉方向再开发。
- 前端工程师需要重设计现有仪表盘，同时保留现有信息架构、路由、表单或可访问性约束。
- 团队需要一个可点击的 HTML/React 原型，用于探索多种布局、视觉、交互和创意变体。
- 数据团队需要一个响应式数据可视化仪表盘，并要求深浅色模式、语义化颜色和较高的数据墨水比。
- 演讲者需要一个固定 1920×1080、可键盘导航并适配不同视口的 HTML 幻灯片。
这个 Skill 有哪些优点和局限？
- 覆盖网页、仪表盘、原型、幻灯片、动画和数据可视化等多种视觉前端工件。
- 强调设计系统、品牌资产、反 AI 套路、响应式布局和交互状态。
- 包含 Design Direction Advisor、25 个风格配方以及多种高级实现参考。
- 支持 Claude Code、Claude.ai 和 Codex CLI 等技能兼容环境。
- 默认要求在设计系统声明和 v0 等阶段暂停并等待用户确认，追求快速单向交付的团队可能觉得流程较慢。
- 品牌任务缺少真实 logo 或产品资产时，流程要求停止并请求用户提供，不能用 CSS 图形替代。
- 浏览器验收只在用户明确要求时执行，不是所有构建任务的默认验证步骤。
- 提供的材料未记录独立测试套件或各类浏览器的详细测试覆盖。
如何安装这个 Skill？
使用仓库 README 支持的 skills CLI：npx skills add ConardLi/garden-skills -s web-design-engineer。也可以先克隆仓库，再将 skills/web-design-engineer 复制到项目的 .claude/skills/ 或 .agents/skills/ 目录。README 还记录了 Claude Code 插件市场、发布版 ZIP 和 Git submodule 安装方式。
如何使用这个 Skill？
将技能文件夹放入受支持的技能目录后，提交明确的视觉前端任务，例如：“创建一个响应式 React 数据仪表盘，先给出 Design Read、设计系统声明和 v0 草稿。”如果需要浏览器验收，应明确提出“请进行浏览器测试/响应式检查”；仅说“构建”或“完成”不会自动触发可执行验收。