使用 Claude 进行设计:从 Figma 转向 AI 驱动的原型设计

AI 驱动的原型设计取代了静态模型

直接使用 Claude 等 LLM 在代码中进行设计,允许设计师创建功能性原型,这些原型可以作为“活的”规范,从而消除了对静态 Figma 模型的需求和大量的文档工作。这种转变将设计流程从一系列的交付环节(规范文档、线框图和提案)转变为在实际代码库中进行快速、迭代式开发的循环。

在 Jane Street,这种工作流涉及向 Claude 描述问题和提案,在编辑器中实现基本功能,快速迭代 UI 和 UX,并将更改推送到开发环境以获取用户反馈。这种方法确保了最终提交的功能表现得完全符合设计师的预期,从而消除了创建 Figma 组件的辅助性工作。

对设计速度和可行性的影响

直接在代码库中构建可运行的概念验证,使设计师能够验证那些如果向工程团队提出请求可能会过于冒险或耗时的想法。

代码优先设计的关键优势

  • 无限迭代: LLM 为频繁、细微地调整文案、键盘快捷键和 UI 元素提供了一个低摩擦的环境,而无需经历设计与工程交付环节中典型的往复沟通。
  • 立即可行性测试: 设计师可以在提出提案之前证明某个功能是可能的,从而降低了在不可行的想法上浪费工程资源的风险。
  • 直接改进产出物: 精力被用于改进实际的产品,而不是创建随后必须转换为代码的中间表示(模型)

应对“完全成熟”的功能问题

这种工作流的一个重大挑战是,审查者会收到一个功能完整的实现,这可能会抑制协作式设计,并使审查过程感觉更像是代码审计,而不是创意合作伙伴关系。

为了缓解这一点,Jane Street 的设计师将这些原型视为“活的提案文档”。代码被视为是可丢弃的,审查者的主要角色是针对设计和用户体验提供反馈。一旦设计得到验证,审查者通常会接手该想法并将其在独立的功能中实现,以确保生产级别的代码质量。

技术约束与创意风险

虽然 AI 驱动的原型设计加速了“如何实现”的过程,但对于“实现什么”也存在担忧。存在一种风险,即设计师可能会陷入迭代式思维,受限于他们认为 LLM 可以产出的内容,从而可能错过在纸笔或 Figma 等流体媒介中更容易实现的更激进、更具创意的飞跃。

此外,能够在复杂的、小众的语言——例如 Jane Street 使用的 OCaml 和 Bonsai 框架——中进行原型设计,是这一转变的主要驱动力。LLM 降低了设计师在技术上为他们可能无法手动掌握的代码库做出贡献的门槛。

社区观点与反论点

行业从业者就从设计工具向 AI 代码生成的转变提出了几点看法:

"写好的规范文档正在减少,取而代之的是这些可运行的原型,而现在又增加了一个额外的认知负担,即阅读代码并试图确定哪些是预期的更改,哪些是需要丢弃的冗余内容。"

其他设计师和工程师指出,虽然 AI 可以快速生成第一个版本,但它通常遵循当代 Web 的陈规套路,可能缺乏手工设计所具有的高保真打磨或非传统的创意。

一些人认为,Figma 仍然在协作和设定精确约束(例如屏幕尺寸和响应式设计)方面具有优势,这对于移动端开发至关重要。

此外,一些观察者建议,这种趋势代表了向“会写代码的设计师”时代的回归,但由 LLM 充当翻译器,允许设计师在不需要成为底层语言专家的情况下塑造软件。

Sources