agentspace 中需启用 browser automation 和 devtools inspector 工具，在真实浏览器中加载页面并调用 getcomputedstyle 获取桌面/移动端 hover 状态下的背景色、边框等最终渲染值，再通过 /extract-design、imprint 插件或 dump css-vars 命令生成含来源标注的 design.md。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 AgentSpace 中检查页面样式，不是通过截图或静态 CSS 文件分析，而是要让 Agent 在真实浏览器环境中加载目标页面，读取 DOM 结构、计算样式、媒体查询匹配结果与交互状态后的最终渲染值。
启动带 DevTools 的浏览器实例
打开 AgentSpace UI → 点击左上角「+ New Agent」→ 在「Tools」配置区勾选「Browser Automation」和「DevTools Inspector」两项工具 → 保存并启动 Agent。这一步必须启用，否则无法获取计算样式和响应式断点信息。【未勾选 DevTools Inspector 将导致 getComputedStyle() 调用失败】
向 Agent 发送带上下文的样式分析指令
在聊天框中输入：「分析 https://example.com 的主按钮样式，包括桌面与移动端 hover 状态下的背景色、边框、字体大小和间距，输出 DESIGN.md 格式」。
Agent 会自动执行：加载页面 → 切换 desktop / mobile 视口 → 触发 hover 状态 → 调用 getComputedStyle 获取每个状态下的实际像素值 → 关联对应 CSS 规则来源（如 style attribute、
提取结构化样式数据并生成 DESIGN.md
方法一：使用内置命令
输入 /extract-design → 等待 Agent 返回 Markdown 内容，包含 Colors、Typography、Spacing、Components 四个章节，每项标注「来源：inline style」「来源：tailwind.css:187」等可追溯路径。
方法二：调用 Imprint 插件（需提前安装）
Agent 会自动唤起本地 Imprint 桌面应用，传入 URL 和视口列表 → 接收返回的 DESIGN.md 文件 → 直接嵌入当前对话附件中。这一步比纯云端解析更准，因为绕过了 CSP 限制和 Shadow DOM 隐藏样式。
方法三：手动触发 CSS 变量快照
输入「dump css-vars」→ Agent 执行 document.querySelectorAll('[style]') + window.getComputedStyle(document.body) → 合并 :root 变量与运行时计算值 → 输出键值对表格。注意：该命令不识别 @layer 或 cascade layers 中的优先级逻辑，仅捕获最终生效值。
