[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tb-a-2077722971308294144-2077725322832248832":3},{"detail":4,"html":18,"toc":19,"catalog":41,"tool":45},{"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},"2077725322832248832","Vercel 前端全家桶：官方前端规范，让 AI 写出专业网页","",null,"Vercel 官方出品（GitHub 29.1k 星，安装量顶级）。前端开发权威规范合集：React\u002FNext.js 最佳实践、Web 设计规范（无障碍\u002F性能\u002FUX）、React Native、动画、组件模式，还能一键部署。想让 AI 写出专业规范的前端代码认准官方。","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\">Vercel 官方出品\u003C\u002Fstrong>（Next.js 母公司）。GitHub 29.1k 星，单前端最佳实践一条就 55 万+ 安装，全站顶级。\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\">Vercel 官方的\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">前端开发规范全家桶\u003C\u002Fstrong>。让 AI 写出的网页代码不只是\"能跑\"，而是专业、规范、性能好。要做前端\u002F网页，这是最权威的一套。\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=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s3\" data-toc>⚛️ React\u002FNext.js 最佳实践\u003C\u002Fh2>\u003Cp style=\"margin:0\">40+ 条规则、8 大类，专治 AI 写的 React 性能差、结构乱。\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s4\" data-toc>🎨 Web 设计规范\u003C\u002Fh2>\u003Cp style=\"margin:0\">100+ 条规则审查无障碍、性能、UX，让界面更专业耐看。\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s5\" data-toc>📱 React Native + 🎬 动画 + 🧩 组件模式\u003C\u002Fh2>\u003Cp style=\"margin:0\">移动端优化、View Transitions 平滑动画、组件组合架构，一并配齐。\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s6\" data-toc>🚀 一键部署 Vercel\u003C\u002Fh2>\u003Cp style=\"margin:0\">做好的网页可直接部署上线，还能审计已部署项目的成本\u002F性能。\u003C\u002Fp>\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=\"s7\" 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\">用 AI 做网页\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\">用 Next.js \u002F React 技术栈的团队\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>：它主要针对 React\u002FNext.js 生态；用别的技术栈受益有限。在 Claude Code 等 AI 助手里使用。\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n",[20,23,26,29,32,35,38],{"id":21,"text":22,"level":15},"s1","一、这是什么",{"id":24,"text":25,"level":15},"s2","二、一次安装，覆盖这些",{"id":27,"text":28,"level":16},"s3","⚛️ React\u002FNext.js 最佳实践",{"id":30,"text":31,"level":16},"s4","🎨 Web 设计规范",{"id":33,"text":34,"level":16},"s5","📱 React Native + 🎬 动画 + 🧩 组件模式",{"id":36,"text":37,"level":16},"s6","🚀 一键部署 Vercel",{"id":39,"text":40,"level":15},"s7","三、适合谁",[42],{"id":5,"title":6,"coverUrl":7,"duration":8,"level":8,"publishDate":10,"views":11,"aiSoftapp":8,"tags":43,"contentType":15,"station":8,"seq":15,"relateId":8,"toolId":44,"readMinutes":16},[],"2077722971308294144",{"id":44,"createTime":46,"createdBy":47,"updateTime":46,"updatedBy":47,"echoMap":48,"slug":49,"name":50,"categorySlug":51,"subCategory":52,"region":8,"website":53,"appName":7,"description":54,"tags":55,"sortOrder":11,"state":15,"tenantCode":61,"tutorialContent":8,"resourceType":62,"accessTypes":7,"installCmd":63,"logo":64,"hotScore":65,"githubStars":66,"category":51},"2026-07-16 19:52:13","1744248479271616512",{},"vercel-agent-skills-frontend","Vercel 前端全家桶","coding","前端与UI开发","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills","Vercel 官方出品（GitHub 29.1k 星，安装量全站顶级）。前端开发的权威规范合集：React\u002FNext.js 最佳实践（40+ 条规则）、Web 设计规范（100+ 条覆盖无障碍\u002F性能\u002FUX）、React Native、View Transitions 动画、组件组合模式，还能一键部署到 Vercel。想让 AI 写出专业、规范的前端代码，认准官方。",[56,57,58,59,60],"官方","Vercel出品","React最佳实践","Web设计规范","一键部署","0000","skill","npx skills add vercel-labs\u002Fagent-skills","https:\u002F\u002Fgithub.com\u002Fvercel.png",92,29100]