这是我在「AI+Web3学习交流群」发起《7 天 AI + Web3 起步挑战》后的第 7 天，前 6 天的分享可跳转以下链接前往查看：
这也是我的 7 天挑战的最后一天，目标就是：Demo 展示 & 复盘。
回顾下这 7 天来，我具体都做了什么呢？
Day 1
第一天，目标是 用 AI 想一个「能落地」的 Web3 产品 Idea。
我分别让 ChatGPT、Gemini、Cursor、Claude 帮我生成多个「7 天内可以做出 Demo」的 Web3 产品 Idea。几个 AI 工具总共给我提供了十几款不同的 Idea，最终我选择了做一款 On-chain Invoice，即链上发票/收款单。这个 Idea 是由 Claude 提供的。
之后，我又让 AI 们帮我想一个产品名字。ChatGPT 对我比较了解，知道我已经有 BlockETF、BlockLever 这两个项目，于是，它直接建议我给这个新产品取名为 BlockInvoice，我接受了。
于是，我又顺便去 Godaddy 给新产品注册域名。同样延续了 block-etf.com、block-lever.com 这两个域名的风格，我为新产品注册了 block-invoice.com 这个域名。
到此，第一天的任务就完成了，整个过程不到半个小时。
Day 2
第二天的目标是：把 Idea 拆成一个最小 PRD。其实就是要梳理出 MVP 版本的 PRD 文档。
这一天，我也是将同样的 Prompt 分别喂给了几个不同的 AI，看看哪个的输出最令我满意。最终，还是 Claude Code 生成的 PRD 文档质量最高。
首先，它给出了产品定位如下：
为 Web3 自由职业者和 DAO 提供去中心化、可验证的链上发票解决方案。
核心价值：
- 不可篡改的支付凭证
- 无需中间商的点对点收款
- 公开可验证的发票状态
核心功能就三个：
|
|
|
|
|
|---|---|---|---|
| 创建发票 |
|
|
|
| 链上支付 |
|
|
|
| 发票查询 |
|
|
|
最主要的还是功能详细设计，对三个核心功能都分别列出了页面结构、字段定义、交互流程、错误处理。比如，以下就是创建发票的页面结构：
┌─────────────────────────────────────────────────────────┐
│ [Logo] BlockInvoice [Connect Wallet] 🔗 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 📄 Create New Invoice │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Invoice Title * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ e.g. Website Development - March 2025 │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Description │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌──────────────────┐ ┌──────────────────┐ │ │
│ │ │ Amount * │ │ Token │ │ │
│ │ │ ┌──────────────┐ │ │ ┌──────────────┐ │ │ │
│ │ │ │ 1000 │ │ │ │ USDC ▼ │ │ │ │
│ │ │ └──────────────┘ │ │ └──────────────┘ │ │ │
│ │ └──────────────────┘ └──────────────────┘ │ │
│ │ │ │
│ │ Payer Wallet Address │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ 0x... (optional, for private invoice) │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Due Date * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ 📅 2025-01-20 │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ 🚀 Create Invoice │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
接着，给出了很详细的字段定义如下：
|
|
|
|
|
|
|---|---|---|---|---|
title |
|
|
|
|
description |
|
|
|
|
amount |
|
|
|
|
token |
|
|
|
|
payerAddress |
|
|
|
|
dueDate |
|
|
|
|
recipientAddress |
|
|
|
|
之后则是交互流程图：
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 进入页面 │────▶│ 连接钱包 │────▶│ 填写表单 │────▶│ 点击创建 │
└──────────────┘ └──────────────┘ └──────────────┘ └──────┬───────┘
│
▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 跳转详情页 │◀────│ 获取发票ID │◀────│ 交易确认 │◀────│ 签名交易 │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
交互流程图下面还给出了详细的交互步骤说明。
虽然最终实现出来的 UI 页面并不和上面列出的完全一致，但这个详细设计的确为后面的工作提供了很好的素材。
这一天实际用时不到 15 分钟。
Day 3
第三天，我则在已生成的 PRD 文档的基础上，直接让 Claude Code 帮我生成了《前端技术架构文档（TAD v1）》。它生成的 TAD 文档也是质量挺高的，我挺满意。给出了很详细的技术栈概览和项目结构。
技术栈概览：
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
项目结构：
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 # 全局样式
后面还有核心模块设计、核心 Hooks 设计、页面组件设计等。还给出了很多示例代码。
而整个 TAD 文档生成的时间才不到几分钟。
我自然不满足于此，于是，我又再进一步，让 Stitch 帮我生成了 UI 风格稿和几个核心页面的 UI 稿。也就是以下这些：
基于这些 UI 稿，我又让 Claude Code 进一步更完善了 TAD 文档，加上了整体布局结构和视觉规范。
Day 4
第四天则是完成智能合约的编写和部署了。
这次我分别使用 Claude Code 和 Gemini 来帮我实现合约。我让它们基于 PRD 和 TAD 两个文档，帮我设计和实现 Solidity 智能合约，很快它们就帮我把 BlockInvoice 合约实现出来了。但实际对比下来，很明显 Claude Code 生成的代码质量更高，最终我就采用了 Claude Code 的版本。
接着，我又让 Claude Code 帮我用 Foundry 搭建起部署环境，它不仅帮我搭建好了框架，写好了部署脚本，甚至还顺便帮我设计并实现了十几个测试用例，全都顺利通过了测试，这一点挺赞。
最终，我将合约部署到了 BSC 测试网。
Day 5
第五天的目标则是完成前端开发并连接上合约。
这一天花的时间是最多的，因为 UI/UX 上有挺多细节在和 AI 不断完善。
比如，Dashboard 一开始显示的是 Welcome back,Alex，但我们的登录用户只有一个钱包地址，并没有名字，于是，去掉了名字。
再比如，创建发票页面，付款方地址原本设计还支持输入 ENS 的，但测试时一直没能成功将 ENS 转成地址，于是就移除了该功能。
还有 Faucet 页面，也是在这一天才想到加上去的。
还有很多其他交互细节，就不一一都展开介绍了。
简而言之，调 UI/UX 是一个比较耗时间的体力活。
Day 6
第六天的工作就非常简单了，无非就是把已经完成的前端部署到了 Vercel 上，同时配置上第一天就注册好的域名。从而实现了对外访问。也就是直接通过 https://block-invoice.com 就可以访问应用了。
Day 7
最后一天，也就是今天，就是对上面这几天的工作做一个回顾总结。
后面，我还会陆续迭代 BlockInvoice 这个项目，要将其进一步完善并部署到主网，并慢慢自己开始真正用起来。
写在最后
虽然，我发起的这个 7 天挑战，我自己已经完成了。但对于其他人，可以自己选择从哪天开始。对于中途暂停了的，也需要自己选择从哪天继续下去。其实，关键在于行动。
原文链接：https://mp.weixin.qq.com/s/GUYy9sQwzmY7nGfvmdgVHQ
暂无评论内容