【交作业】周五晚上跑的Kimi-K3，全流程复刻的UI设计工具墨刀
MoDao
基于 Next.js 14 对墨刀品牌官网进行的高保真前端复刻项目，覆盖首页、产品功能、企业服务、定价、下载和客户案例等核心页面。
本项目仅用于前端开发学习、界面研究与本地演示，并非墨刀官方项目。页面文案、品牌标识及视觉素材的相关权利归原权利人所有，请勿用于商业用途。
功能范围
- 品牌首页：活动横幅、响应式导航、产品入口、客户案例轮播、企业品牌跑马灯、工作场景切换、AI 能力、素材广场预览和行动按钮
- 产品页面：墨刀原型、墨刀 AI、墨刀白板、墨刀设计 D2C、墨刀 AIPPT、流程图
- 企业服务：企业版、私有化部署、团队介绍、AI MCP 服务、企业案例列表
- 商业页面：多产品定价方案、套餐对比、常见问题
- 下载中心：Windows、macOS、Linux、HarmonyOS、iOS、Android 及设计工具插件
- 客户案例：10 个静态生成的企业案例详情页
- 响应式适配：桌面端、平板端和移动端布局
- 本地素材：官网公开素材按原 CDN 域名和路径保存到
public/assets
技术栈
- Next.js 14（App Router）
- React 18
- TypeScript 5
- Tailwind CSS 3
- Lucide React
- 静态生成（SSG）
本地运行
环境要求：Node.js 18.17 或更高版本，推荐使用 Node.js 20 或 22。
npm install npm run dev
构建与检查
TypeScript 类型检查 npm run check # 生产构建 npm run build # 启动生产服务 npm run start
当前构建会生成 27 个静态页面，包括 10 个客户案例详情页。
主要路由
| 路由 | 页面 |
|---|---|
/ |
品牌首页 |
/feature/prototype |
墨刀原型 |
/feature/ai |
墨刀 AI |
/feature/board |
墨刀白板 |
/feature/design |
墨刀设计 D2C |
/feature/aippt |
墨刀 AIPPT |
/feature/flowchart-tool |
流程图 |
/downloads |
下载中心 |
/pricing |
定价方案 |
/enterprise |
企业版 |
/privatize |
私有化部署 |
/introduction |
团队介绍 |
/ai-mcp |
AI MCP 服务 |
/enterprise-case-page |
企业案例列表 |
/ad/case_detail/[id] |
客户案例详情（1–10） |
旧版官网路径（例如 /brand、/brand/pricing 和部分 .html 路径）通过 Next.js 重定向到对应的新路由。
项目结构
app/ Next.js 页面与全局布局
components/ 通用组件及各页面业务组件
data/ 导航、定价和案例等静态数据
lib/ 本地素材路径工具
public/assets/ 本地化图片、视频、字体和图标
.trae/documents/ 产品需求与技术架构文档
素材路径规则
远程素材按来源域名和目录结构映射到本地：
https://cdn-yunyin.modao.cc/path/image.png
→ /assets/cdn-yunyin.modao.cc/path/image.png
业务代码通过 lib/asset.ts 中的 asset() 函数生成本地访问地址，从而避免依赖外部 CDN 或临时签名链接。
说明
- 登录、注册、购买、素材上传等真实业务操作仍跳转至墨刀官方网站。
- 本项目不包含墨刀账号系统、支付系统、素材社区后台或在线编辑器后端。
/_analysis目录仅用于本地分析官网结构，已通过.gitignore排除。