我如何用 Enter 在 4 小时内构建一个 AI 驱动的概念探索器

一位没有后端经验的设计师使用 Enter.pro 构建了Essence—— 一个 AI 原生画布应用，可以将任何概念分解为其基本构成要素。从想法到集成 AI、支持双语、具备游戏化体验的完整可用产品 —— 仅用了 4 小时。

灵感来源

作为一名设计师，我一直着迷于一个问题：创造力从何而来？

我研究设计方法越多，就越看到同一个模式：创造力往往始于解构和重组。将事物分解为其基本部分，然后以新的方式重建它。

这个想法催生了Essence—— 一个由 AI 驱动的概念探索画布。输入任何概念，AI 将其分解为核心元素。然后，通过重新组合这些元素，新的想法开始涌现。

为什么选择 Enter

我是一名产品设计师，不是全栈开发者。Essence 的想法需要几个看起来令人生畏的功能：

• 交互式画布—— 具有拖放、缩放和平移功能，类似 Figma 或 Miro 等工具中的复杂 UI

• AI 集成—— 为概念分解和重组逻辑提供支持

• 无服务器后端—— 安全地处理 AI API 调用

• 部署—— 让人们可以实际使用它

连接 LLM API 曾经难倒了大多数非开发者 —— API 密钥、环境设置、认证逻辑。

有了 Enter 的 AI All，我只需说："使用 Claude Sonnet 4.5"，它就自动连接了一切 —— 后端 Edge Functions、请求格式化、错误处理。

使用Enter.pro，我完全不需要接触基础设施。我描述我想要什么，它就处理 React、Supabase、Edge Functions 和模型集成。我只需专注于做什么和为什么做。

构建过程：4 小时内完成 5 个阶段

阶段 1：基础搭建

我在脑海中整理好想法，写成一个全面的提示词发送给 Enter。大致内容如下：

创建一个名为"Essence"的 AI 原生画布探索应用。这是一个轻量级思维游戏。核心机制：用户输入任意词，AI 将其分解为恰好 2 个更原子化的概念，以 emoji + 简短词的节点形式显示在画布上。分解规则：始终返回恰好 2 个节点，每个节点包含 1 个 emoji + 1 个简短词，概念应随着每一层级变得更本质 —— 朝着情感、动机、能量、结构、关系、力量、价值、欲望、冲突等维度分解。用户还可以选择任意 2 个节点重组为 1 个新概念。画布支持无限拖拽、缩放、双击分解、多选重组。每次分解消耗 1 点积分，每次重组消耗 2 点积分。

读取这个提示词后，Enter 首先加载了其 AI 能力，然后直接问我："您想使用哪个 AI 模型进行概念分解和重组？"它列出了可用选项 —— GPT-5.2 Pro、Gemini 3 Pro 和 Claude Sonnet 4.5 —— 每个都标注了成本、速度和优势。我选择了 Claude Sonnet 4.5（在指令遵循和创意任务方面表现出色），Enter 自动连接了整个 API。

几分钟后，完整的项目结构就准备好了 —— React 18 配合 TypeScript，Vite 作为构建工具，Tailwind CSS 用于样式，@xyflow/react用于画布，以及连接到 Claude API 的 Supabase Edge Function。核心的分解和重组逻辑第一次就运行成功了。

阶段 2：AI 逻辑调优

这是整个项目中最关键也最有趣的部分。Essence 是令人愉悦还是乏味，完全取决于 AI 输出质量。最终代码将 AI 逻辑拆分为三个独立的函数，每个都有精心设计的提示词策略。

问题：AI 太"学术化"了

第一版跑起来后,AI 的结果意外地搞笑——输入"剪刀"它返回"钳状附肢"和"对称进化";输入"爱"它给出"神经递质"和"量子态"。技术上没错,但一点也不好玩,也不直观。这不是我想要的体验。

#1 修复:给 AI 一个人设

关键突破是为 AI 设置一个清晰的系统角色——不是"你是一个拆解助手",而是**"你是一个有趣的拆解游戏。把复杂的东西变成简单的积木!用日常用语。"**这一句话彻底改变了输出风格,从学术论文变成了俏皮对话。

#2 修复:正面示例 + 反面模式

我发现仅有正面示例是不够的——AI 偶尔还会滑入学术模式。所以我同时包含了好的和坏的示例:

**好的示例:**剪刀 → 🔪 刀片 + 🔗 铰链(两片刀片通过铰链连接)咖啡 → ☕ 热水 + 🫘 豆子(热水 + 咖啡豆)朋友 → 👤 人 + 🤝 信任(互相信任的人)梦想 → 😴 睡眠 + 💭 想象(睡觉时的想象)坏的示例(太学术):❌ 钳状附肢、对称进化、神经递质、量子态

