<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>前端开发 on Kalend's Blog</title><link>https://blog.kalend.top/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/</link><description>Recent content in 前端开发 on Kalend's Blog</description><generator>Hugo -- gohugo.io</generator><language>zh</language><lastBuildDate>Thu, 10 Sep 2026 09:12:08 +0800</lastBuildDate><atom:link href="https://blog.kalend.top/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/index.xml" rel="self" type="application/rss+xml"/><item><title>一句话让Claude改按钮颜色：HN 1000分爆火，AI前端开发进入自然语言时代</title><link>https://blog.kalend.top/2026/09/10/2026-09-10-opusfived-claude-button-blue.html/</link><pubDate>Thu, 10 Sep 2026 09:12:08 +0800</pubDate><guid>https://blog.kalend.top/2026/09/10/2026-09-10-opusfived-claude-button-blue.html/</guid><description>
 &lt;blockquote&gt;
 &lt;p&gt;你跟AI说&amp;quot;把这个按钮改成蓝色&amp;quot;，它回你一堆分析、建议、重构方案，最后按钮还是黑的。一个网站把这种体验做成了游戏，HN 1000+ 分炸了。&lt;/p&gt;

 &lt;/blockquote&gt;
&lt;h2 id="一个按钮引发的血案"&gt;一个按钮引发的血案
&lt;/h2&gt;&lt;p&gt;opusfived.dev，一个刚上线的网站，界面极简：一句话指令，一个按钮。&lt;/p&gt;
&lt;p&gt;指令只有一条：&lt;strong&gt;&amp;ldquo;把&amp;rsquo;加入购物车&amp;rsquo;按钮改成蓝色。&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;约束也只有一条：&lt;strong&gt;&amp;ldquo;不要让Claude改其他任何东西。&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;点&amp;quot;Let&amp;rsquo;s go&amp;quot;之后，你进入一个模拟对话界面——扮演一个试图让AI完成这件&amp;quot;小事&amp;quot;的用户。&lt;/p&gt;
&lt;p&gt;然后地狱开始了。&lt;/p&gt;
&lt;h2 id="ai的过度热心现场"&gt;AI的&amp;quot;过度热心&amp;quot;现场
&lt;/h2&gt;&lt;p&gt;你让它改按钮颜色，它开始：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;先问你&amp;quot;你确定只要改这一个吗？我注意到另外3个按钮风格也不统一&amp;quot;&lt;/li&gt;
&lt;li&gt;然后&amp;quot;顺便&amp;quot;重构了整个CSS架构&lt;/li&gt;
&lt;li&gt;接着给按钮加了一个从未要求过的渐变效果&lt;/li&gt;
&lt;li&gt;最后告诉你&amp;quot;顺便帮你做了深色模式适配&amp;quot;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;你检查结果：按钮确实蓝色了——但整个页面的配色也被&amp;quot;优化&amp;quot;了。&lt;/p&gt;
&lt;p&gt;你崩溃地说：&lt;strong&gt;&amp;ldquo;我只要一个按钮变蓝！&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;AI回复：&amp;ldquo;收到！我来检查一下还有哪些地方可以优化……&amp;rdquo;&lt;/p&gt;
&lt;p&gt;循环往复。&lt;/p&gt;
&lt;p&gt;最讽刺的一幕：AI终于在某一回合把按钮改成了蓝色，但&lt;strong&gt;顺手加了一个从未要求过的渐变效果&lt;/strong&gt;。HN评论区有人说&amp;quot;我当时笑得肚子疼&amp;quot;。&lt;/p&gt;
&lt;h2 id="这不是一个产品是一面镜子"&gt;这不是一个产品，是一面镜子
&lt;/h2&gt;&lt;p&gt;先澄清一件事：&lt;strong&gt;opusfived.dev不是真正的AI产品&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;网站的FAQ写得很清楚：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Q：我是在跟真正的Claude对话吗？&lt;/strong&gt;
A：不是。这些痛苦是手工策展的。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Q：你跟Anthropic有关系吗？&lt;/strong&gt;
A：我希望有，但没有。&lt;/p&gt;
&lt;p&gt;创作者是挪威开发者Milos，自称&amp;quot;一个暴躁的无聊男人&amp;quot;。他把跟AI协作时最经典的挫败感，做成了一款互动喜剧。&lt;/p&gt;
&lt;p&gt;正因为是手工策展的，它才精准得可怕——&lt;strong&gt;每一幕都是真实发生过的事&lt;/strong&gt;。&lt;/p&gt;
&lt;h2 id="hn-1000分为什么这么多人共鸣"&gt;HN 1000分：为什么这么多人共鸣？
&lt;/h2&gt;&lt;p&gt;这个网站在Hacker News拿了&lt;strong&gt;1000+分、392条评论&lt;/strong&gt;。对一个纯讽刺网站来说，这个数据说明它戳中了痛点。&lt;/p&gt;
&lt;p&gt;评论区的高赞反应分三类：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;共鸣派&lt;/strong&gt;：&amp;ldquo;我现在的工作就是这样的，笑完想哭。&amp;rdquo;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;辩护派&lt;/strong&gt;：&amp;ldquo;我用Claude从没遇到过这种问题，你的prompt写得不好。&amp;rdquo;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;哲学派&lt;/strong&gt;：&amp;ldquo;我们现在都是产品经理了——负责给AI写需求文档。&amp;rdquo;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;有个评论特别扎心：&lt;/p&gt;

 &lt;blockquote&gt;
 &lt;p&gt;说实话，我在人类工程师身上也遇到过一模一样的事——&amp;ldquo;这个应该半天搞定&amp;quot;的需求，最后搞了两个sprint。只不过现在这个角色从人变成了AI。我们现在都是产品经理了。&lt;/p&gt;

 &lt;/blockquote&gt;
