这是我在「AI+Web3学习交流群」发起《7 天 AI + Web3 起步挑战》后的第三天，前两天的分享可跳转以下链接前往查看：
今天 Day 3 的目标是：用 AI 画出「能用就行」的页面结构。
和前两天一样，我也是在群里给大家分享了可以直接用的 Prompt 模板：
你是一个 Web3 前端设计师。
请基于以下 PRD，帮我设计一个「能跑就行」的页面结构。
要求：
- 页面不超过 3 个
- 每个页面列出：
- 页面目的
- 核心组件
- 用户操作流程
PRD 内容如下：
【粘贴 Day 2 的 PRD】
下面我就不分享其他人的进展了，我就只分享我自己的项目进展。
概览
对于我自己的项目，昨天我让 AI 生成的 PRD v1 文档里就已经添加了页面结构。实际上，每一个页面，都包含了：页面结构、字段定义、交互流程、错误处理。
所以我今天其实更进一步了，我让 AI 帮我设计并生成了 《前端技术架构文档（TAD v1）》，以下是该文档的大纲：
内容还是挺全面的。其中，技术栈概览如下：
| 类别 | 技术选型 | 版本 | 说明 |
|---|---|---|---|
| 框架 | Next.js | 14.x | App Router, RSC |
| 语言 | TypeScript | 5.x | 严格模式 |
| 样式 | Tailwind CSS | 3.x | 原子化 CSS |
| 组件库 | shadcn/ui | latest | 可定制组件 |
| Web3 | wagmi + viem | 2.x | 类型安全的以太坊交互 |
| 钱包 | RainbowKit | 2.x | 钱包连接 UI |
| 状态管理 | Zustand | 4.x | 轻量级状态管理 |
| 表单 | React Hook Form + Zod | - | 表单验证 |
| 数据请求 | TanStack Query | 5.x | 服务端状态缓存 |
| IPFS | Pinata SDK | - | 元数据存储 |
项目结构
项目结构也很详细：
src/
├── app/ # Next.js App Router
│ ├── layout.tsx # 根布局 (Providers)
│ ├── (dashboard)/ # 带侧边栏的路由组
│ │ ├── layout.tsx # Dashboard 布局 (Sidebar + Content)
│ │ ├── page.tsx # 首页 /
│ │ ├── create/
│ │ │ └── page.tsx # 创建发票 /create
│ │ ├── invoices/
│ │ │ └── page.tsx # 发票列表 /invoices
│ │ └── settings/
│ │ └── page.tsx # 设置页 /settings
│ └── invoice/
│ └── [id]/
│ └── page.tsx # 发票详情 /invoice/[id] (公开页面，无侧边栏)
│
├── components/
│ ├── ui/ # shadcn/ui 基础组件
│ │ ├── button.tsx
│ │ ├── input.tsx
│ │ ├── card.tsx
│ │ ├── badge.tsx
│ │ ├── dialog.tsx
│ │ ├── select.tsx
│ │ ├── skeleton.tsx
│ │ ├── toast.tsx
│ │ └── ...
│ │
│ ├── layout/ # 布局组件
│ │ ├── sidebar.tsx # 左侧导航栏
│ │ ├── sidebar-nav.tsx # 导航菜单项
│ │ ├── sidebar-wallet.tsx # 侧边栏钱包状态
│ │ ├── content-header.tsx # 内容区顶部（标题 + 操作）
│ │ └── page-container.tsx # 页面内容容器
│ │
│ ├── wallet/ # 钱包相关
│ │ ├── connect-button.tsx # 连接钱包按钮
│ │ ├── wallet-guard.tsx # 钱包连接守卫
│ │ ├── wallet-avatar.tsx # 钱包头像
│ │ └── network-switch.tsx # 网络切换提示
│ │
│ ├── invoice/ # 发票相关
│ │ ├── invoice-form.tsx # 创建发票表单
│ │ ├── invoice-card.tsx # 发票详情卡片
│ │ ├── invoice-list.tsx # 发票列表
│ │ ├── invoice-list-item.tsx # 列表单项
│ │ ├── invoice-status.tsx # 状态徽章
│ │ ├── invoice-receipt.tsx # 支付收据
│ │ ├── invoice-history.tsx # 发票历史时间线
│ │ ├── invoice-parties.tsx # From/To 双方信息
│ │ └── invoice-share.tsx # 分享组件
│ │
│ ├── dashboard/ # Dashboard 专属组件
│ │ ├── stats-card.tsx # 统计卡片
│ │ ├── stats-grid.tsx # 统计卡片网格
│ │ └── recent-invoices.tsx # 最近发票列表
│ │
│ └── common/ # 通用组件
│ ├── address-display.tsx # 地址显示/复制
│ ├── amount-display.tsx # 金额显示
│ ├── date-picker.tsx # 日期选择
│ ├── search-bar.tsx # 搜索栏
│ ├── tx-status.tsx # 交易状态
│ ├── empty-state.tsx # 空状态
│ └── loading-skeleton.tsx # 加载骨架屏
│
├── hooks/ # 自定义 Hooks
│ ├── use-invoice.ts # 发票数据查询
│ ├── use-invoices.ts # 发票列表查询
│ ├── use-create-invoice.ts # 创建发票
│ ├── use-pay-invoice.ts # 支付发票
│ ├── use-approve-token.ts # Token 授权
│ ├── use-token-balance.ts # Token 余额
│ └── use-token-allowance.ts # Token 授权额度
│
├── lib/ # 工具库
│ ├── wagmi.ts # wagmi 配置
│ ├── contracts.ts # 合约地址 & ABI
│ ├── ipfs.ts # IPFS 上传/下载
│ ├── utils.ts # 通用工具函数
│ └── constants.ts # 常量定义
│
├── stores/ # Zustand 状态
│ └── app-store.ts # 应用全局状态
│
├── types/ # 类型定义
│ ├── invoice.ts # 发票类型
│ └── contract.ts # 合约类型
│
└── styles/
└── globals.css # 全局样式
UI 稿
之后，我还让 AI 也帮我去生成了一些 UI 稿，以下是部分成果：
当前汇总
到目前为止，我的该项目生成的内容包括以下这些：
明天再继续。
参考阅读：
