WRITING
文章
一个人做产品的真实过程：踩过的坑、做过的判断、还没解决的问题。
AI 工具、编程方法论与踩坑教程——写给动手的人。
2026
10 月
5 篇
- 开发者手册
我给作品区画了五张手绘插图：不用图库，也不伪造界面
五张作品卡从真实截图和排版板换成了统一的手绘插图。过程里做了两个决定：不用图库，也不伪造产品界面；画法是用 SVG 做抖动线条、纸面底纹和 emerald 点色。
- #SVG
- #手绘
- #设计
- 开发者手册
个人站的文章系统：frontmatter、栏目校验和静态生成
10 篇文章背后没有 CMS：一个 content/posts 目录、gray-matter、栏目枚举校验和构建时静态生成，坏数据会在 build 时直接报错。
- #Next.js
- #Markdown
- #内容系统
- 开发者手册
改完代码页面不动：一次 Next.js 16 热更新排查实录
改样式、改文案，保存后页面一点反应都没有，刷新还是旧内容。最后定位到两个独立问题：Next 16.2 的服务端热更新回归，以及 dev server 对 HMR WebSocket 的同源校验。
- #Next.js
- #热更新
- #踩坑
- 开发者手册
页脚四等分为什么不成立：一次 footer 重排
页脚从四等分改成 4/2/2/4，顺手修了两个看不见的问题：Tailwind v4 里没生效的 max-w-76rem，以及和正文差 24px 的左边缘。
- #Tailwind
- #布局
- #设计
- 开发者手册
用 Next.js 上线个人网站，我踩过的 10 个坑
standalone 丢静态资源、macOS 构建的 sharp 到 Linux 直接崩、首屏内容被 useState 从 HTML 里删掉、robots.txt 把自己的 CSS 屏蔽掉……这 10 个坑都是真踩过的，每条都写清楚现象、原因和修法。
- #Next.js
- #部署
- #踩坑
2026
9 月
2 篇
- 开发者手册
用无头 Chrome 验收页面：我踩过的 6 个截图坑
改完 UI 不能只靠肉眼。用无头 Chrome 加 CDP 截图验收时，开发浮标、固定头部、懒加载图片、图片优化缓存都会让截图说谎。
- #Chrome
- #调试
- #自动化
- 开发者手册
我把个人网站从「简历」改成「工作台」：一次真实的设计系统重构
第二轮改版的完整记录：中文其实一天都没在用我指定的字体、「卡片看着 low」的真正原因不是卡片、以及为什么最后的解法是把卡片删掉。
- #设计系统
- #Tailwind
- #个人网站