Back to Blog

tech-blog 2.0:进化,向 AI 驱动的 UI 哲学致敬

Astro
Tailwind
AI-Driven
Refactor

记录 tech-blog 2.0 的全面升级,探讨为什么 shadcn 和 Tailwind 是 AI 时代的最佳前端伙伴。

Published on 1/23/2026

在完成了基础架构的重构后,我决定让这个博客在“细节”上达到极致。这就是 tech-blog 2.0

升级清单

1. 官网级的排版 (Typography)

引入了 @tailwindcss/typography。现在,无论是代码块、引用、列表还是加粗,都具备了现代技术文档的比例感。

2. 沉浸式阅读增强

  • Sticky TOC:侧边栏实时目录,点击精准跳转,大长文不再迷路。
  • 一键复制代码:每个代码块右上角新增了复制按钮,这是程序员最基础的尊严。
  • 宽度自由:新增了悬浮的“阅读模式切换”按钮,支持在“标准宽度”和“宽屏模式”间切换,满足不同屏幕的需求。

3. 视觉抛光

参考了 shadcn/ui 的设计语言,为博文卡片增加了微小的 translate-y 位移和深度阴影效果。这种“克制”的动效让站点显得更加专业且稳重。

深度思考:为什么 AI 喜欢 shadcn 风格?

在重构过程中,我与 AI 深度讨论了前端技术栈的“AI 友好度”。

  • 透明度胜过黑盒:shadcn 这种“代码分发”模式让 AI 能够直接看到并修改源码,而不是在 node_modules 的黑盒外猜测。
  • Tailwind 是 AI 的母语:Tailwind 将复杂的 CSS 语义化为可预测的 Token,这让 AI 调整样式的准确率直线上升。
  • 逻辑确定性:结合 Zod 进行数据校验,能让 TypeScript 的类型从“建议”变成“契约”,这补齐了 AI 写前端时最后的安全拼图。

每一小步,都是积淀

从最初的一个简单的 Hello World,到现在的 Rust 驱动搜索、自动化标签系统、以及完善的 UI。这个博客不仅是我技术心得的载体,它本身也成为了我探索 “AI + 开发者” 协作边界的实验室。


掌握工具的人,终将改变工具。 🚀