AI工具集 - 聚焦全球AI应用与API平台

项目背景

随着AI工具和API平台爆发式增长，开发者与用户面临一个共同的痛点：找工具难，比价更难。国内外上百款AI产品散落在各个角落，每次需要用的时候都要重新搜索、对比、试错。

于是我决定做一个一站式AI导航页，把主流AI工具和API平台整合到一个页面里，支持分类筛选、关键词搜索、费用/访问方式过滤，让找工具这件事变得简单。

收录规模

AI工具集（97款）

分类	数量	代表产品
📝 文本/对话	40款	ChatGPT、Claude、DeepSeek、Kimi、通义千问
💻 编程	18款	Cursor、GitHub Copilot、Trae、Devin、通义灵码
🎨 图像	20款	Midjourney、DALL·E 3、Flux、Stable Diffusion
🎬 视频	14款	Sora、可灵2.0、Runway、Pika 2.0
🎵 音频	13款	Suno、ElevenLabs、Fish Audio
🔍 搜索	9款	Perplexity、秘塔AI搜索、Consensus
🤖 智能体	20款	Coze扣子、Dify、AutoGPT、LangChain
🎲 3D	8款	Spline AI、Meshy、Luma AI
📄 办公	8款	Notion AI、Gamma、秘塔写作猫

API平台（38个）

分类	数量	代表平台
🇨🇳 国内平台	13个	阿里云百炼、百度千帆、智谱AI、DeepSeek、豆包、腾讯混元
🌍 国际平台	7个	OpenAI、Anthropic、Google AI、Mistral AI、xAI
⚡ 推理/聚合	14个	OpenRouter、Groq、Together AI、NVIDIA NIM、Hugging Face
🎨 图像/视频专用	4个	Stability AI、Flux、ElevenLabs、Runway API

构建思路

技术方案

纯 HTML + CSS + JavaScript 单文件实现，零外部依赖，一个文件即可运行。

核心设计

1. 双Tab架构：页面顶部设置"🛠️ AI工具集"和"⚡ API平台"两个大Tab，切换时筛选器和数据网格同步切换，搜索框在两个Tab间共享
2. 三维筛选系统：
   • 类型维度：文本/编程/图像/视频/音频/搜索/智能体/3D/办公（工具集）；文本生成/代码生成/图像生成/嵌入向量化/聚合路由等（API平台）
   • 费用维度：免费 / 部分免费 / 付费
   • 访问维度：国内直连 / 需魔法 / 部分受限
3. 卡片式布局：每张卡片包含名称、emoji图标、所属公司、简介、类型标签、费用标签、访问方式标签，以及官网/文档跳转按钮
4. 实时搜索：支持按名称、公司名模糊搜索，搜索结果实时更新
5. 筛选器可折叠：点击顶部筛选器按钮可收起/展开，不遮挡内容浏览

数据结构

每条工具数据包含以下字段：

{
  id, name, company, url, icon, color,
  desc,          // 一句话简介
  types,         // 类型标签数组
  price,         // 费用：免费/部分免费/付费
  region,        // 访问方式：国内无需魔法/国外需要魔法/部分受限
  api            // API平台链接（可选，仅部分工具有）
}

API平台额外包含 docs 字段，指向官方API文档地址。

UI设计

配色方案

采用杂志风+自然系配色，避免"AI味"的蓝紫渐变：

• 主色调：森林绿 #2d5a47 + 琥珀金 #d4a574
• 辅助色：珊瑚红 #e07a5f
• 背景：暖白 #faf9f7
• 卡片：纯白 #ffffff + 柔和阴影

标签色系

标签类型	配色	示例
免费	绿底绿字	#e8f5e9 / #2e7d32
部分免费	蓝底蓝字	#e3f2fd / #1565c0
付费	黄底橙字	#fff8e1 / #f57f17
国内直连	绿底绿字	#e8f5e9 / #2e7d32
需魔法	蓝底蓝字	#e8eaf6 / #3949ab
部分受限	橙底橙字	#fff3e0 / #e65100

交互细节

• 卡片hover时微上移 + 阴影加深
• 筛选按钮点击时active态变色
• 返回顶部按钮滚动超过一定距离自动出现
• 筛选器sticky固定在header下方，滚动时始终可操作
• 移动端适配：筛选器横滑、卡片单列

特色亮点

1. 工具与API双视角

同一个AI产品，普通用户关心的是"能不能直接用"（工具视角），开发者关心的是"能不能调API"（平台视角）。双Tab设计让两类用户各取所需。

2. 访问方式标注

每款工具都标注了是否需要科学上网，这对国内用户来说是刚需信息。很多导航站不标注这一点，用户点进去才发现访问不了。

3. 费用透明

免费/部分免费/付费一目了然，避免用户注册半天才发现要付费。

4. API平台独立分区

API平台区额外提供"📖 文档"按钮，直达官方API文档，开发者不用再单独搜索文档地址。

访问链接

点击在新窗口打开AI导航页

作品展示在下方