garden skills中的web-design-engineer可用于辅助规划和制作网页，适合在已有编程助手中补充页面设计与前端实现流程。它不是独立的网站编辑器，安装后仍需由所用工具加载并根据具体需求执行。
只安装需要的网页开发能力
在准备使用的项目目录中打开终端，确认Node.js和npx可用。若当前目标只是制作HTML页面，可以只安装web-design-engineer，避免一次加入全部功能：
npx skills add ConardLi/garden-skills -s web-design-engineer
安装器提供的工具适配选项应与实际使用的编程助手一致。不同工具发现Skill的目录和加载方式可能不同，安装结束后要确认它已经被识别，而不只检查终端是否没有报错。
web-design-engineer网页设计能力示意
把页面要求写具体
开始制作前，先给出页面用途、目标读者、主要内容和交互需求。比如说明要制作一个软件功能介绍页，包含功能对比、适用平台和下载区域，并要求在手机与桌面浏览器中都可阅读。已有品牌颜色、图片或参考布局时，应同时提供使用范围。没有真实产品素材，就不要让工具伪造软件操作界面；可以先完成文字、布局和组件，再放入真实素材。
保留可编辑的HTML与样式
让编程助手交付实际HTML、CSS及必要的脚本文件，并说明本地入口。对单页演示，可以保持结构简单；确有交互或多页面需求时，再采用合适的项目组织方式。检查页面是否使用正确的标题层级、图片替代文字和清晰的按钮文字。页面看起来完整，并不代表每个按钮、表单或外部地址已经连接真实服务。
分别检查桌面和手机布局
在浏览器中打开成品，先检查主要信息是否完整，再缩小到手机宽度。长标题、代码、表格和固定宽度卡片容易造成横向溢出，需要逐项调整。需要跨成员复现同样的能力版本时，可使用对应发布版本的安装地址，而不是始终跟随最新main分支。验收时重点看实际页面、文件结构和功能是否符合需求，不把一次生成结果直接视为已经上线的网站。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
