# 无需设计的设计
**作者**: Neethan Wu
**日期**: 2026-03-20T00:17:27.000Z
**来源**: [https://x.com/neethanwu/status/2034786360356204934](https://x.com/neethanwu/status/2034786360356204934)
---

我是一名工程师,三个月前才开始接触 UI/UX 设计。最终,我搭建了一个用于设计的代理框架,这使我能够完成端到端的设计交付。
经纪人正在改变一个人能覆盖的范围。我一直在努力让自己成为通才,承担以前无法胜任的工作。设计是其中最重要的部分。像素、间距、字体、色彩——这些细节在人们阅读任何文字之前就能让他们对你的产品产生信任。
我以前根本不具备这些技能。所以我自己设计了一个设计框架:三层结构,让我拥有真正的设计能力,而无需成为一名设计师。
内容如下。
## 第一层:技能(专业知识)
技能是你安装到人工智能代理(无论是 Claude Code、Cursor、Codex 还是其他工具)中的指令文件。它们将其他人的设计专长融入到你的工作流程中。你实际上是在借鉴资深设计师的审美。
无可挑剔 (@pbakaus )
这是我最常用的技能,由 jQuery UI 的原作者开发。它包含 20 多个命令:/audit、/polish、/animate、/typeset 和 /arrange。它可以检测出那些让 AI 生成的 UI 看起来明显是 AI 生成的反模式:过度使用的字体、灰底彩色文字、纯黑色以及嵌套卡片。

/delight 是我目前最喜欢的命令。我经常使用它,每次它都能带来一些让我惊艳的功能,提升产品的整体体验。这个命令几乎在一夜之间改变了我的输出效果。
埃米尔·科瓦尔斯基的设计工程师技能 (@emilkowalski )
Emil 是 Linear 的一名设计工程师,此前曾在 Vercel 工作,Vercel 开发了 Sonner 和 Vaul(这两款应用每周在 npm 上的下载量合计超过 1500 万次)。他的技能体现了他对动画、UI 优化以及大多数人容易忽略的细节的思考方式。
我使用免费版是为了暂时借鉴埃米尔的思维方式,并偶尔将他的理念运用到我的设计工作中。完整版则包含了他的全部内容。animations.dev 课程。
界面设计 (@Dammyjay93)
这款插件解决了 AI 辅助设计中最令人头疼的问题:你的智能体会在每次会话之间忘记所有的设计决策。它会将你的设计规范(间距网格、调色板、深度策略、组件模式)存储在一个持久化的 system.md 文件中,该文件会自动加载。
UI 技能 (@ibelick)
由 Julien Thibeaut 创建,他也是 motion-primitives 的开发者。包含 15 项开源技能,涵盖基础 UI、可访问性、动态性能和元数据。为广泛的应用奠定了坚实的基础。虽然我不像使用 Impeccable 那样频繁地使用它,但它总能在我需要的时候派上用场。
## 第二层:代理画布(表面)
我也称这些为代理外壳。它们是没有内置代理的设计界面,需要使用您自己的代理,例如 Claude Code、Codex 或任何您本地运行的代理。
画布是外壳;你的代理是内核。
纸 (@纸 )
这是我最近比较常用的一个工具。它的画布是基于真正的 HTML 和 CSS 构建的,而不是专有格式。你设计的内容就是实际的代码。没有转换层,无需交接。

它提供完整的读写权限,使 MCP 工具能够正常运行。由于无需格式转换,因此可直接与本地代理良好配合使用。
我通常使用 Paper 来构建设计系统、设计令牌和页面设计迭代,然后将其作为产品开发过程中的权威参考和设计依据。Paper 提供免费套餐,但 MCP 调用次数有限。
铅笔 (@tomkrcha )
它采用了一种不同的方法。它使用基于 JSON 的 .pen 格式,这种格式可以通过 Git 进行差异比较,并且可以通过 MCP 进行代理操作。我的设计文件存放在我的代码仓库中,并像代码一样进行版本控制。

Pencil 还有一个集群模式,我可以同时启动多个代理(最多六个)在我的画布上工作:一个负责排版,一个负责布局,第三个负责传播设计系统。我第一次看到代理集群在我的画布上协同工作时,简直惊呆了。
Pencil 目前是免费的,我经常使用 Pencil 和 Paper。
## 第三层:灵感与品味(视觉)
技能赋予我专业知识,画布为我提供创作空间。但我仍然需要训练我的眼光,在能够请经纪人帮我创作之前,先懂得什么是好的作品。
变体 (@variantui )
输入你的想法,即可浏览无穷无尽、互不重复的设计方案。最突出的功能是“样式提取器”:只需将其指向任何设计,它就能吸收其视觉特征(配色方案、字体节奏、空间密度),并将其应用到另一个设计中。
我每天大约会花20分钟浏览这些内容。这已经成为我进行任何设计工作之前热身的一种方式。
但对我来说,Variant 不仅仅是灵感来源。我会从社区里挑选一些自己喜欢的东西,让它生成各种变体,探索不同的方向。当我找到满意的方案时,我可以复制代码,导出为 React 格式,或者复制包含 HTML 引用的提示信息,直接交给我的编码助手进行实现。

从那里,我提取令牌或组件,并开始构建更多视图和页面。从灵感到实际产品,这是一个出乎意料的流畅的桥梁。
莫宾 (@mobbin)&Awwwards(@awwwards )
这些在设计界早已广为人知。我通过它们来吸收最优秀、最精选的设计作品,并从中学习品味。
Mobbin 涵盖了移动应用和网站。当我需要了解顶级应用如何处理用户引导、设置或结账流程时,我都会去那里查看。他们最近发布了一个 Figma 插件,可以直接提取参考资料,但我不用 Figma(也不会用),所以还没测试过。
Awwwards 采用评审团评分制,涵盖网页设计领域的尖端技术。他们还举办会议和学院。
宇宙 (@thecosmos)
这里是我收集所有灵感和想法的地方,也是我探索他人作品集的地方。网页设计、室内设计、字体设计、摄影、建筑,任何吸引我眼球的东西。
我总能通过十六进制颜色搜索,甚至是模糊的描述,发现新的东西。它总能以令我惊讶的方式找到我想要的东西。我用它来构建视觉参考资料的集合,这些资料逐渐塑造了我对设计的思考方式。
## 模式
三层结构。提升专业技能。为经纪人提供创作素材。激发灵感,培养眼光。
我不是专业设计师。我没有多年的专业训练和直觉,我的审美也还在发展中。我每天都在学习。但我突破了瓶颈。我从完全不会设计,到现在每周都能发布作品,并且对自己的作品感到满意。三个月前,我什么都做不了。
你不需要成为设计师,你只需要合适的安全带。
## 相关链接
- [Neethan Wu](https://x.com/neethanwu)
- [@neethanwu](https://x.com/neethanwu)
- [101K](https://x.com/neethanwu/status/2034786360356204934/analytics)
- [无可挑剔](https://impeccable.style/)
- [@pbakaus](https://x.com/@pbakaus)
- [埃米尔·科瓦尔斯基的设计工程师技能](https://emilkowal.ski/skill)
- [@emilkowalski](https://x.com/@emilkowalski)
- [animations.dev](https://animations.dev/)
- [界面设计](https://interface-design.dev/)
- [@Dammyjay93](https://x.com/@Dammyjay93)
- [UI 技能](https://ui-skills.com/)
- [@ibelick](https://x.com/@ibelick)
- [@tomkrcha](https://x.com/@tomkrcha)
- [@variantui](https://x.com/@variantui)
- [@mobbin](https://x.com/@mobbin)
- [Awwwards](https://awwwards.com/)
- [@awwwards](https://x.com/@awwwards)
- [@thecosmos](https://x.com/@thecosmos)
- [升级至高级版](https://x.com/i/premium_sign_up)
- [8:17 AM · Mar 20, 2026](https://x.com/neethanwu/status/2034786360356204934)
- [101.8K Views](https://x.com/neethanwu/status/2034786360356204934/analytics)
---
*导出时间: 2026/3/22 01:15:31*