跨国深谈← 返回←别让 AI 默认审美毁了你的产品:Paper 如何用 HTML 重新定义设计工具

别让 AI 默认审美毁了你的产品:Paper 如何用 HTML 重新定义设计工具

关联

人物 Stephen Haney

公司 Paper · Cursor · Claude Code · Figma · Conductor

概念 智能体 · MCP 服务器 · 代码即真相来源 · 策展式设计 · HTML · CSS · Paper Snapshot · 着色器 · Paper Mono · React

你一眼就能认出那种「AI 味」的网站:超粗体的大标题、铺天盖地的紫色渐变、为了凑数堆砌的卡片和图标——它们看起来像是用 vibe coding(全凭感觉用自然语言让 AI 写代码的做法)随手糊出来的。说这话的人是 Stephen Haney,Paper 的创始人。

在他看来,如果你直接把模型吐出来的设计上线,你的产品就会沦为百万个平庸项目中的一个。过去 10 年、20 年里所有伟大的公司,几乎都有着卓越的设计 。

这一集 YC 的对谈里,身为连续创业者的 Stephen 讲了三件事:Paper 作为一款「智能体原生(agent-native)」设计工具到底有什么不一样,为什么它敢用 HTML 和 CSS 直接当渲染引擎,又是怎么跟 Cursor、Claude Code 这些编程智能体无缝打通,让设计师在画布上画完就能直接变成代码、甚至抓取线上网站做秒级改版的。中后段,他拿着 Paper 现场改造了几个带有浓重「AI 味」的真实网站,并分享了他总结的「如何把设计从 AI 手里抢回来」的排版心法。最后他回答了一个直击灵魂的问题:既然模型越来越有品味了,设计师到底会不会被取代?

为什么不用自定义渲染引擎,而是直接拿 HTML 当画布

想要理解 Paper,得先从「智能体原生」这个概念说起。历史上,像 Figma 或 Sketch(都是知名的视觉设计工具)这类软件,底层都用的是各自的自定义渲染引擎。

这对人类设计师来说体验很好,因为可以不受约束地自由画图;但对 AI 智能体来说,这就成了一堵高墙——它们很难理解那种专有的数据格式,结果就是生成同样一张图,要消耗多得多的 token(大语言模型处理信息的最小计费单位),速度更慢,准确率也更低 。Paper 的做法截然不同:它直接用最基础的 HTML 和 CSS 作为实际的渲染引擎 。

这意味着当设计师在画布上操作时,底层生成的其实就是真实的网页代码。当你让一个 AI 智能体去处理一个 Paper 文件时,它实际上只是在读取 CSS,而智能体对 CSS 简直是了如指掌 。这层「不翻译、直读」的设定,不仅省下了海量的 token,还大大减少了 AI 在格式转换中产生的「幻觉」。

除了画图,Paper 还干了两件很刷存在感的事。一是做了一个完全开源的着色器库(用 WebGL 技术渲染的视觉效果动画,常用于做高级感的背景或加载状态),让设计师不用懂代码就能调出带有极强复古感或未来感的动态视觉。

YC 的设计负责人甚至用它给被录取的创业者做了带名字动画的录取通知,极具传播度 。二是他们正在发布一款名为 Paper Mono 的等宽字体,因为他们发现市面上大多数等宽字体都是给程序员在终端里看代码用的,缺乏品牌感,他们想要一款既能写代码又能做品牌营销的全能字体 。有趣的是,Stephen 把做开源着色器库和造字体当成了公司的「营销预算」——与其花钱买广告,不如给设计社区做点真正有用的好东西 。

工具变了,人怎么办?这正是下一个话题:打通智能体栈

说完了 Paper 为什么长这样,接下来是它怎么跟当下的 AI 编程工具配合的。2025 年底随着 Claude Code(一款可以直接在终端里写代码的 AI 智能体)的爆火,Stephen 发现原本离终端很远的设计师,竟然也开始学起了 GitHub(代码托管平台),跟开发者抢着用命令行 。敏锐捕捉到这个趋势后,Paper 迅速推出了桌面版,并内置了一个 MCP 服务器(一种让大语言模型和外部软件互通指令的标准接口)。

有了这个接口,Paper 就能和 Cursor(主打 AI 辅助编程的代码编辑器)、Claude Code 以及 Conductor(一款整合了代码编写和合并发布功能的应用)等工具联动,组成了一套全新的「智能体工作栈」。在这个新栈里,Paper 成了人类和 AI 沟通的「可视化界面」:有时候用自然语言给 AI 下指令并不精准,直接在画布上拖拽、绘画反而快得多 。

主持人敏锐地指出,过去设计到开发的交接一直有个致命痛点:设计师画完交给开发者,开发写出来的东西往往变了味,或者代码后来更新了,设计稿却没同步,最后根本搞不清哪个才是唯一的真相来源。而在这种新工作流下,代码本身就是唯一的真相来源,设计工具不再是孤立的一座岛,而是彻底融入了整个开发堆栈 。

更夸张的是,有的人甚至会在睡前给画布留下一堆意见,然后启动智能体让它跑一整夜,生成几百个排版变体。第二天早上醒来,人要做的只是像策展人一样,挑出满意的方案组合起来 。一种全新的「策展式设计流程」正在诞生。

光有空壳不行,核心还是看怎么落地实操:识别并清除 AI 的审美破绽

了解了这套工作流,接下来的演示就非常硬核了。Stephen 直接拉出几个用户提交的真实网站,现场诊断并改造它们。

