一一 AI：一个融合 AI 展示、实用工具与桥牌内容栏目的网站

在整理个人网站和内容型产品时，我发现一个比较重要的方向：网站不一定只做单一功能，也可以把“技术展示、工具服务、内容沉淀”放在同一个入口中，通过清晰的栏目结构，让访问者能够快速找到自己感兴趣的内容。

最近做的这个网站是 一一 AI，它目前还在持续完善中，但已经形成了几个比较明确的模块：AI 前沿展示、Car 卡汽车图片栏目、桥牌相关工具与教学内容、单位转换器、名著与周刊等。本文简单记录一下这个网站的内容设计和技术实现思路，也算是一次轻量的网站项目复盘。

网站整体定位

一一 AI 的首页文案是“领略时代的潮流，探索你喜欢的事物”。从内容结构来看，它并不是一个纯工具站，也不是单纯的博客站，而更像是一个综合型展示入口。

目前网站主要包含以下方向：

• AI 前沿：通过数字人演唱展示，呈现 AI 内容与交互体验。
• Car 卡：以汽车视觉内容为核心，偏图片展示和品牌审美。
• 桥牌工具：提供双明手定约分析、桥牌 13P、桥牌学术等相关内容。
• 实用工具：例如单位转换器，支持长度、温度、面积、体积、重量、时间等常见单位换算。
• 内容栏目：名著、周刊、集美等，适合后续持续更新文章、资料和灵感笔记。

这样的结构比较适合个人或小团队网站：既能展示技术能力，也能承载长期内容积累。

前端技术观察

从页面资源和结构上看，网站使用了 Nuxt / Vue 相关的前端技术栈。页面中可以看到 _nuxt 资源路径，并且组件样式带有 Vue 单文件组件常见的 data-v-* 标记。

在样式方面，页面大量使用了类似 Tailwind CSS 的工具类，例如：

grid grid-cols-1 gap-8 px-5 py-9 md:grid-cols-[0.9fr_1.1fr]

这种写法的好处是开发效率高，响应式布局也比较直观。对于内容型网站和展示型网站来说，使用工具类可以快速完成不同屏幕尺寸下的布局适配。

网站整体前端实现大致可以概括为：

• 基于 Vue / Nuxt 的组件化页面组织。
• 使用响应式布局适配桌面端和移动端。
• 通过模块化栏目构建首页内容。
• 静态内容与交互组件结合，既能展示，也能提供工具能力。
• 使用视频、按钮、表单、选择器等交互元素提升页面体验。

首页模块设计

首页不是传统的“公司介绍式”落地页，而是直接把几个核心栏目展示出来。这样做的好处是访问者进入网站后，不需要看太多说明文字，就能通过模块判断网站提供了什么。

比较有代表性的模块包括：

1. AI 前沿

AI 前沿区域通过数字人演唱视频构建沉浸式展示场景。页面中有播放、暂停、重新开始、声音控制以及不同视角切换的交互按钮。

这个模块的价值不只在于展示一个视频，而是把“AI 内容生成”“数字人”“舞台感展示”做成一个可感知的页面体验。对于想了解 AI 应用落地的人来说，这类展示比单纯文字介绍更直观。

2. Car 卡

Car 卡模块更偏视觉展示，主题是汽车图片和品牌审美。首页中用深色背景、红色强调色和网格布局营造汽车内容的视觉氛围。

这类栏目适合后续扩展为汽车图库、车型卡片、品牌页或者图片素材专题。如果内容持续更新，它可以成为网站中比较容易被浏览和收藏的部分。

3. 桥牌工具与桥牌学术

桥牌是网站里比较有特色的垂直内容。首页中提供了“双明手定约分析”功能，可以输入 N、E、S、W 四家的手牌，并选择将牌花色、庄家、局况等信息。

这类功能不是简单的内容展示，而是带有一定专业计算和交互逻辑的工具模块。对于桥牌学习者来说，工具化页面比普通文章更容易形成使用价值。

桥牌学术板块则偏向教学、课件、技师服务等内容。它更适合作为长期沉淀专业资料的入口。

4. 单位转换器

单位转换器是一个典型的轻工具页面。它支持长度、温度、面积、体积、重量、时间等常见类别，用户可以选择输入单位和输出单位，完成基础换算。

这类工具虽然不复杂，但很适合放在综合网站中：

• 访问门槛低。
• 使用频率稳定。
• 对搜索引擎较友好。
• 能增加网站的实用属性。

对于个人网站来说，实用工具模块往往能带来比纯展示页更稳定的访问价值。

内容栏目与长期更新

网站中还预留了名著、周刊、集美等内容栏目。从首页描述来看，这些栏目更偏审美、阅读、生活灵感和持续更新。

内容型栏目对于网站长期发展很重要。工具页解决“即时需求”，内容栏目则解决“持续访问”的问题。如果后续能够保持稳定更新，比如每周整理 AI 应用、读书笔记、桥牌技巧或汽车内容专题，就可以让网站逐渐从一个展示入口变成一个有沉淀的内容平台。

技术实现上的几个优点

从当前页面来看，这个网站有几个值得参考的实现点。

第一，栏目结构比较清晰。导航中包含 AI、名著、Car 卡、桥牌、周刊等入口，首页也用不同视觉区块承接这些内容。

第二，移动端适配有考虑。页面中大量使用 md: 等响应式类名，说明在布局阶段考虑了不同屏幕宽度的展示效果。

第三，内容和工具结合得比较自然。很多网站容易只做文章，或者只做工具，而这个站把内容展示、专业工具和视觉栏目放在一起，扩展空间更大。

第四，视觉层次比较明确。AI 前沿使用深色沉浸风格，Car 卡使用汽车主题的暗色与红色搭配，普通内容区则使用浅色背景，模块之间辨识度比较高。

可以继续优化的方向

如果后续继续迭代，我认为可以从以下几个方面优化：

• 为每个栏目补充更明确的 SEO 标题、描述和关键词。
• 给 Car 卡、周刊、名著等栏目增加稳定的内容详情页。
• 为工具类页面增加使用说明、示例和常见问题。
• 给桥牌工具增加案例数据，降低首次使用门槛。
• 增加站内搜索，方便用户查找内容。
• 为内容栏目建立固定更新节奏，例如周刊按日期归档。

这些优化不一定要一次完成，但可以逐步提升网站的完整度。

总结

一一 AI 是一个把 AI 展示、实用工具和兴趣内容整合在一起的网站实践。它的特点不是单点功能特别复杂，而是通过多个栏目形成了比较丰富的访问入口。

对于个人开发者或内容创作者来说，这种模式有一定参考价值：先搭建一个清晰的网站框架，再持续补充工具、文章和专题内容。随着内容数量增加，网站本身也会逐渐变成一个可积累、可扩展的个人作品平台。

网站地址：https://yiiai.top/