我把一个惊艳的AI工具导航站拆了,框架直接送你

昨天刷到一个网站，第一眼就被惊艳到了——www.aigc.cn，一个AI工具导航站。说它惊艳，不是因为它收集了多少工具，而是它把“工具导航”和“AI创作”两个场景融到了同一个页面里，信息密集却一点不乱。我把它的框架从头到尾拆了一遍，这篇就把拆解结果整理给你。如果你也想做一个类似的网站，这份框架可以直接抄作业。

一、它到底是什么

简单说，这是一个“AI工具导航 + AI创作平台”的混合体。上半部分是海量AI工具的收录导航，按写作、绘画、对话助手、视频、编程等场景分类，每个工具一张卡片；下半部分是一条固定的创作输入栏，让你直接在里面描述想法、调用技能、选择模型开始创作。

换句话说，它同时满足了两种人：想“找工具”的人，和想“直接用AI”的人。这个定位思路，本身就是它最大的亮点。

二、整体框架：三段式

整个页面的骨架可以概括为三段：顶部双层固定导航、中部分类卡片流、底部固定创作栏。页面中间的内容滚动，顶部和底部始终不动，浏览和操作互不干扰。

先看顶部。第一层放品牌Logo和平台主推的技能入口，比如“电影级运镜”“创作分镜”这类，带New、Hot小角标，右侧一个“更多技能”按钮收尾；第二层是站内栏目导航——首页、AI快讯、AI课程、AI活动、桌面AI、Tokens、AI短剧等，用中文短词一行排开。两层叠起来，既引导你“玩起来”，又方便你“逛起来”。

三、三个最值得抄的模块

1. 工具卡片：整站的灵魂单元。每个工具一张卡片，结构极简：左边一个Logo图标，右边两行字——第一行工具名（加粗），第二行一句话卖点描述（灰色小字）。没有多余按钮、没有复杂信息，一眼扫过去就能判断“这是什么、对我有没有用”。就是这套“图标+名称+一句话”的卡片，撑起了上百个工具的列表，页面却一点不乱。

2. 分类区块：标题+标签+卡片流。每个分类（比如“AIGC写作平台”）是一整块：先一个大标题，下面一排子标签胶囊（AI写作工具、AI论文写作、AI论文查重、降AIGC率……点哪个看哪类），再往下是双列卡片网格。想继续细分就加子标签，想扩充就往下加分类块，结构完全可复制、可扩展。

3. 底部创作栏：把“导航站”升级成“创作入口”。页面底部固定了一条输入栏，提示语是“描述你的想法，小云雀和你一起创作”，旁边是技能、模型选择、偏好设置、登录体验几个按钮，输入栏上方还有“创作、短剧、营销”三个场景切换标签。这一条栏的设计很妙：它让用户逛完工具之后不用跳走，当场就能开始用AI——导航和创作在同一个页面闭环了。

四、视觉风格

整体是白底浅色、大量留白、圆角卡片、克制阴影的现代风格。文字层级非常清晰：页面标题最大，分类标题次之，卡片名称加粗，描述最小且是灰色。配上New（蓝绿）、Hot（红橙）的小角标做点缀，信息密集但不压抑。中文信息类网站照着这个调子做，基本不会出错。

五、这套框架能做什么

这个框架的通用性很强，至少四个场景可以直接套用：一是工具或资源导航站，收录工具、网站、资源，分类加卡片流天然适配；二是AI聚合平台，展示多家AI产品，同时自带创作或搜索入口；三是模板或素材聚合页，分类加子标签加卡片，运营型页面的通用结构；四是产品列表页，双列卡片加一句话卖点，信息效率高。

六、快速复刻清单

□ 顶部：Logo + 主推功能（带New/Hot角标） + “更多”入口

□ 导航：6-10个中文短栏目词

□ 内容：推荐区 → 分类区（大标题 + 子标签胶囊 + 双列卡片流）

□ 卡片：图标48px左右 + 名称加粗 + 描述灰字一两行

□ 底部：固定操作栏（输入框 + 主按钮 + 场景切换）

□ 风格：白底 + 主题色点缀 + 圆角卡片 + 克制阴影

□ 技术：图片懒加载、滚动加载、响应式适配手机

结语

一个网站的惊艳，往往不在某个炫技特效，而在于它把结构想清楚了。aigc.cn给我最大的启发就是：把“找工具”和“用AI”放进同一个页面，让用户逛完就能直接用。这套三段式框架，朴素、克制、高效，值得收藏。如果你也在做网站，或者想把某个想法落地成页面，希望这篇拆解能帮到你。觉得有用的话，点个赞、转给需要的朋友。