{"id":4163,"date":"2026-09-03T17:27:01","date_gmt":"2026-09-03T09:27:01","guid":{"rendered":"https:\/\/ai.jxgzhc.cn\/?p=4163"},"modified":"2026-09-03T17:27:05","modified_gmt":"2026-09-03T09:27:05","slug":"%e7%94%a8%e5%bc%80%e6%ba%90%e8%ae%be%e8%ae%a1%e5%bc%95%e6%93%8e%e5%af%bc%e5%87%bahtml-pdf-mp4","status":"publish","type":"post","link":"https:\/\/ai.jxgzhc.cn\/?p=4163","title":{"rendered":"\u7528\u5f00\u6e90\u8bbe\u8ba1\u5f15\u64ce\u5bfc\u51faHTML\/PDF\/MP4"},"content":{"rendered":"

\"\u7528\u5f00\u6e90\u8bbe\u8ba1\u5f15\u64ce\u5bfc\u51faHTML\/PDF\/MP4\"<\/p>\n

\u5f00\u6e90\u7248Claude Design\uff0c\u672c\u5730\u8bbe\u8ba1\u5f15\u64ce\uff0cHTML\/PDF\/PPTX\/MP4\u5bfc\u51fa<\/strong><\/p>\n

\u8be6\u7ec6\u4ecb\u7ecd<\/h2>\n

Open Design<\/p>\n

\ud83c\udfa8 \u5f00\u6e90\u66ff\u4ee3 Claude Design\u3002 \ud83d\udda5\ufe0f \u9762\u5411 macOS \u548c Windows \u7684\u672c\u5730\u4f18\u5148\u539f\u751f\u684c\u9762\u5e94\u7528\u3002 \u26a1 \u53ef\u7ec4\u5408\u7684\u6280\u80fd\u3001\u54c1\u724c\u7ea7\u7684 DESIGN.md \u8bbe\u8ba1\u7cfb\u7edf\u4ee5\u53ca\u5373\u7528\u578b\u63d2\u4ef6\u3002 \ud83d\uddbc\ufe0f \u751f\u6210 Web \u00b7 \u684c\u9762 \u00b7 \u79fb\u52a8\u7aef\u539f\u578b \u3001 \u5b9e\u65f6\u4eea\u8868\u76d8 \/ \u5de5\u4ef6 \u3001 \u6f14\u793a\u6587\u7a3f \u3001 \u56fe\u7247 \u3001 \u89c6\u9891 \u53ca HyperFrames \u52a8\u6001\u56fe\u5f62\u3002 \ud83d\udd12 \u6c99\u7bb1 iframe \u9884\u89c8 \u00b7 HTML \/ PDF \/ PPTX \/ MP4 \u5bfc\u51fa\u3002 \ud83e\udd16 \u8fd0\u884c\u4e8e Claude Code \u00b7 OpenClaw \u00b7 Codex \u00b7 Cursor \u00b7 OpenCode \u00b7 Qwen \u00b7 Copilot \u00b7 Amp \u00b7 Hermes \u00b7 Kimi \u00b7 Antigravity \u53ca 25 \u4e2a\u4e0d\u540c\u7684\u672c\u5730 CLI \u53ef\u6267\u884c\u6587\u4ef6 \uff0c\u6216\u901a\u8fc7 BYOK \u63a5\u5165\u4efb\u4f55\u517c\u5bb9 OpenAI \u7684\u7aef\u70b9\u3002<\/p>\n

Open Design \u662f\u5f53 Anthropic \u968f Claude Design \u53d1\u5e03\u7684 agent \u539f\u751f \u5faa\u73af\uff08\u53d1\u73b0\u7b80\u62a5\u3001\u9501\u5b9a\u65b9\u5411\u3001\u6d41\u5f0f\u8f93\u51fa\u5de5\u4ef6\u3001\u8bc4\u5ba1\u3001\u4ea4\u4ed8\uff09\u4e0d\u518d\u5c01\u95ed\uff0c\u800c\u662f\u53d8\u4e3a\u4e00\u4e2a \u7531\u529f\u80fd\u6280\u80fd\u3001\u6e32\u67d3\u8bbe\u8ba1\u6a21\u677f\u3001\u8bbe\u8ba1\u7cfb\u7edf\u548c\u63d2\u4ef6\u7ec4\u6210\u7684\u6587\u4ef6\u7cfb\u7edf \uff0c\u4f60\u7b14\u8bb0\u672c\u7535\u8111\u4e0a\u5df2\u6709\u7684\u7f16\u7801 agent \u53ef\u4ee5\u8bfb\u53d6\u3001\u7f16\u5199\u548c\u6df7\u7f16\u3002\u4f60\u7684 CLI \u6210\u4e3a\u8bbe\u8ba1\u5f15\u64ce\uff0c\u4f60\u7684\u7b14\u8bb0\u672c\u7535\u8111\u6210\u4e3a\u5de5\u4f5c\u5ba4\uff0c\u800c\u56e2\u961f\u7684 DESIGN.md \u6210\u4e3a\u54c1\u724c\u5951\u7ea6\u3002<\/p>\n

\u5b83\u4e5f\u662f agent \u65f6\u4ee3\u7684 Figma \u66ff\u4ee3\u54c1 \u2014\u2014\u4e0d\u662f\u5728\u753b\u5e03\u4e0a\u64cd\u4f5c\u50cf\u7d20\uff0c\u800c\u662f\u4ea4\u4ed8\u771f\u6b63\u7684 CSS\u3001\u771f\u6b63\u7684\u5b57\u4f53\u3001\u771f\u6b63\u7684\u7ec4\u4ef6\u6784\u6210\u7684\u5355\u9875\u5de5\u4ef6\uff0c\u76f4\u63a5\u5bfc\u51fa\u4e3a HTML \/ PDF \/ PPTX \/ MP4\u2014\u2014\u5df2\u7ecf\u7531\u4f60\u7684\u8bbe\u8ba1\u7cfb\u7edf\u5851\u9020\uff0c\u53ef\u4ee5\u5728\u4f60\u6bcf\u5929\u4f7f\u7528\u7684 agent \u4e2d\u76f4\u63a5\u8fd0\u884c\u3002<\/p>\n

\u4ea7\u54c1\u6982\u89c8<\/p>\n

\u5feb\u901f\u4e86\u89e3 Open Design \u662f\u4ec0\u4e48\u4ee5\u53ca\u5b83\u80fd\u505a\u4ec0\u4e48\u3002\u4ece \u9996\u9875 \u5f00\u59cb\uff0c\u901a\u8fc7 \u81ea\u52a8\u5316 \u7f16\u6392\u91cd\u590d\u5de5\u4f5c\u6d41\u7a0b\uff0c\u5728 \u8bbe\u8ba1\u7cfb\u7edf \u4e2d\u63d0\u70bc\u54c1\u724c\u5951\u7ea6\uff0c\u5e76\u901a\u8fc7 \u63d2\u4ef6 \u548c \u96c6\u6210 \u8fdb\u884c\u6269\u5c55\uff1b\u5728\u4efb\u4f55\u9879\u76ee\u7684 \u5de5\u4f5c\u5ba4 \u4e2d\uff0c\u540c\u4e00\u8bbe\u8ba1\u7cfb\u7edf\u4f1a\u6d41\u5f0f\u8f93\u51fa\u539f\u578b\u3001\u5b9e\u65f6\u5de5\u4ef6\u3001HyperFrames\u3001\u6f14\u793a\u6587\u7a3f\u548c\u56fe\u7247\u3002<\/p>\n

\u6838\u5fc3\u9875\u9762<\/p>\n

\u9996\u9875 \u2014 \u603b\u89c8\u5165\u53e3\u3002\u9009\u62e9\u4e00\u4e2a\u6280\u80fd\u548c\u4e00\u4e2a\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u8f93\u5165\u7b80\u62a5\uff0c\u4ece\u4e00\u4e2a\u5730\u65b9\u542f\u52a8\u6240\u6709\u64cd\u4f5c\u3002<\/p>\n

\u81ea\u52a8\u5316 \u2014 \u5c06\u91cd\u590d\u7684\u8bbe\u8ba1\u5de5\u4f5c\u6d41\u7a0b\u7f16\u6392\u4e3a\u53ef\u590d\u7528\u3001\u53ef\u8ba1\u5212\u7684\u81ea\u52a8\u5316\u4efb\u52a1\u3002<\/p>\n

\u8bbe\u8ba1\u7cfb\u7edf \u2014 \u5c06\u56e2\u961f\u7684 DESIGN.md \u63d0\u70bc\u4e3a\u5851\u9020\u6bcf\u4e2a\u8f93\u51fa\u7684\u54c1\u724c\u5951\u7ea6\u3002<\/p>\n

\u63d2\u4ef6 \u2014 \u6d4f\u89c8\u3001\u5b89\u88c5\u548c\u5206\u53d1\u5de5\u4f5c\u6d41\u7a0b\u63d2\u4ef6\uff0c\u6309\u9700\u6269\u5c55\u751f\u6210\u80fd\u529b\u3002<\/p>\n

\u96c6\u6210 \u2014 \u8fde\u63a5\u5916\u90e8\u7cfb\u7edf\u548c MCP \u5de5\u5177\uff0c\u4ece\u4efb\u4f55 IDE\u3001\u811a\u672c\u6216\u81ea\u52a8\u5316\u4e2d\u4f7f\u7528 Open Design\u3002<\/p>\n

\u5de5\u4f5c\u5ba4\u2014\u2014\u4e00\u4e2a\u9879\u76ee\u4e2d\u7684\u591a\u79cd\u5de5\u4ef6\u7c7b\u578b<\/p>\n

\u5728\u9879\u76ee\u7684\u5de5\u4f5c\u5ba4\u4e2d\uff0c\u540c\u4e00\u8bbe\u8ba1\u7cfb\u7edf\u4f1a\u6d41\u5f0f\u8f93\u51fa\u591a\u79cd\u5de5\u4ef6\u7c7b\u578b\uff1a<\/p>\n

\u539f\u578b \u2014 \u8bfb\u53d6\u4f60\u7684\u8bbe\u8ba1\u7cfb\u7edf\u5e76\u5728\u6c99\u7bb1 iframe \u4e2d\u6e32\u67d3\u7684\u5355\u9875 HTML \u5de5\u4ef6\uff0c\u53ef\u5373\u65f6\u9884\u89c8\u5e76\u4e0b\u8f7d\u6e90\u7801\u3002<\/p>\n

HyperFrame \u2014 \u7a0b\u5e8f\u5316\u52a8\u6001\u548c\u52a8\u753b\u56fe\u5f62\uff0c\u6e32\u67d3\u4e3a\u771f\u5b9e\u7684 MP4\uff08\u4f8b\u5982 1920\u00d71080 \u00b7 30fps\uff09\u3002<\/p>\n

\u6f14\u793a\u6587\u7a3f \u2014 \u53ef\u7ffb\u9875\u3001\u952e\u76d8\u5bfc\u822a\u3001\u5bfc\u51fa\u4e3a PPTX \/ PDF \u7684 pitch deck\u3002<\/p>\n

\u56fe\u7247 \u2014 \u54c1\u724c\u7ea7\u56fe\u7247\u548c\u89c6\u89c9\u8d44\u4ea7\uff0c\u652f\u6301\u9ad8\u5206\u8fa8\u7387\u751f\u6210\u548c\u4e0b\u8f7d\u3002<\/p>\n

\u6f14\u793a<\/p>\n

\u56db\u4e2a\u6838\u5fc3\u4ea7\u54c1\u7c7b\u522b\uff0c\u5747\u7531\u4f60\u7b14\u8bb0\u672c\u7535\u8111\u4e0a\u8fd0\u884c\u7684\u7f16\u7801 agent \u6e32\u67d3\u3002\u70b9\u51fb\u7f29\u7565\u56fe\u67e5\u770b\u771f\u5b9e\u793a\u4f8b\u3002<\/p>\n

1 \u00b7 \u539f\u578b\u2014\u2014Web \u00b7 \u684c\u9762 \u00b7 \u79fb\u52a8\u7aef<\/p>\n

\u9ed8\u8ba4\u8f93\u51fa\u5f62\u5f0f\u3002\u8bfb\u53d6\u4f60\u7684 DESIGN.md \u5e76\u5728\u6c99\u7bb1 iframe \u4e2d\u6e32\u67d3\u7684\u5355\u9875 HTML \u5de5\u4ef6\u3002<\/p>\n

\u5165\u53e3\u89c6\u56fe \u2014 \u9009\u62e9\u4e00\u4e2a\u6280\u80fd\uff0c\u9009\u62e9\u4e00\u4e2a\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u8f93\u5165\u7b80\u62a5\u3002\u4e00\u4e2a\u754c\u9762\u7528\u4e8e\u539f\u578b\u3001\u4eea\u8868\u76d8\u3001\u6f14\u793a\u6587\u7a3f\u3001\u79fb\u52a8\u5e94\u7528\u3001\u6742\u5fd7\u9875\u9762\u3002<\/p>\n

\u79fb\u52a8\u7aef\u539f\u578b \u2014 \u50cf\u7d20\u7ea7\u7cbe\u786e\u7684 iPhone 15 Pro \u8fb9\u6846\uff0c\u591a\u5c4f\u5e55\u6d41\u7a0b\u3002agent \u4ece\u4e0d\u91cd\u7ed8\u624b\u673a\u6846\u67b6\uff1b\u5171\u4eab\u8bbe\u5907\u6846\u67b6\u4f4d\u4e8e assets\/frames\/ \u3002<\/p>\n

Web \u539f\u578b \u2014 \u5e26\u6709\u6eda\u52a8\u6761\u3001KPI \u548c\u56fe\u8868\u7684\u7f16\u8f91\u4eea\u8868\u76d8\u3002\u76f4\u63a5\u4ece design-templates\/dating-web\/ \u6e32\u67d3\u3002<\/p>\n

\u79fb\u52a8\u5e94\u7528\u539f\u578b \u2014 \u4e00\u4e2a\u4e09\u5c4f\u6e38\u620f\u5316\u6d41\u7a0b\uff0c\u5e26\u6709 XP \u4e1d\u5e26\u548c\u4efb\u52a1\u8be6\u60c5\u3002\u53ef\u76f4\u63a5\u4ea4\u7ed9 Cursor \/ Codex \/ Claude Code \u8f6c\u5316\u4e3a React\/Next\/Vue\u3002<\/p>\n

2 \u00b7 \u5b9e\u65f6\u5de5\u4ef6\u4e0e\u4eea\u8868\u76d8<\/p>\n

\u5b9e\u65f6\u4eea\u8868\u76d8\u3001\u51b3\u7b56\u5ba4\u3001KPI \u5899\u2014\u2014\u901a\u8fc7\u8c03\u6574\u9762\u677f\u62c9\u53d6\u6570\u636e\u7684\u5355\u9875\u5de5\u4ef6\uff0c\u53ef\u539f\u5730\u7f16\u8f91\u3002<\/p>\n

\u5b9e\u65f6\u4eea\u8868\u76d8 \u2014 \u4e00\u4e2a\u53ef\u7f16\u8f91\u7684 KPI \u5899\uff0c\u5176\u8c03\u6574\u9762\u677f\u663e\u793a\u4e86\u503c\u5f97\u8c03\u6574\u7684\u53c2\u6570\u3002agent \u53d1\u51fa\u6e05\u5355\uff0ciframe \u65e0\u9700\u91cd\u65b0\u52a0\u8f7d\u5373\u53ef\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n

\u51b3\u7b56\u5ba4 \u2014 \u4e3a\u4ea7\u54c1\/\u7814\u7a76\/\u8fd0\u8425\u4f1a\u8bae\u51c6\u5907\u7684\u591a\u6e90\u7b80\u62a5\u5de5\u4ef6\u3002<\/p>\n

GitHub \u98ce\u683c\u4eea\u8868\u76d8 \u2014 \u4ee5\u5b9e\u65f6\u5de5\u4ef6\u5f62\u5f0f\u5c55\u793a\u4ed3\u5e93\u6307\u6807\u3002<\/p>\n

Flow \u5b9e\u65f6\u4eea\u8868\u76d8\u6a21\u677f \u2014 \u4e00\u4e2a\u7279\u5b9a\u9886\u57df\u7684 KPI \u6a21\u677f\uff0c\u901a\u8fc7\u5f53\u524d\u6fc0\u6d3b\u7684 DESIGN.md \u8fdb\u884c\u54c1\u724c\u5316\u3002<\/p>\n

3 \u00b7 \u6f14\u793a\u6587\u7a3f\u2014\u2014\u6742\u5fd7\u98ce\u683c\u6f14\u793a\u3001\u6bcf\u5468\u66f4\u65b0\u3001Pitch<\/p>\n

\u6f14\u793a\u6587\u7a3f\u6a21\u5f0f (guizang-ppt) \u2014 \u6742\u5fd7\u5e03\u5c40\u3001WebGL \u82f1\u96c4\u3001P0\/P1\/P2 \u68c0\u67e5\u6e05\u5355\u3002\u4ece op7418\/guizang-ppt-skill \u539f\u6837\u6253\u5305\uff0c\u4fdd\u7559\u5176\u539f\u59cb\u8bb8\u53ef\u8bc1\u3002<\/p>\n

\u745e\u58eb\u56fd\u9645\u98ce\u683c\u6f14\u793a \u2014 \u7f51\u683c\u951a\u5b9a\uff0c\u5355\u8272\u70b9\u7f00\u3002\u662f design-templates\/html-ppt-*\/ \u4e0b\u7684 15 \u4e2a\u6f14\u793a\u6a21\u677f \u548c 36 \u4e2a\u4e3b\u9898 \u4e4b\u4e00\u3002<\/p>\n

\u6bcf\u4e2a\u6f14\u793a\u6587\u7a3f\u53ef\u5bfc\u51fa\u4e3a HTML \uff08\u5355\u6587\u4ef6\uff0c\u5185\u8054\u8d44\u6e90\uff09\u3001 PDF \uff08\u6d4f\u89c8\u5668\u6253\u5370\uff0c\u9002\u914d\u6f14\u793a\uff09\u3001 PPTX \uff08agent \u9a71\u52a8\u7684\u6280\u80fd\uff09\u3001 ZIP \uff08\u5f52\u6863\uff09\u6216 Markdown \u3002<\/p>\n

4 \u00b7 \u56fe\u7247<\/p>\n

93 \u4e2a\u53ef\u76f4\u63a5\u590d\u5236\u7684\u63d0\u793a\u8bcd \u4f4d\u4e8e prompt-templates\/ \u4e2d\u2014\u2014\u9884\u89c8\u7f29\u7565\u56fe\u3001\u5b8c\u6574\u63d0\u793a\u8bcd\u6b63\u6587\u3001\u76ee\u6807\u6a21\u578b\u3001\u5bbd\u9ad8\u6bd4\u548c\u6765\u6e90\u5f52\u5c5e\u3002\u4e00\u952e\u5c06\u7b80\u62a5\u653e\u5165 composer\u3002<\/p>\n

5 \u00b7 \u89c6\u9891\u4e0e HyperFrames\u2014\u2014agent \u539f\u751f\u52a8\u6001\u56fe\u5f62<\/p>\n

HyperFrames \u662f HeyGen \u7684\u5f00\u6e90\u3001agent \u539f\u751f\u89c6\u9891\u6846\u67b6\uff0c\u4f5c\u4e3a Open Design \u7684\u4e00\u7b49\u516c\u6c11\u96c6\u6210\u3002agent \u7f16\u5199 HTML + CSS + GSAP\uff0cHyperFrames \u901a\u8fc7\u65e0\u5934 Chrome + FFmpeg \u5c06\u5176\u6e32\u67d3\u4e3a\u786e\u5b9a\u7684 MP4\u3002\u53ef\u642d\u914d Seedance 2.0 \u7528\u4e8e\u7535\u5f71\u7ea7 t2v \/ i2v\uff0c Veo 3 \/ Sora 2 \/ Kling 2 \u7528\u4e8e\u8def\u7531\u6a21\u578b\u53d8\u4f53\uff0c\u4ee5\u53ca Suno v5 \/ Lyria 2 \u7528\u4e8e\u97f3\u9891\u5c42\u3002<\/p>\n

30 \u79d2 SaaS \u4ea7\u54c1\u63a8\u5e7f \u00b7 16:9 \u00b7 UI 3D \u5c55\u793a<\/p>\n

TikTok \u5361\u62c9OK \u8bf4\u8bdd\u5934\u50cf \u00b7 9:16 \u00b7 TTS + \u8bcd\u540c\u6b65\u5b57\u5e55<\/p>\n

30 \u79d2\u54c1\u724c Sizzle Reel \u00b7 16:9 \u00b7 \u97f3\u9891\u54cd\u5e94\u5f0f\u52a8\u6001\u6587\u5b57<\/p>\n

\u6761\u5f62\u56fe\u7ade\u8d5b \u00b7 16:9 \u00b7 NYT \u98ce\u683c\u6570\u636e\u4fe1\u606f\u56fe<\/p>\n

\u822a\u73ed\u5730\u56fe \u00b7 16:9 \u00b7 Apple \u98ce\u683c\u8def\u7ebf\u5c55\u793a<\/p>\n

4 \u79d2\u7535\u5f71\u7ea7 Logo \u7ed3\u675f\u753b\u9762 \u00b7 16:9 \u00b7 \u9010\u7247\u7ec4\u88c5 + \u5149\u6655<\/p>\n

$0 \u2192 $10K \u91d1\u94b1\u8ba1\u6570\u5668 \u00b7 9:16 \u00b7 Apple \u98ce\u683c hype<\/p>\n

\u7f51\u7ad9\u8f6c\u89c6\u9891 \u00b7 16:9 \u00b7 \u5728 3 \u4e2a\u89c6\u53e3\u5904\u6355\u83b7\u7f51\u7ad9<\/p>\n

\u4ed3\u5e93\u4e2d\u9644\u5e26 11 \u4e2a HyperFrames \u6a21\u677f + 39 \u4e2a Seedance \u63d0\u793a\u8bcd\u3002\u76ee\u5f55\u7f29\u7565\u56fe \u00a9 HeyGen\uff1b\u6846\u67b6\u91c7\u7528 Apache-2.0 \u8bb8\u53ef\u8bc1\u3002OD \u7279\u5b9a\u7684\u6e32\u67d3\u5de5\u4f5c\u6d41\uff08\u7ec4\u5408\u7f13\u5b58\u3001\u6c99\u7bb1\u6267\u884c\u89c4\u907f\u3001MP4 \u4f5c\u4e3a\u82af\u7247\uff09\u8be6\u89c1 design-templates\/hyperframes\/ \u3002<\/p>\n

\u4e3a\u4ec0\u4e48\u9009\u62e9 Open Design<\/p>\n

2026 \u5e74 4 \u6708\uff0cAnthropic \u53d1\u5e03\u4e86 Claude Design\u2014\u2014\u8fd9\u662f LLM \u9996\u6b21\u4e0d\u518d\u7f16\u5199\u6563\u6587\uff0c\u800c\u662f\u76f4\u63a5\u4ea4\u4ed8\u8bbe\u8ba1\u5de5\u4ef6\u3002 \u5b83\u8fc5\u901f\u8d70\u7ea2\u3002\u4f46\u5b83\u4ecd\u7136\u662f\u95ed\u6e90\u7684\u3001\u4ec5\u4ed8\u8d39\u3001\u4ec5\u4e91\u7aef\u3001\u9501\u5b9a\u5728 Anthropic \u7684\u6a21\u578b\u3001Anthropic \u7684\u6280\u80fd\u3001Anthropic \u7684\u754c\u9762\u3002\u6ca1\u6709\u7ed3\u8d26\u3001\u6ca1\u6709\u81ea\u6258\u7ba1\u3001\u6ca1\u6709 Vercel \u90e8\u7f72\u3001\u65e0\u6cd5\u66ff\u6362\u4f60\u81ea\u5df1\u7684 agent\u3002<\/p>\n

Open Design (OD) \u662f\u5f00\u6e90\u66ff\u4ee3\u54c1\u3002\u76f8\u540c\u7684\u5faa\u73af\uff0c\u76f8\u540c\u7684\u5de5\u4ef6\u4f18\u5148\u601d\u7ef4\u6a21\u5f0f\uff0c\u6ca1\u6709\u4efb\u4f55\u9501\u5b9a\uff1a<\/p>\n

\ud83e\udd16 Agent \u539f\u751f\uff0c\u6a21\u578b\u65e0\u5173\u3002 \u6211\u4eec\u4e0d\u63d0\u4f9b agent\u3002\u4f60 PATH \u4e0a\u5df2\u6709\u7684 claude \/ codex \/ cursor-agent \/ copilot \/ hermes \/ kimi \u5c31\u662f\u8bbe\u8ba1\u5f15\u64ce\u3002\u4e00\u952e\u5207\u6362\u3002<\/p>\n

\ud83e\udde0 \u9ed8\u8ba4\u54c1\u724c\u7ea7\u3002 \u6bcf\u6b21\u6e32\u67d3\u90fd\u4f1a\u8bfb\u53d6\u5f53\u524d\u5305\u7684 DESIGN.md \u4f5c\u4e3a\u6838\u5fc3\u54c1\u724c\u5951\u7ea6\u3002\u4ed3\u5e93\u9644\u5e26 151 \u4e2a\u8bbe\u8ba1\u7cfb\u7edf\u5305\uff1b\u65e7\u7248\u5305\u53ef\u80fd\u4ec5\u5305\u542b Markdown \u5951\u7ea6\uff0c\u800c\u8f83\u65b0\u7684\u5305\u8fd8\u53ef\u4ee5\u6dfb\u52a0 manifest.json \u3001 tokens.css \u3001\u7ec4\u4ef6\u3001\u8d44\u4ea7\u548c\u6765\u6e90\u8bc1\u660e\u3002\u653e\u5165\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u9009\u62e9\u5668\u5c31\u80fd\u627e\u5230\u5b83\u3002<\/p>\n

\ud83d\udda5\ufe0f \u672c\u5730\u4f18\u5148\uff0c\u6bcf\u5c42 BYOK\u3002 \u9002\u7528\u4e8e macOS\uff08Apple Silicon + Intel\uff09\u548c Windows\uff08x64\uff09\u7684\u539f\u751f\u684c\u9762\u5e94\u7528\u3002Linux AppImage \u5728\u53ef\u9009\u7248\u672c\u901a\u9053\u4e2d\u3002\u4ea7\u54c1\u5206\u6790\u548c\u4f1a\u8bdd\u56de\u653e\u9700\u5f81\u5f97\u540c\u610f\uff1b\u7ecf\u8fc7\u8131\u654f\u7684\u5b89\u5168\u548c\u53ef\u9760\u6027\u9065\u6d4b\u59cb\u7ec8\u5f00\u542f\u3002<\/p>\n

\ud83c\udf0d \u56db\u4e2a\u5c42\u9762\u53ef\u7ec4\u5408\u3002 \u63d2\u4ef6 \u5305\u542b\u53ef\u8fd0\u884c\u7684\u5de5\u4f5c\u6d41\u7a0b \u00b7 \u529f\u80fd \u6280\u80fd \u5305\u542b agent \u884c\u4e3a \u00b7 \u8bbe\u8ba1\u6a21\u677f \u5305\u542b\u6e32\u67d3\u84dd\u56fe \u00b7 \u8bbe\u8ba1\u7cfb\u7edf \u5305\u542b\u54c1\u724c\u3002\u6240\u6709\u56db\u4e2a\u5c42\u9762\u90fd\u4f7f\u7528\u53ef\u79fb\u690d\u3001\u53ef\u7248\u672c\u5316\u7684\u76ee\u5f55\uff0c\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u7f16\u5199\u548c\u53d1\u5e03\u3002<\/p>\n

\ud83d\udd01 \u5237\u65b0\u73b0\u6709\u4ee3\u7801\u5e93\u3002 \u5c06 git \u4ed3\u5e93 + DESIGN.md \u4ea4\u7ed9 agent\uff0c\u5b83\u4f1a\u5c06\u4f60\u7684\u771f\u5b9e\u7ec4\u4ef6\u91cd\u6784\u4e3a\u54c1\u724c\u89c4\u8303\u3002\u4e13\u7528\u63d2\u4ef6\u5c06 Figma \/ Pencil \u5de5\u4f5c\u6d41\u7a0b\u8fc1\u79fb\u5230 React \/ Next.js \/ Vue \u4ee3\u7801\u3002<\/p>\n

\ud83d\udd12 \u9690\u79c1\u81f3\u4e0a\u3002 \u4e00\u5207\u90fd\u5728\u4f60\u7684\u6570\u636e\u6240\u5728\u4f4d\u7f6e\u8fd0\u884c\u2014\u2014\u4f60\u7684\u7b14\u8bb0\u672c\u7535\u8111\u3001\u56e2\u961f\u7684\u670d\u52a1\u5668\u3001\u4f60\u7684 Vercel \u9879\u76ee\u3002\u5f53\u9700\u8981\u7f51\u7edc\u65f6\uff0cBYOK \u4ee3\u7406\u53d7\u5230 SSRF \u4fdd\u62a4\u3002<\/p>\n

\u5bf9\u6bd4<\/p>\n

Claude Design
Figma
Lovable \/ v0 \/ Bolt
Open Design<\/p>\n

\u5f00\u6e90
\u274c
\u274c
\u274c
\u2705 Apache-2.0<\/p>\n

\u81ea\u6258\u7ba1 \/ \u684c\u9762
\u274c
\u274c
\u274c
\u2705 macOS + Windows + Docker + Vercel web<\/p>\n

Agent \u539f\u751f\uff08\u5728\u4f60\u7684 CLI \u4e2d\u8fd0\u884c\uff09
\u4ec5 Anthropic
\u274c
\u4ec5\u4e91\u7aef agent
\u2705 25 \u4e2a CLI + BYOK<\/p>\n

\u54c1\u724c\u7ea7 DESIGN.md
\u4e13\u6709
Theme JSON
\u53d7\u9650 token
\u2705 \u5df2\u9644\u5e26 151 \u4e2a\u7cfb\u7edf<\/p>\n

\u6280\u80fd \/ \u63d2\u4ef6 \/ \u6a21\u677f
\u5c01\u95ed
\u63d2\u4ef6\u5546\u5e97
\u5c01\u95ed
\u2705 100+ \u529f\u80fd\u6280\u80fd \u00b7 \u6e32\u67d3\u6a21\u677f \u00b7 277 \u4e2a\u63d2\u4ef6<\/p>\n

HyperFrames (HTML\u2192MP4)
\u274c
\u274c
\u274c
\u2705 \u4e00\u7b49\u516c\u6c11<\/p>\n

\u5237\u65b0\u73b0\u6709\u4ed3\u5e93\u4ee5\u5339\u914d\u54c1\u724c
\u274c
\u274c
\u274c
\u2705 \u901a\u8fc7 agent + DESIGN.md<\/p>\n

\u6700\u4f4e\u8d39\u7528
Pro \/ Max \/ Team
Pro \/ Org
Pro \/ Team
BYOK \u00b7 \u4efb\u4f55\u517c\u5bb9\u7aef\u70b9<\/p>\n

\u6280\u80fd\u4e0e\u8bbe\u8ba1\u6a21\u677f<\/p>\n

100+ \u529f\u80fd\u6280\u80fd\u4f4d\u4e8e skills\/ \u4e2d\u3002 \u6bcf\u4e2a\u6280\u80fd\u9075\u5faa Agent Skills SKILL.md \u89c4\u8303\uff0c\u5e76\u63d0\u4f9b\u53ef\u590d\u7528\u7684 agent \u884c\u4e3a\u3001\u53c2\u8003\u6216\u5b9e\u7528\u5de5\u5177\u3002\u53ef\u6e32\u67d3\u7684\u8d77\u59cb\u6a21\u677f\u5355\u72ec\u4f4d\u4e8e design-templates\/ \u4e2d\uff1b\u5b83\u4eec\u4e5f\u53ef\u80fd\u4f7f\u7528 SKILL.md \uff0c\u4f46\u4f1a\u586b\u5145\u8bbe\u8ba1\u6a21\u677f\u76ee\u5f55\u800c\u975e\u529f\u80fd\u6280\u80fd\u6ce8\u518c\u8868\u3002<\/p>\n

\u4e24\u4e2a \u6a21\u5f0f \u951a\u5b9a\u4e86\u8bbe\u8ba1\u6a21\u677f\u76ee\u5f55\uff1a prototype \uff08Web\/\u79fb\u52a8\u7aef\/\u684c\u9762\u5355\u9875\u5de5\u4ef6\uff09\u548c deck \uff08\u6c34\u5e73\u6ed1\u52a8\u6f14\u793a\uff09\u3002\u5176\u4ed6\u6a21\u677f\u6db5\u76d6 image \u3001 video \u3001 audio \u548c\u5b9e\u7528\u5de5\u5177\u8868\u9762\u3002 scenario \u5b57\u6bb5\u6309\u53d7\u4f17\u5bf9\u6a21\u677f\u8fdb\u884c\u5206\u7ec4\uff1a design \u00b7 marketing \u00b7 operation \u00b7 engineering \u00b7 product \u00b7 finance \u00b7 hr \u00b7 sale \u00b7 personal \u3002<\/p>\n

\u8bbe\u8ba1\u6a21\u677f
\u6a21\u5f0f
\u573a\u666f
\u4ea7\u51fa\u5185\u5bb9<\/p>\n

web-prototype
prototype
design
\u9ed8\u8ba4\u7740\u9646\u9875 \/ \u82f1\u96c4\u533a<\/p>\n

saas-landing
prototype
marketing
\u82f1\u96c4\u533a \/ \u529f\u80fd \/ \u5b9a\u4ef7 \/ \u884c\u52a8\u53f7\u53ec<\/p>\n

dashboard
prototype
operation
\u7ba1\u7406 \/ \u5206\u6790\uff08\u5e26\u4fa7\u8fb9\u680f\uff09<\/p>\n

mobile-app
prototype
design
iPhone 15 Pro \/ Pixel \u8fb9\u6846\u5e94\u7528<\/p>\n

mobile-onboarding
prototype
design
\u542f\u52a8\u9875 \u00b7 \u4ef7\u503c\u4e3b\u5f20 \u00b7 \u767b\u5f55\u6d41\u7a0b<\/p>\n

social-carousel
prototype
marketing
3 \u5f20 1080\u00d71080 \u8f6e\u64ad\u56fe<\/p>\n

email-marketing
prototype
marketing
\u8868\u683c\u56de\u9000\u5b89\u5168\u7684\u54c1\u724c\u90ae\u4ef6<\/p>\n

magazine-poster
prototype
marketing
\u5355\u9875\u6742\u5fd7\u5e03\u5c40<\/p>\n

motion-frames
prototype
marketing
\u5faa\u73af CSS \u52a8\u6001\u82f1\u96c4\u533a<\/p>\n

sprite-animation
prototype
marketing
8 \u4f4d\u50cf\u7d20\u52a8\u753b\u8bf4\u660e<\/p>\n

pm-spec
prototype
product
PM \u89c4\u8303\u6587\u6863\uff08\u5e26\u76ee\u5f55 + \u51b3\u7b56\u65e5\u5fd7\uff09<\/p>\n

team-okrs
prototype
product
OKR \u8ba1\u5206\u5361<\/p>\n

eng-runbook
prototype
engineering
\u4e8b\u4ef6\u5904\u7406\u624b\u518c<\/p>\n

finance-report
prototype
finance
\u9ad8\u7ba1\u8d22\u52a1\u6458\u8981<\/p>\n

hr-onboarding
prototype
hr
\u89d2\u8272\u5165\u804c\u8ba1\u5212<\/p>\n

guizang-ppt
deck
marketing
\u6742\u5fd7\u98ce\u683c Web PPT\uff08\u6f14\u793a\u6587\u7a3f\u9ed8\u8ba4\uff09<\/p>\n

html-ppt-*
deck
marketing
15 \u4e2a\u6f14\u793a\u6a21\u677f \u00d7 36 \u4e2a\u4e3b\u9898\uff08\u4e3b\u6a21\u677f\u5728 design-templates\/html-ppt\/ \uff09<\/p>\n

hyperframes
video
marketing
HTML \u2192 MP4 \u52a8\u6001\u56fe\u5f62\uff08HeyGen \u5f00\u6e90\u6846\u67b6\uff09<\/p>\n

critique
utility
design
\u4e94\u7ef4\u81ea\u6211\u8bc4\u5ba1\u8bc4\u5206\u8868<\/p>\n

tweaks
utility
design
AI \u53d1\u51fa\u7684\u8c03\u6574\u9762\u677f\u6e05\u5355<\/p>\n

\u8bbe\u8ba1\u7cfb\u7edf<\/p>\n

151 \u4e2a\u4ee5 DESIGN.md \u4e3a\u4e2d\u5fc3\u7684\u54c1\u724c\u7ea7\u8bbe\u8ba1\u7cfb\u7edf\u5305 \u968f\u4ed3\u5e93\u9644\u5e26\u3002\u65e7\u7248\u5305\u53ef\u80fd\u4ec5\u5305\u542b\u8be5 Markdown \u5951\u7ea6\uff1b\u8f83\u65b0\u7684\u5305\u8fd8\u53ef\u4ee5\u643a\u5e26 manifest.json \u3001\u7f16\u8bd1\u540e\u7684 tokens.css \u3001\u7ec4\u4ef6\u5939\u5177\u3001\u8d44\u4ea7\u548c\u6765\u6e90\u8bc1\u660e\u3002\u76ee\u5f55\u6df7\u5408\u4e86\u4e0a\u6e38\u884d\u751f\u7684\u7cfb\u7edf\u548c\u9879\u76ee\u81ea\u6709\u6dfb\u52a0\u7684\u5185\u5bb9\uff1b\u5207\u6362\u4e00\u4e2a\u7cfb\u7edf \u2192 \u4e0b\u4e00\u6b21\u6e32\u67d3\u4f7f\u7528\u65b0\u7684 token\u3002<\/p>\n

\u5b8c\u6574\u76ee\u5f55\uff08\u70b9\u51fb\u5c55\u5f00\uff09
AI \u4e0e LLM \u2014 claude \u00b7 cohere \u00b7 mistral-ai \u00b7 minimax \u00b7 together-ai \u00b7 replicate \u00b7 runwayml \u00b7 elevenlabs \u00b7 ollama \u00b7 x-ai<\/p>\n

\u5f00\u53d1\u8005\u5de5\u5177 \u2014 cursor \u00b7 vercel \u00b7 linear-app \u00b7 framer \u00b7 expo \u00b7 clickhouse \u00b7 mongodb \u00b7 supabase \u00b7 hashicorp \u00b7 posthog \u00b7 sentry \u00b7 warp \u00b7 webflow \u00b7 sanity \u00b7 mintlify \u00b7 lovable \u00b7 composio \u00b7 opencode-ai \u00b7 voltagent<\/p>\n

\u751f\u4ea7\u529b \u2014 notion \u00b7 figma \u00b7 miro \u00b7 airtable \u00b7 superhuman \u00b7 intercom \u00b7 zapier \u00b7 cal \u00b7 clay \u00b7 raycast<\/p>\n

\u91d1\u878d\u79d1\u6280 \u2014 stripe \u00b7 coinbase \u00b7 binance \u00b7 kraken \u00b7 mastercard \u00b7 revolut \u00b7 wise<\/p>\n

\u7535\u5b50\u5546\u52a1 \u2014 shopify \u00b7 airbnb \u00b7 uber \u00b7 nike \u00b7 starbucks \u00b7 pinterest<\/p>\n

\u5a92\u4f53 \u2014 spotify \u00b7 playstation \u00b7 wired \u00b7 theverge \u00b7 meta<\/p>\n

\u6c7d\u8f66 \u2014 tesla \u00b7 bmw \u00b7 ferrari \u00b7 lamborghini \u00b7 bugatti \u00b7 renault<\/p>\n

\u5176\u4ed6 \u2014 apple \u00b7 ibm \u00b7 nvidia \u00b7 vodafone \u00b7 resend \u00b7 spacex<\/p>\n

\u5165\u95e8 \u2014 default \uff08\u4e2d\u6027\u73b0\u4ee3\uff09 \u00b7 warm-editorial<\/p>\n

\u63d2\u4ef6<\/p>\n

277 \u4e2a\u5b98\u65b9\u63d2\u4ef6\u4ee5\u53ca 183 \u4e2a\u53ef\u91cd\u6df7\u7684\u53c2\u8003\u793a\u4f8b \u4f4d\u4e8e plugins\/_official\/ \u4e2d\u3002\u6bcf\u4e2a\u6761\u76ee\u662f\u4e00\u4e2a\u53ef\u79fb\u690d\u7684\u63d2\u4ef6\u76ee\u5f55\uff0c\u4ee5 open-design.json \u951a\u5b9a\uff0c\u5e76\u9644\u5e26\u5176\u7c7b\u578b\u6240\u9700\u7684\u8d1f\u8f7d\uff1a\u4f8b\u5982 SKILL.md \u7528\u4e8e agent \u5de5\u4f5c\u6d41\u7a0b\uff0c template.json \u7528\u4e8e\u5a92\u4f53\u6a21\u677f\uff0c\u6216 DESIGN.md \u7528\u4e8e\u8bbe\u8ba1\u7cfb\u7edf\u6761\u76ee\u3002\u76f4\u63a5\u8df3\u8f6c\u5230\u67d0\u4e2a\u7c7b\u522b\uff1a<\/p>\n

\u7c7b\u522b
\u6570\u91cf
\u5185\u5bb9<\/p>\n

scenarios\/
13
\u5b8c\u6574\u8bbe\u8ba1\u573a\u666f\u2014\u2014 od-default \u3001 od-design-refine \u3001 od-figma-migration \u3001 od-code-migration \u3001 od-react-export \u3001 od-nextjs-export \u3001 od-vue-export \u3001 od-media-generation \u3001 od-new-generation \u3001 od-tune-collab \u3001 od-plugin-authoring \u3001 od-share-to-community \u3001 od-web-effect-extractor<\/p>\n

image-templates\/
45
\u4e00\u6b21\u6027\u56fe\u7247\u63d0\u793a\u8bcd\u2014\u2014\u7f16\u8f91\u3001\u7535\u5f71\u3001\u4ea7\u54c1\u3001\u4eba\u50cf<\/p>\n

video-templates\/
63
HyperFrames \/ Seedance \/ Veo \u52a8\u6001\u6a21\u677f<\/p>\n

design-systems\/
143
\u5305\u88c5\u4e3a\u63d2\u4ef6\u7684\u54c1\u724c DESIGN.md<\/p>\n

atoms\/
13
\u53ef\u590d\u7528 UI \u7247\u6bb5\uff08\u6309\u94ae\u3001\u82f1\u96c4\u533a\u3001KPI \u5361\u7247\uff09<\/p>\n

examples\/
183
\u53ef\u91cd\u6df7\u7684\u53c2\u8003\u8f93\u51fa<\/p>\n

\u63d2\u4ef6\u80fd\u505a\u4ec0\u4e48<\/p>\n

\ud83e\udd16 \u5728\u4efb\u4f55\u7f16\u7801 agent \u4e2d\u8fd0\u884c \u2014\u2014Claude Code\u3001Codex\u3001Cursor\u3001Copilot\u3001OpenClaw\u3001Antigravity\u3001Hermes\u3001Kimi\u2026\u2026\u901a\u8fc7 agent \u5df2\u7ecf\u719f\u6089\u7684\u540c\u4e00\u6280\u80fd\u534f\u8bae\u3002<\/p>\n

\ud83d\udd01 \u5c06 Figma \/ Pencil \u5de5\u4f5c\u6d41\u7a0b\u8fc1\u79fb \u2192 React\u3001Next.js \u6216 Vue \u6e90\u7801\u3002\u53c2\u89c1 od-figma-migration \u3002<\/p>\n

\ud83d\udee0\ufe0f \u5c06\u73b0\u6709\u4ee3\u7801\u5e93\u5237\u65b0\u4e3a\u54c1\u724c\u89c4\u8303 \u2014\u2014\u5c06\u63d2\u4ef6\u6307\u5411 git \u4ed3\u5e93 + DESIGN.md \uff0c\u751f\u6210\u4e00\u4e2a PR\u3002\u53c2\u89c1 od-code-migration \u3002<\/p>\n

\ud83d\udcbe \u6301\u4e45\u5316\u81ea\u5b9a\u4e49\u5de5\u4f5c\u6d41\u7a0b \u2014\u2014\u4f60\u56e2\u961f\u7684\u53ef\u590d\u7528\u6a21\u677f\u4e0e\u5df2\u9644\u5e26\u7684\u6a21\u677f\u5e76\u5b58\u3002<\/p>\n

\u5b8c\u6574\u5de5\u4f5c\u6d41\u7a0b\u2014\u2014\u4ece\u7b80\u62a5\u5230\u5de5\u4ef6<\/p>\n

brief \u2192 plugin \u2192 direction \u2192 design system \u2192 artifact \u2192 handoff \u2192 memory<\/p>\n

PM \u63d0\u4ea4\u4e00\u4e2a\u7b80\u62a5\u3002 \u63d2\u4ef6\u9009\u62e9\u5668\u63d0\u4f9b\u7740\u9646\u9875 \u00b7 pitch deck \u00b7 \u4eea\u8868\u76d8 \u00b7 \u793e\u4ea4\u5a92\u4f53\u5e16\u5b50 \u00b7 PM \u89c4\u8303 \u00b7 OKR \u8ba1\u5206\u5361\u2026\u2026<\/p>\n

\u8bbe\u8ba1\u5e08\uff08\u6216 agent\uff09\u9501\u5b9a\u65b9\u5411\u3002 \u6ca1\u6709\u54c1\u724c\uff1f\u4ece 5 \u4e2a\u7cbe\u9009\u65b9\u5411\u4e2d\u9009\u62e9\u3002\u6709\u54c1\u724c\uff1f\u622a\u56fe\/URL \u2192 agent \u8fde\u63a5 GitHub\u3001\u5bfc\u5165 Figma\uff0c\u5e76\u5c06\u53ef\u590d\u7528\u7684 DESIGN.md \u7f16\u7801\u5316\u3002<\/p>\n

agent \u521b\u5efa\u7b2c\u4e00\u4e2a\u4ea4\u4ed8\u7269\u3002 \u63d2\u4ef6 + \u529f\u80fd\u6280\u80fd\u6216\u8bbe\u8ba1\u6a21\u677f + DESIGN.md \u88ab\u7ed1\u5b9a\u3002\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684 CLI \u8fd0\u884c\u4f1a\u5199\u5165\u89c4\u8303\u7684\u9879\u76ee\u6587\u4ef6\uff0c\u9884\u89c8\u968f\u4e4b\u66f4\u65b0\uff1bBYOK\/\u7eaf API \u8fd0\u884c\uff08\u65e0\u6587\u4ef6\u5de5\u5177\uff09\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5b8c\u6574\u7684 <artifact> \u5757\u3002<\/p>\n

\u4ea4\u7ed9\u5de5\u7a0b\u56e2\u961f\u3002 \u5de5\u4ef6\u662f\u771f\u6b63\u7684 HTML\/CSS\u2014\u2014\u5c06\u5176\u653e\u5165 Cursor\u3001Codex \u6216 Claude Code \u4e2d\u7ee7\u7eed\u4f5c\u4e3a\u4ee3\u7801\u6784\u5efa\u3002\u6216\u8005\u76f4\u63a5\u5bfc\u51fa PPTX \/ PDF \/ MP4 \u7ed9\u8425\u9500\u56e2\u961f\u3002<\/p>\n

Open Design \u4f1a\u968f\u7740\u4f60\u7684\u4f7f\u7528\u800c\u53d8\u5f97\u66f4\u667a\u80fd\u3002 \u4f60\u7684\u622a\u56fe\u3001\u5b57\u4f53\u3001\u8c03\u8272\u677f\u548c\u5df2\u786e\u8ba4\u7684\u5de5\u4ef6\u4f1a\u7d2f\u79ef\u4e3a\u4e0b\u4e00\u6b21\u4f1a\u8bdd\u7684\u9ed8\u8ba4\u503c\u3002\u51cf\u5c11\u8fd4\u5de5\uff0c\u51cf\u5c11\u6f02\u79fb\u3002<\/p>\n

\u5e73\u53f0\u517c\u5bb9\u6027<\/p>\n

Open Design \u4ee5 \u6280\u80fd\u3001CLI \u548c MCP \u670d\u52a1\u5668 \u7684\u5f62\u5f0f\u63d0\u4f9b\uff0c\u4e3b\u6d41\u7f16\u7801 agent \u539f\u751f\u4f7f\u7528\u3002\u5b89\u88c5 OD \u540e\uff0c\u4e00\u6761 od mcp install <agent> \u547d\u4ee4\u5c31\u80fd\u5c06 MCP \u670d\u52a1\u5668\u63a5\u5165\u8be5 agent \u7684\u914d\u7f6e\uff0c\u7136\u540e\u4f60\u53ef\u4ee5\u5728\u4efb\u4f55 agent \u4e2d\u8c03\u7528\u76f8\u540c\u7684\u5de5\u5177\u3002<\/p>\n

\u7f16\u7801 agent \/ \u5e73\u53f0
\u72b6\u6001
\u4e00\u884c MCP \u670d\u52a1\u5668\u5b89\u88c5\u547d\u4ee4<\/p>\n

Claude Code
\u2705 \u652f\u6301
od mcp install claude<\/p>\n

Codex CLI
\u2705 \u652f\u6301
od mcp install codex<\/p>\n

DeepSeek Reasonix
\u2705 \u652f\u6301
od mcp install reasonix<\/p>\n

Raven
\u2705 \u652f\u6301
od mcp install raven<\/p>\n

Cursor
\u2705 \u652f\u6301
od mcp install cursor<\/p>\n

VS Code + GitHub Copilot
\u2705 \u652f\u6301
od mcp install copilot<\/p>\n

GitHub Copilot CLI
\u2705 \u652f\u6301
od mcp install copilot<\/p>\n

OpenCode
\u2705 \u652f\u6301
od mcp install opencode<\/p>\n

OpenClaw
\u2705 \u652f\u6301
od mcp install openclaw<\/p>\n

Antigravity
\u2705 \u652f\u6301
od mcp install antigravity<\/p>\n

Cline
\u2705 \u652f\u6301
od mcp install cline<\/p>\n

Trae
\u2705 \u652f\u6301
od mcp install trae<\/p>\n

Kimi CLI
\u2705 \u652f\u6301
od mcp install kimi<\/p>\n

Kiro
\u2705 \u652f\u6301
od mcp install kiro<\/p>\n

Pi Agent
\u2705 \u652f\u6301
od mcp install pi<\/p>\n

Mistral Vibe CLI
\u2705 \u652f\u6301
od mcp install vibe<\/p>\n

Hermes Agent
\u2705 \u652f\u6301
od mcp install hermes<\/p>\n

od mcp install <agent> –print \u7528\u4e8e\u9884\u89c8\uff08\u5e72\u8fd0\u884c\uff09\u00b7 –uninstall \u7528\u4e8e\u5378\u8f7d \u00b7 \u5b8c\u6574\u5217\u8868\u53ef\u901a\u8fc7 od mcp install –help \u67e5\u770b\u3002<\/p>\n

\u6ca1\u6709\u5b89\u88c5 CLI\uff1f \u4f4d\u4e8e POST \/api\/proxy\/{anthropic,openai,azure,google,ollama,senseaudio}\/stream \u7684 BYOK \u4ee3\u7406\u63d0\u4f9b\u76f8\u540c\u7684\u5faa\u73af\uff08\u65e0\u9700\u8fdb\u7a0b\u751f\u6210\uff09\u2014\u2014\u7c98\u8d34 baseUrl + apiKey + model \uff0c\u9884\u8bbe\u652f\u6301 OpenAI\u3001Atlas Cloud\u3001Anthropic\u3001Azure OpenAI\u3001Google Gemini\u3001Ollama\u3001LM Studio\u3001vLLM \u6216\u4efb\u4f55\u517c\u5bb9 OpenAI \u7684\u7aef\u70b9\u3002Atlas Cloud \u4f7f\u7528 https:\/\/api.atlascloud.ai\/v1 \u914d\u5408\u4f60\u81ea\u5df1\u7684\u5bc6\u94a5\u548c\u517c\u5bb9 OpenAI \u7684\u6a21\u578b ID\uff08\u5982 qwen\/qwen3.5-flash \uff09\u3002\u6bcf\u4e2a\u76ee\u6807\u90fd\u6709 SSRF \u4fdd\u62a4\uff0c\u5728\u5b88\u62a4\u8fdb\u7a0b\u8fb9\u7f18\u963b\u6b62\u5185\u90e8 IP \/ \u94fe\u8def\u672c\u5730 \/ CGNAT\u3002<\/p>\n

\u5b89\u5168\u6a21\u578b<\/p>\n

\u9ed8\u8ba4\u53ea\u8bfb\uff0c\u5b88\u62a4\u8fdb\u7a0b\u7ed1\u5b9a\u5230 127.0.0.1 \uff0cSSRF \u5728\u4ee3\u7406\u8fb9\u7f18\u88ab\u963b\u6b62\u3002LAN \u66b4\u9732\u9700\u8981\u663e\u5f0f\u8bbe\u7f6e OD_BIND_HOST \u548c OD_ALLOWED_ORIGINS \u3002\u8fde\u63a5\u51ed\u8bc1\u548c\u5b9e\u65f6\u5de5\u4ef6\u9884\u89c8\u8def\u7531\u59cb\u7ec8\u4ec5\u9650\u4e8e\u56de\u73af\u3002<\/p>\n

\u5185\u90e8\u6258\u7ba1\u7684\u6a21\u578b\u7aef\u70b9\u3002 \u4e3a\u9632\u6b62 SSRF\uff0c\u5b88\u62a4\u8fdb\u7a0b\u9ed8\u8ba4\u4f1a\u963b\u6b62\u89e3\u6790\u4e3a\u79c1\u6709\/\u5185\u90e8\u5730\u5740\u8303\u56f4\uff08RFC1918\u3001\u94fe\u8def\u672c\u5730\u3001CGNAT \u548c\u4e91\u5143\u6570\u636e IP\uff09\u7684\u63d0\u4f9b\u8005\u57fa\u7840 URL\uff0c\u5e76\u663e\u793a\u201cInternal IPs blocked\u201d\u3002\u5982\u679c\u4f60\u8fd0\u884c\u5185\u90e8\u6258\u7ba1\u7f51\u5173\uff08\u4f8b\u5982\u5728\u4ec5 VPN \u7684 10.x \/ 192.168.x \u5730\u5740\u4e0a\u7684 LiteLLM \u6216 Ollama\uff09\uff0c\u53ef\u4ee5\u901a\u8fc7 OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,… \u9009\u62e9\u9000\u51fa\u8be5\u4e3b\u673a\u2014\u2014\u8fd9\u662f\u4e00\u4e2a\u9017\u53f7\u6216\u7a7a\u683c\u5206\u9694\u7684\u88f8\u4e3b\u673a\u540d\u6216 IP \u5217\u8868\uff08 10.0.0.5 \u3001 litellm.internal.corp \uff1b\u63a5\u53d7 host:port \u6216\u5b8c\u6574 URL \u5e76\u7b80\u5316\u4e3a\u5176\u4e3b\u673a\u540d\uff1bIPv6 \u5fc5\u987b\u52a0\u62ec\u53f7\uff0c\u4f8b\u5982 [fd00::1] \uff09\u3002\u5141\u8bb8\u5217\u8868\u662f\u4e25\u683c\u9009\u62e9\u52a0\u5165\u7684\uff08\u9ed8\u8ba4\u7a7a\uff09\uff0c\u7cbe\u786e\u4e3b\u673a\uff08\u65e0\u5b50\u57df\/\u5b50\u5b57\u7b26\u4e32\u5339\u914d\uff09\uff0c\u5e76\u4e14 \u4ec5 \u9002\u7528\u4e8e\u4f60\u914d\u7f6e\u7684\u63d0\u4f9b\u8005\u7aef\u70b9\uff08\u8fde\u63a5\u6d4b\u8bd5\u3001\u6a21\u578b\u53d1\u73b0\u3001BYOK \u804a\u5929\uff09\u3002\u5b83\u6545\u610f \u4e0d \u653e\u5bbd\u5bf9\u4e0a\u6e38\u54cd\u5e94\u5185\u8fd4\u56de\u7684\u4e0b\u8f7d URL \u7684\u9632\u62a4\uff0c\u8fd9\u4e9b URL \u4ecd\u88ab\u963b\u6b62\u3002\u683c\u5f0f\u9519\u8bef\u7684\u6761\u76ee\u2014\u2014\u6216\u4e0d\u53d7\u652f\u6301\u7684 CIDR \u8868\u793a\u6cd5\u2014\u2014\u4f1a\u88ab\u4e22\u5f03\u5e76\u53d1\u51fa\u8b66\u544a\uff0c\u800c\u4e0d\u662f\u9759\u9ed8\u4fe1\u4efb\uff0c\u56e0\u6b64\u62fc\u5199\u9519\u8bef\u4e0d\u4f1a\u6084\u6084\u6269\u5927\uff08\u6216\u672a\u80fd\u6269\u5927\uff09\u9632\u62a4\u3002\u5141\u8bb8\u5217\u8868\u4e2d\u7684\u4e3b\u673a\u540d\u4f1a\u4fe1\u4efb\u5b83\u6240\u89e3\u6790\u5230\u7684\u4efb\u4f55\u5185\u5bb9\uff08\u5982\u540c OD_ALLOWED_ORIGINS \uff09\uff1b\u5982\u679c\u4f60\u5e0c\u671b\u91cd\u65b0\u68c0\u67e5 DNS \u89e3\u6790\u7684\u5730\u5740\uff0c\u8bf7\u6539\u4e3a\u5141\u8bb8\u5217\u8868\u4e2d\u7684\u89e3\u6790 IP\u3002<\/p>\n

\u8def\u7ebf\u56fe<\/p>\n

[x] \u5b88\u62a4\u8fdb\u7a0b + \u6db5\u76d6 25 \u4e2a\u4e0d\u540c\u7f16\u7801 agent CLI \u53ef\u6267\u884c\u6587\u4ef6\u7684 26 \u4e2a\u8fd0\u884c\u65f6\u5b9a\u4e49 + \u6280\u80fd\/\u8bbe\u8ba1\u6a21\u677f\u6ce8\u518c\u8868 + \u8bbe\u8ba1\u7cfb\u7edf\u76ee\u5f55<\/p>\n

[x] Web \u5e94\u7528 + \u804a\u5929 + \u95ee\u9898\u8868\u5355 + 5 \u65b9\u5411\u9009\u62e9\u5668 + \u5f85\u529e\u8fdb\u5ea6 + \u6c99\u7bb1\u9884\u89c8<\/p>\n

[x] 100+ \u529f\u80fd\u6280\u80fd \u00b7 \u72ec\u7acb\u7684\u6e32\u67d3\u6a21\u677f\u76ee\u5f55 \u00b7 151 \u4e2a\u8bbe\u8ba1\u7cfb\u7edf\u5305 \u00b7 5 \u4e2a\u89c6\u89c9\u65b9\u5411 \u00b7 5 \u4e2a\u8bbe\u5907\u6846\u67b6<\/p>\n

[x] \u57fa\u4e8e SQLite \u7684\u9879\u76ee \u00b7 \u5bf9\u8bdd \u00b7 \u6d88\u606f \u00b7 \u6807\u7b7e\u9875 \u00b7 \u6a21\u677f<\/p>\n

[x] \u591a\u63d0\u4f9b\u8005 BYOK \u4ee3\u7406\uff08 \/api\/proxy\/{anthropic,openai,azure,google,ollama,senseaudio}\/stream \uff09\uff0c\u5305\u542b OpenAI \u517c\u5bb9\u9884\u8bbe\uff08\u5305\u62ec Atlas Cloud\uff09+ SSRF \u9632\u62a4<\/p>\n

[x] Claude Design ZIP \u5bfc\u5165\uff08 \/api\/import\/claude-design \uff09<\/p>\n

[x] Sidecar \u534f\u8bae + Electron \u684c\u9762 + IPC \u81ea\u52a8\u5316<\/p>\n

[x] \u5de5\u4ef6 lint API + 5 \u7ef4\u81ea\u6211\u8bc4\u5ba1\u9884\u53d1\u5e03\u95e8\u63a7<\/p>\n

[x] 0.8.0 \u2014 \u63d2\u4ef6\u5e02\u573a\u57fa\u7840\u8bbe\u65bd\uff08261 \u4e2a\u5b98\u65b9\u63d2\u4ef6\uff0c\u6e05\u5355\u89c4\u8303\uff0c\u6bcf\u4e2a agent \u7684\u5b89\u88c5\u811a\u672c\uff09<\/p>\n

[x] 0.9.0 \u2014 Open Design Cloud\uff08\u5185\u7f6e\u4e8e\u5e94\u7528\u4e2d\u7684\u5b98\u65b9\u6a21\u578b\u670d\u52a1\uff1a\u96f6\u914d\u7f6e\uff0c\u4e00\u952e\u767b\u5f55\uff09<\/p>\n

[x] 0.10.0 \u2014 \u4e00\u4f53\u5316\u8bbe\u8ba1\u5de5\u4f5c\u533a\uff1a\u6574\u4e2a\u521b\u4f5c\u5faa\u73af\u5728\u4e00\u4e2a\u7a97\u53e3\u4e2d\uff08\u53c2\u8003 \u2192 \u7d20\u6750 \u2192 \u4ea4\u4e92\u5f0f\u7f16\u8f91 \u2192 \u52a8\u6001 \u2192 \u4ea4\u63a5\uff09<\/p>\n

[x] 0.11.0 \u2014 The Bazaar \uff1a\u5f00\u653e\u6784\u5efa\u2014\u2014\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u9009\u7528\u548c\u8d21\u732e\u7684\u793e\u533a\u63d2\u4ef6\u548c\u8bbe\u8ba1\u7cfb\u7edf\u5e02\u573a<\/p>\n

[x] 0.12.0 \u2014 \u54c1\u724c\u9a71\u52a8\u7684\u8bbe\u8ba1\u7cfb\u7edf \uff1a\u5c06\u4f60\u5df2\u6709\u7684\u54c1\u724c\u8f6c\u53d8\u4e3a\u53ef\u590d\u7528\u3001\u53ef\u79fb\u690d\u7684 DESIGN.md \u7cfb\u7edf<\/p>\n

[x] 0.13.0 \u2014 \u4fdd\u6301\u6d41\u7545 \uff1a\u539f\u751f\u4f1a\u8bdd\u6062\u590d\u3001\u66f4\u5feb\u7684\u6a21\u578b\u9009\u62e9\u3001\u76f4\u63a5\u5bfc\u51fa\u4e3a\u622a\u56fe\u652f\u6301\u7684 PPTX \/ PDF<\/p>\n

[x] \u6253\u5305\u7684 Electron \u6784\u5efa\u2014\u2014macOS\uff08Apple Silicon + Intel\uff09+ Windows\uff08x64\uff09+ Linux AppImage\uff08\u53ef\u9009\u901a\u9053\uff09<\/p>\n

[ ] \u8bc4\u8bba\u6a21\u5f0f\u7cbe\u7ec6\u7f16\u8f91\u2014\u2014\u90e8\u5206\u5df2\u53d1\u5e03\uff1b\u53ef\u9760\u7684\u5b9a\u5411\u4fee\u8865\u6b63\u5728\u8fdb\u884c\u4e2d<\/p>\n

[ ] AI \u53d1\u51fa\u7684\u8c03\u6574\u9762\u677f UX\u2014\u2014\u5c1a\u672a\u5b9e\u73b0<\/p>\n

[ ] npx od init \u7528\u4e8e\u4f7f\u7528 DESIGN.md \u642d\u5efa\u9879\u76ee\u9aa8\u67b6<\/p>\n

[ ] \u63d2\u4ef6 SDK + od plugin {add,list,remove,test,publish} CLI<\/p>\n

[ ] Figma \/ Pencil \u2192 React \/ Next \/ Vue \u8fc1\u79fb\u63d2\u4ef6\uff08alpha\uff09<\/p>\n

[ ] \u5237\u65b0\u73b0\u6709\u4ee3\u7801\u5e93\u63d2\u4ef6\uff08\u6307\u5411 git \u4ed3\u5e93 + DESIGN.md \uff09<\/p>\n

\u53c2\u8003\u4e0e\u6765\u6e90<\/p>\n

\u9879\u76ee
\u89d2\u8272<\/p>\n

Claude Design
\u672c\u4ed3\u5e93\u4f5c\u4e3a\u5f00\u6e90\u66ff\u4ee3\u54c1\u7684\u95ed\u6e90\u4ea7\u54c1\u3002<\/p>\n

alchaincyf\/huashu-design
\u8bbe\u8ba1\u54f2\u5b66\u6307\u5357\u2014\u2014\u521d\u7ea7\u8bbe\u8ba1\u5e08\u5de5\u4f5c\u6d41\u7a0b\u3001\u54c1\u724c\u8d44\u4ea7\u534f\u8bae\u3001\u53cd AI \u5783\u573e\u68c0\u67e5\u6e05\u5355\u3001\u4e94\u7ef4\u8bc4\u5ba1\u3002<\/p>\n

op7418\/guizang-ppt-skill
\u6742\u5fd7\u98ce\u683c Web PPT \u6280\u80fd\uff0c\u539f\u6837\u6253\u5305\u5728 design-templates\/guizang-ppt\/ \u4e0b\u3002\u6f14\u793a\u6587\u7a3f\u6a21\u5f0f\u7684\u9ed8\u8ba4\u8bbe\u7f6e\u3002<\/p>\n

lewislulu\/html-ppt-skill
HTML PPT Studio \u5bb6\u65cf\u2014\u201415 \u4e2a\u6f14\u793a\u6a21\u677f\u300136 \u4e2a\u4e3b\u9898\u300131 \u4e2a\u9875\u9762\u5e03\u5c40\u3001\u52a8\u753b\u8fd0\u884c\u65f6\u3001\u78c1\u5361\u6f14\u793a\u8005\u6a21\u5f0f\u3002<\/p>\n

OpenCoworkAI\/open-codesign
\u9996\u4e2a\u5f00\u6e90 Claude Design \u66ff\u4ee3\u54c1\uff1b\u6211\u4eec\u501f\u7528\u7684 UX \u6a21\u5f0f\uff08\u6d41\u5f0f\u5de5\u4ef6\u5faa\u73af\u3001\u6c99\u7bb1 iframe\u3001\u5b9e\u65f6 agent \u9762\u677f\uff09\u3002<\/p>\n

multica-ai\/multica
\u5b88\u62a4\u8fdb\u7a0b + \u9002\u914d\u5668\u67b6\u6784\u2014\u2014PATH \u626b\u63cf agent \u68c0\u6d4b\uff0c\u672c\u5730\u5b88\u62a4\u8fdb\u7a0b\u4f5c\u4e3a\u552f\u4e00\u7279\u6743\u8fdb\u7a0b\u3002<\/p>\n

VoltAgent\/awesome-design-md
\u6700\u521d 9 \u8282 DESIGN.md \u6a21\u5f0f\u548c 70 \u4e2a\u4e0a\u6e38\u884d\u751f\u7cfb\u7edf\u7684\u5386\u53f2\u6765\u6e90\uff1b\u5f53\u524d\u5305\u53ef\u80fd\u6269\u5c55\u8be5\u57fa\u7ebf\u3002<\/p>\n

bergside\/awesome-design-skills
\u6dfb\u52a0\u5230 design-systems\/ \u4e0b\u7684 57 \u4e2a\u8bbe\u8ba1\u6280\u80fd\u6765\u6e90\u3002<\/p>\n

heygen-com\/hyperframes
HTML\u2192MP4 \u52a8\u6001\u56fe\u5f62\u6846\u67b6\uff0c\u4f5c\u4e3a Open Design \u4e2d\u7684\u4e00\u7b49\u516c\u6c11 hyperframes-html \u96c6\u6210\u3002<\/p>\n

Claude Code skills
\u6211\u4eec\u76f4\u63a5\u91c7\u7528\u7684 SKILL.md \u89c4\u8303\u3002<\/p>\n

\u8bb8\u53ef\u8bc1<\/p>\n

Apache-2.0\u3002\u9644\u5e26\u81ea\u6709 LICENSE \u6587\u4ef6\u7684\u6280\u80fd\u548c\u6a21\u677f\u4fdd\u7559\u5176\u8bb8\u53ef\u8bc1\uff0c\u5305\u62ec design-templates\/guizang-ppt\/ \uff08MIT\uff0c alchaincyf\/huashu-design \uff09\u3001 design-templates\/html-ppt\/ \uff08MIT\uff0c lewislulu \uff09\u548c skills\/web-clone\/ \uff08MIT\uff0c Jane-xiaoer \uff09\u3002<\/p>\n

\u8bd5\u8bd5\u8fd9\u6837\u505a<\/h2>\n