AI Store(https://aistore.best)当前最火的AI产品是【口袋专家AI】(https://agentsdance.ai)——AI版微信让AI微信中的智能体专家帮你做PPT、做短剧、做图片完成工作和生活中的所有事。一、引言做过产品的同学都经历过这样的循环产品经理写需求文档设计师出稿评审改两轮前端再照着稿子切页面一个落地页从想法到能点开往往要一周。2026 年 4 月 Anthropic 发布了 Claude Design大模型第一次不再只“写字”而是直接交付设计产物你说一句话它给你一个能打开、能改、能导出的页面。可惜它闭源、只能在云上用、只能用 Anthropic 自家的模型。Open Design就是它的开源替代同样是“一句需求 → 一个真文件”的工作方式但不绑定任何模型Claude Code、Codex、DeepSeek Harness、OpenCode 等二十多种编码智能体都可以当它的“设计引擎”。项目开源不到半年就拿到了 10 万 Star。在 AI Store 上Open Design 已经配好了 DeepSeek Harness 引擎和模型网关点开就能用不用装 Node、不用申请 Key。这一篇我们真实地做一件事选一套设计体系一句话生成一个记账 App 的官网落地页再在同一个项目里改一轮。二、Open Design 项目介绍2.1 它是什么官方给自己的定义是“第一个可协作的设计智能体工作台”你写一段需求brief编码智能体按照你选的设计体系生成原型产物是真正的 HTML/CSS 文件可以直接预览、分享给团队提意见再让智能体在同一个项目里继续改。完整链路是需求 brief → 选插件/模板 → 定方向 → 套设计体系 → 生成产物 → 交给工程 → 沉淀成记忆2.2 项目特色不自带模型谁都能当引擎它不内置智能体而是调用你机器上已有的claude、codex、dsh、opencode等命令行智能体一键切换DeepSeek Harness 是官方的原生运行时支持结构化思考、工具调用和会话恢复。品牌级设计体系每次生成都会读当前设计体系的DESIGN.md作为“品牌契约”仓库自带 150 多套Apple、Stripe、Linear、Notion、Airbnb……也可以从自己的产品截图或网址生成一套。不只是网页创作类型有原型、幻灯片、文档、图片、网站复刻、HyperFramesHTML 转 MP4 动效、WebGL、实时产物、视频、音频。技能、模板、插件都是开放目录100 多个功能技能遵循SKILL.md约定另有 277 个官方插件都可以自己改、自己发布。产物是真文件生成的是可以继续开发的 HTML/CSS可以直接丢给 Cursor、Codex、Claude Code 接着写成代码也可以导出 PDF / PPTX / MP4。2.3 基本信息项目内容仓库github.com/nexu-io/open-design协议Apache-2.0语言TypeScriptAI Store 上的版本0.24.1Star10 万AI Store 上的设计引擎DeepSeek Harness模型走 AI Store 网关默认 deepseek-v4-flash三、在 AI Store 上开箱即用3.1 首页在 aistore.best 首页点 “Open Design”第一次会冷启动一个云工作区十几秒后进入它的首页。左侧是首页、社区、全部项目、设计体系、插件和设置中间是需求输入框下方是几个可以直接套用的示例高端地产展示页、新员工入职指南、产品定价页、游戏化习惯应用……。输入框左下角有三个按钮上传参考文件调色盘图标选设计体系再旁边是创作类型。右下角的小鲸鱼图标表示当前的设计引擎是 DeepSeek Harness。3.2 创作类型点开“创作类型”可以看到它能做的不只是网页原型、幻灯片、文档、图片、网站复刻、HyperFrames往下滚还有 WebGL、实时产物、视频、音频。这一篇用默认的原型。3.3 设计体系点调色盘图标打开设计体系选择器官方预设有 150 多套。搜索 “Linear”右侧会预览这套体系的品牌标识“Project management. Ultra-minimal, precise, purple accent.”和调色板。选中它之后生成的页面就会按 Linear 的配色、字体和间距来做。四、实战一句话做出记账 App 的官网落地页4.1 写需求为一款叫「小满记账」的个人记账 App 做一个产品官网落地页全部用中文 1. 首屏大标题、一句话卖点、App Store / 安卓下载两个按钮右侧放一个手机界面示意用 HTML/CSS 画不用外部图片 2. 三个核心功能卡片拍小票自动记账、月度预算提醒、家庭共享账本 3. 一段用户评价4. 三档定价免费 / 会员 ¥12 每月 / 家庭 ¥25 每月5. 常见问题 4 条6. 页脚。 要求桌面和手机宽度都好看。点运行后进入项目页左边是对话右边是“设计文件”面板。左边能看到引擎在做什么先在内置的 web-prototype 技能里检索然后依次读取种子模板template.html、布局库layouts.md和交付前自检清单checklist.md。也就是说它不是凭空写 HTML而是先拿到一套“怎么做好一个原型页”的规范再动手。4.2 结果4 分 47 秒后显示“已完成”。交付时它附上了版面规划顶部导航 → 分栏首屏左文案 双下载按钮右侧 HTML/CSS 画的手机界面→ 三张功能卡 → 用户评价 → 三档定价 → 常见问题4 条可展开→ 结尾 CTA → 页脚配色是暗色近黑画布加靛紫色唯一强调色价格用等宽数字920px 以下全部改为单列。生成的xiaoman-accounting-landing.html直接出现在右侧预览里点左上角收起对话栏就能看到完整的桌面效果。首屏右侧那个手机界面是纯 CSS 画的本月支出 ¥3,268、预算进度条、分类标签和流水列表都有没用一张图片。对话栏展开时预览区比较窄正好可以看到窄屏效果功能卡、用户评价都改成了单列。4.3 在同一个项目里改一处原型不满意的地方可以直接在对话里继续提它会在同一个文件上改而不是重新生成一个。我提了一个很具体的修改只改定价区加一个「月付 / 年付」切换切到年付时价格按 8 折显示并标注「省 20%」其他区块保持不变。3 分 51 秒后改完并说明了改动在“定价”标题下方加了一个分段式切换按钮默认月付年付时会员 ¥12 → ¥9.6、家庭 ¥25 → ¥20免费版仍是 ¥0“省 20%”的绿色徽标只在年付时显示切换逻辑是一小段原生 JS不引入任何依赖。在预览里点一下就能验证。月付切到年付4.4 导出与分享右上角的“导出”可以把设计导出为 PDF、图片、.zip或者一个独立 HTML 文件旁边的“分享”可以发给团队提意见。导出的 HTML 是真代码可以直接交给 Cursor、Claude Code 这类编码智能体接着做成正式页面。4.5 使用小贴士先选设计体系再写需求同一句需求换一套设计体系风格完全不同有自己的品牌可以在“设计体系”里新建一套。修改时一次只提一件事并写明“其他区块保持不变”它就会在原文件上局部修改便于对比前后版本。看手机效果预览上方的“桌面端”可以切换预览视口。五、想自己部署AI Store 上是点开即用的托管版如果你想装在自己电脑或服务器上、用自己的模型 Key官方给了三种方式。5.1 桌面版官方推荐零配置macOSApple Silicon / Intel和 Windows x64 可以直接到 GitHub Releases 下载安装包。装好后它会自动发现你PATH里已有的编码智能体claude、codex、dsh、opencode……加载技能、模板和设计体系打开就能写需求。Linux 目前没有官方安装包需要从源码跑。5.2 Dockergit clone https://github.com/nexu-io/open-design.git cd open-design/deploy cp .env.example .env echo OD_API_TOKEN$(openssl rand -hex 32) .env docker compose up -d # 浏览器打开 http://127.0.0.1:7456浏览器要求登录时用户名填open-design密码是deploy/.env里的OD_API_TOKEN。5.3 从源码运行git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable pnpm install pnpm tools-dev run web需要 Node 24 和 pnpm 10.33。另外它也可以完全不开界面作为 MCP 服务装进你正在用的编码智能体里例如od mcp install claude之后在 Claude Code 里直接说“用 open-design 按 Linear 设计体系生成一个落地页”。六、总结本文介绍了开源版 Claude Design——Open Design并在 AI Store 上真实地做了一个记账 App 的官网落地页选 Linear 设计体系一段需求4 分 47 秒拿到一个包含首屏、功能、评价、定价、FAQ、页脚的完整页面首屏的手机界面全用 CSS 画出再用一句话让它只改定价区加上月付/年付切换。产物是可以直接导出、继续开发的真 HTML 文件。整个过程不需要装 Node、不需要申请任何 API Key。如果觉得对你有帮助期待您的关注点赞、收藏或评论您的支持是我持续码字的动力。AIStore免费AI公开课系列文章AIStore免费AI公开课-智能体篇一口袋专家Harness上架AIStore开源个人智能体开箱即用AIStore免费AI公开课-智能体篇二Agents Team上架AIStore拉一群机器人同时开工开箱即用AIStore免费AI公开课-智能体篇三AI Search上架AIStore问你的数据、答案带出处开箱即用AIStore免费AI公开课-智能体篇四AI Recom上架AIStore信息流推荐并讲清理由开箱即用AIStore免费AI公开课-智能体篇五OpenClaw上架AIStore龙虾2.0智能体开箱即用AIStore免费AI公开课-智能体篇六Hermes上架AIStore自记忆智能体开箱即用AIStore免费AI公开课-智能体篇七DeepSeek Harness上架AIStoreDeepSeek官方智能体开箱即用AIStore免费AI公开课-智能体篇八OpenCode上架AIStore最火的开源编码智能体开箱即用AIStore免费AI公开课-智能体篇九Claude Code上架AIStore用Claude改整个代码库开箱即用AIStore免费AI公开课-智能体篇十ComfyUI上架AIStore节点编排生图生视频开箱即用AIStore免费AI公开课-智能体篇十一Codex上架AIStore用GPT改整个代码库开箱即用AIStore免费AI公开课-智能体篇十二Pi Agent上架AIStore极简可改的编码智能体开箱即用AIStore免费AI公开课-智能体篇十三Open Design上架AIStore开源版Claude Design开箱即用AIStore免费AI公开课-智能体篇十四OpenHands上架AIStore开源版Devin开箱即用AIStore免费AI公开课-智能体篇十五Cline上架AIStoreVS Code里的结对编程智能体开箱即用AIStore免费AI公开课-智能体篇十六AutoGen Studio上架AIStore微软多智能体搭建台开箱即用AIStore免费AI公开课-智能体篇十七CrewAI上架AIStore按角色分工的智能体团队开箱即用AIStore免费AI公开课-智能体篇十八OpenManus上架AIStore开源版Manus开箱即用AIStore免费AI公开课-智能体篇十九Twenty上架AIStore开源版Salesforce开箱即用AIStore免费AI公开课-智能体篇二十LangChain上架AIStoreLangGraph智能体对话界面开箱即用AIStore免费AI公开课-智能体篇二十一SillyTavern上架AIStore开源版Character AI开箱即用AIStore免费AI公开课-智能体篇二十二Kilo Code上架AIStore架构编码调试多模式开箱即用AIStore免费AI公开课-智能体篇二十三Laya上架AIStore毫秒级结构化判断的决策模型开箱即用AIStore免费AI公开课-智能体篇二十四Jev上架AIStore托管决策模型按输入计价开箱即用AIStore免费AI公开课-智能体篇二十五Semantica上架AIStore开源版Palantir本体工作台开箱即用AIStore免费AI公开课-智能体篇二十六Open Dots上架AIStore开源版OpenAI Dots开箱即用AIStore免费AI公开课-智能体篇二十七OpenMausBot上架AIStore开源版Grok Bot开箱即用AIStore免费AI公开课-智能体篇二十八OpenMuse上架AIStore开源版Muse开箱即用