不求前端！开源工具对标Claude Design，秒获顶级设计能力
来源：互联网 2026-06-14 08:18:01OpenDesign是一款开源设计工具，可作为ClaudeDesign和Figma的替代方案，上线两周GitHub获超40k星。它支持16种CodingAgentCLI、自定义AI模型、72套设计系统及31个技能，覆盖多种视觉流派。用户可通过截图生成需求文档，创建项目并输入提示词自动设计，支持配色切换和组件修改。设计稿可通过MCP服务让ClaudeCode开
Open Design 开源 AI 设计工具简介
近期在开发圈讨论度很高的开源工具 Open Design，是一款面向 Agent 的开源设计工具，可视为 Claude Design 和 Figma 的开源替代方案。上线不到两周，其在 GitHub 上已收获超过 40k star，这一增长速度在开发工具中相当亮眼。
Open Design 的功能亮点丰富，直接罗列如下：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
- 支持 16 种 Coding Agent CLI：自动检测已安装的 Agent CLI 并直接调用，覆盖 Claude Code、Codex、Qoder 等主流工具。
- 可自定义 AI 模型：即使未安装 Agent CLI，也可通过配置 API Key 调用大模型。
- 内置 72 套设计系统：涵盖 Linear、Anthropic、Apple、Cursor、Supabase、Figma 等主流风格，切换便捷。
- 内置 31 个可组合的 Skills：覆盖设计原型（网页/App/仪表盘/动画）、演示文稿（杂志风 PPT/周报）等，横跨设计、营销、产品、工程、财务、HR 等 9 大职能场景，形成完整能力库。
- 媒体生成：支持图像（gpt-image-2）、视频（Seedance 2.0）、动态图形（HyperFrames）生成。
- 视觉方向：提供 5 套精选视觉流派，从编辑杂志风、极简现代到温暖柔和、科技实用、粗野主义，审美风格齐备。
- MCP 服务调用：支持作为 MCP 服务调用，Claude Code 通过 MCP 可直接读取 Open Design 中的设计文件。
以下是 Open Design 使用过程中的效果图，视觉上较为炫酷。
Open Design 安装及配置步骤
安装过程并不复杂。前往 Open Design 官网下载安装包，本文使用最新 0.8.0-preview 版本。
下载完成后直接安装，安装完毕双击 Open Design.exe 运行。通过右上角设置按钮，可将界面语言切换为简体中文。
首次运行时，Open Design 会自动扫描已安装在 PATH 路径下的 Agent CLI。本机已安装 Claude Code，点击测试无问题即可直接使用。
Open Design 使用方法与流程
使用前需先整理需求。可用 Chrome 的 GoFullPage 插件，将项目界面截成长图保存。
将截图交给能识别图片的 AI 工具，让 AI 根据图片整理需求并生成 markdown 格式的需求文档，保存备用。
接下来，点击 Open Design 左上角加号按钮创建项目，选择 设计体系 和 精度 后即可创建。
Open Design 内置丰富设计体系，可点击左侧 设计体系 按钮预览所有风格，选择喜欢的界面风格。
然后，在 Open Design 中输入以下提示词：
复制代码我想设计一个电商app，包括首页、分类、购物车、我的模块功能，具体需求参考上传的markdown文档。
之后，Open Design 会提供一个表单供填写，包括视觉方向、品牌上下文和模块数量等内容。
填写完成后，Open Design 即开始设计。设计完成后，可在设计文件中找到这些页面，均为 html 格式，可直接预览。
打开首页对应 html 直接预览，效果不错，还原度较高。
若对配色不满意，点击顶部 Tweaks 按钮，可切换不同配色方案直至满意。
如需修改，点击评论按钮，选中对应组件提出需求，Open Design 会按要求修改。
界面设计完成后，若想让 Claude Code 根据设计好的页面开发项目，需给 Claude Code 添加 Open Design 的 MCP 服务。打开设置中的 MCP 服务器 面板，可找到对应命令。
之后，在 Claude Code 中就能看到 Open Design 的 MCP 服务。
然后，输入提示词让 Claude Code 查看当前 Open Design 中打开的项目。Claude Code 会调用 open-design 的 MCP 获取项目信息。
接下来，输入以下提示词，让 Claude Code 列出开发计划：
复制代码我想根据open design里的设计稿，开发一个前端项目，给我列个开发计划，存放在当前目录下
由于 Claude Code 默认提供的前端技术栈为 React，直接在对话中将其改为 Vue3。确认计划无误后，即可开始开发。具体对话列表如下：
最终，Claude Code 根据 Open Design 里的设计稿完成所有页面开发。
四个页面的最终效果如下，完全按照设计稿开发，界面效果出色。
再看生成的前端代码，代码结构与逻辑清晰，比如“我的”页面各部分均封装为独立组件。
整个开发与设计过程全程使用 deepseek-v4-pro 模型。该模型在 Token 输出速度和性价比方面表现出色。用了接近 2000w token，输入缓存命中率约 90%，最终只花费 6 元，性价比极具竞争力。
Open Design 使用总结
以上是 Open Design 的具体使用体验。这款 AI 设计工具有可能改变传统开发流程——前端工作交给它和 Claude Code 即可。直接向 Claude Code 扔一个需求让其开发，效果往往达不到预期。真正合理的流程是：先用 Open Design 完成页面设计，再将具体设计稿交给 Claude Code 进行开发。这一工作流一旦跑通，效率提升非常明显。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
