实战复盘：当 Openspec 遇上 Claude Opus —— 一次 AI 辅助 UI 重构的效率与精度博弈

在 AI 辅助编程（AI-Assisted Coding）日益普及的今天，我们一直在探索如何将大模型更深度地嵌入到前端开发的工作流中，以实现从“设计稿”到“代码”的端到端自动化。

近期，我们针对一个典型的 Web 首页轮播图重构场景 进行了一次技术验证。本次实验的核心目的是测试在引入 Openspec 协议和顶尖大模型（Claude Opus 4.5）的情况下，能否在极短时间内完成高质量的 UI 迭代。

以下是本次实验的详细记录与技术复盘。

🛠️ 技术栈与实验环境

为了验证“Vibe Coding”（即通过直觉和 AI 快速生成代码）的极限，我们搭建了如下的工具链：

从纯粹的“执行效率”来看，AI 的表现令人印象深刻：

执行耗时: 全流程仅耗时 10 分钟。对于传统开发模式，这通常需要数小时的切图、样式调整和逻辑编写。
模型消耗: 仅消耗了约 6 次 Github Copilot Premium 请求（3x 规模）。
资产产出: 自动生成了完整的工程链路文档，包括 proposal.md（提案）、design.md（设计）、以及针对不同主题和布局的 spec.md 规范文件。

单看这些指标，这似乎是一次完美的“降本增效”案例。然而，当我们深入审视最终产出的页面效果时，问题开始显现。

我们将实验过程分为“现有页面”、“期望页面”和“生成结果”三个阶段进行对比。

现有页面：典型的深色背景，传统的左文右图布局。
期望页面：带有空间感的浅色背景，包含 3D 元素，视觉风格轻盈现代。
Vibe Coding 生成结果：
- 色调失真：模型未能正确理解“浅色主题”的全局应用，背景颜色与设计稿严重不符。
- 细节残留：原有的 UI 元素（如底部的轮播圆点、两侧的切换箭头）未能被智能识别并移除或替换，导致新旧风格混杂。
- 布局僵化：虽然文字内容被替换，但整体的视觉层级和图像元素的融合度极差。

结论是：在当前案例中，应用效果一般，未能达到直接可用的交付标准。

通过分析生成的中间产物和最终代码，我们找到了导致效果偏差的核心原因：

本次实验使用的 Openspec 协议，其核心机制是将 UI 需求转化为文本描述（Proposal）。然而，目前的流程存在一个致命缺陷：UI 稿提供给 AI 时，被转化为纯文字描述的提案，丢失了图像图层中的大量细节。

AI 并没有“看”到设计稿的视觉张力，它只是在“读”关于设计稿的文字简介。这种“翻译过程”中的信息熵减，直接导致了最终代码在视觉还原度上的溃败。

在从 Proposal -> Design -> Spec -> Task 再到最终 Code 的自动化链条中，我们缺乏对 AI 理解偏差的实时纠正。一旦 AI 在第一步误解了“浅色背景”的具体色值或“3D 元素”的实现方式，这种错误就会在后续环节中被层层放大。

本次实验虽然未能完美交付，但为我们指明了后续优化 AI 编程工作流的方向：

精细化对话干预：不能单纯依赖“一键生成”。我们需要在 Proposal、Design、Spec 等文档不断细化的过程中，人为介入，对 AI 的理解偏差进行“对话式调整”。记录下花费的时间和最终效果，找到人机协作的最佳平衡点。
多模态能力的引入：必须解决 Openspec 目前对图片支持较差的问题。未来的工作流应支持让 AI 直接“看”设计稿（Vision 能力），而非仅通过文本中转。

Openspec 在处理强视觉相关（Visual）的 UI 重构任务时，仍面临“语义理解”与“视觉还原”之间的鸿沟。

文档驱动流派（如 Openspec）：
- 优势：它像一位经验丰富的架构师，理解业务意图，且完全不被技术栈束缚。无论你的项目是 React 还是 Vue，是 AntD 还是自研 UI 库，它都能通过 prompt 灵活适配生成的代码风格。
- 劣势：正如本次实战所示，它“看不见”设计稿。将丰富的视觉信息降维成纯文本描述（Proposal），注定会丢失光影、间距和质感等高维细节，导致“卖家秀”与“买家秀”的巨大落差。
视觉驱动流派（如 Figma-to-Code）：
- 优势：视觉还原度极高，能够精准复刻设计稿的每一个像素。
- 劣势：它们往往被禁锢在特定的技术框架内。生成的代码通常是难以维护的“一次性产物”，无法复用项目中已有的组件库（Design Tokens），也难以注入复杂的业务交互逻辑。

未来的方向，或许不是二选一。 下一代的前端 AI 工作流，应当是多模态的融合：既能通过 Vision 能力直接“读取”设计稿的视觉规范（解决 Openspec 的盲区），又能通过 Spec 文档理解业务逻辑并灵活适配项目现有的技术栈（解决 Figma 的死板）。

在 AI 真正学会“像设计师一样看，像工程师一样思考”之前，我们的人机协作仍需在“描述精准度”上不断打磨。