Agent之SkillsOpen Design的简介、安装和使用方法、案例应用之详细攻略目录Open Design的简介1、特点Open Design的安装和使用方法1、安装2、使用方法Open Design的案例应用品牌接入产物交付“从另一个 coding agent 里使用 Open Design”更多案例Open Design的简介Open Design 自称是“开源、local-first 的 Claude Design 替代品”并且是一个原生桌面应用支持 macOS 和 Windows它的定位不是传统只在画布里摆元素的设计工具而是一个“agentic design workspace智能体设计工作台”强调从需求、参考、素材、交互编辑到交付的完整设计链路都在同一个窗口里完成。仓库说明里还明确表示它让原本属于 Claude Design 的“发现 brief、锁定方向、流式生成产物、审阅、交付”这条 agent-native 流程变成了一个由 skills/、design systems 和 plugins 组成的文件系统供你本地已有的编码智能体读取、修改和重组同时它也被描述为“agent 时代的 Figma 替代方案”输出的是基于真实 CSS、真实字体、真实组件的单页产物并可直接导出为 HTML、PDF、PPTX、MP4。Github地址GitHub - nexu-io/open-design: Local-first, open-source Claude Design alternative. ️ Native desktop app. ⚡ 259 Skills · ✨ 142 Design Systems ️ Web · desktop · mobile prototypes · slides · images · videos · HyperFrames Sandboxed preview · HTML/PDF/PPTX/MP4 export Claude Code / OpenClaw / Codex / Cursor / OpenCode / Qwen / Copilot / Hermes / Kimi 17 CLIs. · GitHub1、特点兼容Open Design 强调“local-first BYOK model-agnostic”。仓库写明它可以运行在 Claude Code、OpenClaw、Codex、Cursor、OpenCode、Qwen、Copilot、Amp、Hermes、Kimi、Antigravity 等多种本地或兼容的 CLI 智能体上也可以通过任意 OpenAI-compatible endpoint 使用自己的密钥接入这意味着它并不绑定单一模型或单一厂商。类型丰富它的产物类型非常丰富既能生成 web / desktop / mobile 原型也能生成 live dashboards / artifacts、演示 deck、图片、视频以及 HyperFrames 动效预览方式支持 sandboxed iframe导出格式支持 HTML、PDF、PPTX、MP4。仓库还明确给出了 Studio 场景下的几个核心产物类型Prototype、HyperFrame、Deck、Image。资源规模在资源规模上README 给出的数字比较大仓库随附 100 skills、150 个品牌级 DESIGN.md 设计系统、261 个即用插件另一个位置还写到“259 Skills、142 Design Systems、261 Plugins”。这些资源会直接驱动生成结果的风格、结构和能力边界。设计系统设计系统层面Open Design 采用单个 DESIGN.md 文件作为品牌契约且是一个 9 段式 schema包含 color、typography、spacing、layout、components、motion、voice、brand、anti-patterns。仓库列出了大量内置系统分类例如 AI LLM、Developer Tools、Productivity、Fintech、E-commerce、Media、Automotive 和 Other也提供 Starter 方案。插件插件层面它把插件定义成“可移植的 agent-skill 文件夹”最小形态只需要 SKILL.md若要进入 Open Design 市场还可以增加 open-design.json用于声明元数据、输入、预览、流水线和能力。仓库里还把插件拆成 scenarios、image-templates、video-templates、design-systems、atoms、examples 等类别并给出数量统计。产品结构产品结构上README 还概括了 Home、Automation、Design System、Plugin、Integrations、Studio 这几个核心页面Home 用于选择 skill 和 design system 并输入 briefAutomation 用于把重复流程编排成可复用、可调度的自动化Design System 用于把团队的 DESIGN.md 提炼成品牌契约Plugin 用于浏览、安装和分发工作流插件Integrations 用于连接外部系统和 MCP 工具。安全与运行安全与运行方式上仓库声明其 daemon 默认只绑定 127.0.0.1且是 read-only 默认、SSRF 在代理边缘被阻断如果要暴露到局域网必须显式设置 OD_BIND_HOST 与 OD_ALLOWED_ORIGINS。这说明它更偏向本地工作流与受控集成而不是默认公网暴露。Open Design的安装和使用方法1、安装最推荐的方式是直接下载桌面端仓库称这是“zero config”的最快路径不需要 Node、pnpm 或 clone 仓库macOSApple Silicon / Intel x64、Windowsx64以及 Linux AppImage 都有对应下载入口。安装后应用会自动识别你系统 PATH 里的 coding-agent CLI并加载 100 skills 和 150 个 design systems。如果你不想打开 GUI也可以直接把 Open Design 装进已有的智能体里。仓库给出的方式是执行一行安装脚本curl -fsSL https://open-design.ai/install.sh | sh -s agent其中 agent 可以是 claude、codex、cursor、copilot、openclaw、antigravity、gemini、pi、vibe、hermes、cline、kimi、trae、opencode 等。安装后智能体可以直接调用 Open Design 作为 skill、plugin 或 MCP server。2、使用方法在智能体内部README 给了一个示例命令思路例如输入“Use open-design to generate a landing page with the Linear design system”系统会读取 skills/选择合适的 SKILL.md绑定你指定的 DESIGN.md并把结果输出成可在 http://localhost:7456 预览的 artifact。如果你想用 Docker 跑完整服务仓库给出的流程是克隆仓库后进入 open-design/deploy复制 .env.example 为 .env加入 OD_API_TOKEN然后执行 docker compose up -d最后访问 http://localhost:7456。README 还特别提醒 macOS 下如果 Web UI 提示需要 Authorization: Bearer OD_API_TOKEN通常与 Docker Desktop bridge networking 有关。如果你想从源码运行仓库给出的步骤是git clone 仓库进入根目录执行 corepack enable pnpm install再运行 pnpm tools-dev run web。README 同时注明了环境要求是 Node ~24、pnpm 10.33.xWindows 用户还要参考专门的 troubleshooting 文档。仓库还给了一个“从 brief 到 artifact”的完整工作流你可以把它理解为实际使用主线先提交 brief再选插件接着锁定方向然后绑定设计系统并生成首个 artifact之后把它交给工程继续开发或者导出给市场/传播团队使用系统还会把你确认过的截图、字体、调色板和产物累积成下一次会话的默认值。Open Design的案例应用README 中最直观的案例是 PM 提交需求后插件选择器会直接给出 landing page、pitch deck、dashboard、social post、PM spec、OKR scorecard 等不同输出类型这说明它不仅面向“设计稿”也面向运营、产品和管理类材料。品牌接入如果没有现成品牌可以从 5 个 curated directions 中选一个如果已有品牌可以丢一个截图或 URL系统会连接 GitHub、导入 Figma并把品牌规范沉淀成可复用的 DESIGN.md。这表明 Open Design 适合从“零散视觉参考”快速过渡到“可复用品牌系统”。产物交付生成的首个 artifact 会在 sandboxed iframe 中流式展示而且可以就地编辑不需要每次“推倒重来”。如果要交付给工程产物本身就是 HTML/CSS可直接拿到 Cursor、Codex 或 Claude Code 里继续作为代码开发如果要交给市场也能直接导出为 PPTX、PDF、MP4。“从另一个 coding agent 里使用 Open Design”仓库说明它提供 stdio MCP server 和按 agent 分发的安装脚本外部智能体可以直接读取你本地 Open Design 项目中的真实文件比如 token CSS、JSX 组件、entry HTML它还给出 od search-files、od get-file、od get-artifact、od plugin run、od skill list 等命令适合做跨仓库、跨项目的设计与开发协作。更多案例案例则直接体现在 skills 和 plugins 的目录里例如 web-prototype、saas-landing、dashboard、mobile-app、mobile-onboarding、social-carousel、email-marketing、magazine-poster、motion-frames、sprite-animation、pm-spec、team-okrs、eng-runbook、finance-report、hr-onboarding、guizang-ppt、html-ppt-*、hyperframes、critique 等覆盖设计、营销、产品、工程、财务、人力等不同场景。另外插件说明里还明确提到它可以把 Figma / Pencil 工作流迁移成 React、Next.js 或 Vue 源码也可以把已有代码库按 DESIGN.md 刷新到品牌规范因此它的案例应用并不局限于“生成视觉稿”也包括“设计迁移”和“品牌化改造”。