--- title: "浏览器自动化参考：design research - 浏览器自动化 | 思行致远" canonical: "https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-design-research/" dateModified: "2026-06-30" datePublished: "2026-06-30" --- 打开 AI·外脑目录 AI·外脑 [返回专栏首页](https://siyuanailab.com/knowledge/) × 站内搜索 ⌕ 主要栏目 - [AI 核心概念](https://siyuanailab.com/knowledge/ai-core/) - [工作流](https://siyuanailab.com/knowledge/workflows/) - [工具配置与选型](https://siyuanailab.com/knowledge/toolkits/) - [信源与标准](https://siyuanailab.com/knowledge/sources/) - [场景案例 待开发](https://siyuanailab.com/knowledge/scenarios/) - [职业与能力](https://siyuanailab.com/knowledge/career/) 专题 - [从这里开始](https://siyuanailab.com/knowledge/start/) - [获取与安装](https://siyuanailab.com/knowledge/install/) - [建设日志](https://siyuanailab.com/knowledge/ops/) [工作流子目录](https://siyuanailab.com/knowledge/workflows/) 基础设施层 - [浏览器自动化 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/) - [WF-001 浏览器自动化参考：design research](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-design-research/) - [WF-002 浏览器自动化参考：playwright mcp](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-microsoft-playwright-mcp/) - [WF-003 浏览器自动化参考：mote](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-mote/) - [WF-004 浏览器自动化参考：playwright mcp](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-playwright-mcp/) - [WF-005 浏览器自动化参考：vibetest use](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-vibetest-use/) - [MCP 工具 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/mcp-tools/) - [文件系统与本地执行 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/filesystem-local/) - [API 网关与工具路由 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/api-tool-routing/) Skill 生产线 - [目标明确 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/goal-definition/) - [Skill 设计 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/skill-design/) - [代码实现 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/implementation/) - [测试评估 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/testing-evaluation/) Skill 参考库 - [写作与内容 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/writing-content/) - [研究与知识 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/research-knowledge/) - [沟通与协作 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/communication-collaboration/) - [产品与项目 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/product-project/) - [数据与分析 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/data-analysis/) - [创意与设计 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/) - [商业与营销 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/business-marketing/) Agent Building 只收录有多步工作流、工作标准、Loop、Harness、工具链或通信机制的真 Agent；不收纯 persona、profile、curated list 或只有 system prompt 的仓库。 - [多 Agent 框架 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/multi-agent-frameworks/) - [工作流编排 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/workflow-orchestration/) - [Sub-agent 模式 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/sub-agent-patterns/) - [Harness 与评估 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/harness-evaluation/) 基础设施层 · 浏览器自动化 · 工具解读 · WF-001 # 浏览器自动化参考：design research 思行致远 · 2026/6/30 · 置信度：高 浏览器自动化Playwright网页QAAgent工具 一个 Claude Code 浏览器自动化研究 Skill，用 10 个专门 agent 分三轮审计网站设计，并合成结构化设计参考文档。 # design-research > 一个 Claude Code 浏览器自动化研究 Skill，用 10 个专门 agent 分三轮审计网站设计，并合成结构化设计参考文档。 ## 这个能力解决什么问题 复刻或分析一个网站设计时，人工要反复截图、量尺寸、抄颜色、看字体、拆组件、检查响应式。`design-research` 解决的是把这套设计调研拆给一组浏览器 agent：它们在真实 Chrome 会话里访问目标 URL，分别抽取导航结构、色彩字体、组件、布局、技术实现、可访问性和移动端行为，最后汇总成可用于重建设计的 markdown 参考。 ## 核心逻辑 输入是目标 URL，最好是有多个页面类型的网站。处理层在 Claude Code agent teams 中启动 10 个浏览器自动化 agent：第一轮 5 个无依赖任务并行，摸清站点结构、设计系统、视觉性格、技术实现和可访问性；第二轮 4 个 agent 依赖站点结构结果，继续分析页面布局、交互组件、内容模板和 UX pattern；第三轮 1 个 agent 在布局结果之后检查移动和响应式。每个 agent 用 Chrome 扩展驱动真实浏览器，读取 DOM、截图、computed styles 并互动。输出是一份合成后的 markdown 设计研究报告。 ## 技术结构 - **Claude Code agent teams**：依赖实验性 agent team 能力和 tmux，让多个 agent 在分屏中并发执行。 - **Claude in Chrome extension**：使用用户已登录的 Chrome session，因此能访问登录后页面，但也带来权限边界问题。 - **三阶段任务图**：站点结构等基础审计先跑，组件/页面模板等依赖信息后跑，移动端审计最后跑。 - **浏览器采集动作**：导航、截图、DOM 读取、computed styles、页面互动。 - **输出字段**：颜色 hex/RGB/Tailwind、字体栈、组件清单、CSS 尺寸、内容流、断点、技术架构、可访问性建议。 ## 为什么值得参考 它把“设计研究”拆成多个互补视角，而不是让一个 agent 从头看到尾。尤其值得借鉴的是依赖顺序：先建站点地图，再做页面和组件深挖，最后看响应式；这符合真实设计审计的认知顺序。它也说明浏览器自动化不只用于测试，还能用于审美、结构和前端实现的知识抽取。 ## 为什么不建议直接套用 它需要 Claude Code 2.0.73+、Chrome extension、tmux、实验性 agent teams，还建议跳过权限确认以避免 10 个 agent 反复询问。这个权限模型不适合默认给客户或团队成员使用。它使用真实登录态浏览器，也意味着访问边界、隐私页面和客户数据必须提前限制。README 估计一次完整审计 token 消耗接近单 agent 的 10 倍，成本不可忽略。 ## 如何改造成自己的版本 内部版本可以保留“三轮审计”和“角色分工”，但降低风险：先做 4 个 agent 版本（结构、视觉系统、组件、响应式），只允许访问白名单域名和公开页面；每个 agent 输出固定 JSON/markdown 片段，主 agent 只负责合成。不要默认跳过权限，改成每轮开始前确认目标域和访问范围。对需要登录的网站，先准备只含测试数据的账号。 ## 适用场景 - 竞品设计拆解、站点改版前审计、前端复刻参考。 - 需要真实浏览器读取 DOM、样式和响应式行为。 - 目标站点页面类型丰富，值得并行审计。 ## 不适用场景 - 涉及敏感登录态、客户后台或私密数据页面。 - 只需要单页截图点评，不值得启动 agent team。 - 预算无法承担多 agent 长时间浏览器任务。 ## 参考信息 - 原项目：[design-research](https://github.com/hamelsmu/design-research) - 作者：hamelsmu - 相关概念：[[浏览器自动化]]、[[设计审计]]、[[Sub-agent]] - 相关卡片：保守留空 ## 参考对象信息 **名称：**design-research **作者：**hamelsmu **链接：**[https://github.com/hamelsmu/design-research](https://github.com/hamelsmu/design-research) ## 适用场景与行动 **场景：**基础设施层 / 浏览器自动化 **适合谁：**关注 AI 工作流、Skill 生产和 Agent Building 的读者 **下一步：**先阅读边界说明，再判断它是否适合改造成自己的浏览器自动化流程。 当前内容按公开来源和已审核草稿整理，只作为工作流理解与方法论参考。 涉及客户数据、外部平台、会议记录和业务系统的场景，必须保留人工确认与授权边界。 [下一张：浏览器自动化参考：playwright mcp](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/infrastructure-browser-automation-microsoft-playwright-mcp/) [返回当前分类](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/) [返回工作流专栏](https://siyuanailab.com/knowledge/workflows/)