用途：当工作流需要视觉 UI 探索、原型迭代，或让用户在多个设计方向中做人工选择时，使用 Design 应用。
主要能力与用法：先用 create-design 创建项目外壳，在具备可渲染 HTML 前不要报告设计就绪。开放式 UX 探索时，生成 2-5 个（默认 3 个）结构紧凑、完整、无需构建即可渲染的独立 HTML 方向，并调用 present-design-variants；每个方向是一个代表性屏幕或方向快照，而非完整应用。用户选定后，删除未选变体屏幕，对保留屏幕先调用 get-design-snapshot（传该屏幕 fileId），再对同一 fileId 调用 edit-design 做有界单文件修改；将占位扩展为完整方向时用 mode: "replace-file"，变体选定后不要再调用 generate-design。若宿主不提供聊天选择按钮，请用户告知偏好的屏幕名。对已选方向直接细化时，先 get-design-snapshot，再基于当前 HTML 用 edit-design 做外科式修改或 replace-file 替换；generate-design 仅用于新文件。用户要在代码库实现所选设计时，调用 export-coding-handoff。
质量要求：生成前明确受众、屏幕主要任务与视觉主张；避免 Inter/Roboto/系统字体、靛紫配色与居中英雄区加三卡片布局，改用有辨识度的字体搭配、单一强调色与非对称布局；各方向在结构与行为上区分，而非仅换色；使用真实领域内容，避免 lorem ipsum 与装饰占位；保证响应式、键盘焦点、加载/空/错误状态与减少动效支持；交付前检查渲染效果并修复层级、溢出、对比度与交互问题。
跨应用与限制：托管默认连接 https://design.agent-native.com/mcp，技能文件不得存放共享密钥。CLI/编辑器客户端需保持 npx @agent-native/core@latest connect 运行至浏览器授权完成，安装或连接后重启客户端。若工具返回 Session terminated 或需认证，不要反复重试：在 Claude Code 运行 /mcp 选择 Authenticate/Reconnect，或在终端运行 npx -y @agent-native/core@latest reconnect https://design.agent-native.com 重新认证，无需重装。不要用 curl 手写 MCP HTTP 请求；检查本地配置时须遮蔽 Authorization、http_headers 与 token 值。保持可视化循环，展示内联 MCP App 或返回的 Open design 链接，而非粘贴大段 HTML。