ARTICLE · 1073130
我做了一个工具,让AI写出来的UI界面不再千篇一律
我做了一个工具,让AI写出来的UI界面不再千篇一律先说痛点 用 AI 写代码越来越快了。一句话就能生成一个落地页、一个后台面板，甚至一个完整的 iOS App。 但有一个问题始终没解决：生成出来的界面，长得都一样。 • 同样的灰白色调 • 同样的 Inter / SF Pro • 同样的大圆角卡片 • 同样的蓝色主按钮 你让 Cursor 写一个 SaaS 落地页，它是这样的。你让 Claude 写一个笔记应用，它还是这样的。你和隔壁桌的人同时用 Codex 开项目，最后的结果几乎分不出谁是谁。 不是 AI 不会写 UI，而是它缺少一份设计指令。 
Driftless 是什么 Driftless 是一个免费的可视化设计系统搭建器。 你用它选一套风格——比如「暖纸上的墨迹」或者「画廊灯光下的锌灰」——然后在编辑器里拖几个组件，调调颜色和字体，最后点导出。 它会给你一份 DESIGN.md。这份文件按照 Google 的开放规范写成，Cursor、Claude Code、Codex、Stitch、Windsurf 都认。之后你在 IDE 里 @DESIGN.md，AI 就能按照你的品牌、配色、字体、圆角、间距来写代码了。 你告诉 AI「怎么写」，而不只是「写什么」。 网址：driftless.allworkin.ai 
二十二套官方风格，不是调色板 每套风格都不是简单的配色方案。它包含：
你可以单击一张风格卡片，整套立刻换上。也可以只借一套风格的颜色，或者只借字体——互相混搭。 
部分风格一览： • 纸感 Paper — 暖纸上的墨迹，像一本摊开的笔记本 • 高级留白 Premium — 画廊灯光下的锌灰与一枚哑光点缀 • 便当格 Bento — 不对称格子里装着模块，像一份精心分格的便当 • 新野兽派 Neobrutalism — 硬边、硬阴影、一记明黄，海报贴在墙上 • 液态玻璃 Liquid Glass — Apple 式折射，背景在玻璃后面流动 • 电影感商业 Cinematic Commerce — 深色舞台、电影调色 • 黏土 Claymorphism — 软凸起的黏土手感 • ……一共 22 套，还在持续增加。 
三步就能用 第一步：选风格 在风格画廊或编辑器里选一套你喜欢的风格。单击就换上。 第二步：调整和搭配 在编辑器里改颜色、换字体、拖拽组件。预览区会实时更新，支持 iOS 和 Web 双设备切换。 第三步：导出，交给 AI 点导出，选 DESIGN.md、tokens.json、Tailwind 配置、SwiftUI 扩展，或者打包一个 ZIP。把文件丢进你的项目，之后每次让 AI 写代码，它都跟着你的风格走。 
你也可以跳过编辑器：直接在风格详情页复制 DESIGN.md 代码块，或者跑一行命令： 这会把 premium 风格的 DESIGN.md 和 tokens 文件写到你的项目根目录。 给五个 AI Agent 写了使用指南 不同的 Agent 读 DESIGN.md 的方式不太一样。我为它们各写了一份指南： • Cursor — 编辑器 Rules 里引用 @DESIGN.md • Claude Code — CLAUDE.md 或命令行 --style • Codex — 项目根目录放 AGENTS.md，引用 DESIGN.md 的路径 • Stitch — 上传 DESIGN.md 作为 knowledge • Windsurf — Rules 面板引用 细节在站点上：driftless.allworkin.ai/zh/agents 不只是编辑器 除了核心的编辑 → 导出流程，Driftless 还做了一些对开发者有用的事： 1组件对照 同一个按钮，在 22 套风格下分别长什么样？组件对照页 把所有风格的同一块组件并排，帮你直觉地感受风格差异。 2风格对照 玻璃 vs 液态玻璃、纸感 vs 高级留白——对照页 把两套风格的完整页面摆在一起，帮你做选择。 3分享 在编辑器里点分享，会弹出一个预览框，可以发到微信、微博、X、Telegram、WhatsApp，也可以复制一条短链接。 如果你没改过风格，链接只有几个字符，比如 driftless.allworkin.ai/zh/s#premium~web。 
4MCP 服务器 如果你的 Agent 支持 MCP（Model Context Protocol），Driftless 有一个公开的 MCP server。Agent 可以在运行时查询和获取风格，不需要你手动复制文件。 5社区投稿 设计了一套自己满意的风格？在编辑器里点「投稿」，会预填一个 GitHub issue。审核通过后会进入公开风格库。 几个设计决策 做这个项目的过程中，有几个决策值得说一下： 1打开就能用，不用先注册 你手工编辑的项目存在浏览器 localStorage 里，导出在浏览器内打包，分享用 URL hash，这些都不会上传到我们的服务器。所以选风格、调参数、导出文件，这一整条流程不用注册、不用登录。 2导出免费，而且写死了免费 复制 DESIGN.md、下载 ZIP、单文件导出、公共分享——这些永远免费。 3DESIGN.md 对齐 Google 规范 Google 在 2025 年发布了 DESIGN.md 的开放规范。Driftless 导出的文件严格跟随这个格式：YAML front matter + 8 个标准节（Colors、Typography、Spacing、Elevation、Motion、Iconography、Overview、Components）。 这意味着你导出的文件，不仅 Cursor 能读，任何支持该规范的工具都能读。 
技术栈（给感兴趣的人） • Next.js 16 App Router + output: 'export' 纯静态部署在 Vercel • React 19 + TypeScript + Tailwind v4 • Zustand 做状态管理，zundo 做撤销重做 • dnd-kit 做拖拽 • next-intl 做中英双语 • Three.js 只用来给 liquid-glass 做背景折射层，按需懒加载 • Recharts 做组件里的图表预览 整个站是纯静态导出，没有 API route，没有数据库（至少现在没有）。 试一下 打开 driftless.allworkin.ai，选一套你喜欢的风格，导出 DESIGN.md，丢进你的项目。 下次你让 AI 写代码的时候，它就知道该用什么颜色、什么字体、什么圆角了。 你写的东西，终于不再长得跟别人一样了。 
更多 Cursor、Codex、Claude Code、Skills、MCP 相关的教程、配置和踩坑记录，持续更新中。 关注公众号 未来的回响，看深度解读与版本追踪。加入知识星球 AI工具实战派，获取精校版文章 + 完整命令、配置文件与扩展案例。
22 套风格、一键生成 DESIGN.md，Cursor / Claude Code / Codex 直接能读。免费、纯前端、不用注册、打开就用。
| 内容 | 说明 |
如果 22 套还不够挑，我另外整理了一份「DESIGN.md 风格参考包」：1738 条风格，覆盖品牌官网、设计系统、React Bits、21st.dev、Godly 等来源。
每条都有一张截图，外加一份按 Google DESIGN.md 格式写的 DESIGN.md，色板、字体、布局、组件和 Do's & Don'ts 都在里面。
解压后用浏览器打开 index.html，可以按类型、场景、材质和视觉评分筛选，也可以直接搜索。
看中哪条，把 DESIGN.md 丢进项目根目录，让 Cursor、Claude Code 或 Codex 照着写。
它是参考素材，不是官方品牌包，适合找方向和喂给 Agent，不适合原样商用。
「AI工具实战派」知识星球用户可以免费领取～
npx driftless-styles add premium-END-
AI编程、AI运营、AI工具资料分享请加入知识星球
-推荐阅读-
【AI编程】
【AI设计】
【AI工具】