BlockLever实战营日志 #7 | 前端UI设计

这是我们研发「BlockLever」的第 7 篇实战营研发日志。在前 6 篇中，我们已经完成了从需求、架构、合约开发到集成测试的完整链路：

而这一篇，是我自己也没想到会这么快完成的一步：前端 UI 设计。

三个小时，20+ 张高保真 UI

先说结果。

昨天，在实战营的实际推进过程中，我们只花了 3 个小时 ，就把 BlockLever 的前端 UI 设计基本做完了，一共生成了 20 多张高保真 UI 设计稿。

下面是其中一部分。

这些 UI，全都是 AI 生成的。 没有设计师参与，甚至连"先画线框图"这一步都没有。

说实话，当我第一次把这些页面一张张翻完的时候，心里是有点不真实的。不是那种"爽"，而是那种------"这是不是有点太顺了？"

因为如果放在以前，这一步至少会拖上好几天。

一开始，我其实也不知道该用哪个 AI

很多人可能会以为，我一开始就想好了用什么工具。但真实情况恰恰相反。

一开始，我连「前端 UI 这一步到底要不要单独做」都还在犹豫。

第一期实战营做 BlockETF 的时候，我其实是直接跳过 UI 设计的：

合约写完
核心逻辑跑通
然后直接让 Claude Code 写前端代码
UI 是在实现过程中慢慢修的

那套方式的问题也很明显：能用，但不精致，而且后期调整成本很高。

这次 BlockLever 复杂度更高，涉及杠杆、风险、仓位、清算提示，如果 UI 一开始就没想清楚，后面一定会反复推翻。

所以我决定：这次先把 UI 设计好。

问题是------我当时真的不知道该用哪个 AI。

v0.dev 的第一次尝试

我先问了 Claude Code，它给我推荐了几个工具，其中第一个就是 v0.dev。

我就顺手试了一下。

看完之后，我的第一反应其实挺直接的：

这效果，好像跟我直接用 Claude Code 写前端差不多。

不是说它不好，而是它并没有明显拉开差距。

当时我的判断逻辑也很简单：如果一个工具不能在效率或质量上带来明显提升，那它就不太可能成为我新的工作流核心。

所以 v0.dev 在我这一步，基本就被 pass 了。

偶然点进 Stitch

我继续追问 Claude Code，它又提到了 Galileo AI。

我点进去之后，发现直接跳转到了 stitch.withgoogle.com，这才意识到 Galileo 已经被 Google 收购，整合进 Stitch 了。

再一看说明：现在还能免费用。

说实话，这种时候不用一下，心理上都有点说不过去。

于是我就随手试了第一轮。

结果也就是从这一刻开始，我意识到：这次可能真的不一样了。

真正起作用的，其实不是 Stitch

但现在回头看，真正起作用的，其实并不是 Stitch 本身。

而是我并没有直接把「帮我设计一个 DeFi App」这种模糊指令丢给它。

我做的事情其实很"实战营式"：

先让 Claude Code 把 BlockLever 的业务模型拆清楚
把用户是谁、关键操作、风险点一条条捋出来
再让它帮我写专门喂给 Stitch 的 Prompt

比如第一步，我只让 Stitch 干一件事：先定整体设计风格。

markdown 复制代码

Design a modern DeFi trading application called "BlockLever".

Brand concept:
- BlockLever helps everyday crypto investors amplify their returns safely
- The core message is "Trade like spot, but with 2-3x gains"
- Target users are crypto spot traders who want leverage without the complexity of futures

Visual style:
- Dark theme as primary (dark navy or charcoal background)
- Clean and minimal, inspired by apps like Phantom wallet and Uniswap
- Professional but approachable, not intimidating
- Use subtle gradients and glassmorphism effects for cards
- Accent color: Electric blue (#3B82F6)
- Success/profit: Green (#22C55E)
- Loss/danger: Red (#EF4444)
- Warning: Amber (#F59E0B)

Typography:
- Modern sans-serif font (Inter or similar)
- Clear hierarchy with bold headings
- Numbers should be easy to read at a glance

Show me a style guide with:
1. Color palette
2. Sample buttons (primary, secondary, danger)
3. Sample card component
4. Sample input field
5. Risk indicator badges (Safe, Warning, At Risk)

Stitch 生成了几套风格之后，我并没有立刻拍板，而是全部下载下来，再丢回给 Claude Code 评估。

哪套更符合 BlockLever？哪套在"风险表达"上不容易误导用户？

就这样来回几轮之后，风格才真正定下来。

两个 AI 来回拉扯，反而省了我时间

后面的过程，其实就是重复这件事：

Claude Code 负责「想清楚」
Stitch 负责「画出来」
再把结果丢回 Claude Code 做判断

大部分页面，Stitch 一次就生成对了。不对的页面，主要是切换到桌面版的时候，需要做一些调整。

但整体效率，远远超出了我的预期。

等我回过神来，UI 已经有 20 多张了。

这件事对实战营来说，意义其实很大

如果只看结果，好像只是"用 AI 画了 UI"。

但对我来说，这一步真正重要的地方在于：

它完整复现了实战营一直在做的一件事：把一个模糊的想法，一步步逼成一个可以落地的产品形态。

整个过程中，并没有什么"神操作"。

更多的是：

不确定
尝试
判断
放弃一个选项
再继续往下走

而 AI，只是被放在了一个非常合适的位置上。

写在最后

当这些 UI 摆在我面前的时候，我突然有一种很清晰的感觉：

BlockLever 不再只是一个协议，而是真的开始像一个产品了。

接下来，我们就会进入前端实现阶段，把这些页面真正跑起来。

我也会继续用这种「实战营日志」的方式，把整个过程完整记录下来。

如果你正在关注 BlockLever，或者对"AI + 产品实战"这件事本身感兴趣，那接下来的几篇，会越来越具体、也越来越真实。

参考阅读：