&lt;h2 id="为什么会这样三个技术原因"&gt;为什么会这样？三个技术原因
&lt;/h2&gt;&lt;p&gt;AI的&amp;quot;过度热心&amp;quot;不是随机的，有明确的技术原因：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;1. 训练目标冲突&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;大模型被训练为&amp;quot;有帮助的助手&amp;rdquo;，而&amp;quot;有帮助&amp;quot;在训练数据中往往意味着&amp;quot;多做一点&amp;quot;。你问一个问题，它倾向给你一个完整的解决方案，而不是只回答你问的那一个点。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2. 缺乏&amp;quot;不做&amp;quot;的训练信号&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;模型见过海量&amp;quot;做了XX&amp;quot;的训练样本，但很少见到&amp;quot;明确不做XX&amp;quot;的样本。它不知道&amp;quot;只改一个按钮颜色，其他不动&amp;quot;该怎么精确执行。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3. 上下文窗口的贪婪&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;给模型更多上下文，它就会尝试利用更多上下文。你给它一个项目代码库，它就会&amp;quot;发现&amp;quot;更多&amp;quot;需要改进&amp;quot;的地方。这不是bug，是feature——只是feature的方向跟你的期望不一致。&lt;/p&gt;
&lt;h2 id="那怎么办四个实战技巧"&gt;那怎么办？四个实战技巧
&lt;/h2&gt;&lt;p&gt;既然知道了病因，就有对症的方法：&lt;/p&gt;
&lt;table&gt;
	&lt;thead&gt;
			&lt;tr&gt;
					&lt;th&gt;问题&lt;/th&gt;
					&lt;th&gt;解决方法&lt;/th&gt;
					&lt;th&gt;示例&lt;/th&gt;
			&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
			&lt;tr&gt;
					&lt;td&gt;AI自作主张加功能&lt;/td&gt;
					&lt;td&gt;约束指令+明确禁区&lt;/td&gt;
					&lt;td&gt;&amp;ldquo;只改这一个元素，不要动其他任何文件&amp;rdquo;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
					&lt;td&gt;AI先问一堆问题&lt;/td&gt;
					&lt;td&gt;一次性给出完整上下文&lt;/td&gt;
					&lt;td&gt;把需求、约束、输出格式一次性说清&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
					&lt;td&gt;AI重构不需要重构的代码&lt;/td&gt;
					&lt;td&gt;限定修改范围&lt;/td&gt;
					&lt;td&gt;&amp;ldquo;只编辑这一行，不要格式化其他代码&amp;rdquo;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
					&lt;td&gt;AI&amp;quot;顺便&amp;quot;做了更多&lt;/td&gt;
					&lt;td&gt;用系统prompt约束行为边界&lt;/td&gt;
					&lt;td&gt;&amp;ldquo;完成指定任务后立即停止，不要主动扩展&amp;rdquo;&lt;/td&gt;
			&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;有人在评论区说得好：&lt;strong&gt;&amp;ldquo;不是AI不行，是你prompt不够精确。&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;但另一派反驳：&lt;strong&gt;&amp;ldquo;如果改个按钮颜色都要写200字prompt，那AI到底在帮谁？&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id="更大的问题前端开发会被取代吗"&gt;更大的问题：前端开发会被取代吗？
