{"slug":"alchaincyf-huashu-slides-a27cd0","title":"\u82b1\u53d4PPTX\u7aef\u5230\u7aef\u5236\u4f5c","description":"\u4ece\u539f\u59cb\u5185\u5bb9\u51fa\u53d1\uff0c\u5148\u786e\u8ba4\u534f\u4f5c\u6a21\u5f0f\u4e0e\u88c5\u914d\u8def\u5f84\uff0c\u518d\u4ea7\u51fa\u65ad\u8a00\u5f0f\u5927\u7eb2\u3001\u9009\u5b9a\u8bbe\u8ba1\u7cfb\u7edf\u3001\u751f\u6210\u63d2\u753b\u6216\u6574\u9875\u89c6\u89c9\uff0c\u6700\u540e\u88c5\u914d\u4e3a\u53ef\u7f16\u8f91\u6216\u56fe\u7247\u578bPPTX\u3002\u542b18\u79cd\u98ce\u683c\u6837\u4f8b\u4e0e\u8bbe\u8ba1\u53c2\u8003\uff0c\u9002\u5408\u9700\u8981\u7ed3\u6784\u5316\u6f14\u793a\u6587\u7a3f\u7684\u7528\u6237\u3002","category":"\u526a\u8f91\u4e0e\u5305\u88c5","tags":["alchaincyf","\u82b1\u53d4","\u526a\u8f91\u4e0e\u5305\u88c5"],"author":"\u82b1\u53d4 \u00b7 alchaincyf","source_url":"https://github.com/alchaincyf/huashu-skills/blob/7de517aa12f61ff31c46f1591fbeaf865160d69f/huashu-slides/SKILL.md","license":"MIT","status":"published","verification":"source_reviewed","verification_notes":"\u5df2\u6838\u5bf9\u539f\u59cb\u4ed3\u5e93\u3001\u56fa\u5b9a\u63d0\u4ea4\u3001\u8bb8\u53ef\u3001\u6280\u80fd\u6b63\u6587\u4e0e\u5305\u7ed3\u6784\uff0c\u5e76\u8865\u5145\u4e2d\u6587\u6267\u884c\u9a8c\u6536\u8bf4\u660e\uff1b\u672a\u8fd0\u884c\u5305\u5185\u811a\u672c\u3002","revision":"7f511ca51dfd46f292333e2324f18e24","created_at":"2026-11-02T14:47:08+00:00","updated_at":"2026-11-02T14:47:08+00:00","source_repo":"alchaincyf/huashu-skills","source_path":"huashu-slides/SKILL.md","source_commit":"7de517aa12f61ff31c46f1591fbeaf865160d69f","source_updated_at":"2026-11-02T14:46:04+00:00","stars":0,"proxy_score":null,"score":null,"grade":null,"dimensions":{},"evaluation":{},"installs":0,"platforms":[],"formats":[],"category_slug":"packaging","category_name":"\u526a\u8f91\u4e0e\u5305\u88c5","quality":{"review_type":"text_and_package_review","readiness":"requires_setup","reviewed_at":"2026-11-02T14:46:04+00:00","review_summary":"\u65b9\u6cd5\u4e0e\u6750\u6599\u8f83\u5b8c\u6574\uff0c\u53ef\u53d1\u5e03\uff1b\u4f46\u88c5\u914d\u4e0e\u56fe\u50cf\u751f\u6210\u4f9d\u8d56\u5305\u5916\u811a\u672c\u548cAPI\u5bc6\u94a5\uff0c\u7528\u6237\u9700\u5148\u786e\u8ba4\u73af\u5883\u4e0e\u8def\u5f84\uff0c\u5305\u5185\u811a\u672c\u672a\u6267\u884c\u9a8c\u8bc1\u3002","cost_notes":"\u6574\u9875AI\u56fe\u8def\u5f84\u4f1a\u6309\u9875\u8c03\u7528\u56fe\u50cf\u751f\u6210API\uff0c\u8d39\u7528\u968f\u9875\u6570\u4e0e\u5206\u8fa8\u7387\u4e0a\u5347\uff0c\u9700\u7528\u6237\u81ea\u884c\u786e\u8ba4\u989d\u5ea6\u4e0e\u5355\u4ef7\uff1b\u672c\u5ba1\u9605\u672a\u62a5\u4ef7\u3001\u672a\u8c03\u7528\u3002","source_sha256":"d9d58f48350e8fefff3c67fa875e1775157f418a40d18fa2beb016f200259c7a","prerequisites":["Python\u4e0euv\u8fd0\u884c\u73af\u5883\uff08\u8fd0\u884ccreate_slides.py\uff09","Node\u73af\u5883\u4e0epptxgenjs\u3001html2pptx.js\uff08Path A\u88c5\u914d\uff09","Playwright\uff08HTML\u9884\u89c8\u622a\u56fe\uff09","\u56fe\u50cf\u751f\u6210\u9700GEMINI_API_KEY\u53ca\u53ef\u7528\u7684\u56fe\u50cf\u751f\u6210\u811a\u672c\uff1bSKILL.md\u81ea\u8ff0nano-banana-pro\u4e3a\u5916\u90e8skill\u4e0d\u968f\u5305\u5206\u53d1\uff0c\u9700\u53e6\u884c\u786e\u8ba4\u66ff\u4ee3\u811a\u672c\u8def\u5f84\u662f\u5426\u5b58\u5728"],"checks":["\u5927\u7eb2\u4e2d\u6bcf\u9875\u6807\u9898\u662f\u5426\u4e3a\u5b8c\u6574\u65ad\u8a00\u53e5\u800c\u975e\u4e3b\u9898\u8bcd\uff0c\u4e14\u6bcf\u9875\u8981\u70b9\u4e0d\u8d85\u8fc74\u6761","\u9009\u5b9a\u8bbe\u8ba1\u7cfb\u7edf\u662f\u5426\u7ed9\u51fa\u54f2\u5b66\u3001\u914d\u8272\u3001\u5b57\u4f53\u6bd4\u4f8b\u4e0e\u6784\u56fe\u89c4\u5219\uff0c\u800c\u975e\u4ec5\u5217\u989c\u8272","Path A\u4ea7\u7269\u4e2d\u6240\u6709\u6587\u5b57\u662f\u5426\u4f4d\u4e8ep/h/ul/ol\u6807\u7b7e\u5185\uff0c\u6b63\u6587\u5c3a\u5bf8\u662f\u5426\u4e3a720pt\u00d7405pt","Path B\u6bcf\u9875\u56fe\u7247\u662f\u5426\u542b\u5168\u90e8\u6307\u5b9a\u6587\u5b57\u4e14\u4e2d\u6587\u65e0\u660e\u663e\u9519\u5b57\uff0c\u98ce\u683c\u8de8\u9875\u4e00\u81f4","\u6700\u7ec8.pptx\u80fd\u5426\u5728PowerPoint\u6216Keynote\u4e2d\u6253\u5f00\uff0c\u9875\u6570\u4e0e\u5927\u7eb2\u4e00\u81f4"],"limitations":["\u5305\u5185\u811a\u672ccreate_slides.py\u4e0ehtml2pptx\u6d41\u7a0b\u672a\u8fd0\u884c\uff0c\u65e0\u6cd5\u786e\u8ba4\u5b9e\u9645\u88c5\u914d\u6548\u679c","SKILL.md\u5f15\u7528\u7684nano-banana-pro\u3001pptx\u3001design-philosophy\u3001image-to-slides\u7b49\u5916\u90e8skill\u4e0d\u968f\u5305\u5206\u53d1\uff0c\u8def\u5f84\u9700\u7528\u6237\u81ea\u884c\u6838\u5b9e","Path B\u6587\u5b57\u70d8\u7119\u8fdb\u56fe\u7247\u4e0d\u53ef\u7f16\u8f91\uff0c\u4e2d\u6587\u5076\u53d1\u6e32\u67d3\u9519\u8bef\u53ea\u80fd\u6574\u9875\u91cd\u751f\u6210","\u98ce\u683c\u6837\u4f8b\u56fe\u7247\u4ec5\u4f5c\u89c6\u89c9\u53c2\u8003\uff0c\u672a\u9a8c\u8bc1\u4e0e\u63d0\u793a\u8bcd\u7684\u4e00\u4e00\u5bf9\u5e94\u5173\u7cfb"],"issues":["SKILL.md\u4e2d\u591a\u5904\u786c\u7f16\u7801~/.claude/skills/\u4e0e~/.agents/skills/\u8def\u5f84\uff0c\u4e14\u5f15\u7528\u7684\u5916\u90e8skill\u672a\u968f\u5305\u63d0\u4f9b\uff0c\u9700\u7528\u6237\u786e\u8ba4\u5b89\u88c5\u4f4d\u7f6e","assets\u76ee\u5f55\u542b.DS_Store\u7cfb\u7edf\u6587\u4ef6\uff0c\u5c5e\u6253\u5305\u6b8b\u7559","\u6587\u4e2d\u300c\u53e3\u8154\u884c\u4e1a\u5206\u6790\u6848\u4f8b\u5df2\u9a8c\u8bc1\u300d\u7b49\u8868\u8ff0\u6307\u5411\u5305\u5916\u79c1\u6709\u76ee\u5f55\uff0c\u65e0\u6cd5\u6838\u5b9e"],"missing_files":[]},"quality_url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/SHILIU-QUALITY.md","usage_guide":{"task":"\u628a\u7528\u6237\u63d0\u4f9b\u7684\u4e3b\u9898\u4e0e\u7d20\u6750\u6574\u7406\u6210\u9010\u9875\u5927\u7eb2\uff0c\u9009\u5b9a\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u6309\u53ef\u7f16\u8f91HTML\u6216\u6574\u9875AI\u56fe\u4e24\u6761\u8def\u5f84\u751f\u6210\u5e7b\u706f\u7247\u5e76\u88c5\u914d\u4e3aPPTX\u3002","inputs":"\u4e3b\u9898\u4e0e\u76ee\u6807\u53d7\u4f17\u3001\u539f\u59cb\u7d20\u6750\u6216\u8981\u70b9\u3001\u9875\u6570\u6216\u65f6\u957f\u9884\u671f\u3001\u534f\u4f5c\u6a21\u5f0f\uff08\u5168\u81ea\u52a8/\u5f15\u5bfc/\u534f\u4f5c\uff09\u3001\u88c5\u914d\u8def\u5f84\uff08\u53ef\u7f16\u8f91HTML\u6216\u6574\u9875AI\u56fe\uff09\u3001\u54c1\u724c\u8272\u4e0e\u5b57\u4f53\u7ea6\u675f\uff08\u5982\u6709\uff09\u3001\u662f\u5426\u5141\u8bb8\u8c03\u7528\u5916\u90e8\u56fe\u50cf\u751f\u6210API\u3002","outputs":"\u9010\u9875\u5927\u7eb2\u8868\uff08\u65ad\u8a00\u5f0f\u6807\u9898+\u8981\u70b9+\u89c6\u89c9\u7c7b\u578b\uff09\u3001\u9009\u5b9a\u8bbe\u8ba1\u7cfb\u7edf\u8bf4\u660e\u3001\u6bcf\u9875HTML\u6216\u6574\u9875PNG\u3001\u88c5\u914d\u540e\u7684.pptx\u3001\u63d2\u753bPNG\u6e90\u6587\u4ef6\u3001\u9884\u89c8\u622a\u56fe\u6216\u56fe\u7247\u6e05\u5355\u3002","example_input":"\u5e2e\u6211\u505a\u4e00\u4efd12\u9875\u7684\u5185\u90e8\u6280\u672f\u5206\u4eabPPT\uff0c\u4e3b\u9898\u662f\u300c\u6211\u4eec\u5982\u4f55\u628a\u63a5\u53e3\u5e73\u5747\u54cd\u5e94\u65f6\u95f4\u4ece800ms\u964d\u5230300ms\u300d\uff0c\u53d7\u4f17\u662f\u7814\u53d1\u540c\u4e8b\uff0c\u8d70\u5f15\u5bfc\u6a21\u5f0f\uff0c\u7528\u53ef\u7f16\u8f91HTML\u8def\u5f84\uff0c\u98ce\u683c\u504f\u767d\u677f\u624b\u7ed8\u3002","example_output":"\u793a\u610f\uff1a\u5927\u7eb2\u886812\u884c\uff08\u542b\u5c01\u9762\u3001\u80cc\u666f\u3001\u4e09\u4e2a\u4f18\u5316\u624b\u6bb5\u3001\u6570\u636e\u5bf9\u6bd4\u3001\u7ecf\u9a8c\u603b\u7ed3\uff09\uff1b\u8bbe\u8ba1\u7cfb\u7edf\u8bf4\u660e\u4e00\u6bb5\uff1bslide-01.html\u81f3slide-12.html\uff1boutput.pptx\uff1bpreview-01.png\u7b49\u9884\u89c8\u56fe\u3002\u4ee5\u4e0a\u4e3a\u7ed3\u6784\u793a\u610f\uff0c\u975e\u5b9e\u9645\u751f\u6210\u7ed3\u679c\u3002"},"read_url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0","skill_url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/SKILL.md","download_url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/download","install_url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/install","files":[{"path":"LICENSE","bytes":1076,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/LICENSE"},{"path":"NOTICE","bytes":262,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/NOTICE"},{"path":"SHILIU-QUALITY.md","bytes":2317,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/SHILIU-QUALITY.md"},{"path":"SKILL.md","bytes":32607,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/SKILL.md"},{"path":"assets/style-samples/slide04-01-\u82cf\u8054\u6784\u6210\u4e3b\u4e49-constructivism.png","bytes":744080,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-01-%E8%8B%8F%E8%81%94%E6%9E%84%E6%88%90%E4%B8%BB%E4%B9%89-constructivism.png"},{"path":"assets/style-samples/slide04-02-\u6d6e\u4e16\u7ed8-ukiyo-e.png","bytes":984335,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-02-%E6%B5%AE%E4%B8%96%E7%BB%98-ukiyo-e.png"},{"path":"assets/style-samples/slide04-03-\u5305\u8c6a\u65af-bauhaus.png","bytes":998923,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-03-%E5%8C%85%E8%B1%AA%E6%96%AF-bauhaus.png"},{"path":"assets/style-samples/slide04-04-\u5b54\u7248\u5370\u5237-risograph.png","bytes":853799,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-04-%E5%AD%94%E7%89%88%E5%8D%B0%E5%88%B7-risograph.png"},{"path":"assets/style-samples/slide04-05-\u7b49\u8f74\u6d4b-isometric.png","bytes":717723,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-05-%E7%AD%89%E8%BD%B4%E6%B5%8B-isometric.png"},{"path":"assets/style-samples/slide04-06-\u5de5\u7a0b\u84dd\u56fe-blueprint.png","bytes":775474,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-06-%E5%B7%A5%E7%A8%8B%E8%93%9D%E5%9B%BE-blueprint.png"},{"path":"assets/style-samples/slide04-07-\u590d\u53e4\u5e7f\u544a-vintage-ad.png","bytes":997945,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-07-%E5%A4%8D%E5%8F%A4%E5%B9%BF%E5%91%8A-vintage-ad.png"},{"path":"assets/style-samples/slide04-08-\u8fbe\u8fbe\u62fc\u8d34-collage.png","bytes":903201,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-08-%E8%BE%BE%E8%BE%BE%E6%8B%BC%E8%B4%B4-collage.png"},{"path":"assets/style-samples/slide04-09-\u50cf\u7d20\u753b-pixel-art.png","bytes":823644,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-09-%E5%83%8F%E7%B4%A0%E7%94%BB-pixel-art.png"},{"path":"assets/style-samples/slide04-10-\u6566\u714c\u58c1\u753b-dunhuang.png","bytes":932844,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-10-%E6%95%A6%E7%85%8C%E5%A3%81%E7%94%BB-dunhuang.png"},{"path":"assets/style-samples/slide04-13-\u6e29\u6696\u53d9\u4e8b-warm-narrative.png","bytes":689747,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-13-%E6%B8%A9%E6%9A%96%E5%8F%99%E4%BA%8B-warm-narrative.png"},{"path":"assets/style-samples/slide04-ligne-claire.png","bytes":682624,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-ligne-claire.png"},{"path":"assets/style-samples/slide04-manga.png","bytes":921806,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-manga.png"},{"path":"assets/style-samples/slide04-neo-pop.png","bytes":707114,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-neo-pop.png"},{"path":"assets/style-samples/slide04-oatmeal.png","bytes":823071,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-oatmeal.png"},{"path":"assets/style-samples/slide04-snoopy.png","bytes":804259,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-snoopy.png"},{"path":"assets/style-samples/slide04-xkcd.png","bytes":962289,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/assets/style-samples/slide04-xkcd.png"},{"path":"references/design-movements.md","bytes":8696,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/references/design-movements.md"},{"path":"references/design-principles.md","bytes":8022,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/references/design-principles.md"},{"path":"references/prompt-templates.md","bytes":24131,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/references/prompt-templates.md"},{"path":"references/proven-styles-gallery.md","bytes":13338,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/references/proven-styles-gallery.md"},{"path":"references/proven-styles-snoopy.md","bytes":3597,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/references/proven-styles-snoopy.md"},{"path":"scripts/create_slides.py","bytes":9643,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/scripts/create_slides.py"},{"path":"shiliu-quality.json","bytes":2135,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/shiliu-quality.json"},{"path":"shiliu-source.json","bytes":267,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/shiliu-source.json"},{"path":"usage.json","bytes":1130,"url":"https://shiliuai.cn/api/v2/skills/alchaincyf-huashu-slides-a27cd0/files/usage.json"}],"content":"---\nname: huashu-slides\ndescription: \u4ece\u5185\u5bb9\u5230\u6210\u54c1PPTX\u7684\u7aef\u5230\u7aef\u6f14\u793a\u6587\u7a3f\u5236\u4f5c\uff0c\u542bAI\u63d2\u753b\u751f\u6210\u548c18\u79cd\u8bbe\u8ba1\u98ce\u683c\u3002\u5f53\u7528\u6237\u63d0\u5230\"\u505aPPT\"\u3001\"\u505a\u5e7b\u706f\u7247\"\u3001\"\u6f14\u793a\u6587\u7a3f\"\u3001\"Keynote\"\u3001\"slides\"\u65f6\u4f7f\u7528\u3002\n---\n\n# AI Presentation Workflow\n\nCreate professional presentations: Content \u2192 Design \u2192 Build \u2192 Assembly \u2192 Polish.\n\n## Step 0: Choose Workflow Settings\n\n**At the start of every presentation task, ask the user TWO choices:**\n\n### 0-A. Collaboration Mode\n\n| Mode | Description | Checkpoints |\n|------|-------------|-------------|\n| **Full Auto** | Minimal interaction. Confirm topic only, deliver final PPTX. | 1 checkpoint |\n| **Guided** (recommended) | Confirm outline, pick design, preview before assembly. | 3 checkpoints |\n| **Collaborative** | Review every slide, approve every illustration, full control. | Per-slide |\n\nIf the user doesn't specify, default to **Guided** mode.\n\n### 0-B. Assembly Method\n\n| Method | How it works | Best for |\n|--------|-------------|----------|\n| **Editable HTML** (Path A) | HTML slides + selective AI illustrations \u2192 html2pptx \u2192 editable PPTX | Need to edit text later, precise layout, corporate decks |\n| **Full AI Visual** (Path B) | Every slide as a complete AI-generated image \u2192 create_slides.py \u2192 image PPTX | Maximum visual impact, artistic presentations, quick drafts |\n\n**Trade-offs:**\n\n| | Path A: Editable HTML | Path B: Full AI Visual |\n|---|---|---|\n| Text | Editable in PPT | Baked into image (not editable) |\n| Visual quality | Good with illustrations | Excellent \u2014 cohesive design |\n| Layout control | Pixel-precise | AI-interpreted |\n| File size | Smaller (~5-25MB) | Larger (~30-80MB) |\n| Chinese text | Perfect (font rendering) | Usually good (AI may occasionally misrender) |\n| Speed | Faster (HTML creation) | Slower (image generation per slide) |\n\nIf the user doesn't specify, default to **Path A** (Editable HTML).\n\n---\n\n## Step 1: Content Structuring\n\nTurn raw material into a slide-by-slide outline.\n\n**Per slide, define:**\n- **Title** \u2014 a complete assertion sentence (not a topic word)\n- **Key points** \u2014 3-4 maximum\n- **Visual type** \u2014 illustration / chart / diagram / icon / quote\n- **Path A:** Illustration needed? \u2014 Yes/No. If yes, one-line description.\n- **Path B:** Visual scene description \u2014 one paragraph describing the complete slide visual (layout + imagery + mood).\n\n**Assertion-Evidence rule:**\n\n| Bad title | Good title |\n|-----------|-----------|\n| Q3 Sales | Q3\u9500\u552e\u589e\u957f23%\uff0c\u65b0\u7528\u6237\u662f\u4e3b\u8981\u9a71\u52a8\u529b |\n| Methodology | \u6211\u4eec\u901a\u8fc7\u53cc\u76f2\u5b9e\u9a8c\u9a8c\u8bc1\u4e86\u8fd9\u4e2a\u7ed3\u8bba |\n\n**\u8bed\u8a00\u89c4\u5219\uff1aslide\u5185\u5bb9\u4e00\u5f8b\u7528\u4e2d\u6587\uff0c\u4ec5\u4fdd\u7559\u5fc5\u8981\u7684\u82f1\u6587\u672f\u8bed\uff08\u4eba\u540d\u3001\u54c1\u724c\u540d\u3001\u6280\u672f\u4e13\u6709\u540d\u8bcd\uff09\u3002** Section label\uff08\u5982 INSIGHT\u3001TAKEAWAY\uff09\u53ef\u7528\u82f1\u6587\u4f5c\u4e3a\u8bbe\u8ba1\u5143\u7d20\u3002\n\n### \u2705 Checkpoint 1 (Guided + Collaborative)\n\nPresent the outline as a table:\n\n**Path A:**\n```\n| # | Title (assertion) | Key Points | Visual Type | Illustration? |\n|---|-------------------|------------|-------------|---------------|\n| 1 | Cover: ... | \u2014 | Decorative | Yes: ... |\n| 2 | ... | 1. ... 2. ... | Chart | No |\n| 3 | ... | 1. ... 2. ... | Illustration | Yes: ... |\n```\n\n**Path B:**\n```\n| # | Title (assertion) | Key Points | Visual Scene Description |\n|---|-------------------|------------|--------------------------|\n| 1 | Cover: ... | \u2014 | Dark gradient bg, large title centered, abstract network nodes |\n| 2 | ... | 1. ... 2. ... | Split layout: text left, bar chart right, clean white bg |\n| 3 | ... | 1. ... 2. ... | Full illustration: person at crossroads with floating clocks |\n```\n\n**Ask the user:**\n- Approve / adjust slide count\n- Path A: Approve / adjust which slides get illustrations\n- Path B: Approve / adjust visual scene descriptions\n- Any content to add or remove\n\n---\n\n## Step 2: Design System\n\n**Present 3 design system options for the user to choose from.** Each is a complete visual language, not just a color palette.\n\n**CRITICAL: A design system is NOT just colors.** It defines visual philosophy, typography ratios, composition rules, and emotional intent. This is the difference between \"boring PPT\" and \"magazine-quality deck.\"\n\n### \ud83d\udde3\ufe0f Style Discussion (Optional, if user wants to explore)\n\n**If the user says things like:**\n- \"\u6211\u60f3\u8981XX\u98ce\u683c\"\uff08\u7530\u4e2d\u4e00\u5149\u3001\u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u3001\u5305\u8c6a\u65af\u3001\u8499\u5fb7\u91cc\u5b89...\uff09\n- \"\u6211\u4e0d\u786e\u5b9a\u60f3\u8981\u4ec0\u4e48\u98ce\u683c\"\n- \"\u80fd\u7ed9\u6211\u770b\u770b\u4e0d\u540c\u98ce\u683c\u7684\u4f8b\u5b50\u5417\"\n\n**Then consult the design movements reference:**\n`references/design-movements.md` \u2014 \u8bbe\u8ba1\u8fd0\u52a8\u4e0e\u98ce\u683c\u53c2\u8003\u5e93\n\nThis file maps classic design movements (Neo-Brutalism, Swiss Style, Bauhaus, etc.) to our AI-ready style presets. Use it to:\n1. Translate user's aesthetic language into actionable prompts\n2. Build shared vocabulary (\"\u8fd9\u4e2a\u65b9\u5411\u504f\u7530\u4e2d\u4e00\u5149\" vs \"\u90a3\u4e2a\u504f\u6784\u6210\u4e3b\u4e49\")\n3. Reference when designing new custom styles from scratch\n\n**After discussing movements, proceed to recommend 3 concrete presets below.**\n\n---\n\n### Design System Presets\n\n**\u26a0\ufe0f CRITICAL INSIGHT: \u63d2\u753b/\u6f2b\u753b\u7c7b\u98ce\u683c\u7684AI\u751f\u6210\u6548\u679c\u8fdc\u597d\u4e8e\u300c\u4e13\u4e1a\u6781\u7b80\u300d\u7c7b\u98ce\u683c\u3002**\n\u6f2b\u753b/\u63d2\u753b\u98ce\u683c\u6709\u660e\u786e\u7684\u89c6\u89c9\u8bed\u8a00\uff08\u7ebf\u6761\u3001\u89d2\u8272\u3001\u8272\u5757\uff09\uff0cAI\u53ef\u4ee5\u5145\u5206\u53d1\u6325\uff1b\u6781\u7b80\u98ce\u683c\uff08\u6697\u8272\u5e95+\u53d1\u5149\u6587\u5b57+\u5927\u91cf\u7559\u767d\uff09\u7f3a\u4e4f\u89c6\u89c9\u5143\u7d20\uff0c\u751f\u6210\u51fa\u6765\u300c\u7a7a\u300d\u4e14\u300c\u5e73\u300d\u3002\n\nPick 3 that match the topic/mood. Use the **topic recommendation table** below, then present each with its full description.\n\n**\u6309\u4e3b\u9898\u81ea\u52a8\u63a8\u8350\uff08\u4f18\u5148\u4ece\u6b64\u8868\u9009\uff09\uff1a**\n\n| \u4e3b\u9898\u7c7b\u578b | \u7b2c\u4e00\u63a8\u8350 | \u7b2c\u4e8c\u63a8\u8350 | \u7b2c\u4e09\u63a8\u8350 |\n|---------|---------|---------|---------|\n| \u54c1\u724c/\u4ea7\u54c1\u4ecb\u7ecd | Snoopy\u6e29\u6696\u6f2b\u753b | Neo-Pop\u65b0\u6ce2\u666e | \u6d6e\u4e16\u7ed8/\u6566\u714c\uff08\u4e1c\u65b9\u54c1\u724c\uff09 |\n| \u6559\u80b2/\u57f9\u8bad | Neo-Brutalism | \u5b66\u7fd2\u6f2b\u753b | Snoopy\u6e29\u6696\u6f2b\u753b |\n| \u6280\u672f\u5206\u4eab | xkcd\u767d\u677f | Neo-Brutalism | Ligne Claire |\n| \u6570\u636e\u62a5\u544a | **Pentagram\u7f16\u8f91** | **Fathom\u6570\u636e** | Ligne Claire |\n| \u5e74\u8f7b\u53d7\u4f17 | Neo-Pop | \u50cf\u7d20\u753b | \u5b54\u7248\u5370\u5237 |\n| \u521b\u610f/\u827a\u672f | \u8fbe\u8fbe\u62fc\u8d34 | \u5b54\u7248\u5370\u5237 | The Oatmeal |\n| \u56fd\u98ce/\u4e1c\u65b9 | \u6566\u714c\u58c1\u753b | \u6d6e\u4e16\u7ed8 | **Takram\u601d\u8fa8** |\n| \u6b63\u5f0f\u5546\u52a1 | **Pentagram\u7f16\u8f91** | **M\u00fcller-Brockmann\u7f51\u683c** | **Build\u6781\u7b80** |\n| \u4ea7\u54c1\u53d1\u5e03/keynote | \u82cf\u8054\u6784\u6210\u4e3b\u4e49 | Neo-Pop | **Pentagram\u7f16\u8f91** |\n| \u5185\u90e8\u5206\u4eab | Neo-Brutalism | The Oatmeal | xkcd\u767d\u677f |\n| \u884c\u4e1a\u5206\u6790/\u54a8\u8be2 | **Fathom\u6570\u636e** | **Pentagram\u7f16\u8f91** | **M\u00fcller-Brockmann\u7f51\u683c** |\n| \u57f9\u8bad\u8bfe\u4ef6/\u6559\u6750 | **Takram\u601d\u8fa8** | \u6e29\u6696\u53d9\u4e8b | \u5b66\u7fd2\u6f2b\u753b |\n| \u6295\u8d44/\u878d\u8d44\u8def\u6f14 | **Build\u6781\u7b80** | **Pentagram\u7f16\u8f91** | \u82cf\u8054\u6784\u6210\u4e3b\u4e49 |\n\n**\u5b8c\u657418\u79cd\u98ce\u683c\u8be6\u7ec6\u53c2\u8003\uff1a** `references/proven-styles-gallery.md`\n**\u98ce\u683c\u6837\u4f8b\u56fe\u7247\uff1a** `assets/style-samples/` \u76ee\u5f55\n\n---\n\n**\u7b2c\u4e00\u68af\u961f\uff08\u5f3a\u70c8\u63a8\u8350\uff0c\u6548\u679c\u6781\u597d\uff09\uff1a**\n\n**1. Warm Comic Strip** \u2014 Snoopy\u6e29\u6696\u6f2b\u753b\u98ce\n- Philosophy: Peanuts\u6f2b\u753b\u7684\u6e29\u6696\u4e0e\u54f2\u7406\u611f\u2014\u2014\u7b80\u5355\u7684\u89d2\u8272\u8bf4\u7740\u6df1\u523b\u7684\u8bdd\uff0c\u65e5\u5e38\u573a\u666f\u4e2d\u8574\u542b\u4eba\u751f\u667a\u6167\n- Visual world: \u5706\u5934\u5c0f\u5b69\u3001\u5c0f\u72d7\u3001\u5c0f\u9e1f\u7ec4\u6210\u4e00\u4e2a\u6e29\u6696\u7684\u5c0f\u4e16\u754c\u3002\u80cc\u666f\u6781\u7b80\uff08\u8349\u5730\u3001\u5929\u7a7a\u3001\u72d7\u5c4b\u3001\u6811\uff09\u3002\u8272\u8c03\u50cf\u6cdb\u9ec4\u7684\u62a5\u7eb8\u6f2b\u753b\n- Reference: \"Like a Peanuts comic strip \u2014 warm, philosophical, charming\"\n- **Style guide:** `references/proven-styles-snoopy.md`\n- **\u26a0\ufe0f \u5173\u952e\u7ecf\u9a8c\uff1a** \u4e0d\u8981\u5728prompt\u4e2d\u8fc7\u5ea6\u7ea6\u675f\u89c6\u89c9\u7ec6\u8282\uff08\u989c\u8272\u6bd4\u4f8b\u3001\u6784\u56fe\u4f4d\u7f6e\u3001\u89d2\u8272\u59ff\u52bf\uff09\uff0c\u5426\u5219\u4f1a\u4e25\u91cd\u964d\u4f4e\u591a\u6837\u6027\u3002\u53ea\u63cf\u8ff0\u60c5\u7eea\u548c\u5185\u5bb9\uff0c\u8ba9AI\u81ea\u7531\u53d1\u6325\n\n**2. Manga Educational** \u2014 \u5b66\u7fd2\u6f2b\u753b\u98ce\n- Philosophy: Japanese educational manga (\u5b66\u7fd2\u6f2b\u753b) \u2014 a character GUIDES you through the concept with reactions and drama\n- Colors: Bright and warm palette, white bg with selective color panels, screen-tone gray for emphasis areas\n- Ratio: 60% illustration / 30% text (in bubbles) / 10% effects\n- Typography: Bold manga-style titles with impact, body text in speech/thought bubbles, onomatopoeia as decorative elements. Size contrast 3:1\n- Composition: Dynamic manga panel layouts (3-5 panels per slide), character reactions drive emphasis, speed lines for energy, dramatic angles\n- Visual language: Expressive anime-style characters, reaction faces (surprise, confusion, eureka!), manga effects (sweat drops, sparkles, speed lines), panel borders with varied thickness\n- Reference: \"Like a 'Manga Guide to Statistics' page \u2014 a character walks you through the concept, reacting with surprise and delight\"\n\n**3. Ligne Claire Comics** \u2014 \u6e05\u7ebf\u6f2b\u753b\u98ce\n- Philosophy: Herg\u00e9's Tintin tradition \u2014 maximum information clarity through visual restraint\n- Colors: White/cream (#FFFDF7) bg, black (#000000) outlines, flat saturated fills (3-5 solid colors, no gradients)\n- Ratio: 70% clean bg / 20% illustration / 10% text\n- Typography: Hand-lettered feel for titles, clean sans-serif for body. Speech bubbles for key quotes. Title:body = 2.5:1\n- Composition: Panel-based layouts (2-4 panels per slide), sequential left-to-right reading flow, clear gutters between panels\n- Visual language: Uniform-weight outlines, flat colors without shading or hatching, no gradients, precise details but zero visual noise\n- Reference: \"Like a Tintin page explaining a concept \u2014 every panel advances understanding, nothing is decorative\"\n\n**4. Neo-Pop Magazine** \u2014 \u65b0\u6ce2\u666e\u6742\u5fd7\u98ce\n- Philosophy: Youth media / streetwear brand aesthetic, bold and playful\n- Colors: Cream (#FFF8E7) bg, black (#000000) text, color-blocking with hot pink (#FF1493) + cyan (#00CED1) + yellow (#FFD700)\n- Ratio: 50% bg / 25% color blocks / 25% content\n- Typography: Headlines 40-50% of slide area (typography AS the visual), thick black borders around text blocks, 10:1 size ratio vs body\n- Composition: Modular color blocks with \"controlled chaos\", stacked asymmetric layouts, thick borders\n- Visual language: Pixel-art 8-bit icons, cutout photography, speech bubbles, bold graphic surfaces\n- Reference: \"Like a Supreme lookbook meets a HYPEBEAST article \u2014 treats typography as graphic art\"\n\n**\u7b2c\u4e8c\u68af\u961f\uff08\u63a8\u8350\uff0c\u7279\u5b9a\u573a\u666f\u6548\u679c\u597d\uff09\uff1a**\n\n**5. Whiteboard Sketch** \u2014 xkcd\u767d\u677f\u624b\u7ed8\u98ce\n- Philosophy: xkcd meets a professor's whiteboard \u2014 extreme minimalism forces focus on the idea itself\n- Colors: White (#FFFFFF) bg, black (#000000) ink, ONE accent color for emphasis (red #FF4444 or blue #4488FF)\n- Ratio: 85% white space / 10% sketch / 5% accent highlight\n- Typography: Hand-drawn/handwritten feel for everything, rough uneven baselines, arrows and annotations everywhere. Key numbers can be large (60pt+)\n- Composition: Freeform whiteboard layout, hand-drawn arrows connecting concepts, diagrams and stick figures, informal and alive\n- Visual language: Stick figures, hand-drawn charts and graphs, wobbly lines, annotation arrows, circled keywords, equation-style layouts\n- Reference: \"Like an xkcd 'What If?' explanation \u2014 simple drawings that make complex ideas instantly click\"\n\n**6. Soviet Constructivism** \u2014 \u82cf\u8054\u6784\u6210\u4e3b\u4e49\n- Philosophy: Revolutionary propaganda poster \u2014 power through geometry and limited color\n- Colors: Revolutionary red (#CC0000) 40% + black (#1A1A1A) 25% + cream white (#F5E6D3) 30%\n- Typography: All text rotated 15-30 degrees, NO horizontal lines, bold condensed\n- Composition: Diagonal wedge from bottom-left to top-right, geometric shapes growing small to large (visual crescendo)\n- Visual language: NO gradients, pure flat fills + sharp edges, three-color limit, propaganda poster energy\n- Reference: \"Like a 1920s Rodchenko poster \u2014 power, urgency, and geometric precision\"\n\n**7. Warm Narrative** \u2014 \u6e29\u6696\u53d9\u4e8b\u98ce\n- Philosophy: Friendly storytelling, like a TED talk visual or Airbnb pitch deck\n- Colors: Warm cream (#FDF6EC) bg, dark charcoal (#3D3D3D) text, coral (#E17055) accent\n- Ratio: 60% warm bg / 25% content / 15% illustration\n- Typography: Headlines bold and warm, 3:1 ratio to body. Short sentences, not bullets\n- Composition: Illustration occupies 40-50% of slide, text wraps around visuals, rounded shapes\n- Visual language: Flat vector illustrations with warm palette, people-centric imagery, storytelling flow\n- Reference: \"Like a Mailchimp or Notion brand presentation \u2014 approachable and human\"\n\n**\u66f4\u591a\u98ce\u683c\uff08\u7b2c\u4e8c/\u4e09\u68af\u961f\uff09** \u8be6\u89c1 `references/proven-styles-gallery.md`\uff0c\u5305\u62ec\uff1aThe Oatmeal\u4fe1\u606f\u56fe\u6f2b\u753b\u3001\u6566\u714c\u58c1\u753b\u3001\u6d6e\u4e16\u7ed8\u3001\u5b54\u7248\u5370\u5237Risograph\u3001\u7b49\u8f74\u6d4bIsometric\u3001Bauhaus\u5305\u8c6a\u65af\u3001\u5de5\u7a0b\u84dd\u56feBlueprint\u3001\u590d\u53e4\u5e7f\u544aVintage Ad\u3001\u8fbe\u8fbe\u62fc\u8d34Collage\u3001\u50cf\u7d20\u753bPixel Art\n\n---\n\n**\u7b2c\u56db\u7c7b\uff1aProfessional / Editorial \u8bbe\u8ba1\u7cfb\u7edf\uff08Path A \u4e13\u7528\uff09**\n\n> \u26a0\ufe0f \u4ee5\u4e0b\u98ce\u683c **\u5f3a\u70c8\u5efa\u8bae\u4f7f\u7528 Path A\uff08HTML\u2192PPTX\uff09**\u3002\u5b83\u4eec\u4f9d\u8d56\u7cbe\u786e\u6392\u7248\u3001\u6570\u636e\u53ef\u89c6\u5316\u548c\u7f51\u683c\u7cfb\u7edf\uff0cAI\u56fe\u7247\u751f\u6210\u65e0\u6cd5\u8fbe\u5230\u6240\u9700\u7cbe\u5ea6\u3002\u53e3\u8154\u884c\u4e1a\u5206\u6790\u6848\u4f8b\u5df2\u9a8c\u8bc1 Path A + Pentagram\u7f16\u8f91\u98ce\u683c\u7684\u51fa\u8272\u6548\u679c\u3002\n\n**8. Pentagram Editorial** \u2014 \u7f16\u8f91\u6742\u5fd7\u98ce\uff08\u4fe1\u606f\u5efa\u7b51\u6d3e\uff09\n- Philosophy: Pentagram/Michael Bierut \u2014 \u5b57\u4f53\u5373\u8bed\u8a00\uff0c\u7f51\u683c\u5373\u601d\u60f3\u3002\u7528\u6781\u5ea6\u514b\u5236\u7684\u8bbe\u8ba1\u8ba9\u6570\u636e\u548c\u5185\u5bb9\u81ea\u5df1\u8bf4\u8bdd\n- Colors: \u5976\u6cb9\u767d(#FFFDF7) bg, \u8fd1\u9ed1(#1A1A1A) text, ONE accent color (\u5982\u6a59\u7ea2#D4480B\u6216\u54c1\u724c\u8272)\n- Ratio: 60% whitespace / 30% content / 10% accent\n- Typography: \u7c97\u9ed1\u6807\u9898(28pt+) + \u8f7b\u6b63\u6587(10-13pt), \u82f1\u6587section label\u4f5c\u4e3a\u8bbe\u8ba1\u5143\u7d20 (INSIGHT / PART 03)\n- Composition: \u745e\u58eb\u7f51\u683c\u7cfb\u7edf, 2px\u9ed1\u8272\u8fb9\u6846\u5361\u7247, \u7cbe\u786e\u7684\u6c34\u5e73\u5206\u9694\u7ebf, \u6570\u636e\u53ef\u89c6\u5316\u5185\u5d4c\n- Visual language: \u6781\u7b80\u56fe\u6807, \u6761\u5f62\u56fe/\u997c\u56fe/\u8d8b\u52bf\u7ebf, callout\u6846, tag\u6807\u7b7e\n- Reference: \"Like a McKinsey insight report meets Monocle magazine \u2014 data-rich but editorially elegant\"\n- **\u6267\u884c\u8def\u5f84: Path A only\uff08HTML\u2192PPTX\uff09**\n- **\u5b9e\u6218\u9a8c\u8bc1**: \u53e3\u8154\u884c\u4e1a\u5206\u679015\u9875deck\uff08`_temp/\u53e3\u8154\u884c\u4e1a\u5206\u6790/slides/`\uff09\n\n**9. Fathom Data Narrative** \u2014 \u6570\u636e\u53d9\u4e8b\u98ce\uff08\u79d1\u5b66\u671f\u520a\u6d3e\uff09\n- Philosophy: Fathom Information Design \u2014 \u6bcf\u4e00\u4e2a\u50cf\u7d20\u90fd\u5fc5\u987b\u627f\u8f7d\u4fe1\u606f\u3002\u79d1\u5b66\u4e25\u8c28+\u8bbe\u8ba1\u4f18\u96c5\n- Colors: \u767d(#FFFFFF) bg, \u6df1\u7070(#333) text, \u6d77\u519b\u84dd(#1A365D) primary + \u4e00\u4e2ahighlight color\n- Ratio: 50% charts/data / 30% text / 20% whitespace\n- Typography: GT America/Graphik\u98ce\u683c\u7684sans-serif, \u5927\u6570\u5b57(60pt+)\u4f5c\u4e3a\u89c6\u89c9\u951a\u70b9, \u7cbe\u786e\u7684\u811a\u6ce8/\u6765\u6e90\u6807\u6ce8\n- Composition: \u9ad8\u4fe1\u606f\u5bc6\u5ea6\u4f46\u4e0d\u62e5\u6324, \u6ce8\u91ca\u7cfb\u7edf\u5d4c\u5165\u5e03\u5c40, small multiples\u56fe\u8868\u9635\u5217, \u7cbe\u786e\u7684\u65f6\u95f4\u7ebf\n- Visual language: \u6563\u70b9\u56fe, \u70ed\u529b\u56fe, timeline, \u5e26\u6ce8\u91ca\u7684\u56fe\u8868, \u6570\u636e\u6807\u7b7e\u7cbe\u786e\u5230\u5c0f\u6570\n- Reference: \"Like a Nature paper's data supplement meets a Bloomberg data feature\"\n- **\u6267\u884c\u8def\u5f84: Path A only\uff08HTML\u2192PPTX\uff09**\n\n**10. M\u00fcller-Brockmann Grid** \u2014 \u745e\u58eb\u7f51\u683c\u98ce\uff08\u7eaf\u7cb9\u4e3b\u4e49\u6d3e\uff09\n- Philosophy: Josef M\u00fcller-Brockmann \u2014 \u5ba2\u89c2\u6027\u5373\u7f8e\u3002\u6570\u5b66\u7cbe\u786e\u7684\u7f51\u683c\u7cfb\u7edf\u8ba9\u4efb\u4f55\u6df7\u4e71\u7684\u4fe1\u606f\u53d8\u5f97\u6709\u5e8f\n- Colors: \u767d(#FFFFFF) bg, \u9ed1(#000) text, \u6700\u591a\u4e00\u4e2a\u5f3a\u8c03\u8272\n- Ratio: 70% structured grid / 20% text / 10% accent\n- Typography: Akzidenz-Grotesk/Helvetica, \u4e25\u683c\u76848pt\u57fa\u7ebf\u7f51\u683c, \u7edd\u5bf9\u5de6\u5bf9\u9f50, \u5b57\u91cd\u5bf9\u6bd4(300 vs 700)\n- Composition: 8\u5217\u6570\u5b66\u7f51\u683c, \u6240\u6709\u5143\u7d20\u5bf9\u9f50\u5230\u7f51\u683c\u7ebf, \u7edd\u5bf9\u4e0d\u5141\u8bb8\u88c5\u9970\u5143\u7d20, \u529f\u80fd\u4e3b\u4e49\u81f3\u4e0a\n- Visual language: \u7eaf\u51e0\u4f55\u56fe\u5f62, \u9ed1\u8272\u7ebf\u6761\u8868\u683c, \u7cbe\u786e\u5bf9\u9f50\u7684\u5217\u8868, \u65e0\u56fe\u6807\u65e0\u63d2\u753b\n- Reference: \"Like the original Swiss Style poster \u2014 timeless, rational, zero decoration\"\n- **\u6267\u884c\u8def\u5f84: Path A only\uff08HTML\u2192PPTX\uff09**\n\n**11. Build Luxury Minimal** \u2014 \u5962\u4f88\u6781\u7b80\u98ce\uff08\u5f53\u4ee3\u54c1\u724c\u6d3e\uff09\n- Philosophy: Build Studio \u2014 \u7cbe\u81f4\u7684\u7b80\u5355\u6bd4\u590d\u6742\u66f4\u96be\u3002\u7528\u5927\u91cf\u7559\u767d\u548c\u5fae\u5999\u5b57\u91cd\u53d8\u5316\u4f20\u8fbe\u9ad8\u7aef\u611f\n- Colors: \u7eaf\u767d(#FFFFFF) bg, \u6df1\u7070(#2D2D2D) text, \u5355\u4e00accent(\u54c1\u724c\u8272)\u6781\u5c11\u91cf\u4f7f\u7528\n- Ratio: 75% whitespace / 15% text / 10% accent\n- Typography: \u5b57\u91cd\u53d8\u5316\u6781\u5fae\u5999(200-600), \u6807\u9898\u5de8\u5927(48pt+)\u4f46\u8f7b, \u6b63\u6587\u5c0f\u800c\u7cbe(12pt), \u5b57\u95f4\u8ddd\u5bbd\u677e\n- Composition: \u9ec4\u91d1\u6bd4\u4f8b\u6784\u56fe, \u5143\u7d20\u6781\u5c11, \u6bcf\u9875\u53ea\u8bf4\u4e00\u4ef6\u4e8b, \u547c\u5438\u611f\u4f18\u5148\n- Visual language: \u9ad8\u7aef\u4ea7\u54c1\u56fe(\u5982\u679c\u6709), \u6781\u7b80\u56fe\u6807\u7ebf\u6761, \u5927\u9762\u79ef\u7eaf\u8272\u5757, \u5706\u89d2\u5361\u7247\n- Reference: \"Like an Apple keynote meets a Celine lookbook \u2014 confident restraint\"\n- **\u6267\u884c\u8def\u5f84: Path A\uff08HTML\u2192PPTX\uff09**\n\n**12. Takram Speculative** \u2014 \u65e5\u5f0f\u601d\u8fa8\u98ce\uff08\u4e1c\u65b9\u54f2\u5b66\u6d3e\uff09\n- Philosophy: Takram \u2014 \u6280\u672f\u662f\u601d\u8003\u7684\u5a92\u4ecb\u3002\u7528\u67d4\u548c\u7684\u79d1\u6280\u611f\u548c\u6982\u5ff5\u539f\u578b\u56fe\u4f20\u8fbe\u6df1\u5ea6\u601d\u8003\n- Colors: \u6696\u7070(#F5F3EF) bg, \u6df1\u7070(#3D3D3D) text, \u9f20\u5c3e\u8349\u7eff(#8B9D77) accent\n- Ratio: 55% warm bg / 25% diagrams / 20% text\n- Typography: \u5706\u6da6\u7684sans-serif, \u6807\u9898\u4e0d\u7528\u7c97\u4f53\u800c\u7528\u5927\u5c3a\u5bf8(36pt+), \u6b63\u6587\u6e29\u6696(14pt), \u884c\u9ad8\u5bbd\u677e(1.8)\n- Composition: \u67d4\u548c\u9634\u5f71(blur 20px+), \u5706\u89d2(16px+), \u6982\u5ff5\u56fe/\u6d41\u7a0b\u56fe\u4f5c\u4e3a\u6838\u5fc3\u89c6\u89c9, \u5361\u7247\u5f0f\u5e03\u5c40\n- Visual language: \u6982\u5ff5\u539f\u578b\u56fe, \u67d4\u548c\u6e10\u53d8, \u6d41\u7a0b\u56fe\u5373\u827a\u672f, \u624b\u7ed8\u611f\u56fe\u6807, \u81ea\u7136\u8272\u8c03\n- Reference: \"Like a Takram project page \u2014 where technology feels thoughtful, not aggressive\"\n- **\u6267\u884c\u8def\u5f84: Path A\uff08HTML\u2192PPTX\uff0c\u914d\u56fe\u53efAI\u8f85\u52a9\u751f\u6210\uff09**\n\n**\u66f4\u6df1\u5165\u7684\u98ce\u683c\u7ec6\u8282**\uff1a\u53c2\u8003 `design-philosophy` skill \u7684 `references/design-styles.md`\uff0c\u5305\u542b20\u79cd\u8bbe\u8ba1\u54f2\u5b66\u7684\u5b8c\u6574\u63d0\u793a\u8bcdDNA\n\n### \ud83c\udfa8 Custom Character Style (User-Defined)\n\nUsers may want to reference specific cartoon/anime aesthetics. When a user says \"do it in Doraemon style\" or \"like Studio Ghibli\", treat this as a **style reference**, not a request to draw copyrighted characters. Build a custom Design System by extracting the visual DNA of that style.\n\n**How to convert a character reference into a Design System:**\n\n| User says | Extract these visual traits |\n|-----------|---------------------------|\n| \"Doraemon style\" | Round shapes, bright primary blue + white + red, simple backgrounds, cute proportions, magical gadget reveals |\n| \"Studio Ghibli\" | Watercolor textures, natural greens and sky blues, detailed backgrounds with simple characters, warmth and wonder |\n| \"Calvin and Hobbes\" | Dynamic ink brushwork, expressive motion lines, philosophical contrast between fantasy and reality, lush outdoor scenes |\n| \"One Piece manga\" | Bold dynamic lines, exaggerated proportions, dramatic action poses, high energy, thick outlines |\n| \"Crayon Shin-chan\" | Crude crayon-like lines, flat bright colors, comedic proportions, everyday scenarios made absurd |\n| \"Adventure Time\" | Geometric simple shapes, pastel candy colors, thin outlines, whimsical surreal backgrounds |\n\n**Template for custom style:**\n```\n[User Style]: \"[reference name]\"\n\u2192 Shape language: [round/angular/geometric/organic]\n\u2192 Line quality: [thin uniform / thick varied / sketchy / brushwork]\n\u2192 Color palette: [specific colors extracted from that aesthetic]\n\u2192 Character style: [proportions, expressiveness level]\n\u2192 Background treatment: [detailed/minimal/abstract]\n\u2192 Emotional tone: [warm/energetic/philosophical/surreal]\n```\n\n### Typography Rules (All Presets)\n\n- Max 2 font families (1 heading + 1 body)\n- Heading: bold, personality \u2014 \u226536pt (trend: even larger, as graphic surface)\n- Body: clean, readable \u2014 \u226518pt\n- Chinese: system default (PingFang SC / Microsoft YaHei)\n- **Key principle**: Typography is a DESIGN ELEMENT, not just an information container\n\n### \u2705 Checkpoint 2 (Guided + Collaborative)\n\n**Ask the user to pick one of the 3 proposed design systems**, or describe their own preference. Show the full description including philosophy, visual language, and reference.\n\n---\n\n## Step 3: Build Slides\n\n---\n\n### Step 3-A: HTML + Selective Illustrations (Path A)\n\nGenerate AI illustrations for key slides, then create HTML slide files.\n\n**Which slides need illustrations?** Prioritize:\n1. **Cover slide** \u2014 always. Sets the visual tone.\n2. **Key insight slides** \u2014 the \"aha moment\" slides benefit most.\n3. **Closing slide** \u2014 optional but impactful.\n4. **Data-heavy slides** \u2014 charts/diagrams instead of AI art.\n\n**Illustration Generation** \u2014 use `nano-banana-pro` skill:\n\n> \u26a0\ufe0f `nano-banana-pro` \u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u5916\u90e8 skill\uff0c**\u4e0d\u968f\u672c\u4ed3\u5e93\u5206\u53d1**\u3002\u5982\u679c\u4f60\u7684 `~/.claude/skills/` \u4e0b\u6ca1\u6709\u5b83\uff0c\u76f4\u63a5\u7528\u672c\u4ed3\u5e93\u81ea\u5e26\u7684\u7b49\u4ef7\u811a\u672c\uff08\u540c\u6837\u8c03\u7528 Gemini 3 Pro Image API\uff0c\u9ed8\u8ba4 16:9\uff0c\u6b63\u597d\u9002\u914d slides\uff09\uff1a\n> `uv run <\u672c\u4ed3\u5e93\u8def\u5f84>/huashu-wechat-image/scripts/generate_image.py --prompt \"...\" --filename \"...\" --resolution 2K`\n\n```bash\nexport $(grep GEMINI_API_KEY ~/.claude/.env) && \\\nuv run ~/.claude/skills/nano-banana-pro/scripts/generate_image.py \\\n  --prompt \"[description]\" \\\n  --filename \"[timestamp]-slide-[N]-[name].png\" \\\n  --resolution 2K\n```\n\n**Base Style Prompt** \u2014 define ONE style suffix, append to every illustration:\n\n```\n[Base Style]: flat vector illustration, [palette background color] background,\n[accent color] highlight elements, clean minimalist aesthetic,\nprofessional presentation style, no text in image\n```\n\n**Per-slide prompt = [specific content] + [Base Style]**\n\n**Key rules:**\n- Always include \"no text in image\" \u2014 text will be added as editable elements\n- Use descriptive paragraphs, not keyword lists\n- Specify hex colors explicitly\n- Use \"flat vector\" / \"flat illustration\" for consistency\n\n**Embedding in HTML slides:**\n\n```html\n<!-- Side illustration (recommended) -->\n<div class=\"left\"><!-- text content --></div>\n<div class=\"right\"><img src=\"illustration.png\" style=\"width: 280pt; height: 280pt;\"></div>\n\n<!-- Background illustration -->\n<body style=\"background-image: url('illustration.png'); background-size: cover;\">\n```\n\n**\u2705 Checkpoint 3-A** (Guided: preview 2-3 key illustrations; Collaborative: every one)\n\nShow generated illustrations. Ask: Approve / regenerate / style consistent?\n\n---\n\n### Step 3-B: Full AI Slide Generation (Path B)\n\nGenerate EVERY slide as a complete AI image \u2014 layout, text, visuals, all in one.\n\n**\u26a0\ufe0f THE #1 MISTAKE: Over-constraining the prompt with layout details and visual restrictions.**\nMore constraints = LESS creativity and diversity. The AI generates best when given mood + reference + content, NOT specific positions, color ratios, or character restrictions.\n\n#### The Golden Rule of AI Image Prompts\n\n**SHORT prompts > LONG prompts.** A 3-sentence prompt describing mood and content produces better results than a 30-line prompt specifying every visual detail. Specifically:\n\n| DON'T (kills diversity) | DO (enables creativity) |\n|---|---|\n| Specify color ratios (60%/25%/15%) | Describe the mood (\"warm like a Sunday comic page\") |\n| Dictate layout positions (\"title centered, image on right\") | Reference a specific aesthetic (\"Peanuts comic strip\") |\n| Restrict characters (\"NOT Snoopy \u2014 an original character\") | Let AI interpret the style naturally |\n| List every visual element to include | Describe what the viewer should FEEL |\n| Repeat the base style in every per-slide prompt | Define base style once, keep per-slide prompts short |\n\n#### Base Style Prompt \u2014 Keep it SHORT\n\nDefine a base style once, append to every slide. **Keep it under 5 lines.** The base style sets the mood; per-slide prompts add the content.\n\n```\n[Base Style]:\nVISUAL REFERENCE: [Specific art/design aesthetic in one sentence]\nCANVAS: 16:9 aspect ratio, 2048x1152 pixels, high quality rendering.\nCOLOR SYSTEM: [Describe the mood/feel of colors, not exact ratios]\n```\n\n**Example (good \u2014 concise):**\n```\nVISUAL REFERENCE: Charles Schulz Peanuts comic strip \u2014 warm, philosophical, charming.\nCharacters include round-headed kids, a lovable beagle dog, and a small yellow bird.\nCANVAS: 16:9 aspect ratio, 2048x1152 pixels, high quality rendering.\nCOLOR SYSTEM: Warm cream/newspaper tone background, soft muted pastels, warm ink lines.\n```\n\n**Anti-pattern (bad \u2014 over-specified):** Do NOT include typography sizes, color ratios, composition percentages, margin specifications, or visual weight distributions in the base style. These constraints reduce diversity without improving quality.\n\n#### Per-Slide Prompt Structure\n\nKeep per-slide prompts **short and focused**. Do NOT repeat base style details or over-specify visual layout.\n\n```\nCreate a [style] slide about [topic].\n\n[Base Style]\n\nDESIGN INTENT: [1 sentence \u2014 what the viewer should FEEL]\n\nTEXT TO RENDER:\n- Title: \"[exact text]\"\n- Body: \"[exact text]\"\n\n[Optional: 1-2 sentences describing mood or scene. Let AI decide composition.]\n```\n\n#### Example \u2014 GOOD vs BAD\n\n**BAD (traditional PPT \u2014 boring):**\n```\nDesign a professional presentation slide.\nProfessional presentation slide, 16:9 aspect ratio, 2048x1152 pixels.\nDark navy background, light gray text, gold accent.\nSlide type: content. Layout: Title at top-left, two columns below.\nTitle: \"\u770b\u6da8\u671f\u6743\u6536\u76ca\u7ed3\u6784\"\nBody: \"\u884c\u6743\u4ef7: 100\u5143, \u6743\u5229\u91d1: 10\u5143\"\nVisual: a line chart showing call option payoff\n```\n\u2192 Result: Generic PPT that could come from any template\n\n**GOOD (magazine-level \u2014 stunning):**\n```\nCreate a slide that feels like a Bloomberg terminal data visualization\nbrought to life as editorial art.\n\nVISUAL REFERENCE: Bloomberg Businessweek data feature meets cinematic lighting.\nCANVAS: 16:9, 2048x1152, sharp rendering.\nCOLOR SYSTEM: Deep black (#0A0A0A) background 75%, white text 15%,\ngold (#BF9A4A) accent 10%. The gold represents profit \u2014 it should GLOW.\nTYPOGRAPHY: The number \"110\" rendered at 100pt as the dominant visual anchor\n(the break-even point IS the story). Supporting text at 14pt, muted gray.\n\nDESIGN INTENT: The viewer should instantly FEEL the asymmetry of options \u2014\nlimited downside, unlimited upside. The visual must make this visceral,\nnot just informational.\n\nTEXT TO RENDER:\n- Hero metric: \"110\" (giant, gold, the break-even price)\n- Title: \"\u76c8\u4e8f\u5e73\u8861\u70b9\" (medium, white, above the number)\n- Left data: \"\u884c\u6743\u4ef7 100\" \"\u6743\u5229\u91d1 10\" (small, gray, understated)\n- Insight: \"\u4e8f\u635f\u6709\u5e95 \u76c8\u5229\u65e0\u9650\" (accent color, bottom)\n\nVISUAL NARRATIVE: A single golden curve emerges from the left side of the slide,\nflat and muted in gray at -10 (the maximum loss), then suddenly bending upward\nat the strike price, transitioning from gray to brilliant gold as it rises\ninto the profit zone. The curve should feel like a ray of light breaking\nthrough darkness. The profitable area above zero glows with warm gold\natmospheric lighting, like sunrise. The chart has NO grid lines, NO axes labels\ncluttering the visual \u2014 just the pure, dramatic curve and the giant \"110\"\nfloating at the inflection point.\n```\n\u2192 Result: An editorial data visualization that tells a story\n\n#### Key Rules for Path B Prompts\n\n**Prompt Quality Checklist (verify before every generation):**\n\n1. **Visual Reference** \u2014 Does the prompt name a specific art style or publication? (NOT just \"professional\" or \"modern\")\n2. **Mood, not Layout** \u2014 Does the prompt describe what the viewer should FEEL, not where elements should be PLACED?\n3. **Text Content** \u2014 Are all texts to render listed clearly and accurately?\n4. **Short Enough** \u2014 Is the prompt concise? Long prompts with detailed specs REDUCE diversity. Remove anything the AI can decide on its own.\n5. **NO Micro-Management** \u2014 No hex color ratios, no typography sizes, no composition percentages, no character pose instructions.\n\n**Technical Rules:**\n- **Always specify resolution**: `2048x1152` (2K, 16:9) for crisp text\n- **Include ALL text verbatim** \u2014 AI must render exact words\n- **\u4e2d\u6587\u4f18\u5148**: slide\u4e0a\u7684\u6587\u5b57\u4e00\u5f8b\u7528\u4e2d\u6587\uff0c\u4ec5\u4fdd\u7559\u5fc5\u8981\u82f1\u6587\u672f\u8bed\n- **Chinese text tip**: Keep titles short (\u22648 characters) for best rendering\n- **Use descriptive paragraphs**, not keyword lists\n- **Generate in parallel**: Run 3-5 slide generations concurrently for speed\n- **Consistency**: The Base Style is applied to EVERY slide. It's a system, not a suggestion\n\n**Generation command** (same tool, but full-slide prompts):\n\n```bash\nexport $(grep GEMINI_API_KEY ~/.claude/.env) && \\\nuv run ~/.claude/skills/nano-banana-pro/scripts/generate_image.py \\\n  --prompt \"[full slide prompt]\" \\\n  --filename \"slide-[NN]-[name].png\" \\\n  --resolution 2K\n```\n\n> \u6ca1\u6709 `nano-banana-pro` \u65f6\u540c\u6837\u53ef\u6362\u7528\u672c\u4ed3\u5e93\u7684 `huashu-wechat-image/scripts/generate_image.py`\uff08\u89c1 Step 3-A \u7684\u8bf4\u660e\uff09\u3002\n\n**Quality check after generation:**\n1. **Text accuracy** \u2014 verify all Chinese/English text rendered correctly\n2. **Layout** \u2014 elements positioned as described\n3. **Style consistency** \u2014 colors and design language match across slides\n4. If a slide has text errors \u2192 regenerate with adjusted prompt (simplify text or shorten)\n\n**\u2705 Checkpoint 3-B** (Guided: preview all slides as a set; Collaborative: approve each)\n\nShow ALL generated slide images to the user. Ask:\n- Text readable and accurate?\n- Visual style consistent across slides?\n- Any slides to regenerate?\n\n---\n\n## Step 4: PPTX Assembly\n\n### 4-A: html2pptx Workflow (Path A)\n\nCreate HTML files per slide, convert with `html2pptx.js`:\n\n```javascript\nconst pptxgen = require('pptxgenjs');\nconst html2pptx = require(process.env.HOME + '/.agents/skills/pptx/scripts/html2pptx.js');\n\nconst pptx = new pptxgen();\npptx.layout = 'LAYOUT_16x9';\nawait html2pptx('slide1.html', pptx);\nawait html2pptx('slide2.html', pptx);\nawait pptx.writeFile({ fileName: 'output.pptx' });\n```\n\n**HTML rules** (from pptx skill):\n- Body dimensions: `width: 720pt; height: 405pt` (16:9)\n- ALL text must be in `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>` tags\n- Backgrounds/borders only on `<div>` elements\n- No CSS gradients \u2014 pre-render as PNG with Sharp\n- Use web-safe fonts only (Arial, Helvetica, Georgia, etc.)\n- Images: `<img src=\"illustration.png\" style=\"width: Xpt; height: Ypt;\">`\n\n**Known issue:** Chinese characters in file paths can break image loading. Use symlinks to ASCII paths if needed:\n```bash\nln -sf \"/path/with/\u4e2d\u6587/\" /tmp/ascii-path\n```\n\n### 4-B: Image Assembly (Path B)\n\nAssemble generated slide images into PPTX using `create_slides.py`:\n\n```bash\nuv run ~/.claude/skills/image-to-slides/scripts/create_slides.py \\\n  slide-01-cover.png slide-02-intro.png slide-03-definition.png ... \\\n  --layout fullscreen \\\n  --bg-color 000000 \\\n  -o output.pptx\n```\n\n**Recommended layout for Path B: `fullscreen`** \u2014 images fill the entire slide since they already contain all layout, text, and visuals.\n\n| Layout | Use case |\n|--------|----------|\n| `fullscreen` | AI-generated full-page slides (Path B default) |\n| `title_above` | Image + editable title (hybrid approach) |\n| `title_left` | Split: text + visual |\n| `center` | Centered image with padding |\n| `grid` | Multiple images per slide |\n\n---\n\n## Step 5: Preview & Polish\n\n### Preview\n\n**Path A:** Screenshot 3-4 key HTML slides with Playwright:\n```bash\nnpx playwright screenshot \"file:///path/to/slide.html\" preview.png \\\n  --viewport-size=960,540 --wait-for-timeout=1000\n```\n\n**Path B:** Show the generated slide images directly (they ARE the slides). Use `Read` tool to display 3-4 key PNGs.\n\n### \u2705 Checkpoint 4 (All modes)\n\n**Show preview to the user.** The PPTX file is ready \u2014 ask:\n- Any slides to adjust?\n- Ready to open in Keynote/PowerPoint?\n\n### Final Polish (in Keynote/PowerPoint)\n- Transitions and animations\n- Speaker notes\n- Brand logo placement\n- Path A: Final text adjustments (editable)\n- Path B: Text NOT editable \u2014 if text errors found, regenerate the slide image\n\n---\n\n## Design Quick Reference\n\n**5/5/5 rule:** \u22645 words/line, \u22645 bullets/slide, \u22645 text-heavy slides in a row\n\n**Cognitive load:** One idea per slide. ~1 min per slide. Slides complement speech, never duplicate it.\n\n**Visual hierarchy:** F/Z-pattern reading flow. Title:body size \u2248 3:1. Every slide should have a visual element.\n\n**Detailed references:**\n- `references/proven-styles-gallery.md` \u2014 17 tested visual styles with tiered recommendations\n- `references/proven-styles-snoopy.md` \u2014 Snoopy/Peanuts style detailed per-slide templates\n- `references/prompt-templates.md` \u2014 Content generation and image prompts\n- `references/design-principles.md` \u2014 Full design framework, color palettes, typography\n\n## Related Skills\n\n| Skill | Role |\n|-------|------|\n| `pptx` | Advanced PPTX creation/editing (html2pptx, templates) |\n| `nano-banana-pro` | AI illustration generation (Gemini 3 Pro Image)\u3002\u5916\u90e8 skill \u4e0d\u968f\u672c\u4ed3\u5e93\u5206\u53d1\uff0c\u672a\u5b89\u88c5\u65f6\u7528\u672c\u4ed3\u5e93 `huashu-wechat-image/scripts/generate_image.py` \u4ee3\u66ff |\n| `multi-model` | External AI for content drafting |\n| `design-philosophy` | 20\u79cd\u8bbe\u8ba1\u54f2\u5b66\u6df1\u5ea6\u53c2\u8003\uff08\u98ce\u683cDNA + \u573a\u666f\u6a21\u677f + \u8bc4\u5ba1\u6807\u51c6\uff09\u3002Professional/Editorial\u98ce\u683c\u7684\u8be6\u7ec6\u63d0\u793a\u8bcd\u548c\u8bc4\u5ba1\u6307\u5357\u5728\u6b64 |\n\n## Output\n\n- `.pptx` files compatible with PowerPoint, Keynote, Google Slides\n- Web-safe fonts for cross-platform compatibility\n- AI illustrations as separate PNG files (reusable)\n\n---\n\n> **\u82b1\u53d4\u51fa\u54c1** | AI Native Coder \u00b7 \u72ec\u7acb\u5f00\u53d1\u8005\n> \u516c\u4f17\u53f7\u300c\u82b1\u53d4\u300d| 30\u4e07+\u7c89\u4e1d | AI\u5de5\u5177\u4e0e\u6548\u7387\u63d0\u5347\n> \u4ee3\u8868\u4f5c\uff1a\u5c0f\u732b\u8865\u5149\u706f\uff08AppStore\u4ed8\u8d39\u699cTop1\uff09\u00b7\u300a\u4e00\u672c\u4e66\u73a9\u8f6cDeepSeek\u300b\n","usage":"\u8bfb\u53d6 SKILL.md\uff0c\u5e76\u6309\u9700\u8bfb\u53d6\u914d\u5957\u6587\u4ef6\uff1b\u4e0b\u8f7d ZIP \u83b7\u53d6\u5b8c\u6574\u5305\u3002\u6280\u80fd\u662f\u4efb\u52a1\u65b9\u6cd5\uff0c\u4e0d\u6388\u4e88\u65b0\u589e\u8d26\u6237\u3001\u4ed8\u8d39\u6216\u7cfb\u7edf\u6743\u9650\u3002"}