逐项解读岗位职责
每一项都来自该岗位常见的职位描述。旁边会说明 AI智能体如何处理，以及可以自主完成到哪一步。
- 自主完成调研、阅读、起草和搭建。不会向企业外部发送任何内容。
- 先请示，再完成最后一步涉及发送、发布、付款或修改记录，因此会先向您展示一张确认卡片。
- 做好准备，由您决定这项职责需要您来判断。AI智能体会提供事实依据和建议。
- 由您负责通话、线下会议、签字和关系维护。
| # | 岗位职责 | AI智能体如何完成 | 可自主完成到哪一步 |
|---|---|---|---|
| 01 | 为网站和网页应用编写整洁、经过测试的代码。 | 在自己的电脑上编写 HTML、CSS、JavaScript 和 TypeScript，为构建的功能添加测试，并在汇报前运行测试和代码检查。代码保留在分支上，直到您允许推送到 GitHub。 | 自主完成 |
| 02 | 根据设计稿，使用 HTML、CSS 和 JavaScript 构建响应式页面和界面。 | 根据您的 Figma 文件或截图，在 MonstarX 中或通过编写代码构建页面，检查页面在 390、768 和 1,440 像素宽度下的显示效果，并列出与设计稿的差异。开始或修改 MonstarX 项目前会先征得您的同意。 | 先请示，再完成 |
| 03 | 将前端连接到后端服务、API 和数据库。 | 阅读 Stripe 或 Supabase 等服务的文档，编写带错误处理的调用代码，并在自己的电脑上使用测试密钥进行测试。它会告诉您需要哪些生产环境密钥，由您负责添加。 | 自主完成 |
| 04 | 在不同浏览器和设备尺寸下测试，查找并修复漏洞。 | 在自己的桌面电脑上用 Chrome 和 Firefox 打开每个页面，按手机、平板和桌面屏幕宽度检查，点击每个链接并提交每个表单。它会复现漏洞，在分支上修复，并展示修复前后的截图。 | 自主完成 |
| 05 | 改善页面速度、性能和基本搜索引擎友好性。 | 在自己的浏览器中测量每个页面的加载时间和大小，压缩图片、移除未使用的脚本，并添加页面标题、描述、图片替代文本和网站地图。您会收到改进前后的数据，但不承诺特定分数。 | 自主完成 |
| 06 | 与设计师一起制作原型和界面稿，在全面开发前验证想法。 | 将 Figma 画框、草图或一段描述转成 MonstarX 中可点击的原型，并返回预览链接供您分享给设计师。您可以用“把表单上移”这样的日常语言提出修改。每次构建前都会先征得您的同意。 | 先请示，再完成 |
| 07 | 审查其他开发人员的代码，并使用版本控制管理变更。 | 在自己的电脑上检出 GitHub 中的每个拉取请求，运行代码并撰写审查意见：哪些地方有问题、哪些地方不清楚，以及建议如何修复。发布评论或创建自己的拉取请求前会先征得您的同意，合并代码仍由您的团队负责。 | 先请示，再完成 |
| 08 | 编写和维护技术文档。 | 在代码仓库中与代码一起维护 README、配置步骤、每个组件的文档，以及每项变更对应的更新日志。代码变更时，它会在同一任务中更新相关文档。 | 自主完成 |
| 09 | 将更新、新功能和修复部署到线上网站。 | 准备发布说明、测试结果和预览链接。经您批准注明公开地址的卡片后，才会发布 MonstarX 项目。对于 GitHub 中的代码，它会准备拉取请求，部署则遵循您的现有流程。 | 先请示，再完成 |
| 10 | 备份网站并应用安全和软件更新。 | 每月列出有安全更新的软件包和插件，阅读发布说明，在分支上应用更新并运行测试。进行任何更改前，它会确认已有最新备份。更新线上网站前会先征得您的同意。 | 先请示，再完成 |
| 11 | 与客户、设计师和管理人员确定需求、项目范围和优先级。 | 根据会议记录和消息在 Google Docs 中起草项目范围：包括页面、功能、不包含的内容、待解决的问题，以及每项所需的工作量。您与客户确认后，智能体会按此执行。 | 做好准备，由您决定 |
| 12 | 为项目选择技术、框架和架构。 | 在一页中比较两个或三个方案，例如 MonstarX 与 GitHub 仓库中的自定义代码：各自的运行成本、团队已有的知识和潜在风险。最终由您选择。 | 做好准备，由您决定 |
12 项职责中，10 项可由 AI智能体处理，部分需经您批准
职责来源. 这十二项职责根据网页开发和前端开发职位公开招聘描述中最常见的工作内容改写，并对照 O*NET 的网页开发人员任务清单核实。 已参照 O*NET OnLine 核对: 15-1254.00 网页开发人员
与您的 网页开发AI智能体 共事的一周
阅读需求和设计稿，询问不清楚的地方，并在构建前回复一份简短计划。
列出待处理事项：已报告的漏洞、等待审查的拉取请求和本周到期的页面。
在自己的电脑上审查待处理的拉取请求，起草审查意见供您批准。
按手机、平板和桌面屏幕宽度测试本周的变更，并在分支上修复发现的问题。
准备发布材料：变更内容、测试结果和预览链接。发布前等待您的批准。
列出有安全更新的软件包，在分支上应用更新并运行测试。
第一天需要提供什么
- 代码访问权限：您的 GitHub 仓库，或网站所在的 MonstarX 项目
- 设计稿：Figma 文件、截图或您希望参考的网站
- 品牌素材和文案：标志、字体、颜色、照片和各页面的文字
- 工作流程：分支规则、审查负责人，以及发布到线上网站的方式
- 网站所用服务的测试密钥。生产环境密钥由您保管
- 访客最常用的浏览器和屏幕尺寸
哪些仍由您负责
- 与客户和管理人员确定项目范围、优先级和截止日期。
- 选择技术和架构。智能体会提供方案比较。
- 合并代码和决定是否上线。
- 在实体手机和平板上测试。智能体按这些设备的屏幕宽度测试。
- 生产环境密码和密钥。
三步聘用 AI智能体
- 01
描述角色
创建一个智能体，为它命名，像向新开发人员介绍工作一样描述职责：网站的用途、代码的组织方式、审查和发布流程，以及哪些功能绝不能出问题。如果已有职位描述，也可以直接粘贴。
- 02
授予访问权限
为 MonstarX 授权一次。如果您使用 GitHub 和 Figma，也可以用自己的账户连接，并选择允许该智能体使用。它会先了解代码仓库、设计文件和网站的构建方式。
- 03
设置第一个任务
要求它在明天 10:00 前完成一个页面或一项漏洞修复，并提供预览和测试结果。像审查同事的工作一样审查它的成果，然后确定每周审查和发布的安排。
可以先交给它的任务
- 根据 Figma 文件为 Ridge 构建一个带候补名单表单的上线页面。检查手机宽度下的显示效果，并在发布前给我看预览。
- 我们网站的联系表单在手机上无法正常使用。请复现问题，在分支上修复，并给我看修复前后的效果。
- 审查 fieldwork-site 仓库中待处理的拉取请求并起草评论。发布前先问我。
- 每月第一个周一，列出有安全更新的软件包，在分支上应用更新并运行测试。
看看它如何工作
这是一段使用示例数据的加速回放。您可以暂停、拖动进度条，也可以亲自接管鼠标。
画面中的应用
MonstarX
选一项任务，看看它如何完成。
- 原因
- 将新品发布页上线。
- 位置
- MonstarX · 项目 ridge-launch
- 预期结果
- 发布后，任何人都可以通过此地址访问页面。您可以随时取消发布。
你的团队，连接一切。
登顶时，依然温热。
500 ml 保温瓶，陪您一路登顶。
使用虚构数据的示例回放，已加速播放。您可以暂停、拖动进度条，也可以亲自接管鼠标。
常见问题
网页开发AI智能体是什么？
网页开发AI智能体是一种能完成网页开发人员日常工作的软件：构建页面、连接服务、测试、修复漏洞和编写文档。Monmo 智能体使用同一订阅中包含的应用构建工具 MonstarX，以及自己电脑上的开发工具完成这些工作。发布任何内容前，它都会先征得您的同意。
AI智能体能取代网页开发人员吗？
AI智能体可以接手根据设计稿构建页面、测试、修复漏洞、更新和编写文档等工作。但它不会与客户确定项目范围、选择架构，也不会承担上线内容的责任；仍需由人员审查工作并批准每次发布。团队借此让开发人员把时间花在棘手问题上，而不是积压的小问题上。
MonstarX 是什么？我需要用它吗？
MonstarX 是 Monmo 附带的应用构建工具，一份订阅即可使用两者。智能体可以根据需求在其中构建网站或应用，并返回预览链接，项目会保留在您的 MonstarX 账户中。两个产品各有自己的用量额度。对于已有的代码库，智能体则在自己的电脑上使用 Git 工作。
它能处理我们现有的网站和代码吗？
可以，只要智能体能够访问代码。如果网站位于 GitHub 仓库中，它会将代码复制到自己的电脑，在分支上修改，运行网站进行检查，并准备拉取请求。推送代码前会先征得您的同意，合并和部署仍遵循您现有的流程。
它会不经同意就发布或部署吗？
不会。发布始终需要单独批准一张卡片，卡片上会注明将要公开的地址。开始或修改 MonstarX 项目、向 GitHub 推送代码以及更新线上网站，也都会先征得您的同意。读取代码、在自己的电脑上编写代码、运行测试和截图无需批准，因为这些操作不会改变该电脑以外的内容。
它如何测试网站？
它会在自己的浏览器中按手机、平板和桌面屏幕宽度打开每个页面，点击所有链接，用测试数据提交表单，并运行项目的自动化测试。它按手机屏幕尺寸测试，但不使用实体手机。因此，请在批准发布前用自己的设备打开预览，完成最后的检查。