当时我正在开发 Katakatana，这是一个用于学习解读日语片假名外来语的 Web 应用。该应用教授两项核心技能：识别片假名单词在英语中的含义，以及学习如何用罗马音（romaji）拼读它。目的明确，受众集中。
但在“这是一个学习工具”和“让我建个主页”之间的某个地方，我犯了一个典型的错误。
我构建了一个“Hero 页面”（首屏大图展示页）。
Hero 页面陷阱
你一定知道那种模式。巨大的主标题。副标题。视觉吸引元素。两个行为召唤（CTA）按钮。然后，在首屏以下——才是实际的内容。
这对于 SaaS 落地页来说效果很好。它传达了价值主张，确立了品牌个性，能将陌生访客转化为注册用户。客观地说，对于用户正在决定是否尝试某事物的产品来说，这是一种可靠的模式。
但 Katakatana 并非那种产品。打开它的用户已经知道它是做什么的。他们来这里是为了练习。他们花在阅读 8xl 字号的“Slash the Pattern”上的每一毫秒，都是他们没有在学习日语的一毫秒。
我知道感觉有些不对劲，但直到我和一个 AI 智能体一起进行重新设计时，我才能够清楚地表达出来。
第一个有价值的挑战
我描述了这个问题：主页让人感觉容易分心。我希望让用户能直接进入练习模式。智能体的第一步行动并不是开始设计——而是询问我到底想要优化什么。
这个问题浮现出了我一直含糊不清的东西。这个应用不仅仅是各种练习模式的集合。它有两个具体的学习支柱：
- 含义 — 片假名 → 英语
- 拼读 — 片假名 → 罗马音
它们不是菜单中同等的选项。它们是这个应用存在的理由。主页应该反映这一点。
因此我们探讨了不同的布局方案——仪表盘网格、极简列表、今日焦点卡片。我倾向于将这两个支柱作为同等的 Hero 卡片展示出来。并排排列，相同的视觉权重，相同的突出程度。
智能体提出了反对意见。
改变设计的洞见
反对的理由与美学无关。而是关于认知负荷。
“完成率最高的学习应用都遵循一个原则：消除日常决策。每当用户打开应用并看到两个平等的选项时，他们都必须做一个微小的决定——今天选哪一个？这种摩擦会随着时间累积。几周之后，它就会成为不打开应用的理由。”
这是应用在习惯养成上的选择悖论。当一个学习应用在入口处提供两个同样突出的选项时，它迫使学员在还没开始学习之前，就对自己的弱项进行自我评估。那不是自我评估的恰当时间点。恰当的时间点是在学习过程之中，在那里应用才能真正利用这些信息做点什么。
最好的学习应用——多邻国（Duolingo）、Anki、Lingodeer——都不会要求你每次打开时选择一种模式。它们只给你一个按钮：继续（continue）。关于练习什么内容的决定已经由系统或习惯做出了。
三层解决方案
从这次对话中诞生的重新设计拥有一种结构，我现在认为它是专注型学习工具的正确默认结构：
第一层 — 一个主要操作，无需决策。 一张巨大的单卡片：Daily Duel（每日对决）。它在一次会话中涵盖了两个学习支柱。打开应用只想练习的用户，只需按下一个按钮就可以开始了。无需思考。
第二层 — 专注特定技能进行有意图的练习模式。 主卡片下方的两张同等卡片：Decode（仅含义）和 Romaji Read（仅拼读）。这些模式是为确切知道自己想练什么的用户准备的——也许他们刚刚在罗马音测验中失败了，想要针对那项特定技能进行钻研。它们足够显眼便于查找，同时也是次要的，不会与主要操作竞争注意力。
第三层 — 其他所有内容都放在紧凑的列表中。 Rapid Slash，Syllable Forge，Pattern Drill。所有功能都可以访问，但都不去争夺注意力。
这种结构将一种学习哲学直接编码到了 UI 中：从这里开始，如果你想的话再深入。
更广泛的教训
在这个过程中，智能体做的最有用的事情并不是生成布局选项或编写代码。而是它提出的一个问题，迫使我明确产品的用途——然后从这种具体性出发，推理出我独自无法达成的设计结论。
Hero 页面并不是一个糟糕的组件。它是一个有特定任务的组件：转化不熟悉的访客。如果你的用户已经很熟悉了，那么你为这项任务雇佣了错误的组件。
每一种设计模式都有其正确的上下文。知道你处于哪种上下文中才是真正的技能。有时候你能自己弄清楚。有时候它需要一个外部的声音来问：但你的用户实际上是来这里做什么的？
这个问题比任何设计图都更有价值。
Katakatana 是一个使用 App Router、Tailwind CSS 和 Zustand 构建的 Next.js 15 应用。整个主页的重新设计涉及了四个文件，从第一次对话到构建通过，耗时不到一个小时。
附录：布局演变
在设计过程中考虑过的三个选项，以及最终通过的结构。
选项 A — 仪表盘优先
┌─────────────────────────────────────────────┐
│ KATAKATANA [Daily] [Data] [Conf] │ ← SiteNav
├─────────────────────────────────────────────┤
│ │
│ MODULES v1.0 │
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 📅 │ │ 🔤 │ │ 🈳 ││
│ │ Daily │ │ Syllable │ │ Romaji ││
│ │ Duel │ │ Forge │ │ Read ││
│ └───────────┘ └───────────┘ └──────────┘│
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 🎯 │ │ ⚡ │ │ 📖 ││
│ │ Strike │ │ Rapid │ │ Learn ││
│ │ Challenge │ │ Slash │ │ Rules ││
│ └───────────┘ └───────────┘ └──────────┘│
└─────────────────────────────────────────────┘所有 6 种模式的网格。熟悉的模式，但没有层级结构——每种模式都同等地竞争注意力。
选项 B — 今日焦点
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 [nav links] │ ← SiteNav
├─────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ TODAY'S DUEL │ │ ← Primary CTA
│ │ コーヒー │ │
│ │ 10 words remaining │ │
│ │ [ START → ] │ │
│ └─────────────────────────────────────┘ │
│ │
│ OTHER MODES │
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 🎯 STRIKE │ │ ⚡ RAPID │ │ 🔤 BUILD ││
│ └───────────┘ └───────────┘ └──────────┘│
└─────────────────────────────────────────────┘一个占主导地位的 CTA，次要模式位于其下。强烈的层级结构——但单靠 Daily Duel 卡片并不能传达两个学习支柱。
选项 C — 极简启动器
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 ★47 │ ← SiteNav
├─────────────────────────────────────────────┤
│ ──────────────────────────────────────── │
│ 📅 Daily Duel 10 words [ GO → ] │
│ ──────────────────────────────────────── │
│ 🎯 Strike Challenge decode [ GO → ] │
│ ──────────────────────────────────────── │
│ ⚡ Rapid Slash 60-sec [ GO → ] │
│ ──────────────────────────────────────── │
│ 🔤 Syllable Forge builder [ GO → ] │
│ ──────────────────────────────────────── │
│ 🈳 Romaji Read read [ GO → ] │
│ ──────────────────────────────────────── │
└─────────────────────────────────────────────┘最大的简约性，最低的认知负荷。但所有模式感觉都是平等的——没有关于从哪里开始的信号。
最终设计 — 三层架构（已通过）
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 ★47 [nav links] │ ← SiteNav + NavStats
├─────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ DAILY DUEL [MEANING][READING]│ │ ← Primary CTA (→ /daily)
│ │ Meaning + Reading │ │
│ │ コーヒー │ │
│ │ [ START PRACTICE → ] │ │
│ └─────────────────────────────────────┘ │
│ │
│ FOCUS ON ONE SKILL │
│ ┌───────────────┐ ┌───────────────┐ │ ← Two focused modes
│ │ MEANING │ │ READING │ │
│ │ Decode │ │ Romaji Read │ │
│ │ kata → EN │ │ kata → Romaji │ │
│ │ [ DECODE → ] │ │ [ READ → ] │ │
│ └───────────────┘ └───────────────┘ │
│ │
│ OTHER MODES │
│ ⚡ Rapid Slash 60-sec → │ ← Compact list
│ 🔤 Syllable Forge Builder → │
│ 🔍 Pattern Drill Patterns → │
│ │
│ 📖 LEARN RULES 📊 DASHBOARD │ ← Footer links
└─────────────────────────────────────────────┘一个无摩擦的默认操作。两个专注单一技能以进行有意图练习的模式。其他所有功能均处于次要地位。该层级结构将学习哲学直接编码到了 UI 中。