[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tb-a-2077722972998598656-2077725324778405888":3},{"detail":4,"html":18,"toc":19,"catalog":29,"tool":33},{"id":5,"title":6,"coverUrl":7,"url":8,"level":8,"description":9,"publishDate":10,"views":11,"isCollect":12,"isLike":12,"vipRequired":13,"vipFlag":14,"price":8,"contentType":15,"station":8,"seq":15,"readMinutes":16,"toolIds":17,"relatedVideo":8},"2077725324778405888","Anthropic web-artifacts：官方，想法一句话变成能跑的网页","",null,"Claude 官方内置的 Web 应用\u002FArtifacts 构建技能，是 Claude 生成网页产物的能力本体。把想法直接做成可运行、可分享的网页应用（单页交互、小工具、可视化 demo）。官方出品、稳，适合快速做能跑的网页 demo。","2026-07-16",0,"0",false,"1",1,2,[],"\u003Cdiv style=\"padding:0 4px 24px;font-size:14px;color:#333;line-height:1.85;word-break:break-word\">\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:0 0 18px;font-size:13px;line-height:1.7;color:#9A3412\">🏛️ \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">Anthropic 官方出品\u003C\u002Fstrong>，所在 anthropics\u002Fskills 母仓 162k 星。\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s1\" data-toc>一、这是什么\u003C\u002Fh1>\n\u003Cp style=\"margin:0 0 14px\">Claude 官方内置的 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">Web 应用\u002FArtifacts 构建技能\u003C\u002Fstrong>。把你的想法直接做成一个能运行、能分享的网页——单页交互小工具、数据可视化、小 demo，都能一句话生成。\u003C\u002Fp>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s2\" data-toc>二、能干嘛\u003C\u002Fh1>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">想法→能跑的网页\u003C\u002Fstrong>：描述需求，直接产出可运行的网页应用\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">可分享\u003C\u002Fstrong>：做出来能直接发链接给别人看\u002F用\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">官方能力本体\u003C\u002Fstrong>：Claude 生成网页产物用的就是它\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s3\" data-toc>三、适合谁\u003C\u002Fh1>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">想快速把点子做成一个能跑的网页 demo 的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">做小工具、可视化、原型验证，不想搭一堆环境的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:18px 0 0;font-size:13px;line-height:1.7;color:#9A3412\">⚠️ \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">一句实话\u003C\u002Fstrong>：适合做轻量单页应用\u002Fdemo；大型多页项目、复杂后端还是走 Vercel 前端全家桶 + Supabase 那套。在 Claude 环境里使用。\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n",[20,23,26],{"id":21,"text":22,"level":15},"s1","一、这是什么",{"id":24,"text":25,"level":15},"s2","二、能干嘛",{"id":27,"text":28,"level":15},"s3","三、适合谁",[30],{"id":5,"title":6,"coverUrl":7,"duration":8,"level":8,"publishDate":10,"views":11,"aiSoftapp":8,"tags":31,"contentType":15,"station":8,"seq":15,"relateId":8,"toolId":32,"readMinutes":16},[],"2077722972998598656",{"id":32,"createTime":34,"createdBy":35,"updateTime":34,"updatedBy":35,"echoMap":36,"slug":37,"name":38,"categorySlug":39,"subCategory":40,"region":8,"website":41,"appName":7,"description":42,"tags":43,"sortOrder":11,"state":15,"tenantCode":49,"tutorialContent":8,"resourceType":50,"accessTypes":7,"installCmd":51,"logo":52,"hotScore":53,"githubStars":11,"category":39},"2026-07-16 19:52:14","1744248479271616512",{},"anthropic-web-artifacts-builder","Anthropic web-artifacts","coding","前端与UI开发","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fweb-artifacts-builder","Claude 官方内置的 Web 应用\u002FArtifacts 构建技能。帮你把想法直接做成可运行、可分享的网页应用（单页交互、小工具、可视化 demo），是 Claude 生成网页产物的能力本体。官方出品、稳。适合快速做个能跑的网页 demo。",[44,45,46,47,48],"官方","Anthropic出品","网页应用构建","可分享Artifacts","做demo快","0000","skill","npx skills add anthropics\u002Fskills@web-artifacts-builder","https:\u002F\u002Fgithub.com\u002Fanthropics.png",84]