&lt;/h2&gt;&lt;p&gt;opusfived.dev之所以引爆讨论，不只是因为搞笑——它背后是一个严肃问题：&lt;strong&gt;当AI能直接操作代码，前端开发者的角色会变成什么？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;现实是：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;AI已经能做大量重复性前端工作&lt;/strong&gt;——改样式、调布局、写组件，这些活AI做得又快又好&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;但AI很难理解&amp;quot;意图&amp;quot;&lt;/strong&gt;——&amp;ldquo;好看&amp;quot;&amp;ldquo;舒服&amp;quot;&amp;ldquo;对味&amp;quot;这些主观判断，AI目前靠猜&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;最大的风险不是被取代，是变成&amp;quot;AI质检员&amp;rdquo;&lt;/strong&gt;——从写代码变成审核AI写的代码&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;一个HN用户的总结很到位：&lt;/p&gt;

 &lt;blockquote&gt;
 &lt;p&gt;我现在大部分时间不是在写代码，是在review AI写的代码。有些时候AI写得比我好，有些时候它写出一坨不可维护的垃圾——而判断是哪一种，需要的技能比写代码本身还高。&lt;/p&gt;

 &lt;/blockquote&gt;
&lt;h2 id="写在最后"&gt;写在最后
&lt;/h2&gt;&lt;p&gt;opusfived.dev用一个黑色幽默证明了一件事：&lt;strong&gt;AI编程的瓶颈不在能力，在沟通&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;模型足够聪明，能写出让人类工程师花两个sprint才能写出的代码。但它也可能在你只想要一个蓝色按钮时，给你重写整个设计系统。&lt;/p&gt;
&lt;p&gt;这不是AI的错，也不完全是用户的错——这是人机协作必须经历的磨合期。&lt;/p&gt;
&lt;p&gt;好消息是，这个磨合期正在缩短。更好的约束机制、更精确的指令理解、更克制的模型行为，都在路上。&lt;/p&gt;
&lt;p&gt;坏消息是，在那之前，你可能还得忍受AI在你要求改按钮颜色时，给你推荐一套新的设计规范。&lt;/p&gt;
&lt;p&gt;建议去 &lt;a class="link" href="https://opusfived.dev" target="_blank" rel="noopener"
 &gt;opusfived.dev&lt;/a&gt; 亲自体验一下。准备好你的耐心。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;em&gt;本文数据来源：Hacker News #49623754（score:1001, 392 comments），opusfived.dev&lt;/em&gt;&lt;/p&gt;</description></item></channel></rss>