今天我们来10秒制作一个人工智能工具导航站。
首先我们选择Cursor中Claude 3.7 Sonnet Thinking模式下进行页面制作。
提示词：
“请您提供待处理的内容，我将按照以下步骤进行操作：
1. 内容分析与理解 (COT的第一步)
仔细研读您提供的文件、文本或图片，理解其核心信息、关键概念和数据。
识别内容的主要结构和潜在的叙事逻辑。
思考哪些信息最适合通过可视化方式呈现，以及如何呈现才能最有效地帮助读者理解。
2. 页面布局规划 (COT的第二步)
根据内容分析的结果，规划网页的整体结构和布局。
考虑如何利用清晰的视觉层次结构来引导读者的注意力，突出重要信息。
设计不同的内容区块，例如标题、段落、图表、图片、列表等，并确定它们在页面上的位置和大小。
规划交互元素的位置和功能，例如搜索框、筛选器、按钮等。
初步构思深色和浅色模式下的配色方案。
3. 代码生成与实现 (COT的第三步)
使用 HTML5 构建页面的基本结构。
利用 TailwindCSS 3.0+ 进行快速的样式开发，实现 Linear App 风格的简约现代设计。
引入 Font Awesome 或 Material Icons 图标库，并根据内容主题选择合适的图标。
使用 JavaScript 实现深色/浅色模式切换功能，并确保默认跟随系统设置。
根据内容需求，使用 JavaScript 库（如 Chart.js、D3.js 等，如果需要更复杂的可视化）创建图表、图形或信息图。
实现微交互效果，例如按钮和卡片悬停效果、平滑滚动和内容淡入动画。
添加底部作者信息区域，包含姓名、社交媒体链接、版权信息和年份。
实现可搜索的补充信息功能（具体实现方式将取决于内容类型）。
为长页面内容实现懒加载。
确保代码结构清晰，包含必要的注释。
4. 补充信息与“进一步阅读”
根据文件内容，搜索并整合其他重要的补充信息或模块，以增强读者对内容的理解。
分析文件主题，并推荐 5 本最佳相关的书籍或论文，形成“进一步阅读”清单。
5. 可视化处理
将分析结果转化为适当的图表、图形或信息图，直观地展示关键数据和概念。
选择合适的插图来增强页面的视觉吸引力。
确保所有可视化元素都清晰易懂，并与整体设计风格保持一致。
6. 响应式设计与性能优化
针对不同的屏幕尺寸（手机、平板、桌面）优化页面布局和字体大小，确保在所有设备上都能完美展示。
确保移动端有良好的触控体验。
使用 WebP 格式的图片并进行适当压缩，优化页面加载速度。
7. 输出与测试
生成一个包含所有必要 CSS 和 JavaScript 的单﹣ HTML 文件。
确保代码符合 W3C 标准，没有错误警告。
在不同的主流浏览器中测试页面，确保外观和功能的一致性。
请您现在将需要处理的文件、文本或图片提供给我，我将立即开始分析并着手创建这个令人惊艳的可视化网页。
待处理内容如下：AI搞副业”
生成的页面效果如下：
然后我们将生成的html页面导出至本地备用。
我们对这个页面的热门AI工具推荐区域进行再创作和拓展。
提示词：
“请参考如上“热门AI工具推荐”的板块内容，帮我设计一个热门AI工具推荐html页面，需要至少20款工具推荐，并附上实际的访问官网链接，界面可以再科技风一些。”
我们看下生成后的效果：
基础页面非常的漂亮清晰，而且搜索框功能也是正常可用，基本上这个版本已经可用。
接着我们要做的就是扩展这个导航内容。
提示词：
“附件tml中工具请扩展到100个工具并附上实际跳转链接, 界面需要修改成科技风、视觉冲击感强、布局合理，阅读方便。”
我们看下最终页面效果（直接上传我们的站点服务器就可用了）：
补充知识：
Claude 3.7 Sonnet Thinking模式
模式概述
Claude 3.7 Sonnet的Thinking模式即扩展思考模式（extended thinking），它是Anthropic公司发布的Claude 3.7 Sonnet这一混合推理模型所具备的独特模式。在该模式下，模型能向用户直观展示其长时间的逐步思考过程，这与标准模式下近乎即时的响应形成鲜明对比。正如人类大脑会进行深度思考一样，Claude 3.7 Sonnet在这个模式下会动用更详细的思维链，以更严谨的推理过程给出答案。
功能特点
多领域性能提升
在扩展思考模式下，Claude 3.7 Sonnet在数学、物理、指令遵循、编程等多领域的表现显著提升。例如在数学问题的解答上，它能通过深度思考，给出更准确的答案，其准确率与允许采样的思维令牌（thinking tokens）数量呈对数增长关系。在编程方面，它可以处理复杂代码库、规划代码更改、处理全栈更新等，还能从零开始构建复杂的网络应用程序和仪表板，生成具有卓越设计品味的生产就绪代码，并显著减少错误。
思考预算可控制
通过API使用Claude 3.7 Sonnet时，用户可自主控制模型的思考预算（budget for thinking），即指定Claude的思考过程不超过N个token（N最高可达128K token的输出上限）。这一机制允许用户在回答质量与推理速度（及成本）之间进行灵活权衡。例如，对于日常聊天，用户可以让它几乎不花什么思考时间；而对于学术分析或编写大型程序，就可以给它更高的思维预算，让Claude有充分的脑力进行推理。
串行测试时计算机制
当Claude 3.7 Sonnet启用推理能力时会采用串行测试时计算（serial test - time compute）机制，即在生成最终输出前，执行多个连续的推理步骤，通过动态叠加计算资源方式来实现深度思考。
应用场景
复杂任务处理
适合处理数学、物理、指令执行以及编程等复杂任务。在解决这些复杂问题时，模型会先进行自我反思和深入剖析，再给出回答，展现出强大的逻辑推理和问题解决能力。比如在编码工作中，开发者可以借助该模式让Claude 3.7 Sonnet对代码进行审查、解释技术概念，并针对不同语言提出改进建议。
特定游戏挑战
以运行GameBoy经典游戏《Pokémon Red》为例，Anthropic为Claude配置基础记忆模块、屏幕像素输入接口及按钮操作函数调用，使其突破常规上下文限制，通过数万次交互维持游戏进程。Claude 3.7 Sonnet改进后的智能体大大推进了游戏进程，成功挑战了三位宝可梦道馆馆主并赢得徽章。这体现了该模式在长链思维、代理执行等方面的重大进步。
与其他模型及模式对比
与其他推理模型不同
市面上传统的推理模型往往是基于某个基础语言模型，用全新的方法训练出来的行为方式完全不同的模型。而Claude 3.7 Sonnet的扩展思考模式和标准模式集成于一体，就像人类用同一个大脑既进行快速反应又进行深度思考，这种统一方法为用户创造了更无缝的体验。
与标准模式对比
标准模式适合日常对话和简单任务，能在短时间内为用户提供信息，类似于Claude 3.5 Sonnet的升级版；而扩展思考模式则针对复杂任务，通过深度思考来提升解决问题的能力。
当前限制
目前免费用户无法体验扩展思考模式，不过普通用户可以在Claude.ai 平台上免费体验Claude 3.7 Sonnet的标准模式。
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入路上侠客的知识星球，一年会员，原价199元，现在只需99元。
