最佳实践

开始一次设计对话

配置并确认 MCP 连接正常后，在 AI Agent 对话中输入你想要的设计内容。

示例提示词：

使用 Ardot，设计一个健身 App，为健身追踪 App 设计完整的用户注册流程和运动数据看板页面，支持图表展示每日运动数据。

使用场景

设计稿转代码

用户：基于当前设计稿的登录页面，帮我生成 React 组件代码
AI：[调用 fetch_editor_state 获取当前状态]
    [调用 capture_screenshot 获取页面截图]
    [调用 batch_read 获取图层结构和属性]
    [调用 fetch_guidelines 获取代码生成规范]
    → 生成完整的 React 组件代码

AI 辅助设计

用户：在当前画布右侧创建一个 Dashboard 页面
AI：[调用 locate_available_space 找到空白区域]
    [调用 fetch_guidelines 获取 Web 应用设计规范]
    [调用 batch_edit 创建页面结构和组件]
    [调用 capture_screenshot 验证设计效果]
    → 完成 Dashboard 页面设计

设计系统管理

用户：为项目创建一套亮色/暗色主题的设计变量
AI：[调用 fetch_variables 查看现有变量]
    [调用 apply_variables 创建颜色、间距、字号等 Token]
    → 完成设计变量定义

设计审查

用户：检查当前页面是否存在布局问题
AI：[调用 capture_layout 并设置 problemsOnly=true]
    → 返回所有存在对齐/溢出问题的节点