Axhub Make

一个专为 产品经理 和 设计师 打造的 AI 辅助生成原型工具。

📖 项目简介

本项目帮助你通过 AI 对话的方式，快速创建交互元素和页面。你只需要描述需求，AI 会自动生成代码，并帮助你调试和构建。生成的元素可以在浏览器中预览，也可以导出到 Axure、Figma 等设计工具中使用。

核心优势

• ✅ 零代码基础：通过自然语言描述需求，AI 自动生成代码
• ✅ 快速迭代：修改需求后，AI 自动更新代码
• ✅ 即插即用：生成的元素可在浏览器预览，也可导出到设计工具
• ✅ 专业规范：遵循最佳实践，代码质量有保障
• ✅ 多平台支持：支持导出到 Axure、Figma 等设计工具

可以创建什么？

• 元件（Elements）：可复用的独立元素

  • 按钮、表单、图表、卡片等
  • 示例：src/elements/ref-*

• 页面（Pages）：完整的业务页面

  • 用户列表、数据看板、设置页面等
  • 示例：src/pages/ref-*

🚀 快速开始

第一步：启动项目

首次使用时，在项目目录下运行：

npm install

💡 提示：这一步只需要执行一次，会自动安装所有必需的工具。

安装完成后就可以启动项目了

npm run dev

第二步：与 AI 沟通需求

1. 打开 AI 助手（如 Cascade、Cursor 等）
2. 描述你的需求，AI 会引导你完善细节
3. 选择生成模式（直接生成/规格优先/完整流程）
4. 确认文档，AI 会根据模式生成相应文档（prd.md / spec.md）

示例对话：

你：我想做一个用户列表页面

AI：好的！这个需求比较明确，我建议使用"规格优先"模式。
    请问这个页面需要哪些功能？
    1. 用户数据的展示方式（表格、卡片、列表）？
    2. 是否需要搜索和筛选功能？
    3. 是否需要分页？
    ...

你：用表格展示，需要搜索功能

AI：明白了。关于数据结构：
    1. 用户数据包含哪些字段？
    ...

生成模式说明：

• 直接生成：需求明确时，一次性产出 spec.md + 代码
• 规格优先：需求较复杂时，先确认 spec.md 再生成代码
• 完整流程：大型项目，先产出 prd.md，确认后产出 spec.md，最后生成代码

第三步：AI 生成代码

AI 会根据你的需求自动生成：

• 元素代码（index.tsx）
• 需求文档（spec.md）

第四步：预览和调试

在浏览器中打开显示的地址（如 http://localhost:51720），你可以：

• 实时查看元素效果
• 修改配置项测试
• 查看需求文档

如果发现问题，直接告诉 AI："按钮颜色不对，改成蓝色"，AI 会自动修改代码。

📁 项目结构

Axhub Make/
├── src/
│   ├── common/              # 公共类型和工具（无需关注）
│   ├── elements/            # 原型元件目录
│   │   ├── button/          # 按钮元素示例
│   │   │   ├── index.tsx           # 元素代码
│   │   │   ├── spec.md             # 需求文档
│   │   └── [你的元件]/
│   ├── pages/               # 原型页面目录
│   │   ├── sample-page/     # 示例页面
│   │   └── [你的页面]/
│   └── themes/              # 主题配置目录
│       ├── antd/            # Ant Design 主题示例
│       │   ├── designToken.json    # 主题 Token
│       │   └── index.tsx           # 主题演示页
│       └── [你的主题]/
├── rules/                   # Agents 工作规则
│   ├── requirements-alignment.md   # 需求对齐指南
│   ├── development-standards.md    # 开发标准
│   ├── debugging-guide.md          # 调试指南
│   └── theme-generation-guide.md   # 主题生成规范
├── assets/                  # 资源文件
│   ├── database/            # 资产管理数据库
│   ├── templates/           # 文档模板
│   ├── docs/                # 参考文档
│   └── libraries/           # 前端库文档
├── temp/                    # 临时文件目录
├── dist/                    # 构建产物（自动生成）

💡 使用技巧

如何描述需求？

好的描述：

• ✅ "创建一个用户列表页面，用表格展示，包含姓名、邮箱、状态字段，支持搜索功能"
• ✅ "做一个按钮元素，有主要和次要两种样式，点击后触发事件"

不够清晰的描述：

• ❌ "做一个列表"（缺少细节）
• ❌ "做一个好看的按钮"（"好看"太主观）

如何修改需求？

直接告诉 AI 你想改什么：

• "把按钮颜色改成红色"
• "增加一个删除功能"
• "表格增加分页功能"

AI 会自动更新代码和文档。

🎯 典型工作流程

1. 描述需求 → AI 生成 spec.md
2. 确认需求 → AI 生成代码
3. 预览效果 → npm run dev
4. 发现问题 → 告诉 AI 修改

⚙️ 技术说明

以下内容供技术人员参考，非技术用户可跳过

• 框架：React + TypeScript
• 构建工具：Vite
• 输出格式：IIFE 格式的单文件 JS
• 兼容性：编译为 ES5，兼容 Axure Runtime
• React 引入：通过 window.React 全局引入，无需打包

📝 常见问题

Q: 我完全不懂编程，能用吗？
A: 可以！只需要会描述需求，AI 会处理所有技术细节。

Q: 修改需求后需要重新开始吗？
A: 不需要。直接告诉 AI 要改什么，它会自动更新代码。

Q: 生成的代码可以自己修改吗？
A: 可以，但建议通过 AI 修改，这样能保持代码质量和规范。

Q: 出错了怎么办？
A: 直接告诉 AI 错误信息，它会帮你解决。

---

开始创建你的第一个 AI 原型吧！ 🎉