最近后台总有人问我Claude到底值不值得用，今天干脆写一篇实测。
Claude的Artifacts功能，可能是我今年用得最顺手的一个“隐形前端”。
半年前我接了个小活，客户要一个内部数据看板，预算压得很低，找外包报价最低也要8000块。我寻思着先自己搭个能看的原型去谈，就打开了Claude的Artifacts。结果这一用就是半年，前后做了11个原型页面，省下的外包费够买台新显示器了。
具体怎么上手，我按自己跑通的流程说。
第一步，别一上来就让它“做个看板”。我第一次就吃了亏，输入“帮我做一个销售数据看板”，出来的东西花里胡哨但字段全是假的。正确的做法是先把数据结构说清楚：我有哪几张表、每张表几个字段、字段类型是什么。比如“销售表：日期、区域、销售额、订单数，都是数字类型”。这一步花2分钟，后面省半小时。
第二步，指定技术栈和视觉风格。Artifacts默认给你React+Tailwind，但你可以直接说“用纯HTML+Chart.js，不要框架，深色背景，主色调用#1a1a2e”。我试了3次发现，越具体的指令越不容易跑偏。等它生成完，右侧面板直接出图，大概等20到40秒。
第三步，在预览里点着改。看到哪个卡片位置不对，直接跟它说“把第二行的卡片改成两列布局”，它会在原代码上改，不会重写整个文件。这点比很多工具强，我改一个柱状图的颜色，来回对话4轮就定稿了。
第四步，导出。右上角有个复制按钮，把HTML整个拷出来存成文件，双击就能在浏览器打开。我拿这个直接发给客户看，对方以为我找了设计师。
优点说三个。一是零配置，不用装环境不用npm install，打开网页就能跑。二是改起来快，对话式调整比手动改CSS省事太多，我这种半吊子前端也能 hold 住。三是免费额度够用，我这半年11个页面，没充过钱，普通账号的对话次数撑得住。
不足也有两个。复杂交互它搞不定，比如拖拽排序、多级联动筛选，我试了2次都出bug，最后还是手写补上的。另外它生成的代码结构比较随意，命名不规范，想直接上生产环境得自己重构一遍，别指望复制粘贴就上线。
适合谁呢？产品经理画原型、创业者做demo、前端拿来搭静态页面骨架，这三类人最划算。你要是想让它直接产出能上线的完整应用，目前还差口气。
新手避坑就一条：每次对话只改一个地方。我一开始贪心，一条消息里说“改颜色、加筛选、换图表类型”，结果它只改了颜色，另外两个忘了。后来学乖了，一次说一件事，效率反而高。
（截图里的界面版本可能和你看到的不太一样，以最新的为准）
常见问题FAQ：
Q：这玩意儿要收费吗？
A：普通账号免费用，有次数限制，我日常做原型没碰到过上限。重度用的话开Pro，20美元一个月。
Q：新手能直接上手不？
A：能，但得会描述需求。你连“我要什么字段”都说不清楚，它给你的东西就没法用。先想明白再开口，比啥都强。