我用Claude干了件大事-从零到一写出能跑的应用

张开发
2026/6/3 22:28:20 15 分钟阅读
我用Claude干了件大事-从零到一写出能跑的应用
我用Claude干了件大事从零到一写出能跑的应用一个文科生和AI的12小时亲密接触实录先说点废话你可能以为我要写那种“Claude是什么”“怎么注册”“有哪些功能”的说明书。打住。这些东西官方文档写得比我清楚一万倍。我要是再复制粘贴一遍就是在侮辱你的智商也侮辱Claude的能力。今天我想聊点实在的我是怎么用Claude在完全不懂代码的情况下12小时写出一个能用的网页小工具的。这不是标题党。我本科学的汉语言文学去年还在纠结Python是读“派森”还是“派松”。如果我能做到你大概率也行。案例那个让我失眠的需求事情是这样的。我平时有整理读书笔记的习惯但每次手动调整格式太烦了——要统一标点符号、把中文引号改成直角引号、去掉多余空行、把“一、二、三”转换成层级序号……一套流程下来处理一篇笔记要七八分钟。那天晚上我躺在床上突发奇想能不能让AI帮我写个工具一键完成所有格式化这个念头一旦冒出来就再也睡不着了。第一回合我不会写代码但我很会“说人话”凌晨1:23我打开Claude输入了这样一段话注意这不是什么专业prompt就是我的大实话“我想做一个网页上面有一个大文本框我把读书笔记粘贴进去点一个按钮它就自动帮我做这些事把所有逗号句号统一成中文标点把英文双引号变成中文双引号“”把连续的空行压缩成一个空行识别以一、二、三开头的段落自动改成带缩进的标题样式最后给我一个复制按钮一键复制处理后的文本我不懂前端代码请给我完整的HTML/CSS/JS代码我要直接保存成.html文件就能用。”Claude几乎没犹豫噼里啪啦给我吐出了一整页代码。这里有个小窍门不要假装你很专业。直接说人话说清楚你要什么效果反而更好。那些“请你作为前端专家”之类的套话Claude根本不需要——它本来就是。第二回合初次见面它没我想象的完美我把代码保存成note-formatter.html用浏览器打开。界面的确有了。文本框有了。按钮有了。但把测试文本粘进去一点——出问题了。它把“他说‘你好’”处理成了“他说“你好””。冒号后面的引号方向错了。我心想哦中文引号规则没那么简单。开引号和闭引号是不一样的。于是我又跟Claude说“刚才那个引号处理有点问题。中文里左双引号是“类似两个6右双引号是”类似两个9。请修改逻辑遇到第一个双引号就变成“遇到下一个就变成”如此交替。注意处理嵌套的情况虽然我的笔记里很少见。”这次它给了修正版。我试了一下——完美。这里的教训是别指望Claude一次就给你完美答案。把它当成一个很聪明但偶尔犯糊涂的实习生你要做的是发现问题、描述清楚、让它迭代。第三回合我给它出了个难题用了一会儿我又有了新想法。我的笔记里经常有类似这样的段落【原文】 君子和而不同 【我的理解】 这是孔子关于人际关系的核心观点...我想让Claude自动识别【原文】和【我的理解】这两个标记给它们设置不同的背景色和缩进让笔记看起来更像读书卡片。这个需求有点复杂因为我没说清楚具体要怎么呈现。我决定换个方式——给Claude看图。我在网上随便找了个读书卡片的截图描述了一下“看到附件的截图了吗我想要类似这种卡片效果【原文】部分用浅灰色背景、浅蓝色左边框【我的理解】部分用浅米色背景。两个区块之间留一点间距。”等等这里我要诚实交代——Claude其实是不能直接“看”图片的除非你用它的Vision功能但那个需要上传图片文件。我实际做的是把截图里的样式用文字描述给它“我想要这样的卡片样式【原文】区块背景#f5f7fa左边框3px solid #3b82f6内边距16px【我的理解】区块背景#fafaf5左边框3px solid #f59e0b。两个区块margin-bottom 12px。”Claude理解了。它不仅加上了样式还主动优化了逻辑——如果同一个段落里同时出现两个标记怎么办如果标记写成了【原文】和【原⽂】全角方括号vs半角怎么办它帮我考虑了边缘情况而我根本没提。第四回合我和Claude的“吵架”时刻做到第四版的时候出了个大问题。Claude输出的代码里有一处逻辑是这样的functionprocessQuotes(text){// 处理引号转换...returntext.replace(/(.*?)/g,function(match,content,offset){// 这里有个bugoffset参数位置错了})}我运行后发现引号转换只对每段文字里第一次出现的引号对有效后面的就不管了。我跟Claude说“这段代码有问题。它只转换了每段里第一个引号对。我给你看了运行结果输入‘a “b” c “d” e’输出是‘a “b” c “d” e’——第二个引号没变。”Claude道歉它确实经常道歉然后给了修正版。但修正版引入了新bug它把所有奇数位置的引号都变成了左引号不管这个引号是不是真的闭合。我又说“还是不对。你看这个例子‘他说“我不确定‘也许吧’”’——这里有嵌套。正确的做法应该是维护一个栈遇到引号就翻转状态而不是简单数奇偶。”这次Claude给了正确的实现。它甚至主动添加了对单引号的处理还加了注释说明逻辑。这个过程花了40分钟。我换了三种描述方式测试了十几个例子。如果我是个程序员可能10分钟就搞定了。但正因为我不懂我被迫用最朴素的方式——“给例子”“描述预期输出”“指出不一致”——来和它沟通。而Claude厉害的地方在于它从来不因为我描述得不专业就不耐烦。我给它一堆乱七八糟的自然语言描述它总能理解我的意图。最终成果一个我用得很爽的工具12个小时实际分散在三天里我迭代了11个版本。最终的工具长这样一个干净的界面深色模式自动适配系统主题粘贴笔记一键格式化支持标点统一、引号智能转换、空行压缩、列表样式识别、原文/理解区块高亮一键复制带“复制成功”的短暂提示全部在本地运行不上传任何数据这点我很在意我把这个.html文件存到了网盘。每次写完笔记打开它粘贴点一下完事。原来七八分钟的工作现在七八秒。从这件事里我总结的几个实用技巧1. 别写prompt模板写你的真实场景网上那些“请作为XX专家按照XX格式输出”的模板不是说没用但Claude其实不需要。直接说你要解决什么问题、你遇到了什么困难、你想要什么效果它理解得更深。我试过对比用专业模板写“请提供前端代码实现以下功能”和用大白话说“我有个烦恼每次整理笔记都要手动调格式你帮我写个工具”。后者出来的代码细节考虑得更周到。2. 善用“给例子”这个沟通方式代码逻辑这种东西你用自然语言描述一百句不如给它三个输入输出对。比如我说“输入他说‘你好’”期望输出他说‘你好’注意外层双引号内层单引号”Claude看到例子理解速度比看规则快三倍。3. 让它自己解释代码你会学到东西每次Claude给出代码后我会追问一句“解释一下这段正则表达式是什么意思”或者“为什么这里用\\s而不是空格”不是为了装懂是真的想学。Claude的解释比大多数教程都清晰而且它知道你刚刚经历了什么bug解释会针对你的上下文。4. 大胆要求它“考虑边缘情况”我学到的技巧是在prompt末尾加一句“请考虑可能出现的边缘情况比如用户粘贴了空内容、或者内容里包含emoji、或者标记写错了格式”。加了这句话之后Claude会自动帮你做输入校验、错误处理、默认值设置。它就像一个经验丰富的工程师会主动帮你查漏补缺。5. 分步骤别一口气提10个需求我一开始犯的错误是在第一个prompt里列了8个功能。Claude确实都实现了但每个功能都有小问题调试起来特别乱。后来我学乖了先做核心功能标点、引号测试没问题再加空行压缩再加列表样式再加卡片效果。每次加一个功能测试一轮。这样调试成本低很多而且你能清晰看到哪个改动引入了bug。但Claude也不是万能的说点客观的。它有时候会“自作聪明”。有一次我让它处理中文引号它自作主张把英文省略号...也转成了中文省略号……。这个改动本身没问题但我没要求它改了之后还忘了在更新日志里说明。我发现的时候很懵以为是自己的数据出问题了。它的上下文有限制。我的工具到第9版代码已经很长了大概500行。有一次我让Claude改一个函数它改了但另一个函数不小心被截断了。这种长代码的维护Claude不像IDE那么可靠。它不会质疑你的需求。有时候我提的需求其实很蠢比如“把所有的中文句号都改成英文句号”Claude也会照做。你需要自己有点判断力或者主动问它“你觉得这个需求合理吗”写在最后回到标题这篇是Claude使用教程吗我觉得是。只不过我没教你怎么注册、怎么换模型、API怎么调用。我教的是更核心的东西怎么用Claude解决一个你真实遇到的、具体的、让你头疼的问题。这件事的意义在于技术的门槛正在消失。你不必成为程序员不必懂正则表达式、DOM操作、事件监听你只需要清楚描述你想要什么然后和AI一起一步一步把它变成现实。我的那个笔记格式化工具现在还在用。每次打开它我都觉得挺神奇的——一个汉语言文学毕业的人居然“写”出了一个能帮自己省时间的工具。而这一切的开始不过是一个失眠的晚上和一个我说“我不会”它也愿意听的AI。如果你也想试试别想太复杂。找到那个让你烦了三遍以上的重复工作打开Claude用你自己的话告诉它。然后开始第一轮迭代。

更多文章