收藏夹里躺着上百个网址，真到写代码时还是只会打开那几个——这是大多数前端开发者的真实状态。我以前也一样，看到好的工具网站就丢进收藏夹，总觉得"以后用得上"，结果收藏夹越来越长，能力一点没涨。直到我开始按"任务场景"重新整理手里的网站资源，把每一个网址都变成工作流里的一个环节，才发现工具不在多，在于你知不知道它该在什么时机出现。这篇文章就把我这两年筛选下来、真正在项目里反复用的41个网站按用途拆开讲，每个都告诉你我拿它干嘛、怎么用效率最高、有什么坑要避开。
1. 先聊明白：收藏夹里的网站和"巨佬"之间隔了什么
很多人问我，为什么同为三年前端，有人查一个样式兼容要翻半天文档，有人十秒就能定位问题？差别不在记忆力，而在工具链的组织方式。我观察下来，那些看起来啥都会的人，很少靠"背诵"知识，他们手里有一套能快速验证想法、快速查证标准、快速产出方案的工具组合。
这41个网站，按用途分成六类：文档查询、学习面试、UI灵感、效率工具、AI辅助。每一类解决一个具体问题，比如写代码时查标准、布局没灵感时找参考、接口数据太复杂时可视化解析、想确认某个库的体积时直接看打包分析。
我的建议是不要一次性全部打开收藏，而是先通读一遍了解每个网站能干什么，再结合自己当前的项目挑三四个主力站点深度使用。工具是拿来用的，不是拿来囤的。下面我按分类逐个讲，每个都会说清楚适用场景和我常用的操作路径。
2. 文档查询类：把"查资料"变成写代码里最快的环节（7个）
写前端最反感的事，就是写一半被一个API参数卡住。这类网站的核心价值，是让你用最少的时间找到最准确的答案，并且尽量不离开当前编辑器太远。
2.1 MDN Web Docs：唯一配得上"权威"二字的文档站
MDN是前端查文档的基准答案，没有之一。不是因为它收录最全，而是它对每一项CSS属性、JavaScript方法、Web API都会给出浏览器兼容性表格、官方规范链接、交互式示例和变更历史。我在实现某个兼容性存疑的特性时，先看MDN最底部的兼容性表，很多问题当场就能判断要不要做降级方案。
平时使用有个小技巧：直接在浏览器地址栏输入mdn 关键词，很多浏览器都能直接跳到MDN对应页面，比先进站再搜快得多。遇到读不懂的英文文档，MDN正文下面往往有"帮助改善MDN"的翻译入口，社区维护的中文版本质量已经相当高，新入行完全可以读中文版起步，但遇到规范理解分歧时，一定要切回英文原版逐句核对，翻译版本偶尔会有过时或错译。
2.2 Can I Use：兼容性判断的最终裁判
写CSS的时候，display: grid能不能用、aspect-ratio要不要加前缀，与其靠记忆猜，不如直接查Can I Use。它的数据源来自各大浏览器厂商的官方发布记录，比任何博客总结都要新，而且支持按"全球统计""中国区统计""特定版本范围"筛选，还能直接看到某特性从哪个版本开始支持。
我用它最多的场景是写移动端H5时判断CSS属性的降级策略。输入一个特性名，页面会用红绿块展示各浏览器版本的兼容情况，点开块还能看到"该版本对应的Chrome是哪个内核"。如果团队要求兼容到iOS 12，查完基本能确定要不要用PostCSS插件自动加fallback。注意它只能告诉你浏览器支不支持，不能告诉你怎么写polyfill，这是它的边界。
2.3 DevDocs：把所有文档离线塞进一个搜索框
DevDocs是文档界的"瑞士军刀"。它集合了HTML、CSS、JavaScript、DOM、TypeScript、React、Vue等几十套文档，支持离线缓存和模糊搜索。我通常开机就把它挂在一个单独的浏览器标签页里，写代码遇到拿不准的API，随手切换过去输入关键词，按回车直接定位到对应条目，比去搜索引擎绕一圈再点进来快得多。
它的搜索支持缩写，比如输入jq ajax能直接定位到jQuery的Ajax方法，输入js arr map能找到数组的map方法。第一次使用建议在设置里把日常技术栈对应的文档全部启用下载，这样断网或者网络不稳的时候查询体验完全不受影响。
2.4 TypeScript Playground：类型推导的实时验证台
很多前端写TypeScript像在写"带类型的JavaScript"，遇到复杂泛型就靠猜。TypeScript Playground能让你把一段类型代码粘贴进去，右侧实时显示编译结果和类型推导过程，还能切换不同TS版本验证兼容性。
我经常拿它做三件事：验证接口返回类型该怎么声明、调试复杂工具类型（比如Partial、Pick嵌套后的结果）、复现同事提的"类型报错"然后逐行分析。如果你在项目里被某个类型问题卡住超过十分钟，我建议立刻把代码粘进Playground，配合Ctrl+鼠标悬停看类型推导，通常能比对着代码盲猜快很多。
2.5 npm Registry：查包信息、版本记录和依赖关系的源头
光看GitHub主页有时候判断不了一个包到底维护得怎么样。npmjs.com上每个包主页都有关键信息：周下载量、最新版本发布时间、依赖数量、开源协议、维护者信息。选择第三方库时，我会看"Weekly Downloads"和"Last publish"两个指标——周下载量超过十万、最近一个月内还有发布的包，基本可以放心用。
它还有一个容易被忽略的功能叫"Version History"，点进去能看到每个版本的发版时间。遇到项目里某个包升级后报错，可以直接在这里对比旧版本号，回退到已知稳定的版本，比盲猜根因快得多。
2.6 GitHub：不只是代码托管，是最大的"开源说明书"
GitHub的核心价值不止是看源码。任何一个流行前端库，它的README、Issues、Discussions、Release Notes里都藏着大量有用的坑和决策原因。接手老项目时，我一般先看依赖库里几个关键包的Release Notes，能快速理解项目为什么要用这个版本。
还有一个很实用的路径：在仓库里按issue 关键词搜索，比如搜"vue router 404""antd table 性能"，经常能找到官方维护者的回复，比搜索引擎里的二手信息准确得多。如果英文文档读得吃力，GitHub的"Code search"也能帮你直接搜到别人项目里某个API的用法，这比看长文档更直观。
2.7 web.dev：谷歌出品的性能优化实战手册
web.dev是Chrome团队维护的性能与最佳实践站点，内容覆盖网页性能、PWA、可访问性、安全等方向。它最出名的工具是PageSpeed Insights，能直接生成一份带分数的诊断报告，并告诉你每个扣分项对应的优化建议。
我每次做完一个活动页或者官网，都会跑一遍它的Lighthouse评分，重点看Performance和Accessibility两个维度。它给出的建议非常具体，比如"启用文本压缩""显式设置图片宽高""移除未使用的JavaScript"，对前端性能优化新手来说是很好的入门导师。注意它更偏"通用建议"，如果项目用了特殊框架或有自定义性能指标，还是要以实际业务数据为准。
3. 系统学习与面试备战：这些网站让我把基础补成体系（9个）
所谓"巨佬"，大多数时候不是天赋异禀，而是知识成体系。碎片化地刷帖子只会越学越乱，用体系化网站做主线、再用刷题网站查漏补缺，才是效率最高的方式。
3.1 JavaScript.info：现代JavaScript语法与原理的地基
这个网站我从入门到工作后一直在用。它最出色的地方是用大量可交互示例讲清楚JavaScript的执行机制、闭包、原型链、异步流程，而不是只给结论。每个章节末尾还有练习题，难度循序渐进，特别适合用来检验自己是不是真的理解了。
它的英文原版更新比较快，中译版在zh.javascript.info，质量也相当高。我的建议是不要跳着看，从"An introduction to JavaScript"开始，按章节顺序过一遍，遇到不懂的回到浏览器Console里自己跑代码验证，这一步比单纯阅读重要得多。
3.2 现代JavaScript教程（中文版）：中文语境下的JS系统精讲
如果你英文阅读还有障碍，或者想用中文快速把JS核心过一遍，这个中文版教程可以作为JavaScript.info的替代或补充。它在内容结构上基本同步英文版，同时增加了不少中文本地化的翻译注释，读起来更顺。
不过我提醒一句：中文版最大的价值是帮你入门，不是帮你精确理解规范。如果你发现某个概念在中文版里怎么都理不顺，建议对照英文原版读一遍，很多翻译歧义在原文里很容易解开。
3.3 roadmap.sh：一张图看懂前端要学什么、按什么顺序学
roadmap.sh把前端的学习路径画成一张可视化的路线图，从HTML/CSS/JavaScript基础，到框架、测试、构建工具、部署，每一步都标注了关键知识点。它最大的价值不是让你"全学"，而是让你在迷茫时知道当前阶段该补哪个方向。
我推荐使用方法：拿一张纸，把路线图里"你已经掌握的节点"划掉，剩下的就是你的短板清单。然后按优先级排序，每周攻克一到两个节点。这样做三个月，你会明显感觉到知识盲区在减少。
3.4 Frontend Mentor：用真实设计稿练习HTML/CSS还原能力
做前端最容易被忽略的能力是"像素级还原"。Frontend Mentor提供大量真实风格的设计稿和项目需求，你只需要下载素材包，然后用自己的代码把设计稿实现出来，它不会给你标准答案，只提供验收标准。这个过程和真实工作里"照着设计图切页面"几乎一样。
我练这个网站最大的收获，是学会了怎么处理间距、字体、响应式断点。它免费版的项目就够用了，你可以把做完的代码传到GitHub，面试时直接作为作品集，比光说"我会CSS"更有说服力。
3.5 bigfrontend.dev：专门练前端手写题的刷题站
这个网站可能是目前最适合前端面试刷题的地方之一。它把前端面试中最常考的"手写题"（数组去重、防抖节流、Promise.all、深拷贝、事件总线等）全部做成在线题目，你直接在浏览器里写代码、跑用例、看结果，不用自己搭环境。
它的题型和真实面试高度接近，每题都有难度分级，建议从"Easy"开始，每道题写完再用O(n)时间复杂度分析来优化。我面试前会集中刷它的"JS"和"CSS"两个分类，基本能覆盖大多数公司的手写题考点。
3.6 LeetCode：算法基础还是得靠它
虽然前端日常工作中算法占比不高，但大厂面试和大规模前端工程里的性能问题都离不开算法思维。LeetCode主要用来练常见的数组、字符串、链表、二叉树和动态规划，不需要把题库刷完，只需要刷高频题且会总结套路。
我给自己定的线是：Top 100高频题会做、能讲清时间复杂度和空间复杂度，就足够应对绝大多数前端面试了。刷的时候注意用JavaScript写，因为JS的API相对宽松，但面试时更容易暴露底层理解，所以我写完每道题都会想一个问题："这个方法底层是怎么实现的？"这比单纯追求AC更有价值。
3.7 Exercism：通过练习和导师点评打磨代码风格
Exercism是一个免费编程练习平台，亮点在于每道题做完后，你可以看到社区里其他人的解法，也能邀请导师点评你的代码风格。这个"被人看代码"的过程，特别能暴露命名、条件分支、模块划分上的坏习惯。
我建议每隔几周选一道和当前工作相关的题（比如数组处理、异步并发），认真写完再对比Top Solution，通常能学到一些更简洁的写法。它的编辑器是网页版，不用本地配置，对临时想练练手非常友好。
3.8 freeCodeCamp：免费且认证友好的全栈入门路径
freeCodeCamp有完整的前端、后端、数据可视化等课程体系，每完成一个模块会获得一份免费认证证书。它的特点是项目驱动的学习方式，课程中间的练习题直接在网页上写代码，最后还要完成五个实践项目才能拿证。
想系统入门又不想花钱的人，先把 freeCodeCamp 的"Responsive Web Design"和"JavaScript Algorithms and Data Structures"两个认证刷完，基本就有了独立做静态页面和写基础交互的能力。它的社区论坛也很活跃，遇到卡住的问题发帖提问，通常几小时内就有人答复。
3.9 ExplainThis：中文语境下的概念拆解与面试题解析
ExplainThis是我最近发现的一个中文前端知识库，专门把高频面试题拆解成易于理解的解释，还会附带相关概念的延伸图。它的价值在于很多题目搜出来的标准答案是"背的"，而这里的解释是"讲道理的"，能帮你把一团乱麻的概念理顺。
我会把它当面试前的"快速查漏工具"用——列出它里面的题目清单，如果某个题目我一看到就能流畅地说出要点，这题就算过；如果卡壳超过30秒，就点进去精读。用这种方式，一周左右能把常见面试题体系过一遍。
4. UI灵感与临摹素材：写样式不再"干瞪眼"（8个）
很多前端开发者的瓶颈不是写不出代码，而是面对空白页面时脑子也空白。这类网站解决的就是"不知道长什么样"的问题，同时也提供在线运行环境，方便把想法快速变成真实页面。
4.1 CodePen：前端版"小红书"，看效果比读文字快得多
CodePen是一个在线代码分享社区，每个人都可以写HTML/CSS/JS片段并实时预览。我找交互灵感时特别喜欢搜"button hover""card hover""loading animation"，它会直接展示别人写好的效果和源码，可以一键Fork下来改造。
它还有很多专业的"Pen Collector"账号，专门整理某个主题的精选合集。我建了一个自己的Collection，把平时看到的好效果按类型归档，做项目时直接在里面挑选比对着网站逐页翻高效得多。
4.2 CodeSandbox：在线IDE，适合快速跑一个React/Vue项目
CodeSandbox是一个在线编辑器，支持React、Vue、Angular等框架，还能直接导入GitHub仓库。我常用的场景是：看到某个UI效果的源码，不确定它能不能跑，直接丢进CodeSandbox看效果；或者临时要给一个库写demo，不需要本地初始化项目，线上改完直接分享链接给同事。
它和CodePen的区别是：CodePen更适合写零散的"片段"，CodeSandbox更适合跑"完整项目"。遇到一个复杂组件库的示例，我一般先在CodeSandbox里fork官方模板，改几个文件验证，再决定要不要引入到真实项目里。
4.3 StackBlitz：WebContainers加持的秒开在线IDE
StackBlitz和CodeSandbox类似，但技术路线不太一样，它可以在浏览器里直接启动完整的Node环境，所以Vite项目的冷启动速度非常快，几乎秒开。
我最近用它比较多是因为它能直接跑Vue/React/Vite项目，还能模拟真实的终端命令、安装依赖、跑测试。如果你经常需要和同事或网友讨论"为什么这个项目在我本地跑不起来"，把仓库导入StackBlitz让他自己看，很多环境类问题直接暴露，省去来回截图。
4.4 Awwwards：看全球最顶尖的网页设计案例
Awwwards是一个评选全球优秀网页设计的平台，能上它的网站都是视觉和交互极度下功夫的作品。我每次做官网或品牌类项目前，会花半小时刷一刷，不是为了抄，而是为了提升审美上限和交互感知——比如同样一个导航栏，别人怎么处理移动端抽屉、怎么设计滚动动效。
它评分维度包括设计、可用性、创意、内容四个方向，你可以按照分数筛选。注意获奖作品通常是"秀肌肉"的，不一定适合业务系统，但里面的排版、色彩、字体组合思路完全可以借鉴到常规项目里。
4.5 Dribbble：海量UI稿和插画灵感库
Dribbble上聚集了大量UI/UX设计师，很多真实项目的视觉稿和设计探索稿都会发在上面。前端开发时想知道"这个弹窗圆角做多大""页面间距怎么统一"，直接搜索"Dashboard UI""Form Design""Settings Page"，能快速看到行业主流的设计风格，比凭空设计要靠谱得多。
我会把它当"需求沟通词典"用：产品经理说不清楚自己想要什么风格时，我直接在Dribbble上搜几个关键词，让他指认喜欢哪个，接下来写样式就有方向了。
4.6 Landingfolio：大量优质落地页设计模板参考
Landingfolio收集了全球优秀的Landing Page（落地页）设计案例，并且分类细致，有SaaS、移动应用、个人主页等场景。做官网和营销页时，我会优先来这里看别人的区块结构：Hero区写什么、功能特性怎么排、定价表怎么做、页脚有什么内容。
它的设计案例大多来自海外团队，交互和文案都很专业，很多还附带了所使用的技术栈和设计工具信息，方便你评估自己能不能复现效果。
4.7 UI Design Daily：每天一个UI小练习，练出手感
UI Design Daily每天发布一个UI设计练习素材，内容包括表单、按钮、卡片、菜单、设置页等。你可以把它当"前端临摹作业"：每天花15分钟，先用HTML/CSS把这个设计稿还原出来。
别小看这种日常练习，它练的是从视觉稿到代码的翻译能力。坚持一个月后再回到业务项目里，你会发现对着设计稿写样式的速度和准确度提升非常明显。
4.8 Google Fonts：字体选择和运用的一站式平台
Google Fonts是选字体的首选地，它提供上千款开源字体，并且可以直接生成引入代码，支持在线预览和多种字重切换。中文前端项目里，我一般会用"Noto Sans SC""Source Han Sans"这类开源中文字体，英文场景则根据项目气质在它里面筛选。
用得多了你会发现，字体的选择直接影响页面的高级感。同一个按钮，换一个合适的字体，观感完全不同。它的搜索支持按分类（Serif/Sans Serif/Display/Handwriting）筛选，还有字重对比工具，能帮你快速确定不同层级标题的字重搭配。
5. 开发提效工具箱：从压缩图片到查看包体积（10个）
这类网站的使用频率是六类里最高的，几乎每天都会碰到。它们的特点是小而专，每一个解决一个具体痛点，学会了就能直接给工作省时间。
5.1 TinyPNG：图片压缩界的"老字号"
TinyPNG通过智能有损压缩算法减少PNG/JPG体积，通常能在保证肉眼几乎无差别的情况下让图片瘦身70%以上。我在准备静态资源时，所有超过100KB的PNG/JPG都会先过一遍它。
它网页版单次最多压缩20张，每次约5MB，日常够用。如果项目里图片很多，建议用它的开发者API做自动化脚本，集成到构建流程里。有个小坑：它只支持PNG和JPG，WebP要用它家的TinyJPG或者下面的Squoosh处理。
5.2 Squoosh：谷歌出品的"全能图片压缩器"
Squoosh是Google开源的一款图片压缩工具，能直接在浏览器里对比原图和压缩后的效果，并且支持WebP、AVIF等现代格式的转换和参数调节。它的核心优势是所见即所得：拖动滑块时右侧实时显示新体积和画质，方便你在质量和体积之间找平衡点。
我常用的流程是：TinyPNG处理PNG，Squoosh处理WebP和AVIF，如果设计稿只给了JPG，我会先用Squoosh转成WebP再上线，通常体积能再小一半。
5.3 JSON Crack：把嵌套JSON变成可视化树状图
JSON Crack是一款能把JSON数据渲染成树状图/关系图的在线工具，非常适合理清复杂接口返回结构。之前接手一个嵌套五层的接口数据，用文本编辑器看半天理不清，粘贴到JSON Crack后一眼就看到哪些字段是数组、哪些字段可以复用。
它支持从URL导入、搜索定位节点、展开折叠任意层级、导出为图片或JSON。调试复杂表格或者Tree组件时特别有用，强烈建议遇到"这个接口到底返回了啥"的问题时先把它丢进去可视化，再写代码。
5.4 transform.tools：一站式在线转换工具
transform.tools是一个格式转换合集，支持JSON转TypeScript类型、JSON转Zod Schema、SVG转React组件、CSS转CSS Modules、HTML转JSX等很多转换场景。以前复制一段JSON再手写类型，现在直接粘贴就能生成，效率提升明显。
我常用的两个转换：JSON to TS和SVG to React Component。尤其SVG转组件，省去手写<svg>属性转驼峰名的麻烦，生成后微调一下class名就能直接用。
5.5 Bundlephobia：查一个npm包到底有多大
Bundlephobia能查任意npm包的大小、gzip后大小、以及引入部分子模块时对最终包体积的影响。做性能优化或选型时，我选库之前都会先来看一眼"Minified + gzip"数值，超过50KB的库，除非功能强到不可替代，否则会优先考虑替代方案。
它还能分析"Tree Shaking"的效果，告诉你如果只引入某个子模块，尺寸能降到多少。评估图表库时，ECharts整包接近300KB，但如果按需引入只需要其中几个组件，你就能在Bundlephobia上直观看到"按需"和"全量"的差距，然后决定要不要花时间去配按需加载。
5.6 Regex101：写正则的"调试台"和"解释器"
Regex101是我见过最好的正则在线工具，支持JavaScript/PCRE等多种语法，输入正则和测试文本后实时显示匹配结果、分组捕获和详细的匹配步骤解释。它还有一个"Explain"面板，会把一个晦涩的正则逐段拆解成人话。
我写正则的流程是：先在Regex101里用几段真实数据测试，确认分组捕获无误，再贴回代码。遇到网上复制来的正则看不懂，也先丢进去看Explain，能省不少琢磨时间。
5.7 Carbon：把代码片段变成漂亮图片
Carbon能生成带主题和窗框的代码截图，生成的图片可以直接用在博客、公众号、简历或分享文件里，比直接从编辑器截图美观得多。它还支持一键嵌入多个代码文件、按时间调整背景色等。
我用它做技术分享PPT时，会把关键代码段生成统一的Carbon图，视觉上比纯文字代码高级不少。它的预设主题星很多，选一个固定的主题能形成风格一致的文章配图。
5.8 Excalidraw：手绘风在线白板，画流程图/架构图的好手
Excalidraw是一个极简的手绘风在线白板，支持流程图、框架图、时序图、思维导图等，导出为PNG/SVG也方便。相比专业绘图软件，它的优势是上手零门槛、视觉统一、分享链接简单。
团队沟通方案时，我经常在Excalidraw里画一个简化版的前端架构图，箭头、框体、文字一目了然，大家盯着一块白板讨论，比在文档里用文字描述效率高很多。它是协作式的，把链接发给同事就能一起编辑。
5.9 Mockoon：本地起Mock API的最快方式
Mockoon是一个本地Mock API工具，不需要写代码，就能创建模拟的REST API并返回自定义JSON数据。前端和后端并行开发时，我用它提前把接口约定好，不走联调等待期。
它支持配置路由、请求头、响应体、延迟时间，还能模拟错误码和分页。我在它里面把项目所有接口的Mock数据配好，前端页面先跑起来，等后端真正接口上线后再替换baseURL，整个过程非常顺滑。
5.10 Snippet Generator：自动化生成VS Code用户代码片段
Snippet Generator能把你自己常用的代码块转成VS Code的snippet配置，然后粘贴到用户代码片段里。从此写一个Vue模板、写一个React函数组件，只需要输入几个字母就会自动补全整段代码。
我给自己攒了一套Vue3项目里高频使用的snippet：vue3setup、tsinterface、cssgrid、routelazy等等。每次创建一个新项目，第一时间先把这套snippet导进去，写代码速度能快30%。如果你还没做过这个事，今天就可以花十分钟把最常用的五个模板配好。
6. AI时代的新玩法：这7个网站让我的效率翻倍（7个）
现在的"巨佬"和几年前的"巨佬"，差距已经开始体现在会不会用AI工具组织前端工作流上。这类网站不光是聊天问答，更多是帮我写代码、生成页面、排查问题、雕琢交互。
6.1 ChatGPT与Claude：当之无愧的结对编程助手
ChatGPT和Claude现在已经是我写代码时的默认"外挂"。遇到一个不太熟的API、一段报错堆栈、一个算法思路，直接描述给它们，通常能很快给出有效的方案或代码片段。关键在于提问质量：尽量给出上下文、贴出相关代码、说明预期行为和运行环境，得到的回答会精准很多。
我自己总结的用法是：让它解释 > 让它写 > 让它审。先让AI解释一段别人的代码，确认理解正确后再让它帮你扩展功能，最后把你自己写的代码丢给它做Code Review，通常能发现不少边界条件没处理的问题。
6.2 Phind / Perplexity：面向程序员的AI搜索引擎
普通搜索引擎的缺点是结果含大量SEO垃圾。Phind是一个面向开发者的AI搜索引擎，输入问题后它会主动拉取Stack Overflow、官方文档、GitHub等源并回答；Perplexity则更像"带引用的AI问答"，每个结论都能点开原文。
我推荐用法：遇到编译报错或配不明白的官方文档时，把这些报错原文粘贴给它们，它们在搜到解决方案时会给出出处链接，比自己在搜索结果里猜更省时间。如果怕AI编答案以，一定要点开引用来源核对，尤其涉及版本号时。
6.3 v0.dev：根据文字描述直接生成前端UI组件
v0.dev是Vercel出品的人工智能UI生成工具，输入一句需求描述（比如"一个三列功能卡片区域，圆角卡片，浅灰背景"），它会直接生成可运行的Tailwind CSS代码，还能在页面里实时调整和导入到项目工程。
我常用它快速搭原型：产品需求一句话，先让v0生成初步界面，把代码复制到本地项目跑起来，再细调逻辑。这对个人项目或快速验证想法特别有用，节省从零开始写样式的大量时间。它生成的是组件级别代码，业务逻辑仍需自己接，但至少能让你从"白纸状态"瞬间进入"微调状态"。
6.4 bolt.new：AI驱动的在线全栈开发环境
bolt.new是StackBlitz团队发布的AI开发环境，能用对话方式从零生成一个完整前端项目，包括页面、组件、样式和基础交互，并且能在线预览、部署。它内置了AI代码生成能力，你还可以直接在它生成的代码上继续提需求。
体验下来，它最合适的是快速创建个人项目demo，比如"帮我写一个带搜索和筛选的待办事项应用，用React+Tailwind"。它生成的质量取决于需求描述是否细化，建议把数据结构、交互行为、UI风格都写清楚，结果会比简单一句话靠谱很多。
6.5 GitHub Copilot与Copilot Chat：编辑器里的AI结对
Copilot是在IDE里直接使用的AI代码补全和对话工具。它最大的优势是理解你正在写的代码上下文，不是凭空建议代码，而是接着你的变量名、函数结构往下续写，所以补全出来的内容通常更贴合项目现状。
我实际使用中的技巧：不要只把Copilot当"自动补全"，要把它当"自动生成单元测试""自动补全条件分支""把注释变成代码"的助手。它偶尔会生成看似合理但实际有问题的代码，所以每段它生成的逻辑都要自己review，尤其在处理副作用和状态更新时。
6.6 Claude Artifacts：在对话里直接生成并预览前端页面
Claude的Artifacts功能可以在对话中直接渲染生成的HTML/React组件，让我不用离开聊天界面就能看到效果。相比纯文字回答，Artifacts能把"交互原型"直接摆在你面前，快速验证一个DropDown菜单、一个Chart组件长什么样、手感如何。
我经常用它做"AI原型验证"：描述一个交互需求，让Claude在一个Artifacts里实现小demo，我点击、拖动、输入，体验完觉得没问题了，再把实现思路迁移到真实项目里。这个"先验证再写代码"的流程能减少很多返工。
6.7 screenshot-to-code / Code2Prompt：把设计稿或代码库变成AI的输入
这是两类"让AI更懂你"的工具。screenshot-to-code能把一张设计图直接转成HTML/Tailwind代码，Code2Prompt则能把本地整个项目的关键文件整理成一份长文本提示词，发给AI让它理解你的项目上下文。
我对Code2Prompt的使用频率最高：在接手一个新项目时，用它生成项目概览，然后问AI"这个项目的前端架构是什么""哪些文件有循环依赖"，能让AI在几秒钟内给出结构化分析。只要注意别把包含密钥的文件发给AI，这个工具在团队协作和代码理解上价值很大。
7. 最后想说：网站是工具，体系才是"巨佬"的本质
我见过很多前端开发者的收藏夹里躺着几百个网站，但问起来每个都说"好像见过"，这其实很可惜。我自己的体会是，工具的价值不是来自"知道"，而是来自"用顺"。真正让人感觉"这人很专业"的瞬间，往往不是他说出某个冷门网站的名字，而是他在你还没想到问题的时候，已经用对的工具把问题解决了。
如果你现在刚开始整理这些资源，我的建议是：每个分类先选定一到两个网站作为"主力"，比如文档类只用MDN和Can I Use，效率类先学会TinyPNG和JSON Crack，AI类先深入玩转ChatGPT或Claude。用透一个网站，比收藏十个网站有用得多。
等到这些工具用熟了，你会发现它们之间还能互相配合——比如用Code2Prompt把项目上下文给AI，再用Copilot在编辑器里落地，配合Bundlephobia做体积控制，最后用Carbon把关键代码段发到团队群里分享。这套组合拳，才是"41个网站"真正的价值所在：不是让你把每个都背下来，而是让每一个都在它该出现的地方出现在你的工作流里。
