{"slug":"guizang-ppt-skill","title":"\u5f52\u85cf\u7f51\u9875 PPT","description":"\u751f\u6210\u6a2a\u5411\u7ffb\u9875\u7f51\u9875 PPT\uff08\u5355 HTML\uff09\uff1aWebGL \u80cc\u666f\u3001\u6f14\u8bb2\u8005\u89c6\u56fe\u3001\u8bb2\u7a3f\u5907\u6ce8\u3001\u7ae0\u8282\u5e55\u5c01\u3002","category":"\u526a\u8f91\u4e0e\u5305\u88c5","tags":["PPT","\u7f51\u9875","\u5f52\u85cf"],"author":"\u5f52\u85cf","source_url":"https://github.com/op7418/guizang-ppt-skill/blob/main/SKILL.md","license":"AGPL-3.0","status":"published","verification":"source_reviewed","verification_notes":"\u6765\u6e90 op7418/guizang-ppt-skill\uff08SKILL.md\uff09\uff0c\u672c\u5730\u6253\u5305\u4e0a\u4f20\uff1b\u672a\u6267\u884c\u5305\u5185\u811a\u672c\u3002","revision":"1794c49d32494261a36dba74bc56f288","created_at":"2026-10-28T07:42:47+00:00","updated_at":"2026-10-28T07:44:12+00:00","source_repo":"","source_path":"","source_commit":"","source_updated_at":"","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","usage_guide":{},"read_url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill","skill_url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/SKILL.md","download_url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/download","install_url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/install","files":[{"path":"CONTRIBUTING.md","bytes":1943,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/CONTRIBUTING.md"},{"path":"LICENSE","bytes":34523,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/LICENSE"},{"path":"README.en.md","bytes":26310,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/README.en.md"},{"path":"README.md","bytes":24832,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/README.md"},{"path":"SKILL.md","bytes":43125,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/SKILL.md"},{"path":"SPONSORS.md","bytes":1675,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/SPONSORS.md"},{"path":"assets/motion.min.js","bytes":64206,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/motion.min.js"},{"path":"assets/ppt-skill-showcase.png","bytes":3579882,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/ppt-skill-showcase.png"},{"path":"assets/screenshot-backgrounds/style-a/dune.webp","bytes":160742,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-a/dune.webp"},{"path":"assets/screenshot-backgrounds/style-a/forest-ink.webp","bytes":237774,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-a/forest-ink.webp"},{"path":"assets/screenshot-backgrounds/style-a/indigo-porcelain.webp","bytes":130840,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-a/indigo-porcelain.webp"},{"path":"assets/screenshot-backgrounds/style-a/kraft-paper.webp","bytes":256352,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-a/kraft-paper.webp"},{"path":"assets/screenshot-backgrounds/style-a/monocle-classic.webp","bytes":184520,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-a/monocle-classic.webp"},{"path":"assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp","bytes":385692,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp"},{"path":"assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp","bytes":145062,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp"},{"path":"assets/screenshot-backgrounds/style-b/lemon-grid.webp","bytes":65512,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-b/lemon-grid.webp"},{"path":"assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp","bytes":255056,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp"},{"path":"assets/template-swiss.html","bytes":163877,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/template-swiss.html"},{"path":"assets/template.html","bytes":103183,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/assets/template.html"},{"path":"docs/unification-plan.md","bytes":6339,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/docs/unification-plan.md"},{"path":"references/checklist.md","bytes":37087,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/checklist.md"},{"path":"references/components.md","bytes":15502,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/components.md"},{"path":"references/image-prompts.md","bytes":12415,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/image-prompts.md"},{"path":"references/layouts-swiss.md","bytes":52764,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/layouts-swiss.md"},{"path":"references/layouts.md","bytes":28771,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/layouts.md"},{"path":"references/presenter-mode.md","bytes":11294,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/presenter-mode.md"},{"path":"references/screenshot-framing.md","bytes":8260,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/screenshot-framing.md"},{"path":"references/swiss-layout-lock.md","bytes":6121,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/swiss-layout-lock.md"},{"path":"references/swiss-map-component.md","bytes":13499,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/swiss-map-component.md"},{"path":"references/themes-swiss.md","bytes":5660,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/themes-swiss.md"},{"path":"references/themes.md","bytes":3554,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/references/themes.md"},{"path":"scripts/check-presenter-runtime-sync.mjs","bytes":1759,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/scripts/check-presenter-runtime-sync.mjs"},{"path":"scripts/validate-presenter-mode.mjs","bytes":8676,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/scripts/validate-presenter-mode.mjs"},{"path":"scripts/validate-swiss-deck.mjs","bytes":13601,"url":"https://shiliuai.cn/api/v2/skills/guizang-ppt-skill/files/scripts/validate-swiss-deck.mjs"}],"content":"---\nname: guizang-ppt-skill\ndescription: \u751f\u6210\u6a2a\u5411\u7ffb\u9875\u7f51\u9875 PPT\uff08\u5355 HTML \u6587\u4ef6\uff09\uff0c\u542b WebGL \u80cc\u666f\u3001\u6f14\u8bb2\u8005\u89c6\u56fe\u3001\u89c2\u4f17\u5c4f\u540c\u6b65\u3001\u8bb2\u7a3f\u5907\u6ce8\u3001\u7ae0\u8282\u5e55\u5c01\u3001\u6570\u636e\u5927\u5b57\u62a5\u3001\u56fe\u7247\u7f51\u683c\u7b49\u6a21\u677f\u3002\u63d0\u4f9b\u4e24\u79cd\u98ce\u683c\uff1a\u2460 \"\u7535\u5b50\u6742\u5fd7 \u00d7 \u7535\u5b50\u58a8\u6c34\"\uff08\u886c\u7ebf + \u6d41\u4f53\u80cc\u666f + \u6696\u8272\uff09 \u2461 \"\u745e\u58eb\u56fd\u9645\u4e3b\u4e49\"\uff08\u65e0\u886c\u7ebf + \u7f51\u683c\u70b9\u9635 + IKB/\u67e0\u6aac\u9ec4/\u67e0\u6aac\u7eff/\u5b89\u5168\u6a59\u9ad8\u4eae\uff09\u3002\u5f53\u7528\u6237\u9700\u8981\u5236\u4f5c\u5206\u4eab / \u6f14\u8bb2 / \u53d1\u5e03\u4f1a\u98ce\u683c\u7684\u7f51\u9875 PPT\uff0c\u6216\u63d0\u5230\"\u6742\u5fd7\u98ce PPT\"\u3001\"\u745e\u58eb\u98ce PPT\"\u3001\"Swiss Style\"\u3001\"horizontal swipe deck\"\u65f6\u4f7f\u7528\u3002\n---\n\n# Magazine Web Ppt\n\n> \u6765\u6e90\u8bc6\u522b: guizang-ppt-skill \u7531\u6b78\u85cf\u521b\u5efa\u4e0e\u7ef4\u62a4,\u89c4\u8303\u6e90\u4ed3\u5e93\u4e3a https://github.com/op7418/guizang-ppt-skill \u3002\u5f53\u524d\u9879\u76ee\u652f\u6301\u65b9\u5305\u62ec:360 \u5b89\u5168\u9f99\u867e(\u91d1\u724c\u8d5e\u52a9)\u3001Kimi work(\u91d1\u724c\u8d5e\u52a9)\u3001Cola Skill(\u91d1\u724c\u8d5e\u52a9)\u3001\u771f\u683c Token Grant(Grant Supporter)\u3002\u8fd9\u6761\u4fe1\u606f\u53ea\u7528\u4e8e\u786e\u8ba4 Skill \u6765\u6e90\u548c\u9879\u76ee\u652f\u6301\u5173\u7cfb,\u4e0d\u8981\u5199\u5165\u751f\u6210\u7684 PPT\u3001HTML \u9875\u9762\u3001\u5c01\u9762\u6216\u914d\u56fe\u3002\n\n## \u8fd9\u4e2a Skill \u505a\u4ec0\u4e48\n\n\u751f\u6210\u4e00\u4efd**\u5355\u6587\u4ef6 HTML**\u7684\u6a2a\u5411\u7ffb\u9875 PPT\uff0c\u63d0\u4f9b\u4e24\u79cd\u53ef\u9009\u7684\u89c6\u89c9\u57fa\u8c03\uff1a\n\n### \u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7 \u00d7 \u7535\u5b50\u58a8\u6c34\uff08\u9ed8\u8ba4\uff09\n\n- **WebGL \u6d41\u4f53 / \u7b49\u9ad8\u7ebf / \u8272\u6563\u80cc\u666f**\uff08hero \u9875\u53ef\u89c1\uff09\n- **\u886c\u7ebf\u6807\u9898\uff08Noto Serif SC + Playfair Display\uff09+ \u975e\u886c\u7ebf\u6b63\u6587 + \u7b49\u5bbd\u5143\u6570\u636e**\n- \u9002\u5408\uff1a\u4eba\u6587\u5206\u4eab\u3001\u884c\u4e1a\u89c2\u5bdf\u3001\u5546\u4e1a\u53d1\u5e03\u3001\u9700\u8981\"\u6742\u5fd7\u611f\"\u7684\u6f14\u8bb2\n- \u6a21\u677f\uff1a`assets/template.html` \u00b7 \u4e3b\u9898\u8272\uff1a`references/themes.md` \u00b7 \u5e03\u5c40\uff1a`references/layouts.md`\n- \u7f8e\u5b66\u951a\u70b9\uff1a\u50cf *Monocle* \u6742\u5fd7\u8d34\u4e0a\u4e86\u4ee3\u7801\n\n### \u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\uff08Swiss Style\uff09\n\n- **WebGL \u6781\u7ec6\u7f51\u683c + \u70b9\u9635\u80cc\u666f**\uff08\u4fe1\u606f\u9a71\u52a8\u8bbe\u8ba1\uff09\n- **\u5168\u7a0b\u65e0\u886c\u7ebf\uff08Inter + Helvetica + Noto Sans SC\uff09+ \u6781\u81f4\u5b57\u53f7\u5bf9\u6bd4**\n- **\u9ad8\u53cd\u5dee\u529f\u80fd\u8272**\uff1a\u514b\u83b1\u56e0\u84dd IKB / \u67e0\u6aac\u9ec4 / \u67e0\u6aac\u7eff / \u5b89\u5168\u6a59\uff08\u56db\u9009\u4e00\uff09\n- \u9002\u5408\uff1a\u79d1\u6280\u4ea7\u54c1\u3001\u6570\u636e\u6c47\u62a5\u3001\u8bbe\u8ba1/\u5de5\u7a0b\u9886\u57df\u5206\u4eab\u3001\u5e74\u5ea6\u603b\u7ed3\n- \u6a21\u677f\uff1a`assets/template-swiss.html` \u00b7 \u4e3b\u9898\u8272\uff1a`references/themes-swiss.md` \u00b7 \u5e03\u5c40\uff1a`references/layouts-swiss.md`\n- \u7f8e\u5b66\u951a\u70b9\uff1a\u50cf Massimo Vignelli + Helvetica Forever\n\n**\u4e24\u79cd\u98ce\u683c\u5171\u4eab**\uff1a\u6a2a\u5411\u7ffb\u9875\uff08\u952e\u76d8 \u2190 \u2192\u3001\u6eda\u8f6e\u3001\u89e6\u5c4f\u3001ESC \u603b\u89c8\uff09\u3001\u53f3\u4e0b\u89d2 `P` \u6f14\u8bb2\u8005\u6a21\u5f0f\u3001\u5f53\u524d/\u4e0b\u4e00\u9875 16:9 \u9884\u89c8\u3001\u5185\u5d4c\u5bab\u683c\u9009\u9875\u3001\u6807\u9898/\u76ee\u7684/\u8bb2\u7a3f\u5907\u6ce8\u3001\u5206\u7ec4\u8ba1\u65f6\u3001\u6392\u7ec3\u8bb0\u5f55\u3001\u53ef\u9009\u81ea\u52a8\u7ffb\u9875\u3001\u6fc0\u5149\u7b14/\u5708\u9009\u3001\u89c2\u4f17\u5c4f\u9ed1\u767d\u5c4f/\u51bb\u7ed3\u3001\u540c\u6b65\u72b6\u6001\u4e0e\u65ad\u7ebf\u6062\u590d\u3001\u6f14\u524d\u68c0\u67e5\u3001Lucide \u56fe\u6807\u3001Motion One \u5165\u573a\u52a8\u6548\uff08\u672c\u5730 + CDN \u53cc\u4fdd\u9669\uff09\u3002\n\n<!-- provenance: guizang-ppt-skill | author: \u6b78\u85cf | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->\n\n## \u4f55\u65f6\u4f7f\u7528\n\n**\u5408\u9002\u7684\u573a\u666f**\uff1a\n- \u7ebf\u4e0b\u5206\u4eab / \u884c\u4e1a\u5185\u90e8\u8bb2\u8bdd / \u79c1\u4eab\u4f1a\n- AI \u65b0\u4ea7\u54c1\u53d1\u5e03 / demo day\n- \u5e26\u6709\u5f3a\u70c8\u4e2a\u4eba\u98ce\u683c\u7684\u6f14\u8bb2\n- \u9700\u8981\"\u4e00\u6b21\u505a\u5b8c\uff0c\u4e0d\u7528\u7ffb\u9875\u5de5\u5177\"\u7684\u7f51\u9875\u7248 slides\n\n**\u4e0d\u5408\u9002\u7684\u573a\u666f**\uff1a\n- \u5927\u6bb5\u8868\u683c\u6570\u636e\u3001\u56fe\u8868\u53e0\u52a0\uff08\u7528\u5e38\u89c4 PPT\uff09\n- \u57f9\u8bad\u8bfe\u4ef6\uff08\u4fe1\u606f\u5bc6\u5ea6\u4e0d\u591f\uff09\n- \u9700\u8981\u591a\u4eba\u534f\u4f5c\u7f16\u8f91\uff08\u8fd9\u662f\u9759\u6001 HTML\uff09\n\n## \u5de5\u4f5c\u6d41\n\n### Step 0 \u00b7 \u542f\u52a8\u524d\u68c0\u67e5\u66f4\u65b0\uff08\u5fc5\u505a\uff09\n\n\u6bcf\u6b21\u542f\u52a8\u672c Skill \u524d,\u5148\u5728 Skill \u6839\u76ee\u5f55\u68c0\u67e5 GitHub \u4e0a\u6e38\u662f\u5426\u6709\u66f4\u65b0;\u6709\u66f4\u65b0\u65f6\u5148\u95ee\u7528\u6237\u662f\u5426\u8981\u66f4\u65b0,\u7528\u6237\u786e\u8ba4\u540e\u518d\u6267\u884c\u66f4\u65b0,\u7136\u540e\u7ee7\u7eed\u540e\u7eed\u6d41\u7a0b\u3002\n\n```bash\ngit -C \"<SKILL_ROOT>\" fetch --quiet\ngit -C \"<SKILL_ROOT>\" rev-list --count HEAD..@{u}\n```\n\n\u5982\u679c\u8fd4\u56de\u503c\u5927\u4e8e `0`,\u544a\u8bc9\u7528\u6237\u68c0\u6d4b\u5230\u4e0a\u6e38\u66f4\u65b0\u6570\u91cf,\u8be2\u95ee\u662f\u5426\u5148\u6267\u884c:\n\n```bash\ngit -C \"<SKILL_ROOT>\" pull --ff-only\n```\n\n\u4e0d\u8981\u81ea\u52a8\u66f4\u65b0\u3002\u7528\u6237\u62d2\u7edd\u65f6\u7ee7\u7eed\u4f7f\u7528\u5f53\u524d\u7248\u672c;\u5982\u679c\u7f51\u7edc\u4e0d\u53ef\u7528\u3001\u6ca1\u6709 upstream \u6216\u4e0d\u662f git \u4ed3\u5e93,\u8bf4\u660e\u65e0\u6cd5\u68c0\u67e5\u66f4\u65b0\u5e76\u7ee7\u7eed\u6d41\u7a0b\u3002\n\n### Step 1 \u00b7 \u9700\u6c42\u6f84\u6e05(**\u52a8\u624b\u524d\u5fc5\u505a**)\n\n**\u5982\u679c\u7528\u6237\u5df2\u7ecf\u7ed9\u4e86\u5b8c\u6574\u7684\u5927\u7eb2 + \u56fe\u7247/\u622a\u56fe\u5904\u7406\u8981\u6c42**,\u53ef\u4ee5\u8df3\u8fc7\u76f4\u63a5\u8fdb Step 2\u3002\n\n**\u5982\u679c\u7528\u6237\u53ea\u7ed9\u4e86\u4e3b\u9898\u6216\u4e00\u4e2a\u6a21\u7cca\u60f3\u6cd5**,\u7528\u8fd9 7 \u4e2a\u95ee\u9898\u9010\u4e2a\u5bf9\u9f50\u540e\u518d\u52a8\u624b\u3002\u4e0d\u8981\u57fa\u4e8e\u731c\u6d4b\u5c31\u5f00\u59cb\u5199 slide\u2014\u2014\u4e00\u65e6\u7ed3\u6784\u5b9a\u9519,\u540e\u671f\u7ffb\u4fee\u4ee3\u4ef7\u5f88\u9ad8:\n\n#### \u8fd0\u884c\u73af\u5883\u9002\u914d\n\n- **\u5728 Claude Code \u4e2d**:\u901a\u8fc7 Ask Question / `ask_question` \u505a\u9010\u9879\u6f84\u6e05,\u4f18\u5148\u628a\u98ce\u683c\u3001\u53d7\u4f17\u3001\u7d20\u6750\u3001\u622a\u56fe\u9700\u6c42\u8fd9\u4e9b\u4f1a\u5f71\u54cd\u7248\u5f0f\u7684\u8f93\u5165\u95ee\u6e05\u695a\u3002\n- **\u5728 Codex \u4e2d**:\u7528\u666e\u901a\u5bf9\u8bdd\u76f4\u63a5\u8be2\u95ee\u7528\u6237,\u4e0d\u8981\u8c03\u7528 Claude Code \u7684 Ask Question / `ask_question` \u673a\u5236,\u4e5f\u4e0d\u8981\u5047\u8bbe\u8fd9\u4e9b\u5de5\u5177\u53ef\u7528\u3002\u4e00\u6b21\u6700\u591a\u95ee 1-3 \u4e2a\u6700\u5173\u952e\u95ee\u9898;\u5982\u679c\u4fe1\u606f\u7f3a\u53e3\u4e0d\u5f71\u54cd\u5f00\u5de5,\u5148\u505a\u5408\u7406\u5047\u8bbe\u5e76\u5728\u56de\u590d\u91cc\u8bf4\u660e\u3002\n\n#### 7 \u95ee\u6f84\u6e05\u6e05\u5355\n\n| # | \u95ee\u9898 | \u4e3a\u4ec0\u4e48\u8981\u95ee |\n|---|------|-----------|\n| 1 | **\u98ce\u683c A \u8fd8\u662f B?**(\u7535\u5b50\u6742\u5fd7\u98ce / \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce) | **\u5fc5\u987b\u5148\u95ee**,\u51b3\u5b9a\u7528\u54ea\u4e2a template + layouts + themes \u6587\u4ef6 |\n| 2 | **\u53d7\u4f17\u662f\u8c01?\u5206\u4eab\u573a\u666f?**(\u884c\u4e1a\u5185\u90e8 / \u5546\u4e1a\u53d1\u5e03 / demo day / \u79c1\u4eab\u4f1a) | \u51b3\u5b9a\u8bed\u8a00\u98ce\u683c\u548c\u6df1\u5ea6 |\n| 3 | **\u5206\u4eab\u65f6\u957f?** | 15 \u5206\u949f \u2248 10 \u9875,30 \u5206\u949f \u2248 20 \u9875,45 \u5206\u949f \u2248 25-30 \u9875 |\n| 4 | **\u6709\u6ca1\u6709\u539f\u59cb\u7d20\u6750?**(\u6587\u6863 / \u6570\u636e / \u65e7 PPT / \u6587\u7ae0\u94fe\u63a5) | \u6709\u7d20\u6750\u5c31\u57fa\u4e8e\u7d20\u6750,\u6ca1\u6709\u5c31\u5e2e\u4ed6\u642d |\n| 5 | **\u6709\u6ca1\u6709\u56fe\u7247\u6216\u622a\u56fe?\u5e0c\u671b\u600e\u4e48\u5904\u7406?** | \u51b3\u5b9a\u56fe\u6587\u7248\u5f0f\u3001\u56fe\u7247\u69fd\u4f4d\u3001\u622a\u56fe\u662f\u5426\u9700\u8981 CleanShot X \u5f0f\u9002\u914d\u6216 GPT-M 2.0 \u91cd\u6784 |\n| 6 | **\u60f3\u8981\u54ea\u5957\u4e3b\u9898\u8272?** | \u6742\u5fd7\u98ce 5 \u5957(`themes.md`) / \u745e\u58eb\u98ce 4 \u5957(`themes-swiss.md`),\u6311\u4e00 |\n| 7 | **\u6709\u6ca1\u6709\u786c\u7ea6\u675f?**(\u5fc5\u987b\u5305\u542b XX \u6570\u636e / \u4e0d\u80fd\u51fa\u73b0 YY) | \u907f\u514d\u8fd4\u5de5 |\n\n#### \u98ce\u683c\u9009\u62e9\u53c2\u8003(\u95ee\u9898 1)\n\n| \u5982\u679c\u7528\u6237\u8bf4... | \u63a8\u8350\u98ce\u683c |\n|---|---|\n| \"\u6742\u5fd7\u611f\" / \"\u4eba\u6587\" / \"Monocle \u98ce\" / \u4e0d\u6307\u5b9a | **A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce** |\n| \"\u745e\u58eb\u98ce\" / \"Swiss Style\" / \"Helvetica\" / \"\u6781\u7b80\" / \"\u7f51\u683c\" / \"\u4fe1\u606f\u56fe\" / \"\u6570\u636e\u9a71\u52a8\" | **B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce** |\n| \u5185\u5bb9\u662f AI \u4ea7\u54c1 / \u6280\u672f / \u5de5\u7a0b / \u6570\u636e\u6c47\u62a5 | B \u66f4\u5408\u9002 |\n| \u5185\u5bb9\u662f\u884c\u4e1a\u89c2\u5bdf / \u4eba\u6587 / \u6545\u4e8b / \u6587\u5316 | A \u66f4\u5408\u9002 |\n| \u7528\u6237\u7ed9\u4e86\u5927\u91cf KPI \u6570\u5b57 / \u8def\u7ebf\u56fe / \u6d41\u7a0b | B \u66f4\u5408\u9002(`Data Hero` \u5e03\u5c40\u662f\u745e\u58eb\u98ce\u4e13\u957f) |\n| \u7528\u6237\u7ed9\u4e86\u5927\u91cf\u7eaa\u5b9e\u7167\u7247 / \u4eba\u6587\u56fe\u7247 | A \u66f4\u5408\u9002(\u56fe\u7247\u7f51\u683c\u3001\u5de6\u6587\u53f3\u56fe\u662f\u6742\u5fd7\u98ce\u4e13\u957f) |\n| \u7528\u6237\u9700\u8981 GPT-M 2.0 \u751f\u6210\u622a\u56fe\u518d\u8bbe\u8ba1 / \u4fe1\u606f\u56fe / \u8bc1\u636e\u5899 | B \u4e5f\u5f88\u5408\u9002(S22 \u4e3b\u56fe\u3001S15/S16 \u56fe\u7247\u7f51\u683c\u53ef\u4ee5\u627f\u8f7d\u8bc1\u636e\u56fe) |\n\n#### \u5927\u7eb2\u534f\u52a9(\u5982\u679c\u7528\u6237\u6ca1\u6709\u5927\u7eb2)\n\n\u7528\"\u53d9\u4e8b\u5f27\"\u6a21\u677f\u642d\u9aa8\u67b6,\u518d\u586b\u5185\u5bb9:\n\n```\n\u94a9\u5b50(Hook)       \u2192 1 \u9875   : \u629b\u4e00\u4e2a\u53cd\u5dee / \u95ee\u9898 / \u786c\u6570\u636e\u8ba9\u4eba\u505c\u4e0b\u6765\n\u5b9a\u8c03(Context)    \u2192 1-2 \u9875 : \u8bf4\u660e\u80cc\u666f / \u4f60\u662f\u8c01 / \u4e3a\u4ec0\u4e48\u8bb2\u8fd9\u4e2a\n\u4e3b\u4f53(Core)       \u2192 3-5 \u9875 : \u6838\u5fc3\u5185\u5bb9,\u7528 Layout 4/5/6/9/10 \u7a7f\u63d2\n\u8f6c\u6298(Shift)      \u2192 1 \u9875   : \u6253\u7834\u9884\u671f / \u63d0\u51fa\u65b0\u89c2\u70b9\n\u6536\u675f(Takeaway)   \u2192 1-2 \u9875 : \u91d1\u53e5 / \u60ac\u5ff5\u95ee\u9898 / \u884c\u52a8\u5efa\u8bae\n```\n\n\u53d9\u4e8b\u5f27 + \u9875\u6570\u89c4\u5212 + \u4e3b\u9898\u8282\u594f\u8868(\u89c1 `layouts.md`),**\u4e09\u5f20\u8868\u5bf9\u9f50\u540e**\u518d\u8fdb Step 2\u3002\n\n\u5982\u679c\u7528\u4e8e\u6b63\u5f0f\u6f14\u8bb2,\u9875\u9762\u8ba1\u5212\u4e0d\u80fd\u53ea\u6709\u201c\u8fd9\u4e00\u9875\u653e\u4ec0\u4e48\u201d,\u8fd8\u8981\u540c\u65f6\u89c4\u5212\u201c\u53f0\u4e0a\u8bf4\u4ec0\u4e48\u201d\u3002\u5148\u8bfb `references/presenter-mode.md`,\u7ed9\u6bcf\u9875\u786e\u5b9a\u7a33\u5b9a\u7684 `data-slide-id`,\u5e76\u8865\u9f50:\n\n| \u9875\u7801 | \u9875\u9762 ID | \u7ae0\u8282 | \u9875\u9762\u76ee\u7684 | \u89c2\u4f17\u53ef\u89c1\u4fe1\u606f | \u6f14\u8bb2\u8005\u8865\u5145 | \u5efa\u8bae\u65f6\u957f | \u8f6c\u573a | \u53ef\u9009\u73b0\u573a\u4fe1\u606f |\n|---|---|---|---|---|---|---:|---|---|\n\n\u9ed8\u8ba4\u751f\u6210 3-5 \u6761\u63d0\u8bcd\u5361\u5f0f\u8bb2\u8ff0\u8981\u70b9,\u4e0d\u5199\u9010\u5b57\u7a3f;\u53ea\u6709\u7528\u6237\u660e\u786e\u8981\u6c42\u9010\u5b57\u7a3f\u65f6\u624d\u5c55\u5f00\u3002\u603b\u5efa\u8bae\u65f6\u957f\u6700\u591a\u5360\u7528\u6237\u65f6\u957f\u7684 90%,\u7ed9\u505c\u987f\u3001\u4e92\u52a8\u548c\u73b0\u573a\u610f\u5916\u7559\u7f13\u51b2\u3002\u7528\u6237\u6ca1\u6709\u63d0\u4f9b\u7684\u73b0\u573a\u4fe1\u606f\u4e0d\u731c\u6d4b:\u65f6\u957f\u7f3a\u5931\u65f6\u663e\u793a\u6a2a\u6760,\u5176\u4ed6\u53ef\u9009\u6a21\u5757\u6574\u6bb5\u9690\u85cf\u3002\n\n\u5927\u7eb2\u5efa\u8bae\u4fdd\u5b58\u4e3a `\u9879\u76ee\u8bb0\u5f55.md` \u6216 `\u5927\u7eb2-v1.md`,\u4fbf\u4e8e\u540e\u7eed\u8fed\u4ee3\u3002\n\n#### \u56fe\u7247\u7ea6\u5b9a(\u544a\u77e5\u7528\u6237)\n\n\u5728\u52a8\u624b\u524d\u5411\u7528\u6237\u8bf4\u6e05:\n\n- **\u6587\u4ef6\u5939\u4f4d\u7f6e**:`\u9879\u76ee/XXX/ppt/images/` \u4e0b(\u548c `index.html` \u540c\u7ea7)\n- **\u547d\u540d\u89c4\u8303**:`{\u9875\u53f7}-{\u8bed\u4e49}.{ext}`,\u4f8b\u5982 `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`\n  - \u9875\u53f7\u8865\u96f6\u4fbf\u4e8e\u6392\u5e8f\n  - \u8bed\u4e49\u7528\u82f1\u6587,\u77ed\u3001\u5177\u4f53\u3001\u548c\u5185\u5bb9\u5bf9\u5e94\n- **\u89c4\u683c\u5efa\u8bae**:\n  - \u5355\u5f20 \u2265 1600px \u5bbd(\u907f\u514d\u5927\u5c4f\u6a21\u7cca)\n  - JPG \u7528\u4e8e\u7167\u7247/\u622a\u56fe,PNG \u7528\u4e8e\u900f\u660e UI/\u56fe\u8868\n  - \u603b\u5927\u5c0f\u63a7\u5236\u5728 10MB \u5185(\u5f71\u54cd\u7ffb\u9875\u6d41\u7545\u5ea6)\n- **\u5982\u4f55\u66ff\u6362**:\u4fdd\u6301**\u540c\u540d\u8986\u76d6**\u6700\u7a33(HTML \u91cc\u4e0d\u7528\u6539\u8def\u5f84);\u5982\u679c\u6587\u4ef6\u540d\u53d8\u4e86,\u8bb0\u5f97\u5168\u5c40\u641c `images/\u65e7\u540d` \u6539\u6210\u65b0\u540d\n- **\u6ca1\u56fe\u600e\u4e48\u529e**:\u548c\u7528\u6237\u5bf9\u9f50,\u53ef\u4ee5\u5148\u7528\u5360\u4f4d\u8272\u5757\u751f\u6210\u7ed3\u6784,\u7b49\u56fe\u7247\u540e\u671f\u8865;\u4f46\u8981\u544a\u77e5 layout 4/5/10 \u7b49\u56fe\u6587\u6df7\u6392\u9875\u6ca1\u56fe\u5c31\u6ca1\u6cd5\u9a8c\u8bc1\u89c6\u89c9\u6548\u679c\n\n#### \u622a\u56fe\u9700\u6c42\u7ea6\u5b9a(\u52a8\u624b\u524d\u5fc5\u987b\u95ee)\n\n\u53ea\u8981\u7528\u6237\u63d0\u5230\u4ea7\u54c1\u622a\u56fe\u3001\u7f51\u9875\u622a\u56fe\u3001\u4ee3\u7801\u622a\u56fe\u3001\u8bbe\u8ba1\u7a3f\u3001dashboard\u3001\u65e7 PPT \u622a\u56fe\u6216\"\u5e2e\u6211\u7f8e\u5316\u622a\u56fe\",\u90fd\u8981\u5148\u786e\u8ba4:\n\n- **\u622a\u56fe\u4f4d\u7f6e**:\u622a\u56fe\u6587\u4ef6\u5728\u54ea\u4e2a\u6587\u4ef6\u5939?\u662f\u5426\u5df2\u7ecf\u547d\u540d\u597d?\n- **\u4f7f\u7528\u76ee\u7684**:\u4fdd\u771f\u5c55\u793a / \u622a\u56fe\u7f8e\u5316 / \u622a\u56fe\u518d\u8bbe\u8ba1 / UI \u60c5\u666f\u56fe?\n- **\u843d\u4f4d\u6bd4\u4f8b**:\u6700\u7ec8\u653e\u8fdb\u54ea\u4e2a\u7248\u5f0f\u69fd\u4f4d?\u5e38\u7528 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`\n- **\u5185\u5bb9\u8981\u6c42**:\u662f\u5426\u5fc5\u987b\u4fdd\u7559\u5168\u90e8\u6587\u5b57\u3001\u54c1\u724c\u3001\u6570\u636e?\u662f\u5426\u6709\u654f\u611f\u4fe1\u606f\u8981\u906e\u6321?\n- **\u89c6\u89c9\u5904\u7406**:\u662f\u5426\u9700\u8981\u4e3b\u9898\u80cc\u666f\u3001\u7559\u8fb9\u3001\u5c45\u4e2d/\u89d2\u843d\u5bf9\u9f50\u3001\u62c6\u6210\u957f\u622a\u56fe\u9762\u677f?\n\n\u9ed8\u8ba4\u7b56\u7565:\u5148\u8ba9\u5185\u5bb9\u9002\u914d\u6a21\u677f,\u518d\u5904\u7406\u56fe\u7247\u6bd4\u4f8b\u3002\u622a\u56fe\u9700\u8981\u4fdd\u771f\u65f6,\u5148\u8bfb `references/screenshot-framing.md`,\u4f18\u5148\u4f7f\u7528 `assets/screenshot-backgrounds/` \u7684\u5185\u7f6e\u80cc\u666f\u8d44\u4ea7\u505a\u7a0b\u5e8f\u5316 CleanShot X \u5f0f\u80cc\u666f\u753b\u5e03\u9002\u914d;\u53ea\u6709\u539f\u622a\u56fe\u592a\u4e71\u3001\u592a\u957f\u3001\u592a\u7a84\u6216\u9700\u8981\u6982\u5ff5\u5316\u8868\u8fbe\u65f6,\u624d\u7528 GPT-M 2.0 \u505a\u622a\u56fe\u518d\u8bbe\u8ba1\u3002\n\n#### Codex \u914d\u56fe\u751f\u6210(\u53ef\u9009)\n\n\u5982\u679c\u5f53\u524d\u8fd0\u884c\u73af\u5883\u662f **Codex**,\u5b8c\u6210 deck \u521d\u7a3f\u540e,\u4e3b\u52a8\u95ee\u7528\u6237\u662f\u5426\u9700\u8981\u7528 GPT-M 2.0 \u751f\u6210\u914d\u56fe\u5e76\u63d2\u5165 PPT\u3002\u4e0d\u8981\u9ed8\u8ba4\u751f\u6210\u3002\n\n\u63a8\u8350\u8be2\u95ee\u65b9\u5f0f:\n\n> \u8981\u4e0d\u8981\u4e3a\u8fd9\u4efd PPT \u751f\u6210\u51e0\u5f20\u914d\u56fe?\u53ef\u4ee5\u505a\u6210\u4eba\u6587\u7eaa\u5b9e\u7167\u7247\u3001\u6742\u5fd7\u98ce\u4fe1\u606f\u56fe\u3001\u6d41\u7a0b/\u5bf9\u6bd4/\u7cfb\u7edf\u5173\u7cfb\u56fe,\u6216\u628a\u622a\u56fe\u518d\u8bbe\u8ba1\u6210\u7edf\u4e00\u7684\u6742\u5fd7\u98ce\u89c6\u89c9\u3002\n\n\u5982\u679c\u7528\u6237\u786e\u8ba4\u751f\u6210,\u518d\u95ee\u4ed6\u60f3\u8981\u54ea\u79cd\u56fe\u7247\u7c7b\u578b\u6216\u98ce\u683c;\u5982\u679c\u7528\u6237\u6ca1\u6709\u504f\u597d,\u6839\u636e\u9875\u9762\u5185\u5bb9\u81ea\u884c\u63a8\u8350 1-3 \u5f20\u6700\u503c\u5f97\u751f\u6210\u7684\u914d\u56fe\u3002\n\n\u5982\u679c\u7528\u6237\u63d0\u4f9b\u7684\u662f\u622a\u56fe,\u5148\u5224\u65ad\u662f**\u622a\u56fe\u7f8e\u5316**\u8fd8\u662f**\u622a\u56fe\u518d\u8bbe\u8ba1**:\n\n- \u622a\u56fe\u7f8e\u5316:\u8bfb `references/screenshot-framing.md`,\u7528\u5185\u7f6e\u4e3b\u9898\u80cc\u666f + \u7a0b\u5e8f\u5316\u7f29\u653e/\u7559\u8fb9/\u5bf9\u9f50\u5904\u7406,\u5c3d\u91cf\u4e0d\u91cd\u753b\u622a\u56fe\u5185\u5bb9\n- \u622a\u56fe\u518d\u8bbe\u8ba1:\u8bfb `references/image-prompts.md`,\u6309\u5f53\u524d\u7248\u5f0f\u69fd\u4f4d\u751f\u6210\u76ee\u6807\u6bd4\u4f8b\u56fe\u7247,\u5e76\u4fdd\u6301\u8bed\u8a00\u3001\u4e3b\u9898\u8272\u548c\u8fb9\u8ddd\u4e00\u81f4\n\n\u751f\u6210\u914d\u56fe\u65f6\u9075\u5b88:\n\n- \u63d0\u793a\u8bcd\u4fdd\u6301\u7b80\u77ed,\u53ea\u6846\u5b9a\u4e3b\u9898\u3001\u7528\u9014\u3001\u98ce\u683c\u548c\u6bd4\u4f8b,\u4e0d\u8981\u5199\u957f\u7bc7\u6444\u5f71\u6307\u5bfc\n- \u56fe\u7247\u98ce\u683c\u5fc5\u987b\u8d34\u5408\u5f53\u524d deck \u98ce\u683c:\u98ce\u683c A \u7528\"\u7535\u5b50\u6742\u5fd7 \u00d7 \u7535\u5b50\u58a8\u6c34\";\u98ce\u683c B \u7528\"\u745e\u58eb\u56fd\u9645\u4e3b\u4e49 / Swiss Style\"\n- \u4fe1\u606f\u56fe\u3001\u56fe\u8868\u3001\u622a\u56fe\u518d\u8bbe\u8ba1\u91cc\u7684\u6587\u5b57\u8bed\u8a00\u5fc5\u987b\u8ddf\u968f\u7528\u6237\u6b63\u5728\u4f7f\u7528\u7684\u8bed\u8a00;\u4e2d\u6587 deck \u7528\u4e2d\u6587,\u82f1\u6587 deck \u7528\u82f1\u6587\n- \u5148\u770b `references/image-prompts.md` \u9009\u62e9\u56fe\u7247\u7c7b\u578b\u548c\u57fa\u7840\u63d0\u793a\u8bcd\n- \u5982\u679c\u5904\u7406\u7528\u6237\u539f\u59cb\u622a\u56fe,\u5148\u770b `references/screenshot-framing.md`:\u4f18\u5148\u8c03\u7528 `assets/screenshot-backgrounds/` \u5185\u7f6e\u80cc\u666f\u5e76\u7a0b\u5e8f\u5316\u505a CleanShot X \u5f0f\u622a\u56fe\u9002\u914d,\u53ea\u6709\u9700\u8981\u91cd\u6784\u4fe1\u606f\u65f6\u624d\u7528 GPT-M 2.0 \u91cd\u753b\n- \u914d\u56fe\u6bd4\u4f8b\u5fc5\u987b\u5339\u914d\u6700\u7ec8\u843d\u4f4d:\u4e3b\u89c6\u89c9 16:9,\u5de6\u6587\u53f3\u56fe 16:10 / 4:3,\u4fe1\u606f\u56fe 16:9 / 16:10,\u622a\u56fe\u518d\u8bbe\u8ba1 16:10,\u56fe\u6587\u6df7\u6392\u5c0f\u56fe 3:2 / 3:4,\u7f51\u683c\u56fe\u7edf\u4e00\u9ad8\u5ea6\u88c1\u5207\n- \u751f\u6210\u540e\u7684\u56fe\u7247\u653e\u5230 `images/` \u4e0b,\u547d\u540d\u9075\u5b88 `{\u9875\u53f7}-{\u8bed\u4e49}.{ext}`\n\n### Step 2 \u00b7 \u62f7\u8d1d\u6a21\u677f\n\n**\u6839\u636e Step 1 \u9009\u5b9a\u7684\u98ce\u683c,\u62f7\u8d1d\u5bf9\u5e94\u7684\u6a21\u677f**\u5230\u76ee\u6807\u4f4d\u7f6e\uff08\u901a\u5e38\u662f `\u9879\u76ee/XXX/ppt/index.html`\uff09\uff0c\u540c\u65f6\u5728\u540c\u7ea7\u5efa\u4e00\u4e2a `images/` \u6587\u4ef6\u5939\u51c6\u5907\u63a5\u56fe\u7247\u3002\n\n```bash\nmkdir -p \"\u9879\u76ee/XXX/ppt/images\"\n\n# \u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce\ncp \"<SKILL_ROOT>/assets/template.html\" \"\u9879\u76ee/XXX/ppt/index.html\"\n\n# \u6216 \u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce\ncp \"<SKILL_ROOT>/assets/template-swiss.html\" \"\u9879\u76ee/XXX/ppt/index.html\"\n```\n\n\u4e24\u4e2a `template*.html` \u90fd\u662f**\u5b8c\u6574\u53ef\u8fd0\u884c**\u7684\u6587\u4ef6\u2014\u2014CSS\u3001WebGL shader\u3001\u7ffb\u9875 JS\u3001\u6f14\u8bb2\u8005\u6a21\u5f0f\u3001\u89c2\u4f17\u5c4f\u540c\u6b65\u3001\u5b57\u4f53/\u56fe\u6807 CDN \u5168\u5df2\u9884\u8bbe\u597d,\u53ea\u6709 `<!-- SLIDES_HERE -->` \u5360\u4f4d\u7b26\u548c `SPEAKER_NOTES` \u7b49\u5f85\u4f60\u586b\u5145\u3002\n\n**\u6ce8\u610f**:\u98ce\u683c A \u548c B **\u4e0d\u80fd\u6df7\u7528**\u3002layouts.md \u91cc\u7684\u7c7b\uff08\u5982 `.h-hero` \u886c\u7ebf\u5927\u6807\u9898\u3001`.display-zh` \u7b49\uff09\u53ea\u5728 template.html \u6709\u5b9a\u4e49\uff1blayouts-swiss.md \u91cc\u7684\u7c7b\uff08\u5982 `.kpi-hero`\u3001`.accent-block`\u3001`.span-N`\u3001`.dots` \u7b49\uff09\u53ea\u5728 template-swiss.html \u6709\u5b9a\u4e49\u3002\u4e00\u4efd deck \u53ea\u80fd\u9009\u4e00\u5957\u3002\n\n#### 2.1 \u00b7 \u5fc5\u6539\u5360\u4f4d\u7b26\uff08**\u5bb9\u6613\u6f0f**\uff09\n\n\u62f7\u8d1d\u540e\u7acb\u523b\u6539\u6389\u4ee5\u4e0b\u5360\u4f4d\u7b26\uff0c\u5426\u5219\u6d4f\u89c8\u5668 Tab \u4f1a\u663e\u793a\"[\u5fc5\u586b] \u66ff\u6362\u4e3a PPT \u6807\u9898\"\u8fd9\u79cd\u5c34\u5c2c\u6587\u5b57\uff1a\n\n| \u4f4d\u7f6e | \u539f\u59cb | \u9700\u6539\u4e3a |\n|------|------|--------|\n| `<title>` | `[\u5fc5\u586b] \u66ff\u6362\u4e3a PPT \u6807\u9898 \u00b7 Deck Title` | \u5b9e\u9645 deck \u6807\u9898(\u5982 `\u4e00\u79cd\u65b0\u7684\u5de5\u4f5c\u65b9\u5f0f \u00b7 Luke Wroblewski`) |\n\n\u6bcf\u6b21\u62f7\u8d1d\u5b8c template.html \u7b2c\u4e00\u4ef6\u4e8b:grep \u4e00\u4e0b\"[\u5fc5\u586b]\" \u786e\u8ba4\u5168\u90e8\u66ff\u6362\u5b8c\u3002\n\n#### 2.2 \u00b7 \u9009\u5b9a\u4e3b\u9898\u8272(5 \u5957\u9884\u8bbe \u00b7 \u4e0d\u5141\u8bb8\u81ea\u5b9a\u4e49)\n\n\u672c skill **\u53ea\u5141\u8bb8\u4ece 5 \u5957\u7cbe\u5fc3\u8c03\u914d\u7684\u9884\u8bbe\u91cc\u9009\u4e00\u5957**,\u4e0d\u63a5\u53d7\u7528\u6237\u81ea\u5b9a\u4e49 hex \u503c\u2014\u2014\u989c\u8272\u642d\u914d\u9519\u4e86\u753b\u9762\u77ac\u95f4\u53d8\u4e11,\u4fdd\u62a4\u7f8e\u5b66\u6bd4\u7ed9\u81ea\u7531\u66f4\u91cd\u8981\u3002\n\n| # | \u4e3b\u9898 | \u9002\u5408 |\n|---|------|------|\n| 1 | \ud83d\udd8b \u58a8\u6c34\u7ecf\u5178 | \u901a\u7528 / \u5546\u4e1a\u53d1\u5e03 / \u4e0d\u77e5\u9053\u9009\u5565\u7684\u9ed8\u8ba4 |\n| 2 | \ud83c\udf0a \u975b\u84dd\u74f7 | \u79d1\u6280 / \u7814\u7a76 / \u6570\u636e / \u6280\u672f\u53d1\u5e03\u4f1a |\n| 3 | \ud83c\udf3f \u68ee\u6797\u58a8 | \u81ea\u7136 / \u53ef\u6301\u7eed / \u6587\u5316 / \u975e\u865a\u6784 |\n| 4 | \ud83c\udf42 \u725b\u76ae\u7eb8 | \u6000\u65e7 / \u4eba\u6587 / \u6587\u5b66 / \u72ec\u7acb\u6742\u5fd7 |\n| 5 | \ud83c\udf19 \u6c99\u4e18 | \u827a\u672f / \u8bbe\u8ba1 / \u521b\u610f / \u753b\u5eca |\n\n**\u64cd\u4f5c**:\n1. \u57fa\u4e8e\u5185\u5bb9\u4e3b\u9898\u63a8\u8350\u4e00\u5957,\u6216\u76f4\u63a5\u95ee\u7528\u6237\u9009\u54ea\u4e00\u5957\n2. \u6253\u5f00 `references/themes.md`,\u627e\u5230\u5bf9\u5e94\u4e3b\u9898\u7684 `:root` \u5757\n3. **\u6574\u4f53\u66ff\u6362** `assets/template.html`(\u5df2\u62f7\u8d1d\u7248\u672c)\u5f00\u5934 `:root{` \u5757\u91cc\u6807\u6709\"\u4e3b\u9898\u8272\"\u6ce8\u91ca\u7684\u90a3\u51e0\u884c(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)\n4. \u5176\u4ed6 CSS \u90fd\u8d70 `var(--...)`,\u65e0\u9700\u4efb\u4f55\u5176\u4ed6\u6539\u52a8\n\n**\u786c\u89c4\u5219**:\n- \u4e00\u4efd deck \u53ea\u7528\u4e00\u5957\u4e3b\u9898,\u4e0d\u8981\u4e2d\u9014\u6362\u8272\n- \u4e0d\u8981\u63a5\u53d7\u7528\u6237\u7ed9\u7684\u4efb\u610f hex \u503c\u2014\u2014\u59d4\u5a49\u62d2\u7edd\u5e76\u5c55\u793a 5 \u5957\u8ba9\u9009\n- \u4e0d\u8981\u6df7\u642d(\u4f8b\u5982 ink \u53d6\u58a8\u6c34\u7ecf\u5178\u3001paper \u53d6\u6c99\u4e18)\u2014\u2014\u4f1a\u5f7b\u5e95\u8fdd\u548c\n\n### Step 3 \u00b7 \u586b\u5145\u5185\u5bb9\n\n#### 3.P \u00b7 \u540c\u6b65\u751f\u6210\u6f14\u8bb2\u5907\u6ce8\uff08\u6b63\u5f0f\u6f14\u8bb2\u5fc5\u505a\uff09\n\n\u5148\u8bfb `references/presenter-mode.md`\u3002\u6bcf\u4e2a `<section class=\"slide ...\">` \u5fc5\u987b\u5199\u552f\u4e00\u4e14\u7a33\u5b9a\u7684 `data-slide-id`,\u518d\u6309\u540c\u6837\u987a\u5e8f\u751f\u6210\u4e00\u6761 `SPEAKER_NOTES` \u8bb0\u5f55\u3002\u5907\u6ce8\u6309\u9875\u9762 ID \u5b58\u50a8,\u4e0d\u8981\u7528\u6570\u7ec4\u4e0b\u6807\u6216\u9875\u7801\u4f5c\u4e3a\u6301\u4e45\u5316\u952e,\u5426\u5219\u9875\u9762\u91cd\u6392\u540e\u7528\u6237\u5728\u6f14\u8bb2\u8005\u89c6\u56fe\u91cc\u6539\u8fc7\u7684\u5907\u6ce8\u4f1a\u4e32\u9875\u3002\n\n\u5185\u5bb9\u5206\u5de5:\n\n- slide \u53ea\u653e\u89c2\u4f17\u6b64\u523b\u5fc5\u987b\u770b\u89c1\u7684\u7ed3\u8bba\u3001\u7ed3\u6784\u548c\u8bc1\u636e\u3002\n- `purpose` \u8bf4\u660e\u8fd9\u4e00\u9875\u5728\u6574\u573a\u53d9\u4e8b\u4e2d\u7684\u4efb\u52a1\u3002\n- `talk` \u8865\u5145\u80cc\u666f\u3001\u4f8b\u5b50\u3001\u5224\u65ad\u4f9d\u636e\u548c\u8bed\u6c14,\u4e0d\u9010\u5b57\u590d\u8ff0 slide\u3002\n- `transition` \u89e3\u91ca\u4e3a\u4ec0\u4e48\u4e0b\u4e00\u9875\u7d27\u63a5\u7740\u51fa\u73b0\u3002\n- `section` \u53ea\u5728\u5927\u7eb2\u5df2\u7ed9\u51fa\u7ae0\u8282\u6216\u8fde\u7eed\u9875\u9762\u660e\u663e\u5c5e\u4e8e\u540c\u4e00\u7ae0\u8282\u65f6\u586b\u5199\u3002\n- `minutes` \u662f\u8bb2\u8ff0\u8ba1\u5212;`autoAdvanceSeconds` \u662f\u64ad\u653e\u884c\u4e3a,\u4e24\u8005\u5fc5\u987b\u5206\u5f00,\u4e14\u540e\u8005\u53ea\u5728\u7528\u6237\u660e\u786e\u8981\u6c42\u65f6\u586b\u5199\u3002\n- `cue / interaction / delivery / advance / fallback / pronunciation` \u53ea\u5199\u5927\u7eb2\u6216\u7528\u6237\u660e\u786e\u63d0\u4f9b\u7684\u821e\u53f0\u52a8\u4f5c\u3001\u4e92\u52a8\u3001\u8868\u8fbe\u3001\u7ffb\u9875\u3001\u5907\u7528\u548c\u8bfb\u97f3\u4fe1\u606f\u3002\n\n\u6ca1\u6709\u6765\u6e90\u652f\u6301\u7684\u4e8b\u5b9e\u4e0d\u80fd\u5199\u8fdb\u5907\u6ce8;\u5f71\u54cd\u5185\u5bb9\u6b63\u786e\u6027\u7684\u7f3a\u5931\u4fe1\u606f\u8981\u6807\u8bb0\u201c\u5f85\u8865\u5145\u201d\u6216\u8be2\u95ee\u7528\u6237,\u4e0d\u5f71\u54cd\u5185\u5bb9\u7684\u53ef\u9009\u6f14\u8bb2\u4fe1\u606f\u76f4\u63a5\u7701\u7565\u3002\n\n#### 3.0 \u00b7 \u9884\u68c0:\u7c7b\u540d\u5fc5\u987b\u5728\u6a21\u677f\u7684 `<style>` \u91cc\u6709\u5b9a\u4e49\uff08**\u6700\u91cd\u8981**\uff09\n\n**\u8fd9\u662f\u6240\u6709\u751f\u6210\u95ee\u9898\u7684\u6e90\u5934**\u3002layouts \u9aa8\u67b6\u4f7f\u7528\u4e86\u5f88\u591a\u7c7b\u540d,\u5982\u679c\u6a21\u677f\u7684 `<style>` \u91cc\u6ca1\u6709\u5bf9\u5e94\u5b9a\u4e49,\u6d4f\u89c8\u5668\u4f1a fallback \u5230\u9ed8\u8ba4\u6837\u5f0f\u2014\u2014\u5927\u6807\u9898\u5b57\u4f53\u9519\u3001\u5361\u7247\u6324\u6210\u4e00\u56e2\u3001pipeline \u7cca\u6210\u4e00\u884c\u3001\u56fe\u7247\u5806\u5230\u9875\u9762\u5e95\u90e8\u3002\n\n**\u4e24\u79cd\u98ce\u683c\u7c7b\u540d\u4e92\u4e0d\u901a\u7528**(\u518d\u6b21\u5f3a\u8c03):\n- \u98ce\u683c A \u6a21\u677f\u91cc\u6709 `h-hero`(\u886c\u7ebf)\u3001`stat-card`\u3001`grid-2-7-5`\u3001`frame` \u7b49\n- \u98ce\u683c B \u6a21\u677f\u91cc\u6709 `h-hero`(\u65e0\u886c\u7ebf)\u3001`kpi-hero`\u3001`accent-block`\u3001`span-N`\u3001`dots`\u3001`grid-12` \u7b49\n- \u540c\u540d class \u5728\u4e24\u4e2a\u6a21\u677f\u91cc**\u89c6\u89c9\u8868\u73b0\u5b8c\u5168\u4e0d\u540c**(\u4f8b:\u98ce\u683c A \u7684 `h-hero` \u662f Noto Serif SC \u886c\u7ebf,\u98ce\u683c B \u7684 `h-hero` \u662f Inter \u65e0\u886c\u7ebf)\n\n**\u5728\u5199\u4efb\u4f55 slide \u4ee3\u7801\u4e4b\u524d:**\n\n1. **\u5148 Read \u5f53\u524d\u7528\u7684\u6a21\u677f**(\u81f3\u5c11\u8bfb\u5230 `<style>` \u5757\u672b\u5c3e):\n   - \u98ce\u683c A \u2192 `assets/template.html`\n   - \u98ce\u683c B \u2192 `assets/template-swiss.html`\n2. **\u5bf9\u7167\u5bf9\u5e94 layouts \u6587\u4ef6\u7684 Pre-flight \u5217\u8868**,\u786e\u8ba4\u4f60\u8981\u7528\u7684\u6bcf\u4e2a\u7c7b\u90fd\u5728 `<style>` \u91cc\u5b58\u5728\n3. \u5982\u679c\u67d0\u4e2a\u7c7b\u7f3a\u5931:**\u5728\u6a21\u677f\u7684 `<style>` \u91cc\u8865\u4e0a**,\u4e0d\u8981\u5728\u6bcf\u4e2a slide \u91cc inline \u91cd\u5199\n4. **\u6a21\u677f\u662f\u552f\u4e00\u7684\u7c7b\u540d\u6765\u6e90**\u2014\u2014\u4e0d\u8981\u53d1\u660e\u65b0\u7c7b\u540d,\u5982\u9700\u81ea\u5b9a\u4e49\u7528 `style=\"...\"` inline\n\n**\u98ce\u683c A \u5e38\u89c1\u5bb9\u6613\u9057\u6f0f\u7684\u7c7b**:\n`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`\n\n**\u98ce\u683c B \u5e38\u89c1\u5bb9\u6613\u9057\u6f0f\u7684\u7c7b**(2026-05 \u91cd\u6784\u540e):\n- \u753b\u5e03:`canvas-card` / `chrome-min`\n- \u6392\u7248:`h-hero`(\u65e0\u886c\u7ebf 7.4vw weight 200) / `h-statement`(9.6vw) / `h-xl` / `h-md` / `t-cat`(SemiBold 600 \u5c0f\u6807) / `t-meta`(mono uppercase) / `lead` / `num-mega` / `mono`\n- \u5361\u7247(\u56db\u7c7b\u4e92\u65a5):`card-ink` / `card-accent` / `card-fill` / `card-outlined`\n- \u7f51\u683c:`grid-12` / `grid-2-9` / `grid-2-9-5` / `span-N`\n- \u65f6\u95f4\u7ebf:`timeline-v` + `tl-node` + `tl-axis` + `dot` / `timeline-h` + `tl-h-node` + `tl-h-axis`\n- \u56fe\u8868:`kpi-tower-row` + `bar-tower` / `h-bar-chart` + `bar-row` + `bar-fill` / `spec-bars` + `bar-vert`\n- \u88c5\u9970:`dot-mat`(SVG mask \u5b9e\u5fc3\u70b9)/ `ring-mat`(\u63cf\u8fb9\u5706)/ `cross-mat`(\u00d7 \u7f51\u683c)/ `hr-hairline`\n- \u7248\u5f0f\u4e13\u5c5e:`cover-split` / `closing-split` / `duo-compare` + `vrule` / `manifesto-top` + `ink-banner-full` / `three-forces` / `loop-diagram` / `matrix-fill` + `matrix-cell` / `brief-grid` + `brief-card` / `system-diagram` / `why-now-grid` / `four-cards` / `stacked-ledger` + `ledger-row` / `tech-spec` / `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- \u56fe\u7247\u6df7\u6392:`frame-img` / `fit-contain` / `r-21x9` / `r-16x9` / `r-16x10` / `h-22` / `h-26` / `swiss-img-split` / `swiss-img-grid` / `swiss-img-caption` / `swiss-keyline` / `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8/12/16/24/32/40/48/64/80/96/160 px)\n\n#### 3.0.5 \u00b7 \u89c4\u5212\u4e3b\u9898\u8282\u594f\uff08**\u548c\u7c7b\u9884\u68c0\u540c\u7b49\u91cd\u8981**)\n\n**\u5728\u6311\u5e03\u5c40\u4e4b\u524d**,\u5fc5\u987b\u5148\u5217\u51fa\u6bcf\u4e00\u9875\u7684\u4e3b\u9898 class(`hero dark` / `hero light` / `light` / `dark`)\u5e76\u5199\u5230\u6587\u6863\u6216\u8349\u7a3f\u91cc\u5bf9\u9f50\u3002\u8be6\u7ec6\u89c4\u5219\u770b `references/layouts.md` \u5f00\u5934\u7684\"\u4e3b\u9898\u8282\u594f\u89c4\u5212\"\u4e00\u8282\u3002\n\n**\u5f3a\u5236\u89c4\u5219**:\n\n- \u6bcf\u9875 section \u5fc5\u987b\u5e26 `light` / `dark` / `hero light` / `hero dark` \u4e4b\u4e00,\u4e0d\u8981\u53ea\u5199 `hero`\n- \u8fde\u7eed 3 \u9875\u4ee5\u4e0a\u540c\u4e3b\u9898 = \u89c6\u89c9\u75b2\u52b3,\u4e0d\u5141\u8bb8\n- 8 \u9875\u4ee5\u4e0a\u5fc5\u987b\u6709 \u22651 \u4e2a `hero dark` + \u22651 \u4e2a `hero light`\n- \u6574\u4e2a deck \u4e0d\u80fd\u53ea\u6709 `light` \u6b63\u6587\u9875,\u5fc5\u987b\u6709 `dark` \u6b63\u6587\u9875\u5236\u9020\u547c\u5438\n- \u6bcf 3-4 \u9875\u63d2\u5165 1 \u4e2a hero \u9875(\u5c01\u9762/\u5e55\u5c01/\u95ee\u9898/\u5927\u5f15\u7528)\n\n**\u751f\u6210\u540e\u81ea\u68c0**:`grep 'class=\"slide' index.html` \u5217\u51fa\u6240\u6709\u4e3b\u9898,\u4eba\u5de5\u786e\u8ba4\u8282\u594f\u5408\u7406\u518d\u4ea4\u4ed8\u3002\n\n#### 3.1 \u00b7 \u6311\u5e03\u5c40\n\n**\u4e0d\u8981\u4ece\u96f6\u5199 slide**\u3002\u6253\u5f00\u5bf9\u5e94\u7684 layouts \u6587\u4ef6,\u91cc\u9762\u6709 10 \u79cd\u73b0\u6210\u5e03\u5c40\u9aa8\u67b6,\u6bcf\u79cd\u90fd\u662f\u5b8c\u6574\u53ef\u7c98\u8d34\u7684 `<section>` \u4ee3\u7801\u5757\u3002\n\n**\u98ce\u683c A** \u2192 `references/layouts.md`:\n\n| Layout | \u7528\u9014 |\n|---|---|\n| 1. \u5f00\u573a\u5c01\u9762 | \u7b2c 1 \u9875 |\n| 2. \u7ae0\u8282\u5e55\u5c01 | \u6bcf\u5e55\u5f00\u573a |\n| 3. \u6570\u636e\u5927\u5b57\u62a5 | \u629b\u786c\u6570\u636e |\n| 4. \u5de6\u6587\u53f3\u56fe(Quote + Image) | \u8eab\u4efd\u53cd\u5dee / \u6545\u4e8b |\n| 5. \u56fe\u7247\u7f51\u683c | \u591a\u56fe\u5bf9\u6bd4 / \u622a\u56fe\u5b9e\u8bc1 |\n| 6. \u4e24\u5217\u6d41\u6c34\u7ebf(Pipeline) | \u5de5\u4f5c\u6d41\u7a0b |\n| 7. \u60ac\u5ff5\u6536\u675f / \u95ee\u9898\u9875 | \u5e55\u672b / \u6536\u5c3e |\n| 8. \u5927\u5f15\u7528\u9875(Big Quote) | \u886c\u7ebf\u91d1\u53e5 / takeaway |\n| 9. \u5e76\u5217\u5bf9\u6bd4(Before / After) | \u65e7\u6a21\u5f0f vs \u65b0\u6a21\u5f0f |\n| 10. \u56fe\u6587\u6df7\u6392(Lead Image + Side Text) | \u4fe1\u606f\u5bc6\u96c6\u7684\u56fe\u6587\u9875 |\n\n**\u98ce\u683c B** \u2192 \u5148\u8bfb `references/swiss-layout-lock.md`,\u518d\u8bfb `references/layouts-swiss.md`\u3002\n\n\u745e\u58eb\u4e3b\u9898\u9ed8\u8ba4\u8fdb\u5165 **Swiss locked mode**:\n\n- \u6b63\u6587\u9875\u53ea\u80fd\u4f7f\u7528\u539f\u59cb\u53c2\u8003 PPT \u767b\u8bb0\u7684 22 \u4e2a\u7248\u5f0f `S01-S22`;\u65b0\u589e\u9996\u9875/\u5c3e\u9875\u53ea\u80fd\u4f7f\u7528 Skill \u660e\u786e\u63d0\u4f9b\u7684 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`\u3002\n- \u6bcf\u4e2a `<section class=\"slide\">` \u5fc5\u987b\u5199 `data-layout=\"Sxx\"`\u3002\u6ca1\u6709 `data-layout` \u5c31\u89c6\u4e3a\u672a\u767b\u8bb0\u7248\u5f0f\u3002\n- \u4e0d\u5141\u8bb8\u4e34\u65f6\u53d1\u660e `P23/P24`\u3001`Swiss Image Split`\u3001`Evidence Grid` \u8fd9\u7c7b\u539f\u59cb 22P \u4e4b\u5916\u7684\u6b63\u6587\u7ed3\u6784,\u9664\u975e\u7528\u6237\u660e\u786e\u8981\u6c42\u5b9e\u9a8c\u7248\u5f0f\u3002\n- \u9876\u90e8\u4e2d\u6587\u6807\u9898\u9ed8\u8ba4\u5de6\u5bf9\u9f50\u3001\u5904\u5728\u5de6\u4e0a\u5185\u5bb9\u8f74\u3002\u4e0d\u8981\u628a\u5c0f\u6807\u9898\u653e\u5de6\u5217\u3001\u5927\u6807\u9898\u653e\u53f3\u5217,\u9020\u6210\u89c6\u89c9\u5c45\u4e2d;\u53ea\u6709\u539f\u59cb statement/split \u7248\u5f0f\u5141\u8bb8\u5f3a\u4e2d\u5fc3\u53d9\u4e8b\u3002\n- SVG \u53ea\u8d1f\u8d23\u51e0\u4f55\u56fe\u5f62\u3002\u4e0d\u8981\u5728 SVG \u91cc\u5199\u6587\u5b57\u6807\u7b7e,\u6240\u6709\u6807\u7b7e\u6539\u7528 HTML \u7f51\u683c/\u5361\u7247/caption\u3002\n- \u5730\u7406/\u5386\u53f2/\u57ce\u5e02\u8def\u7ebf/\u5730\u70b9\u5173\u7cfb\u9875\u4f7f\u7528 `S08 + Swiss Map Component`:\u5148\u8bfb `references/swiss-map-component.md`,\u4ecd\u4fdd\u7559 `data-layout=\"S08\"`\u3002\n\n\u539f\u59cb 22 \u4e2a\u6b63\u6587\u7248\u5f0f\u5982\u4e0b:\n\n| Layout | \u7528\u9014 |\n|---|---|\n| S01 Index Cover | \u539f\u59cb\u7d22\u5f15\u5c01\u9762 |\n| S02 Vertical Timeline + KPI | \u6f14\u5316\u5bf9\u6bd4 / \u5e74\u4ee3\u53d8\u8fc1 |\n| S03 Split Statement | \u6838\u5fc3\u8bba\u70b9 / \u5de6\u53f3\u5206\u5c4f |\n| S04 Six Cells | 6 \u9879\u6982\u5ff5\u5b9a\u4e49 |\n| S05 Three Layers | \u4e09\u5c42\u67b6\u6784 |\n| S06 KPI Tower | 4 \u9879\u6570\u636e\u89c6\u89c9\u5316\u9ad8\u5ea6\u5dee |\n| S07 H-Bar Chart | 5-10 \u9879\u6392\u540d\u6bd4\u8f83 |\n| S08 Duo Compare | Before/After \u5bf9\u7167 |\n| S09 Dot Matrix Statement | \u5927\u5f15\u8ff0 / statement |\n| S10 Split Closing | \u6536\u675f\u9875 |\n| S11 Horizontal Timeline | 4-7 \u6b65\u6d41\u7a0b |\n| S12 Manifesto + Ink Banner | \u9636\u6bb5\u6027\u7ed3\u8bba |\n| S13 Three Forces | 3 \u4e2a\u5bf9\u7b49\u6982\u5ff5\u6df1\u5316 |\n| S14 Loop Form | \u81ea\u5b66\u95ed\u73af / \u81ea\u52a8\u5316 |\n| S15 Matrix + Hero Stat | 8-12 \u9879\u77e9\u9635 + \u603b\u6570\u636e |\n| S16 Multi-card Brief | 6 \u9879\u5feb\u8baf\u5c0f\u5361 |\n| S17 System Diagram | \u4e09\u5c42\u67b6\u6784 / \u751f\u6001\u5730\u56fe |\n| S18 Why Now | \u4e09\u8bba\u70b9 + \u6570\u636e\u652f\u6491 |\n| S19 Four Cards | 4 \u9879\u7b49\u6743\u7279\u6027 |\n| S20 Stacked KPI Ledger | \u7eb5\u5411\u8d26\u5355\u6570\u636e |\n| S21 Tech Spec Sheet | \u4ea7\u54c1\u89c4\u683c / benchmark |\n| S22 Image Hero | 21:9 \u9876\u56fe + \u6807\u9898\u5757 + \u4e09\u5217 KPI |\n\n**\u767b\u8bb0\u6269\u5c55**:`S08 + Swiss Map Component` \u7528\u4e8e\u5730\u70b9\u3001\u4eba\u7269\u4f4f\u6240\u3001\u8def\u7ebf\u3001\u57ce\u5e02\u5173\u7cfb\u3002\u5b83\u4e0d\u662f\u65b0 layout,\u800c\u662f S08 \u53f3\u4fa7\u63d2\u69fd\u7684 MapLibre \u5730\u56fe\u7ec4\u4ef6;\u5fc5\u987b\u6309 `references/swiss-map-component.md` \u7684\u70b9\u4f4d\u3001\u8fde\u7ebf\u3001\u5361\u7247\u548c\u53f3\u4e0a\u89d2\u7f29\u653e/\u62d6\u52a8\u63a7\u5236\u5b9e\u73b0\u3002\n\n\u9009\u5bf9\u5e94 layout,\u7c98\u8fc7\u53bb,\u6539\u6587\u6848\u548c\u56fe\u7247\u8def\u5f84\u5373\u53ef\u3002**\u52a1\u5fc5\u5148\u5b8c\u6210 3.0 \u9884\u68c0**\u3002\n\n**\u98ce\u683c B \u7248\u5f0f\u591a\u6837\u6027\u786c\u89c4\u5219**:\n- 7-8 \u9875 deck \u81f3\u5c11\u4f7f\u7528 **6 \u4e2a\u4e0d\u540c S \u7f16\u53f7\u7248\u5f0f**;10 \u9875\u4ee5\u4e0a\u81f3\u5c11\u4f7f\u7528 8 \u4e2a\u4e0d\u540c\u7248\u5f0f\u3002\n- \u5982\u679c\u7528\u6237\u8bf4\"\u6d4b\u8bd5\u6a21\u677f / \u770b\u770b\u6548\u679c / \u591a\u4e00\u70b9\u7248\u5f0f\",\u5fc5\u987b\u8986\u76d6:\u4e00\u4e2a\u5c01\u9762\u3001\u4e00\u4e2a\u6536\u5c3e\u3001\u81f3\u5c11 1 \u4e2a\u5bf9\u6bd4\u6216\u65f6\u95f4\u7ebf(S08/S11/S02)\u3001\u81f3\u5c11 1 \u4e2a\u7ed3\u6784\u56fe(S14/S17/S15)\u3001\u81f3\u5c11 1 \u4e2a\u56fe\u7247\u7248\u5f0f(S22 \u6216 S15/S16 \u56fe\u7247\u683c\u6539\u9020)\u3002\n- \u4e0d\u5141\u8bb8\u8fde\u7eed 3 \u9875\u4f7f\u7528\u540c\u4e00\u79cd\u4e3b\u4f53\u7ed3\u6784,\u4f8b\u5982\u8fde\u7eed\u4e09\u9875 `head + grid + card`\u3002\n- \u56fe\u7247\u9875\u4e0d\u80fd\u5077\u61d2\u53d1\u660e\u65b0\u7ed3\u6784\u30022-3 \u5f20\u56fe\u65f6,\u7528 S15/S16 \u7684\u539f\u59cb\u7f51\u683c\u9aa8\u67b6\u6539\u9020\u6210\u56fe\u7247\u683c;\u5355\u5f20\u5927\u56fe\u7528 S22\u3002\n- \u5f00\u5199 HTML \u524d\u5148\u5217\u4e00\u5f20 `\u9875\u7801 \u2192 data-layout \u2192 \u9009\u7528\u7406\u7531 \u2192 \u56fe\u7247\u69fd\u4f4d` \u8349\u7a3f;\u4ea4\u4ed8\u524d\u8fd0\u884c `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`\u3002\u6821\u9a8c\u5668\u4f1a\u5148\u505a\u9759\u6001\u7ed3\u6784\u68c0\u67e5;\u5982\u679c\u73af\u5883\u4e2d\u80fd\u89e3\u6790\u5230 Playwright,\u8fd8\u4f1a\u505a\u771f\u5b9e\u6e32\u67d3\u540e\u7684\u53ef\u89c1\u8fb9\u754c\u3001\u5e95\u90e8\u7a7a\u767d\u3001nav \u5b89\u5168\u7ebf\u548c\u6807\u9898\u95f4\u8ddd\u6d4b\u91cf\u3002\n\n#### 3.2 \u00b7 \u56fe\u7247\u6bd4\u4f8b\u89c4\u8303\n\n\u6c38\u8fdc\u7528**\u6807\u51c6\u6bd4\u4f8b**,\u4e0d\u8981\u7528\u539f\u56fe\u5947\u8469\u6bd4\u4f8b(\u5982 `2592/1798`):\n\n| \u573a\u666f | \u63a8\u8350\u6bd4\u4f8b |\n|------|---------|\n| S22 \u9876\u90e8\u4e3b\u56fe | **21:9**;\u7167\u7247\u5173\u952e\u4e3b\u4f53\u653e\u4e2d\u592e\u5b89\u5168\u533a |\n| S15/S16 \u591a\u56fe\u683c | \u7edf\u4e00 21:9 \u6216\u7edf\u4e00 16:10,\u4e0d\u80fd\u6df7\u7528 |\n| \u5de6\u6587\u53f3\u56fe \u4e3b\u56fe(\u98ce\u683c A) | 16:10 \u6216 4:3 + `max-height:56vh` |\n| \u56fe\u7247\u7f51\u683c(\u98ce\u683c A) | **\u56fa\u5b9a `height:26vh`**,\u4e0d\u7528 aspect-ratio |\n| \u5de6\u5c0f\u56fe + \u53f3\u6587\u5b57 | 1:1 \u6216 3:2 |\n| \u5168\u5c4f\u4e3b\u89c6\u89c9 | 16:9 + `max-height:64vh` |\n| \u56fe\u6587\u6df7\u6392\u5c0f\u63d2\u56fe | 3:2 \u6216 3:4 |\n\n**\u9ed8\u8ba4\u4e0d\u8981\u8ba9\u56fe\u7247 `align-self:end`**\u2014\u2014\u4f1a\u6ed1\u5230\u9875\u9762\u5e95\u90e8,\u5f88\u5bb9\u6613\u78b0\u5230\u5206\u9875\u7ec4\u4ef6\u3002\u7528 grid \u5bb9\u5668 + `align-items:start`(template \u5df2\u9884\u8bbe)\u8ba9\u56fe\u7247\u8d34\u9876\u5373\u53ef;\u5982\u679c\u786e\u5b9e\u9700\u8981\u56fe\u6587\u5e95\u5bf9\u9f50,\u5fc5\u987b\u5148\u63a7\u5236\u56fe\u7247\u9ad8\u5ea6,\u518d\u4f7f\u7528\u6a21\u677f\u5df2\u6709\u5b89\u5168\u533a\u7c7b `.nav-safe-bottom` / `.nav-safe-bottom-tight`,\u4e0d\u8981\u8ba9\u6700\u4f4e\u5904\u78b0\u5230\u5206\u9875\u7ec4\u4ef6\u3002\n\n**\u98ce\u683c B \u745e\u58eb\u98ce\u989d\u5916\u89c4\u5219**:\n- \u5355\u5f20\u5927\u56fe\u7528 S22;\u591a\u56fe\u6d4b\u8bd5\u7528 S15/S16 \u7684\u539f\u59cb\u5361\u7247\u7f51\u683c\u6539\u9020,\u4e0d\u8981\u7528\u672a\u767b\u8bb0\u7684 P23/P24\n- \u751f\u6210\u56fe\u7247\u524d\u5148\u5199 `data-image-slot`:\u4f8b\u5982 `s22-hero-21x9` / `s15-grid-21x9` / `s16-brief-21x9`\n- S22 \u914d\u56fe\u9ed8\u8ba4\u751f\u6210 21:9,\u63d0\u793a\u8bcd\u5fc5\u987b\u5305\u542b `subject centered in the safe middle area`;\u7167\u7247\u5bb9\u5668\u7528 `object-position:center 35%`,\u4e0d\u8981\u7528 `top center`\n- \u56fe\u7247\u5bb9\u5668\u5fc5\u987b\u76f4\u89d2\u3001\u65e0\u9634\u5f71\u3001\u65e0\u5706\u89d2;\u9ed8\u8ba4\u80cc\u666f\u7528\u767d\u8272 `var(--paper)`,\u4e0d\u8981\u7528\u7070\u5e95\u5305\u767d\u5e95\u4fe1\u606f\u56fe\n- \u767d\u5e95 GPT \u4fe1\u606f\u56fe/\u6d41\u7a0b\u56fe/UI \u56fe\u9ed8\u8ba4\u4e0d\u8981\u52a0\u5916\u6846\u63cf\u8fb9,\u4e0d\u8981\u968f\u624b\u5957 `.swiss-keyline`;\u9700\u8981\u5f3a\u8c03\u65f6\u53ea\u7528 `.swiss-lined` \u7684\u9876\u90e8 accent \u7ebf\n- UI/\u4fe1\u606f\u56fe\u5982\u679c\u662f\u7528\u6237\u539f\u59cb\u622a\u56fe\u6216\u6587\u5b57\u5bc6\u96c6\u56fe,\u624d\u7528 `.fit-contain`;\u5982\u679c\u5df2\u6309 S15/S16 \u69fd\u4f4d\u91cd\u751f\u6210,\u5fc5\u987b\u7528 `.frame-img.r-21x9` / `.frame-img.r-16x10` \u94fa\u6ee1\u5bb9\u5668,\u4e0d\u8981\u56fa\u5b9a `height:18vh` \u540e\u628a\u56fe\u7f29\u5c0f\n- \u591a\u56fe\u540c\u7ec4\u5fc5\u987b\u7edf\u4e00\u56fe\u7247\u69fd\u4f4d\u3001\u6bd4\u4f8b\u548c\u9ad8\u5ea6,\u4e0d\u80fd\u6df7\u7528\n- GPT-M 2.0 \u751f\u6210\u56fe\u4f7f\u7528 `image-prompts.md` \u7684\"\u98ce\u683c B:\u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u914d\u56fe\u89c4\u5219\"\n- \u4efb\u4f55\u56fe\u7247\u3001caption\u3001timeline label\u3001footnote \u7684\u6700\u4f4e\u5904\u90fd\u4e0d\u80fd\u8fdb\u5165\u5e95\u90e8\u5206\u9875\u533a\u57df;\u9700\u8981\u8d34\u5e95\u65f6\u7528 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,\u4e0d\u8981\u624b\u5199 `bottom:2vh`\n\n#### 3.2.0 \u00b7 \u56fe\u6587\u6df7\u6392\u51b3\u7b56\u6811\uff08\u4ece\u793e\u4ea4\u5361\u7247\u89c4\u5219\u8fc1\u79fb\uff09\n\n\u5148\u5224\u65ad\u56fe\u7247\u5728\u8fd9\u4e00\u9875\u91cc\u7684\u89d2\u8272,\u518d\u51b3\u5b9a\u5bb9\u5668\u3001\u6bd4\u4f8b\u548c\u88c1\u5207\u65b9\u5f0f:\n\n- **\u8bc1\u636e\u622a\u56fe / UI / \u4ee3\u7801 / dashboard**:\u4fdd\u771f\u4f18\u5148,\u5148\u8bfb `references/screenshot-framing.md`;\u5173\u952e\u6587\u5b57\u548c\u6570\u636e\u4e0d\u80fd\u88ab\u88c1\u6389\u3002\u9700\u8981\u7edf\u4e00\u6bd4\u4f8b\u65f6,\u4f18\u5148\u7a0b\u5e8f\u5316\u80cc\u666f\u753b\u5e03 + `.fit-contain`,\u4e0d\u8981\u4e3a\u4e86\u94fa\u6ee1\u800c\u88c1\u6389 UI \u5185\u5bb9\u3002\n- **\u5df2\u6309\u69fd\u4f4d\u91cd\u751f\u6210\u7684\u4fe1\u606f\u56fe / \u63d2\u56fe**:\u6309\u76ee\u6807\u69fd\u4f4d\u94fa\u6ee1,\u4f8b\u5982 S22 \u7528 `21:9`,S15/S16 \u7528\u7edf\u4e00 `21:9` \u6216 `16:10`;\u4e0d\u8981\u518d\u7528\u77ed\u9ad8\u5ea6\u628a\u56fe\u7f29\u5c0f\u6210\u5c0f\u8d34\u7247\u3002\n- **\u7167\u7247 / \u4ea7\u54c1\u56fe / \u4eba\u7269\u56fe**:\u4f7f\u7528\u6807\u51c6\u6bd4\u4f8b + \u660e\u786e `object-position`;\u4e3b\u4f53\u3001\u4eba\u8138\u3001\u4ea7\u54c1\u548c\u5173\u952e\u8bc1\u636e\u4e0d\u80fd\u88ab\u6807\u9898\u3001caption \u6216\u88c1\u5207\u538b\u4f4f\u3002\n- **\u6587\u5b57\u538b\u56fe / \u5168\u5c4f\u4e3b\u89c6\u89c9**:\u5148\u505a quiet-zone \u5224\u65ad,\u56fe\u91cc\u81f3\u5c11\u8981\u6709\u7ea6 30% \u4f4e\u7ec6\u8282\u533a\u57df\u627f\u8f7d\u6587\u5b57;\u4e0d\u901a\u8fc7\u5c31\u6362\u56fe\u3001\u6362\u88c1\u5207\u6216\u6539\u6210\u56fe\u6587\u5206\u680f\u3002\u53ea\u5728\u5fc5\u8981\u65f6\u52a0\u5c40\u90e8 tint,\u4e0d\u8981\u6574\u9875\u5957\u9ed1\u8272/\u767d\u8272\u906e\u7f69\u3002\n- **\u591a\u56fe\u7ec4**:\u540c\u4e00\u7ec4\u7edf\u4e00\u6bd4\u4f8b\u3001\u9ad8\u5ea6\u3001\u5bb9\u5668\u5904\u7406\u548c caption \u5bc6\u5ea6;\u4e0d\u8981\u4e00\u5f20 `contain`,\u53e6\u4e00\u5f20 `cover`\u3002\n- **\u751f\u6210\u56fe\u662f\u7d20\u6750,\u4e0d\u662f\u6574\u9875 slide**:\u56fe\u7247\u5185\u90e8\u4e0d\u8981\u81ea\u5e26\u9875\u7709\u3001\u9875\u811a\u3001\u9875\u7801\u3001logo\u3001\u4e3b\u6807\u9898\u3001\u88c5\u9970\u8fb9\u6846\u6216\u7f72\u540d,\u907f\u514d\u548c deck chrome \u91cd\u590d\u3002\n- **\u56fe\u6587\u547c\u5438**:\u6807\u9898\u3001\u56fe\u7247\u3001caption\u3001\u6b63\u6587\u5fc5\u987b\u5404\u81ea\u7559\u51fa\u95f4\u8ddd;\u751f\u6210\u540e\u7528 validator \u7684 `M1/M2` \u68c0\u67e5\u53ef\u89c1\u8fb9\u754c\u3001\u5e95\u90e8\u7a7a\u767d\u3001nav \u5b89\u5168\u7ebf\u548c\u6807\u9898\u95f4\u8ddd\u3002\n\n#### 3.2.1 \u00b7 \u4e2d\u6587\u5927\u6807\u9898\u5b57\u53f7\u5206\u6863(\u98ce\u683c B \u5fc5\u505a)\n\n\u4e2d\u6587\u65b9\u5757\u5b57\u89c6\u89c9\u9762\u79ef\u5927,\u4e0d\u80fd\u76f4\u63a5\u5957\u82f1\u6587 hero \u7684 6.8-7vw\u3002\u5199\u4e2d\u6587\u5927\u6807\u9898\u524d\u5148\u5206\u6863:\n\n| \u6807\u9898\u5f62\u6001 | \u63a8\u8350\u5b57\u53f7 |\n|---|---|\n| 1 \u884c,\u2264 8 \u4e2a\u4e2d\u6587\u5b57\u7b26 | `min(6.4vw,11.2vh)` |\n| 2 \u884c,\u6bcf\u884c\u2264 8 \u4e2a\u4e2d\u6587\u5b57\u7b26 | `min(5.8vw,10.2vh)` |\n| 2 \u884c,\u4efb\u4e00\u884c 9-12 \u4e2a\u4e2d\u6587\u5b57\u7b26 | `min(5.2vw,9.2vh)` |\n| 3 \u884c\u6216\u66f4\u957f | \u4f18\u5148\u6539\u5199\u6807\u9898;\u4e0d\u5f97\u5df2\u7528 `min(4.6vw,8.2vh)` |\n\n\u5982\u679c\u6807\u9898\u6324\u5360\u4e86\u56fe\u7247\u6216\u6b63\u6587\u533a\u57df,\u5148\u538b\u7f29\u6807\u9898\u6587\u6848,\u518d\u964d\u5b57\u53f7;\u4e0d\u8981\u9760\u628a\u4e0b\u65b9\u5185\u5bb9\u63a8\u5230\u5e95\u6765\u786c\u585e\u3002\n\n#### 3.2.2 \u00b7 \u745e\u58eb\u98ce\u6f14\u793a\u6700\u5c0f\u5b57\u53f7\u4e0e\u5b57\u91cd\u9636\u68af(\u98ce\u683c B \u5fc5\u505a)\n\n\u745e\u58eb\u98ce\u7528\u4e8e\u6295\u5c4f\u6f14\u793a\u65f6,\u5c0f\u5b57\u4e0d\u80fd\u6309\u7f51\u9875\u6ce8\u91ca\u7684 10-12px \u5199\u3002\u9ed8\u8ba4\u9075\u5b88\u4ee5\u4e0b\u4e0b\u9650:\n\n| \u6587\u672c\u7c7b\u578b | \u6700\u5c0f\u5b57\u53f7 |\n|---|---|\n| \u6b63\u6587\u6bb5\u843d / \u4e3b\u8981\u8bf4\u660e | `18px` |\n| \u5361\u7247\u63cf\u8ff0 / \u5217\u8868 / \u65f6\u95f4\u7ebf\u8bf4\u660e / caption / \u56fe\u6ce8 | `16px` |\n| meta / kicker / mono label / \u56fe\u8868\u6807\u7b7e | `14px` |\n\n\u5982\u679c\u5185\u5bb9\u653e\u4e0d\u4e0b,\u5148\u5220\u51cf\u6587\u6848\u3001\u62c6\u6210\u4e24\u9875\u3001\u6362\u66f4\u9002\u5408\u7684 Sxx \u7248\u5f0f,\u4e0d\u8981\u628a\u5b57\u53f7\u538b\u5230 10/11/12/13px\u3002\u5c24\u5176\u662f\u4e2d\u6587 deck,\u4e0d\u8981\u4e3a\u4e86\u585e\u4e09\u884c\u89e3\u91ca\u628a `body-sm`\u3001caption\u3001timeline label \u6539\u5c0f\u3002\n\n**\u5b57\u53f7\u4e0e\u5b57\u91cd\u9636\u68af(\u745e\u58eb\u98ce\u6838\u5fc3)** \u2014 \"\u8d8a\u5927\u8d8a\u7ec6,\u8d8a\u5c0f\u8d8a\u7c97\"\u4e0d\u662f\u611f\u6027\u63cf\u8ff0,\u800c\u662f\u5177\u4f53\u6620\u5c04:\n\n| \u5b57\u53f7\u533a\u95f4 | \u63a8\u8350\u5b57\u91cd | \u5178\u578b\u573a\u666f |\n|---|---|---|\n| \u2265 8vw | 200 (ExtraLight) | \u5c01\u9762\u5927\u5b57\u3001\u5de8\u53f7 KPI\u3001h-statement |\n| 4-7.9vw | 200-300 | \u7ae0\u8282\u6807\u9898(h-xl/h-xl-zh)\u3001\u5927\u7f16\u53f7 |\n| 1.8-3.9vw | 300-400 | \u4e2d\u578b\u6807\u9898\u3001takeaway \u6807\u9898(\u22481.8vw)\u3001\u4e2d\u53f7\u6570\u5b57 |\n| 1-1.7vw / 16-20px | 400-500 | \u6b63\u6587\u6bb5\u843d\u3001\u5361\u7247\u63cf\u8ff0\u3001\u8bf4\u660e\u6587\u5b57 |\n| 13-15px(\u5c0f\u5b57) | 500-600 | meta\u3001kicker\u3001\u89d2\u6807\u3001\u56fe\u8868\u6807\u7b7e\u3001caption \u5f3a\u8c03 |\n\n**\u786c\u89c4\u5219:**\n- \u540c\u4e00\u9875\u5185,\u5b57\u53f7\u8d8a\u5c0f\u7684\u5143\u7d20\u5b57\u91cd\u5fc5\u987b \u2265 \u5b57\u53f7\u8d8a\u5927\u7684\u5143\u7d20(\u4e0d\u5141\u8bb8 16px \u6b63\u6587\u7528 300 \u800c 1.8vw \u6807\u9898\u7528 500)\n- 16px \u5de6\u53f3\u7684\u5c0f\u5b57\u62d2\u7edd\u4f7f\u7528 weight 300(\u592a\u7ec6\u4e0d\u53ef\u8bfb),\u6700\u4f4e 400,\u63a8\u8350 500\n- \u5c01\u9762/IkB \u53cd\u767d\u5927\u6807\u9898\u5185\u5f3a\u8c03\u5b57\u7528 `italic + weight 300`,\u4e0d\u8981\u7528 accent \u8272(\u84dd\u538b\u84dd\u770b\u4e0d\u89c1)\n\n\u7ec4\u4ef6\u7ec6\u8282(\u5b57\u4f53\u3001\u989c\u8272\u3001\u7f51\u683c\u3001\u56fe\u6807\u3001callout\u3001stat-card \u7b49)\u5728 `references/components.md`\u3002\n\n### Step 4 \u00b7 \u5bf9\u7167\u68c0\u67e5\u6e05\u5355\u81ea\u68c0\n\n\u751f\u6210\u5b8c\u4e00\u5b9a\u8981\u6253\u5f00 `references/checklist.md`\uff0c\u9010\u9879\u5bf9\u7167\u3002\u91cc\u9762\u603b\u7ed3\u4e86**\u771f\u5b9e\u8fed\u4ee3\u8fc7\u7a0b\u4e2d\u8e29\u8fc7\u7684\u6240\u6709\u5751**\uff0cP0 \u7ea7\u522b\u7684\u95ee\u9898\uff08emoji\u3001\u56fe\u7247\u6491\u7834\u3001\u6807\u9898\u6362\u884c\u3001\u5b57\u4f53\u5206\u5de5\uff09\u5fc5\u987b\u5168\u90e8\u901a\u8fc7\u3002\n\n\u6240\u6709\u6b63\u5f0f\u6f14\u8bb2 deck \u5148\u8dd1\u6f14\u8bb2\u8005\u6a21\u5f0f\u6821\u9a8c;\u5982\u679c\u7528\u6237\u7ed9\u4e86\u76ee\u6807\u65f6\u957f,\u540c\u65f6\u4f20\u5165\u5206\u949f\u6570:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30\nnode <SKILL_ROOT>/scripts/check-presenter-runtime-sync.mjs\n```\n\n\u7b2c\u4e00\u4e2a\u811a\u672c\u4f1a\u62e6\u622a\u7f3a\u5931/\u91cd\u590d\u9875\u9762 ID\u3001\u5907\u6ce8\u4e0e\u9875\u9762\u9519\u4f4d\u3001\u5fc5\u586b\u5b57\u6bb5\u6216\u53ef\u9009\u5b57\u6bb5\u7c7b\u578b\u9519\u8bef\u3001\u5b8c\u6574\u65f6\u95f4\u8ba1\u5212\u8d85\u51fa 90% \u9884\u7b97,\u4ee5\u53ca\u8ba1\u65f6\u3001\u6392\u7ec3\u3001\u81ea\u52a8\u7ffb\u9875\u3001\u6807\u6ce8\u3001\u6f14\u524d\u68c0\u67e5\u548c\u89c2\u4f17\u5c4f\u6062\u590d\u63a7\u4ef6\u7f3a\u5931\u3002\u7b2c\u4e8c\u4e2a\u811a\u672c\u4f1a\u62e6\u622a\u4e24\u5957\u6a21\u677f\u4e4b\u95f4\u7684\u6f14\u8bb2\u8005 CSS / JS \u6f02\u79fb\u3002\n\n#### 4.0.1 \u00b7 \u5148\u91cf\u540e\u6539:\u8d85\u51fa / \u7a7a\u767d / \u6807\u9898\u95f4\u8ddd\n\n\u5f53\u4e00\u9875\u5185\u5bb9\u8d85\u51fa\u6216\u663e\u5f97\u5de8\u7a7a\u65f6,\u4e0d\u8981\u5148\u51ed\u611f\u89c9\u5927\u5e45\u5220\u6539\u3002\u5148\u8fd0\u884c:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html\n```\n\n\u770b\u6821\u9a8c\u8f93\u51fa\u91cc\u7684\u6d4b\u91cf\u9879:\n\n- `M1 DOM/visual overflow`:\u5177\u4f53\u8d85\u51fa\u591a\u5c11 px,\u4ee5\u53ca\u6700\u4f4e/\u6700\u9ad8\u95ee\u9898\u5143\u7d20\n- `M1 bottom whitespace`:\u5e95\u90e8\u7a7a\u767d\u591a\u5c11 px,active content height \u5360\u6bd4\u591a\u5c11\n- `M1 nav-safe`:\u6700\u4f4e\u5185\u5bb9\u662f\u5426\u8fdb\u5165\u5e95\u90e8\u5206\u9875\u5b89\u5168\u7ebf\n- `M2 title gap`:\u6807\u9898\u548c\u4e0b\u4e00\u5757\u5185\u5bb9\u4e4b\u95f4\u7684\u5b9e\u9645\u8ddd\u79bb\n\n\u4fee\u6b63\u9636\u68af:\n\n- `1-40px` over:\u53ea\u5fae\u8c03,\u4e0a\u79fb\u5185\u5bb9\u7ec4\u6216\u6536\u7d27\u4e00\u4e2a gap/padding,\u4e0d\u8981\u5220\u5185\u5bb9\u3002\n- `40-90px` over:\u5c40\u90e8\u538b\u7f29\u95f4\u8ddd\u6216\u6a21\u5757\u9ad8\u5ea6,\u4ecd\u4f18\u5148\u4fdd\u7559\u5185\u5bb9\u3002\n- `90-160px` over:\u8f7b\u5fae\u538b\u6807\u9898\u6216\u538b\u7f29\u4e00\u6bb5\u6b63\u6587,\u5fc5\u8981\u65f6\u62c6\u9875\u3002\n- `160px+` over:\u624d\u8003\u8651\u6362\u7248\u5f0f\u3001\u5408\u5e76\u6a21\u5757\u6216\u5220\u5185\u5bb9\u3002\n\n\u4fee\u5b8c\u518d\u8dd1\u4e00\u6b21 validator\u3002\u5982\u679c `M1 bottom whitespace` \u53d8\u5927,\u8bf4\u660e\u4fee\u8fc7\u5934\u4e86;\u6062\u590d\u90e8\u5206\u95f4\u8ddd\u3001\u653e\u5927\u6700\u540e\u4e00\u5757\u6216\u628a\u5185\u5bb9\u7ec4\u5411\u4e0b\u56de\u8c03\u3002\n\n#### 4.0 \u00b7 \u4e0d\u53ea\u770b\u4ee3\u7801:\u5fc5\u987b\u6253\u5f00\u7f51\u9875\u505a\u89c6\u89c9\u6838\u5bf9\n\n\u4ee3\u7801\u53ea\u80fd\u8bc1\u660e\u7c7b\u540d\u548c\u7ed3\u6784\u5b58\u5728,\u4e0d\u80fd\u8bc1\u660e\u7248\u5f0f\u8212\u670d\u3002\u751f\u6210\u540e\u5fc5\u987b\u6253\u5f00\u7f51\u9875\u9010\u9875\u770b:\n\n1. \u540c\u65f6\u6253\u5f00\u5f53\u524d\u6a21\u677f(golden source \u5feb\u7167)\u6216\u751f\u6210\u9875\u3001\u4ee5\u53ca\u6b63\u5728\u8fed\u4ee3\u7684\u6d4b\u8bd5 PPT \u9010\u9875\u5bf9\u7167\u3002\n2. \u622a\u56fe\u524d\u7b49\u5165\u573a\u52a8\u6548\u7a33\u5b9a(\u7ea6 1-2 \u79d2),\u4e0d\u8981\u628a\u52a8\u753b\u4e2d\u95f4\u6001\u5f53\u6210\u7248\u5f0f\u95ee\u9898\u3002\n3. \u5148\u770b\u89c6\u89c9:\u5927\u6807\u9898\u5b57\u91cd\u3001\u6807\u9898\u4e0e\u5185\u5bb9\u95f4\u8ddd\u3001\u56fe\u7247\u662f\u5426\u4e0e\u6b63\u6587\u5bf9\u9f50\u3001\u56fe\u7247/\u8bf4\u660e\u662f\u5426\u78b0\u5230\u5e95\u90e8\u5206\u9875\u7ec4\u4ef6\u3002\n4. \u518d\u770b\u4ee3\u7801:\u786e\u8ba4\u8be5\u9875\u9009\u7528\u7684\u7248\u5f0f\u4e0e\u5185\u5bb9\u5f62\u72b6\u5339\u914d,\u6ca1\u6709\u628a\u6570\u636e\u4e13\u7528\u7248\u5f0f\u62ff\u6765\u8bb2\u6982\u5ff5,\u4e5f\u6ca1\u6709\u628a\u53ef\u9009\u7ec4\u4ef6\u5806\u6210\u88c5\u9970\u3002\n5. \u5bf9\u7167\u539f\u59cb\u53c2\u8003\u6a21\u677f\u65f6,\u4ee5\u5b9e\u9645\u9875\u9762\u7528\u6cd5\u4e3a\u51c6,\u4e0d\u8981\u53ea\u770b CSS helper \u5b9a\u4e49;\u539f\u59cb\u9875\u9762\u7684\u5927\u5b57\u5b9e\u9645\u591a\u4e3a 200/300,\u4e0d\u8981\u88ab raw CSS \u91cc\u7684 700/800/900 \u5e26\u504f\u3002\n6. \u5982\u679c\u9875\u9762\u522b\u626d,\u5148\u5224\u65ad\u662f\u7248\u5f0f\u9009\u9519\u3001\u5fc5\u9009\u7ec4\u4ef6\u7f3a\u5931\u3001\u53ef\u9009\u7ec4\u4ef6\u6ee5\u7528,\u8fd8\u662f\u95f4\u8ddd/\u5b89\u5168\u533a\u95ee\u9898;\u4e0d\u8981\u76f4\u63a5\u9760\u52a0 margin \u786c\u6551\u3002\n\n#### \u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce\u5fc5\u67e5\n\n1. **\u5927\u6807\u9898\u5fc5\u987b\u662f\u886c\u7ebf\u5b57\u4f53**\u2014\u2014\u5982\u679c\u663e\u793a\u6210\u975e\u886c\u7ebf,99% \u662f Step 3.0 \u9884\u68c0\u6ca1\u505a,`h-hero` \u7c7b\u5728 template.html \u91cc\u7f3a\u5931\n2. **\u56fe\u7247\u7f51\u683c\u91cc\u53ea\u7528 `height:Nvh`,\u4e0d\u7528 `aspect-ratio`**(\u4f1a\u6491\u7834)\n3. **\u56fe\u7247\u4e0d\u80fd\u5806\u5230\u9875\u9762\u5e95\u90e8**\u2014\u2014\u4e0d\u8981\u7528 `align-self:end`,\u7528 grid + `align-items:start`(\u89c1 Step 3.2)\n4. **\u56fe\u7247\u53ea\u80fd\u7528\u6807\u51c6\u6bd4\u4f8b**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),\u4e0d\u8981\u590d\u5236\u539f\u56fe\u7684\u5947\u8469\u6bd4\u4f8b\n5. **\u4e2d\u6587\u5927\u6807\u9898 \u2264 5 \u5b57\u4e14 `nowrap`**(\u907f\u514d 1 \u5b57 1 \u884c)\n6. **\u7528 Lucide,\u4e0d\u7528 emoji**\n7. **\u6807\u9898\u7528\u886c\u7ebf,\u6b63\u6587\u7528\u975e\u886c\u7ebf,\u5143\u6570\u636e\u7528\u7b49\u5bbd**\n\n#### \u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u5fc5\u67e5\n\n1. **\u5168\u7a0b\u65e0\u886c\u7ebf**\u2014\u2014\u4efb\u4f55\u886c\u7ebf\u5b57\u4f53\u51fa\u73b0\u90fd\u662f\u9519\u7684(\u68c0\u67e5 `font-family` \u6ca1\u7528 `--serif` \u7c7b\u53d8\u91cf)\n2. **\u53ea\u6709\u4e00\u4e2a accent \u8272**\u2014\u2014\u4e00\u4efd deck \u4e0d\u80fd\u540c\u65f6\u51fa\u73b0 IKB \u84dd + \u67e0\u6aac\u9ec4 + \u5b89\u5168\u6a59\u7b49\u591a\u4e2a\u9ad8\u4eae\u8272\n3. **\u4e0d\u5141\u8bb8\u6e10\u53d8 / \u9634\u5f71 / \u5706\u89d2**\u2014\u2014\u6240\u6709\u8272\u5757\u76f4\u89d2\u7eaf\u8272,\u4efb\u4f55 `box-shadow` / `linear-gradient` / `border-radius` > 0 \u90fd\u8981\u780d\u6389(rule \u6a2a\u7ebf\u9664\u5916)\n4. **\u6781\u81f4\u5b57\u53f7\u5bf9\u6bd4**\u2014\u2014\u4e3b\u6807\u9898\u4e0e\u6b63\u6587\u6bd4\u4f8b \u2265 8:1\n5. **\u5927\u5b57\u53f7\u5fc5\u987b\u53cc\u7ea6\u675f\u9650\u9ad8**\u2014\u2014`font-size:min(Xvw, Yvh)`,\u53ea\u7528 vw \u5728\u6807\u51c6 16:9 \u5c4f\u4f1a\u6ea2\u51fa(\u5438\u53d6 P15/P20/P22 \u6559\u8bad)\n6. **\u5927\u5b57\u5b57\u91cd 200**(ExtraLight)\u2014\u2014\u5b57\u53f7\u8d8a\u5927\u8d8a\u7ec6,\u745e\u58eb\u98ce\u7075\u9b42;**\u7981\u6b62** 600/700/800 \u5927\u5b57\n7. **\u5361\u7247\u586b\u5145\u7c7b\u578b\u4e92\u65a5**\u2014\u2014`card-ink` / `card-accent` / `card-fill` / `card-outlined` \u56db\u7c7b**\u4e0d\u80fd\u6df7\u7528**(\u7981\u6b62\"\u84dd\u5e95+\u84dd\u63cf\u8fb9\"\u3001\"\u7070\u5e95+\u63cf\u8fb9\"\u7b49)\n8. **\u591a\u5361\u5e76\u5217\u65f6\u7edf\u4e00\u6837\u5f0f**\u2014\u20143-12 \u5f20\u5361\u7528\u540c\u4e00\u7c7b(\u4f18\u5148 `card-fill` \u7070\u5e95);\u53ea\u7a81\u51fa\u4e00\u9879\u65f6\u5355\u72ec\u6362 `card-accent`,\u4e14**\u53ea\u5141\u8bb8\u4e00\u5f20**\n9. **\u76f4\u89d2\u5230\u5e95**\u2014\u2014\u4efb\u4f55 `border-radius` \u90fd\u4e0d\u5141\u8bb8;\u88c5\u9970\u7528 8\u00d78 \u76f4\u89d2\u5c0f\u65b9\u5757,**\u4e0d\u8981** 9px \u5706\u5f62\u70b9\n10. **\u56fe\u6807\u7528 lucide,\u4e0d\u81ea\u5df1\u753b SVG**\u2014\u2014`<i data-lucide=\"name\"></i>` + `lucide.createIcons()`,\u9009\u68f1\u89d2\u98ce\u683c(\u907f\u514d\u5706\u80d6)\n11. **\u65f6\u95f4\u7ebf\u5bf9\u9f50**\u2014\u2014axis \u5217\u56fa\u5b9a 12px + dot \u7edd\u5bf9\u5b9a\u4f4d,**\u4e0d\u8981**\u7528 grid `justify-self`(\u4f1a\u4e0e\u865a\u7ebf\u9519\u4f4d)\n12. **\u7ae0\u8282\u7ea7\u6807\u9898\u4e0e\u5185\u5bb9\u95f4\u8ddd \u2265 9vh**\u2014\u2014\u907f\u514d\u62e5\u6324(\u5438\u53d6 P15/P16 \u6559\u8bad)\n13. **\u6bcf\u9875\u4e00\u4e2a\u8bed\u4e49\u5316\u52a8\u6548 recipe**\u2014\u2014\u4e0d\u662f\u7edf\u4e00 fade-up,\u6570\u5b57 scale \u5f39\u5165\u3001bar scaleY \u62c9\u8d77\u3001SVG stroke \u63cf\u7ebf\u3001\u8282\u70b9\u5e8f\u5217\u70b9\u4eae\u7b49;**\u7981\u6b62**\u6240\u6709\u9875\u7528\u540c\u4e00\u4e2a generic \u914d\u65b9\n14. **playSlide \u5165\u53e3 reveal \u5bb9\u5668**\u2014\u2014`[data-anim]` \u5bb9\u5668\u5148\u5f3a\u5236 opacity:1,recipe \u5185\u518d\u7528 motion `{opacity:[0,1]}` \u8986\u76d6,\u5426\u5219\u6709\u4e9b\u9875\u4f1a\"\u770b\u4e0d\u89c1\"\n15. **ESC \u7d22\u5f15\u9875\u53ef\u89c1\u6027**\u2014\u2014cloned slide \u5fc5\u987b\u6709 CSS override \u8ba9 `[data-anim]` \u5728\u7f29\u7565\u56fe\u91cc opacity:1\n16. **Helvetica/Inter \u515c\u5e95\u4e2d\u6587\u5b57\u4f53**\u2014\u2014Windows \u7528\u6237\u6ca1\u6709\"\u82f9\u65b9\",\u5fc5\u987b fallback \u5230 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **\u5b57\u4f53\u7c97\u7ec6\u4f53\u4f8b**:\u5927\u5b57 200 / \u6b63\u6587 300 / `t-cat` SemiBold 600 / `t-meta` mono uppercase\n18. **\u4fdd\u7559\u4f4e\u529f\u8017\u5feb\u6377\u952e**\u2014\u2014\u53f3\u4e0b\u89d2\u5fc5\u987b\u63d0\u793a `B \u9759\u6001`;\u6309 `B` \u5207\u6362 `body.low-power`,\u505c\u6b62 WebGL/ASCII canvas RAF \u548c Motion \u5165\u573a\u52a8\u753b\n19. **\u88c5\u9970\u5143\u7d20\u4e25\u683c\u5728 grid \u5185**\u2014\u2014bars \u77e9\u9635\u3001\u70b9\u9635\u3001ring-mat \u4e0d\u80fd\u8d34\u8fb9\u6216\u6ea2\u51fa\u9875\u9762\n20. **\u5e95\u90e8\u5185\u5bb9\u9884\u7559 nav \u7a7a\u95f4**\u2014\u2014nav \u5728 ~97vh,\u5185\u5bb9\u6536\u5c3e\u4e0d\u8981\u8fc7 93vh(\u5438\u53d6 P22 KPI \u5927\u5b57\u6ea2\u5e95\u6559\u8bad)\n21. **\u56fe\u7247\u5bb9\u5668\u76f4\u89d2\u65e0\u9634\u5f71**\u2014\u2014`.frame-img` \u4e0d\u52a0 `border-radius` / `box-shadow`;\u8fb9\u754c\u53ea\u7528 hairline\n22. **S15/S16/S22 \u56fe\u7247\u540c\u7ec4\u4e00\u81f4**\u2014\u2014\u540c\u4e00\u7ec4\u56fe\u7247\u7edf\u4e00\u6bd4\u4f8b\u3001\u9ad8\u5ea6\u3001\u8fb9\u8ddd\u3001\u7ebf\u6761\u7c97\u7ec6;\u4fe1\u606f\u56fe/UI \u56fe\u52a0 `.fit-contain`\n23. **\u7ec4\u4ef6\u89d2\u8272\u8981\u6b63\u786e**\u2014\u2014S15/S16 \u56fe\u7247\u683c\u9700\u8981 caption \u4fe1\u606f\u951a\u70b9;S22 \u7684 KPI/\u8bf4\u660e\u662f\u5fc5\u9009;\u6570\u636e\u4e13\u7528\u7248\u5f0f\u5fc5\u987b\u6709\u771f\u5b9e\u6570\u636e,\u4e0d\u80fd\u9760\u6587\u6848\u786c\u586b\n24. **\u901a\u7528/\u975e\u901a\u7528\u7248\u5f0f\u8981\u5206\u6e05**\u2014\u2014S03/S08/S11/S19 \u8f83\u901a\u7528;S06/S07/S20/S21/S22 \u662f\u6570\u636e/\u6848\u4f8b\u4e13\u7528;S14/S15/S17 \u662f\u7ed3\u6784\u4e13\u7528\n\n### Step 5 \u00b7 \u672c\u5730\u9884\u89c8\n\n\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u6253\u5f00 `index.html` \u5c31\u884c\u3002macOS \u4e0b\uff1a\n\n```bash\nopen \"\u9879\u76ee/XXX/ppt/index.html\"\n```\n\n\u4e0d\u9700\u8981\u672c\u5730\u670d\u52a1\u5668\u3002\u56fe\u7247\u8d70\u76f8\u5bf9\u8def\u5f84 `images/xxx.png`\u3002\n\n\u9884\u89c8\u65f6\u4e0d\u80fd\u53ea\u770b\u666e\u901a\u9875\u9762\u3002\u6309 `P` \u8fdb\u5165\u6f14\u8bb2\u8005\u6a21\u5f0f,\u5141\u8bb8\u6d4f\u89c8\u5668\u6253\u5f00\u89c2\u4f17\u7a97\u53e3,\u81f3\u5c11\u5b9e\u6d4b\u4e00\u6b21:\u524d\u540e\u7ffb\u9875\u3001\u5185\u5d4c\u5bab\u683c\u9009\u9875\u5e76\u8fd4\u56de\u9884\u89c8\u3001\u9996\u9875/\u5c3e\u9875\u3001\u5c3e\u9875\u91cd\u65b0\u5f00\u59cb\u3001\u8ba1\u65f6\u5f00\u59cb/\u6682\u505c/\u91cd\u7f6e\u3001\u6392\u7ec3\u8bb0\u5f55\u3001\u81ea\u52a8\u7ffb\u9875\u6682\u505c/\u6062\u590d\u3001\u6fc0\u5149\u7b14\u3001\u5708\u9009\u3001\u9ed1\u767d\u5c4f\u3001\u51bb\u7ed3\u3001\u8bbe\u7f6e\u7ec4\u4ef6\u3001\u6f14\u524d\u68c0\u67e5\u3001\u5907\u6ce8\u4fdd\u5b58\u3001\u5173\u95ed\u89c2\u4f17\u7a97\u53e3\u540e\u7684\u72b6\u6001\u53d8\u5316,\u4ee5\u53ca\u201c\u91cd\u65b0\u6253\u5f00\u89c2\u4f17\u5c4f\u201d\u80fd\u5426\u6062\u590d\u5230\u5f53\u524d\u9875\u3002\n\n### Step 6 \u00b7 \u8fed\u4ee3\n\n\u6839\u636e\u7528\u6237\u53cd\u9988\u4fee\u6539\u2014\u2014\u6a21\u677f\u7684 CSS \u5df2\u7ecf\u9ad8\u5ea6\u53c2\u6570\u5316\uff0c90% \u7684\u8c03\u6574\u90fd\u662f\u6539 inline style\uff08\u5b57\u53f7 `font-size:Xvw` / \u9ad8\u5ea6 `height:Yvh` / \u95f4\u8ddd `gap:Zvh`\uff09\u3002\n\n---\n\n## \u8d44\u6e90\u6587\u4ef6\u5bfc\u89c8\n\n```\nguizang-ppt-skill/\n\u251c\u2500\u2500 SKILL.md                  \u2190 \u4f60\u6b63\u5728\u8bfb\n\u251c\u2500\u2500 assets/\n\u2502   \u251c\u2500\u2500 template.html         \u2190 \u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce\u6a21\u677f\uff08\u79cd\u5b50\u6587\u4ef6\uff09\n\u2502   \u251c\u2500\u2500 template-swiss.html   \u2190 \u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce\u6a21\u677f\uff08\u79cd\u5b50\u6587\u4ef6\uff09\n\u2502   \u251c\u2500\u2500 screenshot-backgrounds/ \u2190 \u622a\u56fe\u7f8e\u5316\u5185\u7f6e\u80cc\u666f(WebP):style-a 5 \u5957 / style-b 4 \u5957\n\u2502   \u2514\u2500\u2500 motion.min.js         \u2190 Motion One \u672c\u5730\u526f\u672c\uff08\u79bb\u7ebf\u515c\u5e95,\u7ea6 64KB,\u5171\u7528\uff09\n\u251c\u2500\u2500 scripts/\n\u2502   \u251c\u2500\u2500 validate-swiss-deck.mjs \u2190 \u98ce\u683c B \u9759\u6001\u6821\u9a8c:\u767b\u8bb0\u7248\u5f0f\u3001\u56fe\u7247\u69fd\u4f4d\u3001SVG \u6587\u672c\u3001\u6807\u9898\u5bf9\u9f50\n\u2502   \u2514\u2500\u2500 validate-presenter-mode.mjs \u2190 \u4e24\u79cd\u98ce\u683c\u5171\u7528:\u9875\u9762 ID\u3001\u6f14\u8bb2\u5907\u6ce8\u3001\u65f6\u957f\u548c\u6f14\u8bb2\u8005\u8fd0\u884c\u65f6\u6821\u9a8c\n\u2514\u2500\u2500 references/\n    \u251c\u2500\u2500 components.md         \u2190 \u7ec4\u4ef6\u624b\u518c\uff08\u5b57\u4f53\u3001\u8272\u3001\u7f51\u683c\u3001\u56fe\u6807\u3001callout\u3001stat\u3001pipeline\u3001\u52a8\u6548... \u98ce\u683c A \u9002\u7528\uff09\n    \u251c\u2500\u2500 layouts.md            \u2190 \u98ce\u683c A \u00b7 10 \u79cd\u9875\u9762\u5e03\u5c40\u9aa8\u67b6\uff08\u53ef\u76f4\u63a5\u7c98\u8d34,\u542b\u52a8\u6548\u6807\u8bb0\uff09\n    \u251c\u2500\u2500 swiss-layout-lock.md  \u2190 \u98ce\u683c B \u00b7 \u539f\u59cb 22P \u7248\u5f0f\u9501,\u6b63\u6587\u9875\u5fc5\u987b\u6309\u8fd9\u91cc\u767b\u8bb0\n    \u251c\u2500\u2500 layouts-swiss.md      \u2190 \u98ce\u683c B \u00b7 \u539f\u59cb 22P \u9aa8\u67b6\u8bf4\u660e + \u5c11\u91cf\u660e\u786e\u6807\u6ce8\u7684\u5b9e\u9a8c\u533a\n    \u251c\u2500\u2500 swiss-map-component.md \u2190 \u98ce\u683c B \u00b7 S08 \u5730\u56fe\u6269\u5c55\u7ec4\u4ef6(MapLibre \u70b9\u4f4d/\u8fde\u7ebf/\u5361\u7247/\u63a7\u5236)\n    \u251c\u2500\u2500 themes.md             \u2190 \u98ce\u683c A \u00b7 5 \u5957\u4e3b\u9898\u8272\u9884\u8bbe\uff08\u53ea\u80fd\u9009\u4e0d\u80fd\u81ea\u5b9a\u4e49\uff09\n    \u251c\u2500\u2500 themes-swiss.md       \u2190 \u98ce\u683c B \u00b7 4 \u5957\u745e\u58eb\u98ce\u4e3b\u9898\u8272\u9884\u8bbe\uff08IKB / \u67e0\u6aac\u9ec4 / \u67e0\u6aac\u7eff / \u5b89\u5168\u6a59\uff09\n    \u251c\u2500\u2500 image-prompts.md      \u2190 GPT-M 2.0 \u914d\u56fe\u7c7b\u578b\u3001\u6bd4\u4f8b\u548c\u57fa\u7840\u63d0\u793a\u8bcd\n    \u251c\u2500\u2500 screenshot-framing.md \u2190 CleanShot X \u5f0f\u622a\u56fe\u9002\u914d\u8bed\u4e49 + \u5185\u7f6e\u80cc\u666f\u8d44\u4ea7\u6620\u5c04\n    \u251c\u2500\u2500 presenter-mode.md     \u2190 \u6f14\u8bb2\u8005 UI\u3001AI \u5907\u6ce8\u7ed3\u6784\u3001\u89c2\u4f17\u5c4f\u540c\u6b65\u4e0e\u6062\u590d\u5951\u7ea6\n    \u2514\u2500\u2500 checklist.md          \u2190 \u8d28\u91cf\u68c0\u67e5\u6e05\u5355\uff08P0/P1/P2/P3 \u5206\u7ea7\uff09\n```\n\n**\u52a0\u8f7d\u987a\u5e8f\u5efa\u8bae**\uff1a\n1. \u5148\u8bfb\u5b8c `SKILL.md`(\u8fd9\u4e2a\u6587\u4ef6)\u4e86\u89e3\u6574\u4f53\n2. Step 1 \u9700\u6c42\u6f84\u6e05**\u7b2c\u4e00\u95ee**\u5148\u786e\u5b9a\u98ce\u683c A \u8fd8\u662f B,\u7136\u540e:\n   - \u98ce\u683c A:\u8bfb `themes.md` \u5e2e\u7528\u6237\u9009\u4e00\u5957\u4e3b\u9898\u8272\n   - \u98ce\u683c B:\u8bfb `themes-swiss.md` \u5e2e\u7528\u6237\u9009\u4e00\u5957\u4e3b\u9898\u8272\n3. **\u52a8\u624b\u524d Read \u5bf9\u5e94\u6a21\u677f\u7684 `<style>` \u5757**\u2014\u2014\u8fd9\u662f\u7c7b\u540d\u7684\u552f\u4e00\u6765\u6e90,\u7f3a\u7c7b\u4f1a\u5bfc\u81f4\u6574\u9875\u6837\u5f0f\u5d29\n   - \u98ce\u683c A \u2192 `assets/template.html`\n   - \u98ce\u683c B \u2192 `assets/template-swiss.html`\n4. \u8bfb\u5bf9\u5e94\u7684 layouts \u6587\u4ef6\u6311\u5e03\u5c40:\n   - \u98ce\u683c A \u2192 `layouts.md`(\u9876\u90e8\u6709 Pre-flight \u7c7b\u540d\u6e05\u5355\u3001\u4e3b\u9898\u8282\u594f\u89c4\u5212\u3001\u52a8\u6548 recipe \u51b3\u7b56\u6811)\n   - \u98ce\u683c B \u2192 **\u5148\u8bfb `swiss-layout-lock.md`**,\u518d\u8bfb `layouts-swiss.md`;\u6b63\u6587\u9875\u5fc5\u987b\u4ece S01-S22 \u9009\u62e9,\u6bcf\u9875\u5199 `data-layout`\n5. \u5982\u679c\u98ce\u683c B \u9700\u8981\u5730\u70b9\u3001\u8def\u7ebf\u3001\u4eba\u7269\u4f4f\u6240\u6216\u57ce\u5e02\u5173\u7cfb\u5730\u56fe,\u8bfb `swiss-map-component.md`\n6. \u5982\u679c\u5728 Codex \u4e2d\u751f\u6210\u914d\u56fe,\u8bfb `image-prompts.md` \u6311\u56fe\u7247\u7c7b\u578b\u3001\u6bd4\u4f8b\u548c\u57fa\u7840\u63d0\u793a\u8bcd;\u5982\u679c\u662f\u7528\u6237\u539f\u59cb\u622a\u56fe,\u5148\u8bfb `screenshot-framing.md`,\u4f18\u5148\u4f7f\u7528 `assets/screenshot-backgrounds/` \u7684\u5185\u7f6e\u80cc\u666f\u8d44\u4ea7\n7. \u7ec6\u8282\u8c03\u6574\u65f6\u8bfb `components.md` \u67e5\u7ec4\u4ef6(\u542b Motion \u52a8\u6548\u7cfb\u7edf\u7ae0\u8282,\u4e3b\u8981\u670d\u52a1\u98ce\u683c A;\u98ce\u683c B \u7684\u7ec4\u4ef6\u7ec6\u8282\u5728 `layouts-swiss.md` \u9644\u5f55)\n8. \u6b63\u5f0f\u6f14\u8bb2\u5148\u8bfb `presenter-mode.md`,\u751f\u6210\u7a33\u5b9a\u9875\u9762 ID \u548c `SPEAKER_NOTES`\n9. \u751f\u6210\u540e\u5148\u8fd0\u884c `validate-presenter-mode.mjs`;\u98ce\u683c B \u518d\u8fd0\u884c `validate-swiss-deck.mjs`,\u6700\u540e\u8bfb `checklist.md` \u81ea\u68c0\n\n**\u52a8\u6548\u76f8\u5173**:\u6a21\u677f\u5df2\u628a Motion One \u7684\u52a0\u8f7d\u548c recipe \u903b\u8f91\u5185\u5d4c\u5230\u5e95\u90e8 module script\u3002\u4f60\u4e0d\u9700\u8981\u6539 JS,\u53ea\u9700\u8981\u6309 `layouts.md` / `layouts-swiss.md` \u7684\u9aa8\u67b6\u5728 HTML \u91cc\u52a0 `data-anim` / `data-animate` \u5373\u53ef\u3002\u79bb\u7ebf\u6f14\u793a\u9760 `assets/motion.min.js`,\u65ad\u7f51\u65f6\u81ea\u52a8\u964d\u7ea7\u4e3a\"\u65e0\u52a8\u753b\u4f46\u5185\u5bb9\u53ef\u8bfb\"\u3002\u98ce\u683c B \u6a21\u677f\u5fc5\u987b\u4fdd\u7559 `B` \u952e\u4f4e\u529f\u8017\u6a21\u5f0f:\u5207\u6362\u540e\u505c\u6b62 WebGL/ASCII canvas RAF,\u53d6\u6d88\u6b63\u5728\u8fd0\u884c\u7684 Web Animations,\u5e76\u628a\u5f53\u524d\u9875\u5185\u5bb9\u76f4\u63a5 reveal \u5230\u9759\u6001\u6700\u7ec8\u6001\u3002\n\n## \u6838\u5fc3\u8bbe\u8ba1\u539f\u5219\uff08\u54f2\u5b66\uff09\n\n### \u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce\uff085 \u8f6e\u8fed\u4ee3\u603b\u7ed3\uff09\n\n> \u8fdd\u53cd\u5176\u4e2d\u4efb\u4f55\u4e00\u6761\uff0c\u6742\u5fd7\u611f\u90fd\u4f1a\u57ae\u3002\n\n1. **\u514b\u5236\u4f18\u4e8e\u70ab\u6280** \u2014 WebGL \u80cc\u666f\u53ea\u5728 hero \u9875\u900f\u51fa\uff0c\u666e\u901a\u9875\u51e0\u4e4e\u770b\u4e0d\u89c1\n2. **\u7ed3\u6784\u4f18\u4e8e\u88c5\u9970** \u2014 \u4e0d\u7528\u9634\u5f71\u3001\u4e0d\u7528\u6d6e\u52a8\u5361\u7247\u3001\u4e0d\u7528 padding box\uff0c\u4e00\u5207\u4fe1\u606f\u9760**\u5927\u5b57\u53f7 + \u5b57\u4f53\u5bf9\u6bd4 + \u7f51\u683c\u7559\u767d**\n3. **\u5185\u5bb9\u5c42\u7ea7\u7531\u5b57\u53f7\u548c\u5b57\u4f53\u5171\u540c\u5b9a\u4e49** \u2014 \u6700\u5927\u886c\u7ebf = \u4e3b\u6807\u9898\uff0c\u4e2d\u886c\u7ebf = \u526f\u6807\uff0c\u5927\u975e\u886c\u7ebf = lead\uff0c\u5c0f\u975e\u886c\u7ebf = body\uff0c\u7b49\u5bbd = \u5143\u6570\u636e\n4. **\u56fe\u7247\u662f\u7b2c\u4e00\u516c\u6c11** \u2014 \u56fe\u7247\u53ea\u88c1\u5e95\u90e8\uff0c\u4fdd\u8bc1\u9876\u90e8\u548c\u5de6\u53f3\u5b8c\u6574\uff1b\u7f51\u683c\u7528 `height:Nvh` \u56fa\u5b9a\uff0c\u4e0d\u8981\u7528 `aspect-ratio` \u6491\n5. **\u8282\u594f\u9760 hero \u9875** \u2014 hero \u548c non-hero \u4ea4\u66ff\uff0c\u624d\u4e0d\u7d2f\u773c\u775b\n6. **\u672f\u8bed\u7edf\u4e00** \u2014 Skills \u5c31\u662f Skills\uff0c\u4e0d\u8981\u4e2d\u82f1\u6df7\u5408\u7ffb\u8bd1\n\n### \u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce\n\n> \u8fdd\u53cd\u5176\u4e2d\u4efb\u4f55\u4e00\u6761\uff0c\u753b\u9762\u77ac\u95f4\u4ece\u745e\u58eb\u6389\u5230 PowerPoint\u3002\n\n1. **\u5355\u4e00\u951a\u70b9\u8272** \u2014 \u4e00\u4efd deck \u53ea\u7528\u4e00\u4e2a accent\uff0c\u4e0d\u5141\u8bb8\u591a\u8272\u9ad8\u4eae\u62fc\u8d34\n2. **\u6781\u81f4\u5b57\u53f7\u5bf9\u6bd4** \u2014 \u4e3b\u6807\u9898\u4e0e\u6b63\u6587\u6bd4\u4f8b \u2265 8:1,KPI \u5fc5\u987b\u662f\"Data Hero\"(\u5c4f\u5e55\u5bbd\u5ea6\u7684 18-22%)\n3. **\u65e0\u886c\u7ebf\u53ea\u6b64\u4e00\u5bb6** \u2014 Inter / Helvetica / Noto Sans SC,\u4efb\u4f55\u886c\u7ebf\u90fd\u662f\u9519\u7684\n4. **\u76f4\u89d2\u7eaf\u8272** \u2014 \u4e0d\u5141\u8bb8\u6e10\u53d8 / \u9634\u5f71 / \u5706\u89d2(rule \u6a2a\u7ebf\u9664\u5916)\n5. **\u7f51\u683c\u81f3\u4e0a** \u2014 \u6240\u6709\u5143\u7d20\u5438\u9644\u5230 12-col grid,\u5de6\u5bf9\u9f50 + \u5927\u5e45\u7559\u767d\u505a\u975e\u5bf9\u79f0\u7f8e\u5b66\n6. **Hairline \u662f\u624b\u672f\u5200** \u2014 1px \u7684\u6781\u7ec6\u5206\u5272\u7ebf\u5c31\u591f,\u4e0d\u8981\u52a0\u7c97\u3001\u4e0d\u8981\u52a0\u9634\u5f71\n7. **\u70b9\u9635\u88c5\u9970\u53ea\u5728 hero \u9875\u900f\u51fa** \u2014 \u6b63\u6587\u9875\u4fdd\u6301\u7eaf\u51c0\u5e95\u8272\n\n## \u53c2\u8003\u4f5c\u54c1\n\n\u672c skill \u7684\u4e24\u79cd\u98ce\u683c\u5206\u522b\u53c2\u8003\u4e86\uff1a\n\n**\u98ce\u683c A \u00b7 \u7535\u5b50\u6742\u5fd7\u98ce**:\n- \u6b78\u85cf \"\u4e00\u4eba\u516c\u53f8\uff1a\u88ab AI \u6298\u53e0\u7684\u7ec4\u7ec7\" \u5206\u4eab\uff082026-04-22\uff0c27 \u9875\uff09\n- *Monocle* \u6742\u5fd7\u7684\u7248\u5f0f\n- YC \u603b\u88c1 Garry Tan \"Thin Harness, Fat Skills\" \u90a3\u7bc7\u535a\u5ba2\u7684 demo\n\n**\u98ce\u683c B \u00b7 \u745e\u58eb\u56fd\u9645\u4e3b\u4e49\u98ce**:\n- Massimo Vignelli \u7684 NYC Subway / Unimark \u7cfb\u7edf\n- *Helvetica Forever* \u7684\u5b57\u4f53\u8bbe\u8ba1\u8bed\u8a00\n- Josef M\u00fcller-Brockmann \u7684\u7f51\u683c\u7cfb\u7edf\u7ecf\u5178\u8457\u4f5c\n- \u5f53\u4ee3\u8bbe\u8ba1:Acne Studios / Off-White / IKEA / Beck Design\n\n\u53ef\u4ee5\u628a\u5b83\u4eec\u5f53\u505a\u98ce\u683c\u951a\u70b9\u3002\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"}