使用真实代码设计
使用真实的 HTML、CSS 和 React 构建 UI，而不是抽象的设计层，因此输出更接近最终上线内容。
Lunagraph
Lunagraph 是一款设计画布，使用真实的 HTML、CSS 和 React 代码构建 UI，由 Claude Code 驱动，适合设计师、产品团队和开发者协同保持设计与实现同步。
概述
Lunagraph 是一款设计画布，使用真实的 HTML、CSS 和 React 代码进行编写，并由 Claude Code 驱动。它被定位为一个让设计与实现同时发生、而不是通过交接步骤完成的地方。
该产品面向希望让画布、聊天和代码库保持同步的团队。来源描述了一种工作流：设计师、产品人员、开发者和代理可以直接塑造 UI，在实时 iframe 中预览变更，并在发布前将画布与实现进行对比。
主要功能
AI 辅助画布编辑
Claude Code 在画布中协助生成和编辑代码，使产品在设计过程中由 Claude Code 驱动。
双向编辑
通过在画布或代码库任一处编辑，并让变更双向同步，保持两者一致。
零交接工作流
让设计师、产品、开发者和代理使用同一事实来源协作，减少设计与实现之间的转换。
从网站捕获到画布
使用 Chrome 扩展从任意网站复制 UI，并将其粘贴到 Lunagraph 作为起点。
桌面画布工作区
从桌面应用开始工作，将页面、侧边栏导航、聊天、图层、插入工具、资源和图标作为画布工作流的一部分。
使用场景
设计可直接以代码交付的 UI
设计师可以直接在最终代码结构上工作，而不是交付静态原型并等待实现跟进。
协作式产品迭代
产品和工程团队可以使用共享画布和代码库，让实现与设计变更保持一致。
带视觉反馈的组件重构
开发者可以在代码中拆分或优化组件，同时通过双向编辑保持画布表示同步。
导入网页 UI 作为参考
团队可以使用 Chrome 扩展捕获现有网站的 UI，并将其作为在 Lunagraph 中进一步编辑的起点。
预览并对比变更
探索布局或样式变更的人员可以在实时 iframe 中预览更新，并在批准工作前将画布与渲染结果进行比较。
Pros and Cons
Pros
- 使用真实的 HTML、CSS 和 React 代码，而不是抽象的导出层。
- 支持在画布和代码中双向编辑，并进行同步。
- 在设计工作流中直接集成 Claude Code。
- 提供用于将网站 UI 复制到 Lunagraph 的 Chrome 扩展。
- 将设计、预览和代码整合在一个工作流中，减少交接断层。
Cons
- 提供来源中的定价页面返回 404，因此无法确认定价和套餐详情。
- 所提供的文档集合仍然有限，因此一些平台、集成和部署细节在来源中没有得到完整说明。
FAQ
什么是 Lunagraph？
Lunagraph 被描述为一款设计画布，可编写真实的 HTML、CSS 和 React 代码，并在画布中直接由 Claude Code 辅助。来源未说明除公开测试版和首页上的邀请式“获取访问权限”提示之外的正式访问模式。
如何开始使用 Lunagraph？
文档说明你可以下载 Lunagraph、安装 Claude Code，并使用 Chrome 扩展将任意网站的 UI 复制到画布中。
Lunagraph 适合谁？
Lunagraph 面向希望让设计画布与代码库保持同步的设计师、产品团队、开发者和代理。
Lunagraph 的费用是多少？
来源显示当前定价页面返回 404，因此在所提供页面中没有可确认的定价信息。
我可以在画布和代码中同时编辑吗？
文档描述了双向编辑：你可以在画布中或在代码中编辑，变更会双向同步。
Quick Facts
- 类别
- 设计工具
- 主要工作流
- 基于画布的 UI 设计与代码生成
- 代码输出
- HTML、CSS、React
- AI 层
- Claude Code
- 来源域名
- lunagraph.com
- 定价页面
- 在提供的来源中返回 404
Lunagraph 替代品
ByteAsk
ByteAsk 是面向 C 和 C++ 的终端优先 AI 编码 agent，可直接编辑仓库，并在展示 diff 前用真实编译器、调试器、sanitizers 和测试验证修改。提供免费版与付费方案。
GitBot
GitBot 是基于本地浏览器的工作区，可借助 Claude Code、Codex 或 OpenCode 创建可复用的编程机器人，跨仓库文件夹运行代理，并保留持久线程与可配置权限。
Grok 4.7
Grok 4.7 是 xAI 推出的软件开发与知识工作模型，支持长时间编码任务和专业分析，可通过 Grok Build、Cursor、Grok API 等平台使用，输入每百万 token 起价 2 美元，输出每百万 token 起价 6 美元。
ClawTick
ClawTick 是面向开发者和团队的 AI agent 自动化平台，可通过 CLI、dashboard 或 REST API 轻松调度任务，支持 LangChain、CrewAI、webhook 工作流，并提供监控、告警和日志。
Falconer
Falconer 是一款 AI 驱动的公司大脑，通过与 GitHub、Slack、Linear 等工具同步，让内部文档保持准确、可搜索并及时更新，帮助团队集中管理知识库。
Ghost
Ghost 是一款基于终端的 AI 助手，可在命令行中聊天、生成代码并运行任务。内置免费模型，支持 Linux、macOS 和 Windows，且为开源项目。