第一个是一个叫 Legion Health 的在线精神医疗网站。Stephen 一针见血:我甚至不敢信任这个品牌,因为它的对齐和排版太缺乏打磨,而做医疗首先得建立信任 。

更妙的是,他还顺手展示了一个叫 Paper Snapshot 的功能:可以直接把线上的实时网页抓取进画布,变成可以随意编辑的图层,而不是一张死板的截图 。他当场让接入的智能体(GPT 5.5 模型)瞬间生成了三个视觉冲击力更强的排版变体供挑选。

当被问到到底该怎么识别和摆脱那股「AI 生成的廉价感」时,Stephen 掏出了他压箱底的排版心法,总结下来极其反直觉:第一,模型特别喜欢滥用加粗,把字重往回拉到尽可能细,看起来反而更有高级感;第二,模型喜欢在一张图里用七八种字号,把它强行精简到三种以内,版面立刻清爽;第三,警惕毫无意义的装饰元素,比如满屏的卡片、为了占位而加的渐变色和小图标 。他甚至总结了 AI 设计的「天启四骑士」:毫无必要的浅色/深色模式切换、全大写带字间距的超小标题、带多余小图标的徽章,以及被滥用的紫色渐变——遇到这些东西,最正确的做法就是直接删掉 。

第二个案例是一个面向建筑重工行业的运营网站 Cytex,Stephen 现场指示 Cursor 里的 Composer 2.5 模型(一款在精确度上表现极佳的模型):「清理这个框架,最多用三种字号,而且不准加粗」。短短几秒后,改完的版面看起来确实更严肃、更值得托付重型机械业务了 。

第三个是个跨境支付的网站 Mereda,面对一个热情过头但略显杂乱的支付页面,Stephen 展示了如何用 AI 先建立一个专业、可信的基础底子,然后再由人类设计师手动介入,把原本那种狂野的国际化活力感一点点拉回来。这正是 Paper 的核心价值所在:它始终是一个人类主导的设计工具,你既能让 AI 帮你加速,也能随时伸手进去精修每一个细节 。

既然模型越来越聪明,设计师到底会不会失业?

【背景】对谈中 Stephen 多次提到 Figma 和 Sketch,这两款是目前行业内最主流的传统视觉设计软件,底层均采用自定义渲染引擎。

聊完实操,话题自然转向了未来。面对主持人「智能体到底能不能学会人类的品味」的追问,Stephen 的回答显得相当保守。

他承认,像 Fable 这样的新一代模型,已经在一些细微的战术层面(比如字母间距)变得更有深思熟虑的感觉了 。但他坚信模型无法替代人类,因为设计的本质不仅仅是产出最终的像素,而是在一个组织内部做决策、平衡各方利益相关者、深入探索问题空间 。他预测,模型在战术上会越来越强,但这反而凸显了人类在制定更高阶产品策略时的不可替代性。

有趣的是,尽管做出了这样一款深度捆绑 AI 的工具,Paper 内部的工程实践却显得有些「古典」。他们团队只有 12 个人,极度重视代码质量——每一行代码仍然需要多个人类工程师亲自阅读审查 。

原因很简单:设计工具对性能(他们需要做到 120 帧每秒的流畅度)和多维度系统的精度要求极高,目前的 AI 编码智能体还达不到这种严苛标准 。他们把这种模式称为「用智能体加速精英小队」,而不是盲目追求不用人类看代码的极致速度。而在其他容错率高的领域(比如营销网站),他们则放手让品牌设计师用 AI 搞定了全部代码 。

本集带走

最后收个尾,这一集值得带走的是三句话。第一,别被工具的格式困住。

与其让 AI 去翻译那些专有的设计文件格式,不如直接用 HTML 和 CSS 当画布,这样既省钱又准确,还能让设计工具彻底打通编程工作流,让代码成为唯一的真相来源。第二,想摆脱 AI 生成的廉价感,秘诀就是做减法。

把字重减细、把字号精简到三种以内、果断删掉紫色渐变和满屏毫无意义的装饰卡片,高级感往往就藏在克制里。第三,即使模型越来越聪明,设计师也不会失业。

因为设计的核心从来不是画那几个像素,而是在组织内部做决策、定义产品价值。与其追求让 AI 全自动写代码,不如把人省下来去做这些真正需要品味和判断的事,让精英小队配上 AI 的速度,去打磨真正卓越的产品。

结果证明,如果你为人类构建了很棒的交接,你同时也为智能体构建了很棒的交接,因为智能体理解 HTML 和 CSS,而且这些在它们的训练数据中。
It turns out if you build a great handoff for humans, you’ve also built a great handoff for agents because agents understand HTML and CSS and it’s in their training data.
—— Stephen Haney · [03:35]

说实话,我们对着色器的思考方式是我们的营销预算。
To be honest, the way we think about the shaders is this is our marketing budget.
—— Stephen Haney · [10:20]

与其购买广告,不如让我们构建一种字体。
Instead of buying an ad, let’s build a font.
—— Stephen Haney · [10:55]

而且我认为如果你向世界展示的形象很平庸,很难建立一家伟大的公司。
And I think it’s hard to build a great company if you have a mediocre presentation to the world.
—— Stephen Haney · [37:27]

设计的角色是你最终看到了像素,但设计在组织中的角色是决策、利益相关者、引入需求和问题空间。
The role of design is you see the pixels at the end, but the role of design in an org is decisions and stakeholders and bringing in requirements and problem space.
—— Stephen Haney · [41:51]

与你的市场保持价值一致,他们会原谅你的产品缺失的很多东西。
Being values aligned with your market, they will forgive so much about your product missing things.
—— Stephen Haney · [47:53]