这种"正负对比"让 AI 非常精确地理解了我想要的语气:简单、直观、那种让人会心一笑或恍然大悟的感觉。

#3 修复:三个功能,三种策略

最终的 AI 逻辑被拆分为三个独立函数,每个都有自己的提示词设计和参数调优:

① Emoji 生成(generateEmojiForConcept):当用户输入一个概念时,先通过单独的 AI 调用生成语义匹配的 emoji。系统角色设为"你是一个 emoji 生成器。你只输出 JSON",temperature 设为 0.7(准确性优先于创造性),通过 few-shot 示例引导:石头 → 🪨,火 → 🔥,爱 → ❤️。如果解析失败,优雅地回退到默认的 ✨。

② 概念拆解(decomposeConcept):核心功能。提示词引导 AI"像积木一样拆解事物",返回恰好 2 个节点(emoji + 简短词语)加一句话解释。Temperature 设为 0.8——比 emoji 生成更高,以允许更多创造空间。关键设计决策:每次请求注入一个随机种子(randomSeed),确保同一概念每次产生不同结果——这给探索带来真正的"可重玩性"。

③ 概念重组(recombineConcepts):最具创造性的部分。提示词将其框定为"像游戏一样思考",配以富有想象力的示例:水 + 火 = 蒸汽 ♨️,面粉 + 火 = 面包 🍞,人类 + 翅膀 = 天使 👼,悲伤 + 喜悦 = 生活 🎭。结果应该是"令人惊讶、有洞察力、略带幽默、非显而易见的"。同样使用随机种子技术来增加多样性。

#4 修复:悬停解释让逻辑可见

每次 AI 拆解或重组也会返回一个简短的explanation。这段文本不会直接显示在节点上(保持界面简洁),而是存储在节点的数据中。当用户悬停在节点上时,会出现一个优雅的 HoverCard 显示完整的推理链:

• 拆解节点(翡翠色标签):🎭 戏剧 = 😢 冲突 + 👥 角色,下方显示"戏剧从根本上是角色之间的冲突"

• 组合节点(紫罗兰色标签):😴 睡眠 + 💭 想象 = 💫 梦,下方显示"睡眠中的想象就是梦"

这种设计让信息分层变得优雅美妙——表面上是简洁的 emoji 卡片;深入查看时,是 AI 的思考过程。

结果

经过这些调优,AI 输出质量发生了质的飞跃:

❤️ Love → 👤 Person + 🤝 Trust (people who trust each other) ☕ Coffee → 🫘 Beans + ☕ Hot water (hot water meets coffee beans) 💭 Dream → 🔮 Imagination + 🔥 Desire (a burning vision of the future) 🔥 Fire + 💧 Water = ♨️ Steam 😴 Sleep + 💭 Imagination = 💫 Dream

每一次拆解都让人恍然大悟,每一次重组都让人会心一笑。这就是提示词工程的力量——不是写更多代码,而是找到与 AI 对话的正确方式。

第三阶段:交互打磨

这是让应用开始变得鲜活的阶段:

• 选中 1 个节点 → 出现"拆解"按钮— 进一步拆解

• Shift + 点击 2 个节点 → 出现"重组"按钮— 将它们组合在一起

• 双击任意节点 → 立即拆解— 快速探索

• 悬停在任何已处理的节点上 → 在 HoverCard 中查看 AI 的推理过程

我还加入了一层轻量级游戏化机制:初始拥有20 点数(拆解消耗 1 点,重组消耗 2 点),创造了一种温和的约束,让你思考要探索哪些路径。点数会在本地持久化,你也可以随时重置。

第四阶段:UI 设计打磨

功能完成后,下一个重点是让 Essence 的外观与体验一样出色。

第一个重要的设计决策是字体。我选择了Bricolage Grotesque作为全局字体——一种几何感的现代无衬线字体,立即将应用从默认系统字体的平庸中提升出来,赋予了它独特的品牌识别度。

节点卡片的视觉效果经历了多次迭代。最终设计采用了大圆角矩形卡片(rounded-2xl),配以柔和的粉彩背景——随机分配 amber-50、emerald-50 和 violet-50——大尺寸 emoji 作为视觉锚点,底部配一个简短的文字标签。画布最终看起来像是散落的彩色便签:轻盈、俏皮、简洁。

输入框是应用的"第一印象",所以我对它的标准最高。这正是 Enter 的Enter Components功能大放异彩的地方——一个内置的 AI 组件库,你可以搜索、预览并一键添加组件。我在搜索栏输入"ai",发现了一个名为claude-style-chat-input的组件——一个优雅的对话式输入框。我点击"+ Add to Chat",Enter 自动将其集成到我的项目中,并调整样式以匹配现有的设计语言。普通的 HTML 输入框瞬间变成了精致的对话式输入体验——圆角边框、柔和阴影、内联按钮布局——与应用的视觉身份完美融合。

