0代码,沉浸式手搓一个出国翻译小程序,只需一句提示词

大家好，我是文文。

前几天刷到有人用 AI 搓了一个"出国看不懂菜单"的翻译小工具，我盯着那条看了会儿——因为去年在国外点餐，我指着菜单上的一行外文，硬是靠比划点了份不该点的东西。

于是我顺着他的思路，用 AI 零代码搓了一个我自己的翻译小网页。

整件事走下来，从发第一句指令到跑通，也就十几分钟。这篇把过程拆开给你看。

一、做小工具，不需要会代码

先说个前提：很多人的印象是"做工具 = 找程序员 = 贵"。

但你现在用的这套路子，跟之前零代码做网页是一个道理——你不需要会写代码，你需要的只是把"要什么"说清楚，然后会指挥AI。

我这次搓的是个翻译页，跟以前做攻略页不一样的地方在于：它是个能用起来的工具，不是一张看了就存的信息页。

核心就一句话：以前是AI帮你把内容做出来给你看，这次是AI帮你把工具做出来给你用。

二、六步把它搓出来（提示词直接抄）

这套流程我前面做过好几个网页了，顺序都固定：先出架构 → 确认 → 定视觉 → 生成 → 测试 → 微调。

第一步：起手式，别直接让 AI 生成网页

这一步最容易翻车。你要是上来就说"帮我做个翻译网页"，它给你一坨四不像。正确做法是先让它出架构：

你是一个擅长做「实用小工具网页」的助手。我想做一个【出国旅游随身翻译】网页，主要场景是：看不懂餐厅菜单、路牌指示牌、商品标签、酒店通知。目标用户是完全不懂外语的普通人。请按下面要求产出：1. 设计一个极简翻译页：一个大的输入框（粘贴外文） + 立刻出中文结果；2. 结果要分三块展示：①字面直译 ②口语化解释（比如 "bitter" 标"苦的，不是'苦啤酒'那种"）   ③适用场景（在餐厅/在街上/在商店分别怎么用）；3. 加一个「常用短语收藏夹」，可以点按钮收藏，收藏后能在下面一栏快速点用；4. 加朗读按钮（点一下念出中文）和「举给我看」的大字模式（字号放大、适合给对方看）；5. 整体手机单列优先、字号偏大（中年人也看得清）、按钮要够大好点。先只给我"整体架构"（页面分几个区、每个区干什么、交互流程），不要直接生成网页，等我确认。

它回我一个架构：输入框区 / 结果三块 / 发音+收藏+大字模式 / 已收藏短语栏。看一眼再确认，架构歪了后面全歪。

第二步：确认 + 定视觉

架构没问题，按上面生成网页。视觉风格清爽干净、留白多；主色调中性柔和（浅蓝/米白），别用太花的配色；字体圆润好读；手机单列优先；每个按钮至少 44px 高好点。

第三步：选稿

它通常会给你几版设计。我的挑法固定四个维度：输入框够不够大、结果分区清不清楚、常用按钮是不是在一目了然的位置、手机单列挤不挤。

三版里第2版最贴我想要的感觉，理由：输入框够大、结果分三块清楚、收藏区在一目了然的位置。请用第2版继续生成完整网页，风格保持统一。

第四步：生成，但先要"结构预览"

请生成完整可在手机浏览器打开的网页。要求：- 顶部一行大字标题 + 一行"结果仅供参考"小字提醒；- 中间大输入框（placeholder 写"把看不懂的外文粘贴进来"）；- 结果区三块：直译 / 口语解释 / 场景；- 底部：发音按钮 + 收藏按钮 + 大字模式开关 + 已收藏短语一行排开可点；- 手机单列、字号默认 18px 起。先出一版结构预览让我确认布局，没问题再填充完整内容。

那句"先出结构预览"很关键。布局对了再填内容，别一上来就让它灌满，灌完再一块块地打补丁，改起来累十倍。

第五步：测试，要带"现象"

别跟 AI 说"不好看"，要说哪儿不对、什么现象：

我跑了一遍，发现4个问题：

①粘贴长段落时结果区被挤成一坨，请限制只取前200字并提示"太长请分段"；

②收藏后刷新就丢了，请加本地保存（localStorage）；

③大字模式字号放大后按钮错位，请重排；

④点发音没反应，请加"发音不可用请改用文字"的兜底提示。

请按这4处修复。

这 4 条不是我瞎挑的，是真跑出来的。

第四条尤其重要，在国外网络不稳，发音按钮点不动的时候得有个兜底提示，不然你在餐厅举着手机干瞪眼。

第六步：微调，不重来

哪块不顺眼直接说，或者用截图修改框选那块告诉它：

① 对话微调："把'场景'那块放到最上面，因为餐厅里最需要知道怎么用；直译放第二行小字。"

② 截图精修：框选结果区 + "这三块的卡片间距加大一半，字号再大 2 号。"

三、搓完之后，我改了这 5 件事

工具跑起来后，我按"真在国外用"的标准调了几处，这几个细节比功能本身更影响体验：

1. 输入方式选"粘贴"最稳。 拍照识别在弱网、逆光、菜单反光下容易翻车，第一次做建议先做粘贴版，跑顺了再加拍照。

2. "口语化解释"是灵魂。 直译谁都会，外文配料表得告诉你是"过敏原 / 荤素 / 辣不辣"，不然你还是不敢点。

3. 大字模式是刚需。 在国外举着手机给对方看，小字等于没有。

4. 收藏夹得能本地存。 不然点个餐还得重打一遍"我对××过敏"，手都酸。

5. 没网要有兜底。 提前缓存几句高频短语，断网也能打。

✅ 适合谁：假期要出国、要出远门，看不懂外文就慌的。

🚫 别指望它替代正经翻译工具，它是你按自己场景定制的"随身上手版"，不是专业翻译引擎。

四、避坑提醒

🚫 翻译结果仅供参考，别拿来当医疗诊断、法律文件、正式合同用，也别拿它去替代你签字确认。

🚫 别上传含护照号、身份证号、酒店房号、住址、同行人姓名的照片或文本。外文识别越准，隐私风险越大。

🚫 这个工具别随手"分享链接"出去。它放的是你自己的收藏和习惯；真要发，先确认里面没有你的真实行程、酒店名。

🚫 别写"比 XX 翻译 App 好用"这种拉踩。成熟的翻译工具本来就有，我做这个的价值是自己掌控 + 按我的场景定制，这话说清楚就行。

✅ 所有工具能力以当前版本为准，今天跑通的流程明天可能更新。

写到最后：

以前出门在外，看不懂只能靠猜、靠比划、靠事后后悔。

现在你只要会把需求说清楚，AI 就给你搓一个只属于你这次旅行的小工具——不用装十个 App，也不用把行程告诉任何一个第三方。

我这次真正学到的不是"AI 能搓网页"，而是凡是那些"重复、笨重、每次都想骂一句的小麻烦"，都值得试着让它给你做个工具。