Design Without Designing【译】
我是一名 Engineer，直到三个月前还没碰过 UI/UX Design。最终我搭建了一套用于 Design 的 Agent Harness，这让我能够端到端（End to End）地交付 Design。
Agents 正在改变一个人能覆盖的范畴。我一直在把自己推向 Generalist 领域，去承担那些我以前无法完成的工作。Design 曾是最大的障碍：Pixels, Spacing, Typography, Color。这些是在用户阅读任何文字之前，就能让他们产生信任感的东西。
我以前完全没有这些 Skill set。所以我搭建了一套用于 Design 的 Harness：它包含三个层级，让我无需成为一名 Designer 就能拥有真正的 Design 能力。
以下是它的核心内容。
第一层：Skills（专业知识）
Skills 是你安装到 AI Agent（无论是 Claude Code, Cursor, Codex 还是其他工具）中的指令文件。它们将别人的 Design expertise 转移到你的 Workflow 中。本质上，你是在借用资深 Designers 的审美（Taste）。
Impeccable (@pbakaus) 这是我最常用的 Skill，由 jQuery UI 的原作者打造。它拥有 20 多个命令：/audit, /polish, /animate, /typeset, /arrange。它能识别出那些让 AI 生成的 UI 看起来充满“AI 味”的 Anti-patterns：过度使用的 Fonts、Gray-on-color 文本、Pure blacks 以及 Nested cards。
/delight 是我目前最喜欢的命令。我经常使用它，每次它都会引入一些令我惊艳的元素，并提升产品的整体质感。这个命令几乎一夜之间改变了我的产出质量。Emil Kowalski's Design Engineer Skill (@emilkowalski ) Emil 是 Linear 的 Design Engineer（曾就职于 Vercel），他创建了 Sonner 和 Vaul（每周 npm 下载量超过 1500 万）。他的 Skill 编码了他对 Animations, UI Polish 以及大多数人会忽略的细节的思考方式。
我使用免费版本来借用 Emil 的思维方式，并偶尔将其应用到我的 Design 工作中。完整版附带了他的 animations.dev 课程。Interface Design (@Dammyjay93) 这个工具解决了 AI 辅助 Design 中最烦人的问题：你的 Agent 在不同 Session 之间会遗忘 Design 决策。这个 Plugin 将你的 Specs（Spacing grids, Color palettes, Depth strategies, Component patterns）存储在一个持久化的 system.md 文件中，并自动加载。
UI Skills (@ibelick) 由 Julien Thibeaut 创建（他也构建了 motion-primitives）。15 个开源 Skills，涵盖了 Baseline UI, Accessibility, Motion performance 和 Metadata。为广泛的覆盖面奠定了坚实的基础。我使用它的频率没有 Impeccable 高，但在需要时它就在那里。
第二层：Agent Canvas（操作界面）
我也称之为 Agent Shells。它们是本身没有内置 Agent 的 Design surfaces。它们使用的是你的 Agents：Claude Code, Codex 或本地运行的任何工具。
Canvas 是 Shell（壳），你的 Agent 是 Kernel（核）。
Paper (@paper) 这是我近期使用频率最高的一个。Canvas 是基于真实的 HTML 和 CSS 构建的，而不是私有格式。你 Design 的内容就是实际的代码，没有 Translation layer，没有 Handoff。
它暴露了具有完全读写权限的 MCP 工具。由于不需要格式转换，它与本地 Agents 配合得非常出色。
大多数时候我将 Paper 用于 Design systems, Design tokens 和页面 Design 迭代，然后在构建产品的同时将其作为 Source of truth 和 Design reference。Paper 有一个包含有限 MCP 调用配额的免费档位。
Pencil (@tomkrcha) 采取了不同的策略。它使用基于 JSON 的 .pen 格式，是 Git-diffable 的，且可以通过 MCP 让 Agent 进行操控。我的 Design 文件存放在 Repo 中，像代码一样进行版本管理。
Pencil 还有一个 Swarm mode，我可以同时启动多个 Agents（最多 6 个）在 Canvas 上工作：一个处理 Typography，一个负责 Layout，第三个负责同步 Design system。第一次看到 Agent swarm 在 Canvas 上视觉化协作时，那种感觉非常震撼。
Pencil 目前是免费的，我经常同时使用 Pencil 和 Paper。
第三层：Inspiration and taste（审美之眼）
Skills 给我 Expertise。Canvases 给我 Surface。但我仍需要训练我的眼睛，在要求 Agent 制作之前，先知道什么是“好”。
Variant (@variantui) 输入一个想法，滚动浏览无尽的、不重复的 Design 诠释。最出色的功能是 Style Dropper：你将其指向任何 Design，它就能吸收视觉基因（Color palette, Typographic rhythm, Spatial density）并转移到另一个 Design 上。
我每天花大约 20 分钟在上面滚动浏览。这已经成为我在进行任何 Design 工作前训练眼力的一部分。
但对我来说，Variant 不仅仅是 Inspiration。我会从社区挑选喜欢的东西，提示它生成 Variants，探索不同方向。当我选中满意的作品时，我可以复制代码、导出为 React，或者拷贝带有 HTML references 的 Prompts 并直接交给我的 Coding agents 进行实现。
从那里我提取 Tokens 或 Components，并开始构建更多的 Views 和 Pages。这是从 Inspiration 到实际产品之间一段惊人顺滑的桥梁。
Mobbin (@mobbin) & Awwwards (@awwwards) 这些在 Design 界早已闻名。我用它们来吸收那些最顶尖的、经过策划的作品并学习审美。
Mobbin 覆盖了 Mobile apps 和 Websites。当我需要查看顶尖 App 如何处理 Onboarding, Settings 或 Checkout 时，就会去那里。他们最近发布了一个 Figma plugin 来让你直接提取参考，尽管我不用 Figma（也不会用）所以还没测试过。
Awwwards 是通过评委打分，覆盖了 Web craft 的前沿。他们还举办会议和学院。
Cosmos (@thecosmos) 这是我收集所有灵感和想法的地方，也在这里探索别人的 Collection。Web design, Interiors, Typography, Photography, Architecture，只要吸引我的眼球，我都会收藏。
我通过他们的十六进制颜色搜索甚至模糊的描述来不断发现新事物。它能以令我惊讶的方式找到我想要的东西。我用它来建立视觉参考集群（Clusters），这些集群慢慢塑造了我对 Design 的思考。
模式总结
三层结构。Skills 提供专业知识，Canvases 提供 Agent 工作界面，Inspiration 训练审美。
我不是 Designer。我没有经过长年累月的直觉训练，我的审美也仍在发展。我每天都在学习。但我为自己扫清了障碍。我从完全不会 Design，变成了现在每周都能交付产品，并对自己产出的东西感到满意。三个月前，这一切还不存在。
你不需要成为一名 Designer。你需要的是一套合适的 Harness。