Lunagraph

Lunagraph 是什么？

Lunagraph 是一个设计画布，用于使用真实的 HTML、CSS 和 React 代码创建用户界面。其核心目的是帮助团队设计和实现 UI，确保设计与最终代码保持一致，减少“交接”差距。

Lunagraph 不将设计视为独立交付物需要他人翻译成组件，而是将代码本身作为交付物，由 Claude Code 提供 AI 协助。

主要特性

• 直接设计到真实代码 (HTML、CSS、React)： 画布工作直接反映在实际标记和组件中，确保输出与运行内容一致。
• UI 团队零交接工作流： 平台设计支持设计师、产品经理、开发者和代理在无设计到实现翻译步骤的情况下保持一致性。
• Claude Code 驱动的上下文感知协助： AI 伙伴能处理完整上下文，包括画布和现有代码库。
• 画布 + 聊天 + 本地仓库往返： 聊天可访问画布和本地代码库，工作流包括直接实现变更到仓库并预览结果。
• 实时预览和截图比较： 工作流在实时 iframe 中预览，并使用设计和输出的截图进行比较。
• 从设计变更更新仓库组件： 示例包括生成如 PricingCard 的组件，并更新如功能比较表组件的文件。

如何使用 Lunagraph

1. 从设计画布开始： 在画布上开始设计 UI 元素。
2. 使用集成聊天获取实现帮助： 以引用画布和仓库上下文的方式请求变更。
3. 让 AI 实现到你的仓库： 工作流包括直接写入本地代码库。
4. 预览和验证： 使用实时 iframe 预览，并截图画布/设计与最终 UI 输出进行比较。
5. 迭代组件： 通过请求重构或功能调整（例如，将侧边栏拆分为更小组件）应用进一步更新。

使用场景

• 设计师到实现的 UI 创建： 设计师在画布上创建 UI 布局，确保生成代码使用真实 HTML/CSS/React 而非独立设计文件。
• 无交接摩擦的团队工作流： 混合团队（设计、产品、开发和代理）在同一工作流中协作，减少角色间翻译步骤。
• AI 协助重构复杂组件： 当组件过于复杂（例如侧边栏）时，聊天可帮助将其重构为更小组件，并添加如折叠切换的行为。
• 根据设计意图更新现有页面： 使用截图或调色板引用更新 UI 部分，确保输出匹配预期布局和样式。
• 从画布设计构建定价/功能 UI： 生成定价卡和功能表组件，然后将其连接到页面布局并更新现有表格标记。

常见问题

• Lunagraph 生成或处理什么代码？ Lunagraph 生成并处理真实的 HTML、CSS 和 React 代码。

• Lunagraph 是否依赖独立设计文件交接？ 网站强调“零交接”工作流，交付物是代码本身而非需翻译的设计文件。

• 工作流中“powered by Claude Code”是什么意思？ 内容指出 Claude Code 作为创意设计伙伴，考虑画布和本地代码库，通过聊天支持实现任务。

• 用户如何验证设计与输出匹配？ 工作流包括在实时 iframe 中预览，并截图画布与渲染结果进行比较。

• AI 能否读写本地仓库？ 页面示例显示“AI File Access”带有文件系统路径，用于项目外读写，表明本地仓库集成，但未提供更多细节。

替代方案

• 通用设计工具（Figma 风格）+ 独立的开发者实现： 这将设计与代码置于不同的工具和工作流中，需要将设计文件转换为组件。
• 代码优先的 UI 构建器（React 组件编辑器）无设计画布： 这些专注于直接在 UI 代码中构建，但可能无法提供同样捕捉和传达设计意图的画布。
• 集成到 IDE 的 AI 编码助手： 这些可帮助生成或重构代码，但通常不结合设计画布、实时 iframe 预览对比，以及此处描述的“画布 + 聊天 + 仓库”循环。
• 导出组件或样式的 UI 原型工具： 这些旨在弥合设计与实现，但方法可能仍涉及导出或转换，而非以代码作为主要产出。