无需从头编写组件或调整 CSS。Enter Components 让你像搭积木一样组装高质量 UI,Enter 会自动调整样式以保持视觉一致性。

最后,我添加了一组快速启动概念卡片—— ❤️ Love、💰 Money、⏰ Time、🌳 Tree、🎵 Music、💭 Dream——在欢迎屏幕上以倾斜的彩色迷你卡片形式展示,降低冷启动门槛,让用户立即明白可以输入什么。

第五阶段:国际化

Essence 面向全球用户,因此中英文双语支持不是锦上添花——而是必不可少。

但国际化不仅仅是翻译 UI 文本。在 Essence 中,AI 输出也必须匹配用户选择的语言——在中文模式下,拆解"爱"应该返回"人 + 信任"这样的中文结果;切换到英文模式,拆解"Love"应该返回"Person + Trust"。这意味着前端语言切换必须一路传递到 AI 提示词层。

在实现上,我使用 Zustand 进行轻量级语言状态管理。整个 i18n 系统的工作方式是:用户点击右上角的语言切换按钮 → 全局状态更新 → 所有 UI 文本立即切换 → AI 调用接收当前语言参数 → 提示词模板选择中文或英文版本 → AI 输出自动匹配用户语言。语言偏好还会持久化到 localStorage,下次访问时无缝恢复。

在 Enter 中,实现所有这些只需要一句描述:"在右上角添加中英文切换按钮。所有 UI 文本、AI 提示词和 AI 输出都应根据选择的语言自动切换。"Enter 一次性搭建了整个管线——从状态管理到提示词模板分支再到本地持久化。

这也验证了一个重要的教训:越早构建国际化支持越好。如果你等到所有功能都完成后再添加国际化,你会发现硬编码的文本散落在提示词各处,UI字符串嵌入到每个组件中——事后改造是痛苦的。从第一天就构建多语言架构,之后你只需要添加翻译内容。

---

Essence 的特别之处

拆解:看见万物隐藏的结构

输入任何词。AI 将其精确拆解为 2 个原子概念——每个都配有语义表情符号和一句话解释。然后继续深入。继续拆解这些概念。看着概念树在你眼前生长。

🎭 戏剧 → 😢 冲突 + 👥 角色 😢 冲突 → ⚡ 张力 + 🎯 目标 👥 角色 → 👤 人物 + 💬 故事

重组:从旧概念的原子中创造新想法

在画布上选择任意 2 个节点——即使来自完全不同的分支——并组合它们。AI 会发现令人惊喜的连接。

🔥 火 + 💧 水 = ♨️ 蒸汽 😴 睡眠 + 💭 想象 = 💫 梦境 👤 人物 + ✈️ 翅膀 = 👼 天使

玩起来,而不只是思考

20点系统将抽象探索变成有趣的游戏。每次点击都是一个选择。你要探索哪个分支?你要组合哪些原子?这是好奇心的沙盒。

技术栈——由 Enter 组装

我没有手动配置任何东西。Enter.pro 基于我的描述和迭代提示词组装了完整的技术栈。

经验教训

1. 双层提示,双重思维模式

用 Enter 构建 AI 应用是两个同时进行的对话:与 Enter 对话就像与全栈工程师合作——需要清晰的需求;与应用内的 Claude 对话就像与创意伙伴合作——需要情感引导和基于示例的教学。让两层都做对才是真正的技艺。

2. 给 AI 一个个性,而不只是规则

将系统角色从"你是一个概念拆解助手"改为"你是一个有趣的拆解游戏",一句话就改变了整个输出风格。规则约束格式;个性定义质量。

3. 正面示例 + 反面模式胜过冗长描述

✅ 剪刀 → 刀片 + 铰链 ❌ 钳状附肢、对称进化、神经递质

这三行传达的信息比 100 个字都多。正反对比是最被低估的提示工程技巧。

4. 随机种子让探索类产品具有可重玩性

相同的概念每次产生不同的结果——今天"爱 = 人物 + 信任",明天"爱 = 脆弱 + 勇气"。随机种子 + temperature 0.8 在保持质量的同时最大化多样性。探索类产品的生命力在于"每次都有新东西"。

5. 约束创造玩法

20点系统将漫无目的的点击变成了战略性探索。经典游戏设计原则:有意义的选择需要有限的资源。

6. 正确的氛围编码:一次专注一个阶段

先打基础 → 然后 AI 个性 → 然后交互打磨 → 然后视觉设计 → 然后国际化。每个阶段专注于一个维度,保持与 Enter 的对话清晰和输出可预测。

🔗 用 Enter 构建你自己的应用: enter.converge.ai