https://www.thefivekey.com/tags/markdown/ Recent content in Markdown on Hi, I'm 5key Hugo zh-cn Sun, 19 Apr 2026 00:00:00 +0000 https://www.thefivekey.com/design-system-as-markdown/ Sun, 19 Apr 2026 00:00:00 +0000 https://www.thefivekey.com/design-system-as-markdown/ <p><img src="design-system-as-markdown-cover.webp" alt="OFF DESIGN 45 封面：把设计系统变成 Markdown，让 AI Coding 读懂设计约束"></p> <blockquote> <p><strong>TL;DR</strong></p> <p>用 AI Coding 做产品时最大的问题不是「AI 不会用组件」，而是「AI 不知道什么时候不该用」。</p> <p>Google 的 DESIGN.md 给出了一个轻量方案——把设计系统写成 Markdown 放进代码仓库，让 AI 每次 Coding 都能读到设计约束。</p> <p>本文展示如何从 Foundation（DESIGN.md）扩展到 Component（50+ 组件文档）和 Pattern（30+ 交互模式），用一套 Markdown 文档体系让 AI 真正消费你的设计系统。</p> </blockquote> <h2 id="篇首语">篇首语</h2> <p>最近这段时间，我一直在用 Claude Code 做一个数据分析系统。</p> <p>最开始启动的时候，整体的体验还是非常不错的。我只需要写好需求描述文档，准备好各种 API，Claude 很快就能交付一个质量相当不错的结果。</p> <p>指定好 React + Tailwind + Shadcn 的技术栈，再配合上 Shadcn 提供的 Skill，Claude 在 Coding 上的确非常顶。整个过程中最大的瓶颈其实是自己，写需求的速度赶不上 AI 写代码的速度，最后还是搞得自己非常累 😅</p> <p>不过这也算不上是问题，真正的问题其实发生在一段时间之后。随着功能不断推进，界面设计的质量开始有些不太可控了。组件错用，样式不统一，交互流程前后不一致——这些问题开始频繁冒出来。</p> <p>我用的已经是 Shadcn 了，组件库的文档也给了 AI，为什么还是管不住？</p> <h2 id="问题出在哪ai-coding-的一致性为什么难以保证">问题出在哪：AI Coding 的一致性为什么难以保证</h2> <p>拿下面这张图来举个例子。这是我在同一个项目下、不同阶段开发的两个功能界面。</p> <p><img src="ai-coding-ui-inconsistency.png" alt="Claude Code 在同一项目不同阶段产出的两个界面，菜单、Tab、输入框样式出现明显不一致"></p>