> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 成为 AI 原生设计师
- URL: https://www.hubwiz.com/blog/becoming-an-ai-native-designer/
- Published: 2026-04-20T10:52:39.000Z
- Updated: 2026-04-20T10:52:39.000Z
- Description: 关于演示、隐性知识以及如何构建自己的脚手架。
- Author: admin
- Tags: INDUSTRY, DESIGN, #Import 2026-10-14 14:41

我在设计行业工作了七年。抛开用户研究和产品定义不谈，核心任务始终如一：画东西。线框图、视觉规范——交给工程团队，然后等待。

***我本质上是一个翻译者。***

将需求翻译为想法，将想法翻译为文件，然后等待别人将这些文件翻译为代码。

![原始设计工作流程](https://www.hubwiz.com/blog/content/images/2026/04/1-EZizLkpSs6-FlpCJ4u8vmg.png)

原始设计工作流程

这种情况在 2024 年发生了变化。

我现在的主要工具是 Claude Code、Figma Make 和 LLM。它们从根本上重建了我的工作方式。

> 我用可运行的演示替代了静态交付物和 Figma 原型流程。我不再翻遍组件库，而是将设计系统连接到 Claude Code，让它生成界面。我在 ChatGPT 项目中运行研究和综合分析。

在这个过程中，我不再是翻译者。 **我更像是一个指挥家：**发出指令，将我的意图和经验转化为 AI 可以执行的任务，然后运用资深设计师的判断力来评估返回的结果。对于最关键的部分，我仍然亲自上手。

七年的经验并没有过时。它们只是发生了转移。

技能是一样的，只是应用的地方不同了。

![从设计到构建](https://www.hubwiz.com/blog/content/images/2026/04/1-gzinTMkXTNrapK8K0pKfzg.png)

## 1、在代码中培养"设计感"

设计师一直有一种特殊的挫败感：你能想象出来，但无法构建它。或者更准确地说：你产出的东西和实际运行的东西从来都不完全一样。

![AI UX 设计工具全景](https://www.hubwiz.com/blog/content/images/2026/04/1-ILlUBQ1_8GKQNrv8vCeIZA.png)

AI UX 设计工具全景

Figma 是一个很好的工具。它会让你慢下来，迫使你思考，因为它是一个中间层。你在那里培养的直觉是***空间和视觉的***——你通过拖动形状来感知变化。这本质上与在纸上素描一样。

在真正的产品中，设计感存在于***系统和时间***中：当真实数据流入时界面的行为方式、动画的缓动效果、一个交互与下一个交互之间的逻辑链条。这些是完全不同的能力。

*那么如何在代码中培养设计感呢？*

### 1.1 将隐性知识外化 ↘

AI 编程极大地降低了初稿的成本。现在的难点在于生成高质量的第一版——然后在此基础上有效地迭代。这实际测试的是你能否将隐性知识传递给 AI。

AI 理解世界的显性知识：你可以用 Google 搜索到的东西、已经写成的文档、已经被命名和结构化的概念。但你带到工作中的大部分知识是隐性的——通过多年实践积累而来。它更像是一个个人知识图谱：其中一些是公开的，但很多是独属于你的。你决策背后隐藏的推理。告诉你某件事为什么正确的直觉，却无法完全解释清楚。如果你不能传递这些，AI 的输出就会很泛泛。

3C 框架可以帮助你：**Context（上下文）、Components（组件）、Criteria（标准）**。

![AI 的 3C 框架](https://www.hubwiz.com/blog/content/images/2026/04/1-KGm_TmWUemD6WmFQeeEPlg.png)

> **Context 是 AI 能看到的一切。**

你需要传递项目的完整背景——你在构建什么、为谁构建、存在哪些约束、已经做出了哪些决策。对于正在进行的项目，我会在项目文件夹中保留一个上下文文件，AI 每次会话都会读取它，我会在项目演进时更新它。

> **Components 是你交给 AI 完成任务的工具。**

LLM 内置了推理和检索能力——但对于专业工作（代码审查、前端设计、单元测试），它们需要更具体的脚手架。这时候你需要引入正确的 Skills 或配置 MCP。关键点：不要假设 AI 已经拥有完成任务所需的一切。你必须亲手把工具交给它。

> **Criteria 是你定义输出质量的方式。**

这不仅仅是告诉 AI 要生成什么——同样重要的是告诉它*不要*生成什么。负面约束往往比正面指令更有效。为格式、风格和准确性设定具体标准，并建立一个让 AI 自我评估的机制。生成 UI 后，我会让它检查：是否默认使用了蓝紫色？是否选择了 Arial？快速自查是否产生了 AI 生成物的通病。

有了这三层，你脑中的判断——那些你很难大声说出来的——就可以被清晰地传递。输出质量会有明显的变化。

### 1.2 自己动手运行它 ↘

看别人做事和自己动手完全是不同的体验。现在有无数的 AI 教程，但真正学习的方法只有一个：动手构建一些东西。

![我的 AI 原型制作三步指南](https://www.hubwiz.com/blog/content/images/2026/04/1-Xo0LwBtSyHklYScbdNGgkg.png)

我的 AI 原型制作三步指南

具体来说：让 AI 生成项目架构，观察它如何组织文件和模块。让它编写测试，观察它如何处理边界情况。沿着错误信息追踪调用栈，直到你理解它实际在说什么。在你端到端地跑完一次之后，你会发现你之前的很多技术恐惧都是想象出来的。

更重要的是——你只能通过做具体的事情来形成自己的通用规则。例如：当一个 agent 围绕同一个 bug 打转而无法突破时，你可以引入另一个 AI 获得新的视角，从而跳出失败循环。这种判断力可以从他人那里学到，但主要还是来自积累。

在体验式编码[五个产品](https://www.producthunt.com/@sunlinsen?ref=hubwiz.com)之后，你会开始感受到一种微弱的"材料感"。它本质上就是建立在状态之上的肌肉记忆。

## 2、重新设计设计流程

Jenny Wen，Claude 的设计负责人，在 [Lenny's Podcast](https://youtu.be/eh8bcBIAAFo?si=PN3CVwM%5Fn2SPiRlk&ref=hubwiz.com) 上论证说，传统的设计流程——研究、发散、收敛、交付——已经死了。具体来说：

- 工程速度已经超越了线性设计工作流
- 设计师不再有时间"痴迷于"静态视觉规范
- 长期的"设计愿景"已经变得不切实际

从这个角度看，设计流程的消亡似乎是被*工程执行能力的急剧扩展*所迫使的——其中夹杂着一些科技行业的夸张修辞。

传统的发散-收敛流程实际上并没有失败。

问题在于它假设每一步在进入下一步之前都需要大量的前期准备，因为制作模型或演示的成本很高。这个假设已经不再成立了。

### 2.1 直觉 → 演示 → 不可阻挡 ↘

过去，严格的前期研究是必要的，因为构建可验证的东西成本很高。现在这个成本接近于零。整个游戏规则已经改变了。

有经验的产品思考者可以依靠直觉生成一个演示，然后用那个演示来压力测试他们的判断——而不是在白板前围绕某个方向是否正确反复讨论。

![必然性的光环](https://www.hubwiz.com/blog/content/images/2026/04/1-ptU4lsdX4NJ_FQ6t9BYpWA.png)

更关键的是，在真实浏览器中运行的演示具有一种特殊的说服力。Cleo，一位前 Facebook 设计师，将其称为"必然性的光环"。当一个设计概念不再是静态视觉规范，而是用真实代码构建并实际运行的东西时，它就获得了一种引力。在这种情况下，团队很难就是否推进某件事进行争论——因为它几乎已经存在了。

自然的反应是：我们可能可以发布这个。

静态文件做不到这一点。只有可运行的原型才有这种分量。

### 2.2 回归第一性原理 ↘

在 AI 出现之前，大多数设计师对软件在更深层次上如何工作缺乏真正的接触。我们主要在抽象层操作：视觉、交互、信息架构。

*那是一个门槛差距。*

仅仅是把设计做对和让原型跑起来就消耗了大部分可用精力。没有空间去深入。

AI 改变的正是这个比例。它将"如何构建它"的成本压缩到接近零，从而将时间和认知资源还给了设计师。我们现在可以把更多精力放在更根本的问题上：这个东西到底应该*是什么*？

![TikTok、Notion、Cursor](https://www.hubwiz.com/blog/content/images/2026/04/1-DVzEKpc2TXsrEEG4bubcsg.png)

当你开始认真地问"它是什么"时，第一性原理思考就变得锐利了。这个问题有两个层面。

第一层是产品的核心概念——软件呈现自身的基本形式。TikTok 本质上是一个自动循环的视频列表。Notion 的核心是区块：页面和数据库。Cursor 的核心是 agent、编辑器和模型。这些概念看起来很简单。但只有看透它们，你才能找到功能之间最精简、最灵活的连接方式。

第二层：一旦你理解了基础，你就可以开始***推导***一个产品理想状态下应该是什么样子，从内而外地生长逻辑，而不是对照竞争对手勾选功能清单，在别人的地图里做选择。

这种理解为设计师提供了真正的空间，去探索一个产品在外部极限处能变成什么。

## 3、构建你自己的脚手架

每个设计师都会遇到工作流有摩擦力的时候，工具不太合适的时候。过去的选择是：忍受它，或者投入更多手工劳动。等待新工具出现是一种奢侈。大多数时候，你只能凑合。

现在，设计师可以自举自己的工具——围绕特定任务构建定制化的脚手架。

![在 Figma Make 中构建的图标库](https://www.hubwiz.com/blog/content/images/2026/04/1-GR38j3gA-YbQ4YauVKt6iw.png)

我在 Figma Make 中构建的图标库，提示词如下

我自己的例子：找图标过去意味着每次都要在网上到处搜寻。典型的重复性消耗。

我最终使用 Figma Make 构建了[一个专门的图标库](https://savvy-femur-73451470.figma.site/?ref=hubwiz.com)，汇集了来自网络的开放源代码图标集，具有颜色、粗细和样式控制，以及直接导出为 PNG 或 SVG 的功能。过去每次都要发生的事情现在只发生了一次。这是最小单位的脚手架。但它真正消除了那一步的摩擦。

```
Build a production-ready Icon Library documentation site.
## Tech Stack
React + TypeScript · Tailwind CSS v4 · shadcn/ui
lucide-react for UI · WCAG 2.1 AA · Mobile-first
## Core Features
1. ~100 icons in 8 categories (UI & Nav, Communication,
Media, Commerce, Social, Weather, Dev, Misc)
2. Fuzzy search + multi-select category filter
3. Size selector (12/16/24/40px) + stroke slider (1–3px)
4. Copy SVG / JSX · Download PNG / SVG per icon
5. Light + dark theme (system preference)
6. Guidelines page with specs, accessibility, code examples
## Layout
Sticky header · Sidebar w/ category counts · Control bar
Responsive icon grid (1→2→4 cols) · Footer v1.0.0
## Icon Data Shape
{ id, name, category, tags[], svg (24×24 viewBox) }
## Deliver
Static site · All features working · Clean, typed code
No backend needed · Easy to extend with more icons

```

[Ryo Lu](https://x.com/ryolu%5F?ref=hubwiz.com)，Cursor 的设计负责人，在更大规模上做了类似的事情。他提到设计师经常被复杂的后端服务器和生产环境所阻碍——所以他为自己构建了 [Baby Cursor](https://x.com/ryolu%5F/status/1957967763089346567?ref=hubwiz.com)：一个高度简化、精简的沙盒（微型环境），让他能快速验证想法，而不受那些约束的干扰。

可复用的原则：当你发现工作流中某一步反复消耗精力且本质上是重复性的，那就是构建工具的信号。花一次性成本把它设好，之后节省下来的所有时间都可以花在判断和创造上。

这过去需要知道如何编程。那个障碍已经不存在了。

写到此处，我意识到我一直在用不同的方式说着同一件事：

> *AI 并没有让设计师变得不那么重要。它让设计师是谁这个问题变得比以往任何时候都更重要。*

任何人都可以使用这些工具。你用它们构建什么，取决于你是谁。

---

原文链接: [Becoming an AI-native designer](https://freedium-mirror.cfd/https://medium.com/user-experience-design-1/becoming-an-ai-native-designer-828365b71109?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处