mimo code 开发 ui 组件的核心是“理解上下文+安全落地”，而非自动写代码；它通过精准提示、compose 模式端到端交付、持久记忆保持风格一致，并强调人工校验确保安全。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用 MiMo Code 做 UI 组件开发，关键不是让它“写代码”，而是让它“理解上下文+安全落地”。它不替代你写 React 或 Vue，但能大幅减少样板、同步逻辑、测试覆盖和跨文件协调的重复劳动。重点在于引导方式、权限控制和验证节奏。
明确组件需求，避免模糊指令
UI 组件任务容易卡在“意图不清”上。比如“做个按钮”太宽泛，MiMo Code 可能生成带默认样式的原生 button，而你实际需要的是 Ant Design 风格、支持 loading 状态、可透传 className 的封装组件。
- ✅ 推荐写法：“在 src/components/ui/ 下新建 Button.tsx，基于 Ant Design 5.12，支持 size='small'|'middle'|'large'、loading、disabled、onClick，导出 default 和 ButtonProps 接口，配套 Storybook 示例和 Jest 快照测试”
- ❌ 少用写法：“帮我写个按钮组件”
- 提示：首次运行时用 mimo init 扫描项目，它会自动识别已安装的 UI 库（如 @ant-design/icons、@storybook/react）、TypeScript 版本和测试框架，后续指令可直接引用这些上下文
用 Compose 模式完成端到端交付
单次对话里让它只做一件事（比如只写组件），往往漏掉配套内容。启用 Compose 模式（按 Tab 键切换或输入 /compose）后，它会主动拆解并串联流程：
- 先分析项目结构，确认 src/components/ui/ 是否存在、tsconfig.json 类型路径是否配置正确
- 再生成组件文件 + 类型定义 + 默认导出
- 接着创建对应的 .stories.tsx 文件（含基础交互故事）
- 最后生成 __tests__/Button.test.tsx，覆盖 props 变化和点击事件
- 所有文件生成前会展示 diff 预览，按 y 确认才真正写入磁盘
利用持久记忆保持风格一致性
你不会每次都要重申“我们用 CSS-in-JS、主题色是 #4096ff、禁用内联样式”。MiMo Code 的项目记忆机制会自动沉淀这类规则：
- 第一次执行 /dream 后，它会在根目录生成 MEMORY.md，记录 UI 规范、常用 hook、设计系统约束
- 后续新建 Card、Modal 等组件时，它会主动参考 MEMORY.md 中的配色、间距、响应式断点等设定
- 如果某次生成偏离预期（比如用了 px 而非 rem），只需说“请统一用 rem 单位”，它会更新 MEMORY.md 并重试
安全执行与人工校验不可跳过
MiMo Code 能直接写文件、跑 npm test、甚至 push 到分支，但 UI 组件涉及视觉表现和用户交互，必须保留人工把关环节：
- 禁用自动 commit：启动时加 --no-git 参数，或在 ~/.mimo/config.json 中设
"autoCommit": false - 强制预览检查：生成 Storybook 后，建议手动运行 npm run storybook 确认渲染效果和交互逻辑
- 限制执行范围：用 --cwd ./src/components/ui 锁定操作目录，防止误改 utils 或 hooks
- 关键变更留痕：对涉及状态管理或副作用的组件（如带 useSWR 的数据卡片），让它先输出修改说明（/explain），再决定是否执行
