我是一个工程师，三个月前还从未接触过UI/UX设计。最终，我搭建了一个用于设计的智能体框架，这使我能够端到端地交付设计。

智能体正在改变一个人所能覆盖的领域。我一直在推动自己走向通才领域，学习以前无法胜任的工作领域。设计是其中最大的一块。像素、间距、排版、色彩。这些元素能让人们在阅读一个字之前就信任你的产品。

我从未掌握过这方面的任何技能。所以我搭建了一个设计框架：三层结构，让我获得真正的设计能力，而无需成为一名设计师。

以下是其中的内容。

技能是你安装到AI智能体中的指令文件，无论是Claude Code、Cursor、Codex还是其他工具。它们将别人的设计专业知识转移到你的工作流程中。你基本上是在借用经验丰富的设计师的品味。

Impeccable (@pbakaus) 这是我最常用的技能，由jQuery UI的原始创建者构建。它包含20多个命令：/audit、/polish、/animate、/typeset、/arrange。它能捕捉那些让AI生成的UI看起来明显是AI生成的反模式：过度使用的字体、彩色背景上的灰色文字、纯黑色、嵌套卡片。

/delight 是我目前最喜欢的命令。我经常使用它，每次它都会引入一些让我惊叹的东西，并提升产品的整体感觉。这个命令几乎在一夜之间改变了我作品的外观。

Emil Kowalski的设计工程师技能 (@emilkowalski ) Emil是Linear的设计工程师，之前在Vercel工作，他创建了Sonner和Vaul（两者每周npm下载量合计超过1500万）。他的技能编码了他对动画、UI润色以及大多数人忽略的小细节的思考方式。

我使用免费版本来暂时借用Emil的思维方式，并偶尔将他的思考应用到我的设计工作中。完整版附带他的animations.dev课程。

界面设计 (@Dammyjay93) 这个技能解决了AI辅助设计中最烦人的问题：你的智能体在会话之间会忘记每一个设计决策。这个插件将你的规范（间距网格、调色板、深度策略、组件模式）存储在一个持久的system.md文件中，该文件会自动加载。

UI技能 (@ibelick) 由Julien Thibeaut创建，他也是motion-primitives的构建者。包含15个开源技能，涵盖基础UI、可访问性、动效性能和元数据。为广泛覆盖提供了坚实的基础。我不像使用Impeccable那样频繁地使用它，但在需要时它就在那里。

我也称这些为智能体外壳。它们是本身没有内置智能体的设计界面。它们使用你的智能体。Claude Code、Codex，无论你在本地运行什么。

画布是外壳；你的智能体是内核。

Paper (@paper) 这是我最近更常使用的一个。画布基于真实的HTML和CSS构建，而不是专有格式。你设计的就是实际的代码。没有转换层，没有交接。

它通过MCP工具暴露了完整的读写权限。由于不需要格式转换，它可以与本地智能体开箱即用。

大多数时候，我使用Paper进行设计系统、设计令牌和页面设计迭代，然后将其作为事实来源和设计参考，与产品构建并行。Paper有一个免费层级，但MCP调用配额有限。

Pencil (@tomkrcha) 采用了不同的方法。它使用基于JSON的.pen格式，这种格式可以通过Git进行差异比较，并且可以通过MCP由智能体操作。我的设计文件存放在我的代码仓库中，像代码一样进行版本控制。

Pencil还有一个群组模式，我可以同时启动多个智能体（最多六个）在我的画布上工作：一个处理排版，另一个处理布局，第三个传播设计系统。第一次看到智能体群组在我的画布上可视化工作时，我感到非常震撼。

Pencil目前是免费的，我定期同时使用Pencil和Paper。

技能赋予我专业知识。画布为我提供了操作界面。但我仍然需要训练我的眼光，在我要求智能体制作之前，知道什么是好的设计。

Variant (@variantui) 输入一个想法，滚动浏览无穷无尽且不重复的设计诠释。其突出特点是样式提取器：你将其指向任何设计，它会吸收视觉DNA（调色板、排版节奏、空间密度）并将其转移到另一个设计上。

我每天花大约20分钟只是滚动浏览它。这已经成为我在进行任何设计工作之前预热眼光的常规部分。

但Variant对我来说不仅仅是灵感来源。我从社区中挑选我喜欢的东西，提示它生成变体，探索不同的方向，当我找到喜欢的东西时，我可以复制代码，导出为React，或者复制带有HTML引用的提示，并直接交给我的编码智能体进行实现。

从那里，我提取令牌或组件，并开始构建更多的视图和页面。这是一个从灵感到实际产品之间异常顺畅的桥梁。

Mobbin (@mobbin) 和 Awwwards (@awwwards) 这些在设计师界早已闻名。我用它们来吸收最优秀、最精选的设计作品，并从中学习品味。

Mobbin涵盖移动应用和网站。当我需要了解顶级应用如何处理引导、设置或结账流程时，我就会去那里。他们最近发布了一个Figma插件，可以让你直接拉取参考，不过我不使用Figma（不知道如何使用），也没有测试过它。

Awwwards是经过评审评分的，涵盖了网络工艺的前沿。他们还举办会议并运营一个学院。

Cosmos (@thecosmos) 这是我收集所有灵感和想法，并探索他人收藏的地方。网页设计、室内设计、排版、摄影、建筑，任何吸引我眼球的东西。

我不断通过他们的十六进制颜色搜索甚至模糊描述来发现新事物。它以仍然让我惊讶的方式找到我正在寻找的东西。我用它来构建视觉参考集群，这些集群慢慢塑造了我对设计的思考方式。

三层结构。技能提供专业知识。画布为智能体提供工作界面。灵感用于训练审美眼光。

我不是设计师。我没有多年训练出来的直觉，我的品味仍在发展中。我每天都在学习。但我解除了自己的障碍。我从完全不会做设计，到每周都能交付设计，并且对自己产出的东西感到满意。三个月前，这一切都还不存在。

你不需要成为一名设计师。你需要的是合适的框架。