{"slug":"helloianneo-ian-xhs-carousel-c3b08c","title":"\u5c0f\u7ea2\u4e663:4\u56fe\u6587\u8f6e\u64ad\u6392\u7248","description":"\u628a\u6587\u7ae0\u3001\u6848\u4f8b\u6216\u60f3\u6cd5\u6392\u62101080\u00d71440\u5c0f\u7ea2\u4e66\u8f6e\u64ad\u56fe\uff1a\u5148\u6d88\u5316\u5185\u5bb9\u51fa\u5206\u955c\u8868\u5e76\u7b49\u7528\u6237\u786e\u8ba4\uff0c\u518d\u4ece20\u4e2a\u6bcd\u7248\u9009\u7248\u5f0f\u3001\u7528\u4ee3\u7801\u753b\u914d\u56fe\u3001\u6e32\u67d3\u6bcf\u9875PNG\u4e0e\u603b\u89c8\u56fe\u5e76\u81ea\u67e5\u3002\u53ea\u7ba1\u56fe\uff0c\u4e0d\u5199\u5e16\u5b50\u6807\u9898\u6b63\u6587\u548c\u8bdd\u9898\u6807\u7b7e\u3002","category":"\u526a\u8f91\u4e0e\u5305\u88c5","tags":["helloianneo","Ian","\u526a\u8f91\u4e0e\u5305\u88c5"],"author":"Ian \u00b7 helloianneo","source_url":"https://github.com/helloianneo/ian-xhs-carousel/blob/1e16387315c29225deb54f2661a42fb503eb34e7/ian-xhs-carousel/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":"4d7629f504b14b2aa35ed32355161e48","created_at":"2026-11-02T14:47:08+00:00","updated_at":"2026-11-02T14:47:08+00:00","source_repo":"helloianneo/ian-xhs-carousel","source_path":"ian-xhs-carousel/SKILL.md","source_commit":"1e16387315c29225deb54f2661a42fb503eb34e7","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":"\u6d41\u7a0b\u5b8c\u6574\u3001\u6750\u6599\u9f50\u5168\uff0c\u5206\u955c\u786e\u8ba4\u4e0e\u6e32\u67d3\u81ea\u67e5\u8bbe\u8ba1\u5408\u7406\uff1b\u4f46\u9700\u5148\u88c5playwright\u3001Pillow\u4e0e\u4e2d\u6587\u5b57\u4f53\u5e76\u8054\u7f51\u52a0\u8f7d\u5b57\u4f53\uff0c\u811a\u672c\u672a\u5b9e\u9645\u8fd0\u884c\uff0c\u6e32\u67d3\u53ef\u9760\u6027\u5f85\u7528\u6237\u73af\u5883\u9a8c\u8bc1\u3002","cost_notes":"\u65e0\u4ed8\u8d39API\uff1b\u5b57\u4f53\u4e0e\u6d4f\u89c8\u5668\u4f9d\u8d56\u514d\u8d39\uff0c\u4f46\u9700\u8054\u7f51\u4e0b\u8f7d\uff0c\u662f\u5426\u53ef\u8054\u7f51\u9700\u7528\u6237\u786e\u8ba4\u3002","source_sha256":"58a386548251d46468cc4213a8c47f0eb7a3dd205f3ccc27fb4e80f410f4bd00","prerequisites":["Python3\u73af\u5883","playwright\u53caplaywright install chromium","Pillow","\u4e2d\u6587\u5b57\u4f53\uff1a\u82f9\u65b9\uff08Mac\uff09\u6216Noto Sans SC\uff08\u9700\u81ea\u884c\u5b89\u88c5\uff09","\u8054\u7f51\u52a0\u8f7dInter\u4e0eGeist Mono\u5b57\u4f53\uff08Google Fonts\uff09"],"checks":["\u5206\u955c\u8868\u662f\u5426\u5728\u6392\u7248\u524d\u63d0\u4ea4\u5e76\u7b49\u5f85\u7528\u6237\u786e\u8ba4\uff0c\u4e14\u6bcf\u9875\u53ea\u8bb2\u4e00\u4ef6\u4e8b\u3001\u914d\u56fe\u6765\u6e90\u6807\u6ce8\u4e3a\u73b0\u6210/\u4ee3\u7801\u753b/\u8981\u4f60\u7ed9\u4e09\u7c7b\u4e4b\u4e00","\u6e32\u67d3\u8f93\u51fa\u662f\u5426\u4e3a1080\u00d71440\u7684\u9010\u9875PNG\u52a0\u603b\u89c8\u56fe\uff0c\u6587\u4ef6\u540d\u4e0e\u9875\u5e8f\u4e00\u81f4","render.py\u81ea\u67e5\u62a5\u51fa\u7684\u6ea2\u51fa\u3001\u5b57\u53f7\u8d8a\u754c\u3001\u591a\u5904\u6a59\u8272\u3001\u6b8b\u7559\u5360\u4f4d\u662f\u5426\u5168\u90e8\u5904\u7406","\u6bcf\u9875\u6a59\u8272\u662f\u5426\u4e0d\u8d85\u8fc7\u4e00\u5904\uff08data-accent\u5408\u5e76\u8ba1\uff09\uff0c\u5361\u7247\u63cf\u8fb92\u3001\u5706\u89d232\u3001\u95f4\u8ddd24\u7b49\u8bbe\u8ba1\u7cfb\u7edf\u89c4\u5219\u662f\u5426\u9075\u5b88","\u56fe\u4e0a\u6587\u6848\u662f\u5426\u53e3\u8bed\u5e73\u5b9e\u3001\u6807\u9898\u6309\u5b57\u53f7\u63a7\u5236\u6bcf\u884c\u5b57\u6570\u5e76\u7528<br>\u65ad\u884c\u3001\u65e0\u5148\u5426\u540e\u80af\u4e0e\u91d1\u53e5\u7ed3\u5c3e"],"limitations":["render.py\u4e0e\u6a21\u677f\u672a\u5728\u672c\u5ba1\u9605\u4e2d\u8fd0\u884c\uff0c\u5b9e\u9645\u6e32\u67d3\u6548\u679c\u4e0e\u81ea\u67e5\u8986\u76d6\u8303\u56f4\u5f85\u7528\u6237\u73af\u5883\u9a8c\u8bc1","\u4f9d\u8d56playwright\u4e0e\u8054\u7f51\u5b57\u4f53\uff0c\u79bb\u7ebf\u6216\u672a\u88c5chromium\u65f6\u65e0\u6cd5\u51fa\u56fe","\u4e2d\u6587\u975eMac\u73af\u5883\u9700\u81ea\u884c\u5b89\u88c5Noto Sans SC\uff0c\u5426\u5219\u5b57\u4f53\u56de\u9000\u53ef\u80fd\u5f71\u54cd\u7248\u5f0f","\u4ec5\u8d1f\u8d23\u56fe\uff0c\u4e0d\u4ea7\u51fa\u5e16\u5b50\u6807\u9898\u3001\u6b63\u6587\u4e0e\u8bdd\u9898\u6807\u7b7e"],"issues":["SKILL.md\u5f15\u7528scripts/render.py\u4e0eassets\u5404\u6587\u4ef6\uff0c\u6e05\u5355\u4e2d\u5747\u5b58\u5728\uff0c\u672a\u89c1\u7f3a\u5931","\u5b57\u4f53\u8054\u7f51\u52a0\u8f7d\u5931\u8d25\u4ec5\u63d0\u793a\uff0c\u672a\u8bf4\u660e\u65e0\u7f51\u7edc\u65f6\u7684\u66ff\u4ee3\u65b9\u6848\u7ec6\u8282\uff0c\u5f85\u6838\u5b9e","\u672a\u63d0\u4f9bplaywright\u4e0ePillow\u7684\u7248\u672c\u8981\u6c42\uff0c\u517c\u5bb9\u6027\u5f85\u6838\u5b9e"],"missing_files":[]},"quality_url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/SHILIU-QUALITY.md","usage_guide":{"task":"\u5c06\u4e00\u4efd\u5df2\u6709\u5185\u5bb9\uff08\u6587\u7ae0\u3001\u6848\u4f8b\u62c6\u89e3\u3001\u7b14\u8bb0\u6216\u60f3\u6cd5\uff09\u8f6c\u6210\u4e00\u7ec4\u5c0f\u7ea2\u4e663:4\u56fe\u6587\u8f6e\u64ad\uff0c\u542b\u5206\u955c\u89c4\u5212\u3001\u7248\u5f0f\u6392\u7248\u3001\u914d\u56fe\u51c6\u5907\u3001\u6e32\u67d3\u4e0e\u4ea4\u4ed8\u81ea\u67e5\u3002","inputs":"\u7528\u6237\u63d0\u4f9b\u7684\u5185\u5bb9\u539f\u6587\u6216\u7d20\u6750\uff1b\u5df2\u6709\u622a\u56fe\u3001\u7167\u7247\u3001Logo\u7b49\u56fe\u7247\uff08\u53ef\u9009\uff09\uff1b\u4e3b\u9898\u504f\u597d\uff08\u6d45\u8272/\u6df1\u8272\uff0c\u672a\u8bf4\u660e\u9ed8\u8ba4\u6d45\u8272\uff09\uff1b\u7528\u6237\u81ea\u6709\u6587\u98ce\u89c4\u5219\uff08\u53ef\u9009\uff09\u3002\u8fd0\u884c\u73af\u5883\u9700Python3\u3001playwright\u53cachromium\u3001Pillow\uff1b\u4e2d\u6587\u9700\u82f9\u65b9\u6216Noto Sans SC\uff0cInter\u4e0eGeist Mono\u9700\u8054\u7f51\u4eceGoogle Fonts\u52a0\u8f7d\u3002","outputs":"\u5206\u955c\u8868\uff08\u9875\u5e8f\u3001\u6bcd\u7248\u7f16\u53f7\u3001\u56fe\u4e0a\u6807\u9898\u3001\u526f\u6807\u9898\u3001\u914d\u56fe\u6765\u6e90\uff09\uff1b\u5de5\u4f5c\u76ee\u5f55\u5185index.html\u4e0e\u590d\u5236\u7684xhs.css\u3001xhs.js\u3001figure-kit.js\u53ca\u914d\u56fe\uff1b\u6e32\u67d3\u51fa\u768401.png\u2026NN.png\uff081080\u00d71440\uff09\u4e0e\u603b\u89c8.png\uff0c\u6df1\u8272\u7248\u53e6\u5b58\u76ee\u5f55\uff1b\u4ea4\u4ed8\u8bf4\u660e\u542b\u6bcd\u7248\u4f7f\u7528\u3001\u6269\u5c55\u7406\u7531\u3001\u4ee3\u7801\u753b\u56fe\u4e0e\u5f85\u8865\u56fe\u6e05\u5355\u3002","example_input":"\u628a\u8fd9\u7bc7\u8bb2\u201c\u5c0f\u7968\u81ea\u52a8\u8bb0\u8d26\u5de5\u5177\u201d\u7684\u6587\u7ae0\u505a\u6210\u5c0f\u7ea2\u4e66\u56fe\u6587\uff0c\u6d45\u8272\u4e3b\u9898\uff0c\u6211\u53ea\u6709\u4e00\u5f20\u9996\u9875\u622a\u56fe\uff0c\u5176\u4ed6\u56fe\u4f60\u770b\u7740\u529e\u3002","example_output":"\u793a\u610f\uff1a\u5148\u8fd4\u56de\u5206\u955c\u8868\uff08\u5c01\u9762T02\u3001\u539f\u7406T04\u3001\u6b65\u9aa4T06\u3001\u7ed3\u5c3eT18\u7b49\uff0c\u6807\u6ce8\u914d\u56fe\u6765\u6e90\u4e3a\u73b0\u6210/\u4ee3\u7801\u753b/\u8981\u4f60\u7ed9\uff09\uff0c\u7528\u6237\u786e\u8ba4\u540e\u751f\u6210index.html\u5e76\u6e32\u67d3\u51fa01.png\u81f305.png\u4e0e\u603b\u89c8.png\uff0c\u4ea4\u4ed8\u65f6\u8bf4\u660e\u5404\u9875\u6bcd\u7248\u3001\u4ee3\u7801\u753b\u56fe\u9875\u4e0e\u4ecd\u9700\u7528\u6237\u63d0\u4f9b\u7684\u622a\u56fe\u3002\u5b9e\u9645\u9875\u6570\u4e0e\u5185\u5bb9\u4ee5\u771f\u5b9e\u6750\u6599\u4e3a\u51c6\u3002"},"read_url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c","skill_url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/SKILL.md","download_url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/download","install_url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/install","files":[{"path":"LICENSE","bytes":1060,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/LICENSE"},{"path":"NOTICE.md","bytes":745,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/NOTICE.md"},{"path":"SHILIU-QUALITY.md","bytes":2442,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/SHILIU-QUALITY.md"},{"path":"SKILL.md","bytes":9019,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/SKILL.md"},{"path":"agents/openai.yaml","bytes":307,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/agents/openai.yaml"},{"path":"assets/figure-kit.js","bytes":3384,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/figure-kit.js"},{"path":"assets/starter.html","bytes":2002,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/starter.html"},{"path":"assets/templates.html","bytes":23084,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/templates.html"},{"path":"assets/xhs.css","bytes":18895,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/xhs.css"},{"path":"assets/xhs.js","bytes":1845,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/xhs.js"},{"path":"assets/\u7248\u5f0f\u603b\u89c8-\u6df1\u8272.png","bytes":728471,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/%E7%89%88%E5%BC%8F%E6%80%BB%E8%A7%88-%E6%B7%B1%E8%89%B2.png"},{"path":"assets/\u7248\u5f0f\u603b\u89c8.png","bytes":696873,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/assets/%E7%89%88%E5%BC%8F%E6%80%BB%E8%A7%88.png"},{"path":"references/checklist.md","bytes":2049,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/references/checklist.md"},{"path":"references/design-system.md","bytes":6527,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/references/design-system.md"},{"path":"references/figures.md","bytes":4675,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/references/figures.md"},{"path":"references/layouts.md","bytes":9259,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/references/layouts.md"},{"path":"scripts/render.py","bytes":7598,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/scripts/render.py"},{"path":"shiliu-quality.json","bytes":2000,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/shiliu-quality.json"},{"path":"shiliu-source.json","bytes":274,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/shiliu-source.json"},{"path":"usage.json","bytes":1389,"url":"https://shiliuai.cn/api/v2/skills/helloianneo-ian-xhs-carousel-c3b08c/files/usage.json"}],"content":"---\nname: ian-xhs-carousel\ndescription: \u628a\u6587\u7ae0\u3001\u6848\u4f8b\u62c6\u89e3\u3001\u7d20\u6750\u3001\u7b14\u8bb0\u6216\u4e00\u4e2a\u60f3\u6cd5\u6392\u6210\u5c0f\u7ea2\u4e66 3:4 \u56fe\u6587\uff081080\u00d71440 \u8f6e\u64ad\u56fe\uff09\uff0c\u7528\u4e00\u5957\u4ea7\u54c1\u754c\u9762\u98ce\u683c\uff1a\u950c\u7070\u52a0\u4e00\u5904\u6a59\uff0c\u767d\u9875\u9762\u4e0a\u57ab\u7070\u5e95\u76d8\uff0c\u5185\u5bb9\u505a\u6210\u5e26\u5206\u5c42\u9634\u5f71\u7684\u5361\u7247\u3001\u7a97\u53e3\u548c\u5bf9\u8bdd\u6846\uff0c\u6709\u6d45\u8272\u548c\u6df1\u8272\u4e24\u7248\u3002\u5148\u6d88\u5316\u5185\u5bb9\u51fa\u5206\u955c\u8868\uff0c\u786e\u8ba4\u540e\u4ece 20 \u4e2a\u6bcd\u7248\u91cc\u6392\u7248\u3001\u7528\u4ee3\u7801\u753b\u914d\u56fe\uff0c\u6e32\u67d3\u6210\u6bcf\u9875 PNG \u548c\u603b\u89c8\u56fe\u3002\u53ea\u8981\u7528\u6237\u63d0\u5230\u5c0f\u7ea2\u4e66\u56fe\u6587\u3001\u5c0f\u7ea2\u4e66\u8f6e\u64ad\u3001\u505a\u6210\u5c0f\u7ea2\u4e66\u3001\u51fa\u56fe\u6587\u3001XHS carousel\u3001\u6392\u51e0\u9875\u56fe\u3001\u628a\u8fd9\u7bc7\u505a\u6210\u56fe\uff0c\u6216\u8005\u7ed9\u4e86\u4e00\u7bc7\u5185\u5bb9\u60f3\u53d1\u5c0f\u7ea2\u4e66\uff0c\u90fd\u5e94\u8be5\u7528\u8fd9\u4e2a skill\uff0c\u54ea\u6015\u6ca1\u8bf4\"\u8f6e\u64ad\"\u6216\"\u7248\u5f0f\"\u3002\u4e0d\u8d1f\u8d23\u5c0f\u7ea2\u4e66\u7684\u5e16\u5b50\u6807\u9898\u3001\u6b63\u6587\u548c\u8bdd\u9898\u6807\u7b7e\u3002\n---\n\n# \u5c0f\u7ea2\u4e66\u56fe\u6587\uff083:4\uff09\n\n\u628a\u4e00\u4efd\u5185\u5bb9\u505a\u6210\u4e00\u7ec4 1080\u00d71440 \u7684\u5c0f\u7ea2\u4e66\u56fe\u3002\u98ce\u683c\u5df2\u7ecf\u5b9a\u597d\uff1a\u950c\u7070\u4e2d\u6027\u8272\u52a0\u4e00\u5904\u6a59\uff0c\u767d\u9875\u9762\u4e0a\u57ab\u4e00\u5757\u7070\u5e95\u76d8\uff0c\u5185\u5bb9\u505a\u6210\u4e00\u5f20\u5f20\u5e26\u5206\u5c42\u9634\u5f71\u7684\u5361\u7247\u3001\u7a97\u53e3\u3001\u5bf9\u8bdd\u6846\uff0c\u50cf\u4ece\u4e00\u4e2a\u7cbe\u81f4\u8f6f\u4ef6\u91cc\u622a\u51fa\u6765\u7684\u3002\u6709 20 \u4e2a\u6bcd\u7248\uff0c\u6d45\u8272\u6df1\u8272\u90fd\u80fd\u51fa\u3002\n\n\u6bcd\u7248\u662f\u8d77\u70b9\u3002\u5185\u5bb9\u9700\u8981\u7684\u65f6\u5019\u53ef\u4ee5\u51fa\u8840\u3001\u9519\u843d\u3001\u653e\u5927\u3001\u589e\u51cf\u884c\uff0c\u53ea\u8981\u5e95\u4e0b\u90a3\u5957\u989c\u8272\u3001\u5b57\u53f7\u3001\u9634\u5f71\u548c\u5361\u7247\u6837\u5f0f\u8fd8\u5b88\u7740\u3002\n\n\u8fd9\u4e2a skill \u53ea\u7ba1**\u56fe**\u3002\u5e16\u5b50\u6807\u9898\u3001\u6b63\u6587\u3001\u8bdd\u9898\u6807\u7b7e\u4e0d\u5f52\u5b83\u7ba1\uff0c\u7528\u6237\u6ca1\u8981\u5c31\u4e0d\u5199\u3002\u56fe\u4e0a\u7684\u5b57\uff08\u6bcf\u9875\u6807\u9898\u3001\u526f\u6807\u9898\u3001\u5361\u7247\u91cc\u7684\u5b57\uff09\u5f52\u5b83\u7ba1\u3002\n\n## \u6d41\u7a0b\n\n\u4e00\u5171\u516d\u6b65\uff0c\u4e2d\u95f4\u53ea\u505c\u4e00\u6b21\uff1a\u5206\u955c\u8868\u51fa\u6765\u4ee5\u540e\uff0c\u7b49\u7528\u6237\u786e\u8ba4\u3002\n\n### 1. \u6d88\u5316\u5185\u5bb9\n\n\u5148\u628a\u6750\u6599\u8bfb\u5b8c\uff0c\u60f3\u6e05\u695a\u4e09\u4ef6\u4e8b\u518d\u52a8\u624b\uff1a\n- \u8fd9\u7ec4\u56fe\u8981\u8ba9\u770b\u7684\u4eba\u5e26\u8d70\u4ec0\u4e48\uff0c\u7528\u4e00\u53e5\u8bdd\u8bf4\u51fa\u6765\n- \u6750\u6599\u91cc\u54ea\u4e9b\u662f\u786c\u8d27\uff08\u6570\u636e\u3001\u6b65\u9aa4\u3001\u5bf9\u6bd4\u3001\u622a\u56fe\u3001\u4ee3\u7801\u3001\u5177\u4f53\u505a\u6cd5\uff09\uff0c\u54ea\u4e9b\u662f\u94fa\u57ab\uff0c\u53ef\u4ee5\u4e22\n- \u7528\u6237\u624b\u4e0a\u5df2\u7ecf\u6709\u54ea\u4e9b\u56fe\uff0c\u8fd8\u7f3a\u54ea\u4e9b\n\n### 2. \u5206\u955c\u8868\uff08\u505c\u4e0b\u6765\u7b49\u786e\u8ba4\uff09\n\n\u4e00\u9875\u53ea\u8bb2\u4e00\u4ef6\u4e8b\uff0c\u7528\u6700\u5c11\u7684\u9875\u6570\u8bb2\u5b8c\uff0c\u4e00\u822c 5 \u9875\u5de6\u53f3\uff1a\u5c01\u9762\u3001\u4e09\u56db\u9875\u5185\u5bb9\u3001\u7ed3\u5c3e\u3002\u56fe\u4e0a\u53ea\u653e\u770b\u5f97\u89c1\u7684\u4e1c\u897f\uff1a\u6570\u5b57\u3001\u5bf9\u6bd4\u3001\u4ea7\u54c1\u3001\u505a\u6cd5\u3002\u7eaf\u89c2\u70b9\u3001\u6765\u9f99\u53bb\u8109\u3001\u4f5c\u8005\u7684\u5fc3\u8def\uff0c\u7559\u7ed9\u6b63\u6587\uff0c\u6700\u591a\u7559\u4e00\u9875\u89c2\u70b9\u9875\uff08T15\uff09\u3002\u5b81\u53ef\u5c11\u4e00\u9875\uff0c\u8ba9\u4eba\u5212\u5b8c\u8fd8\u610f\u72b9\u672a\u5c3d\uff1b\u957f\u6587\u91cc\u6bcf\u4e2a\u8bba\u70b9\u90fd\u505a\u6210\u4e00\u9875\uff0c\u7528\u6237\u4f1a\u89c9\u5f97\u592a\u590d\u6742\u3002\n\n\u5185\u5bb9\u91cc\u7684\u5f15\u5b50\u3001\u94fa\u57ab\uff0c\u8fd8\u6709\u90a3\u4e9b\u9700\u8981\u989d\u5916\u914d\u56fe\u624d\u8bb2\u5f97\u6e05\u7684\u65c1\u652f\uff0c\u76f4\u63a5\u5220\uff0c\u5728\u5206\u955c\u8868\u4e0b\u9762\u8bf4\u4e00\u53e5\u5220\u4e86\u4ec0\u4e48\u3002\n\n\u7167\u8fd9\u4e2a\u683c\u5f0f\u7ed9\u7528\u6237\uff1a\n\n```\n\u8fd9\u7ec4\u56fe\u60f3\u8ba9\u4eba\u5e26\u8d70\uff1a<\u4e00\u53e5\u8bdd>\n\u4e3b\u9898\uff1a\u6d45\u8272 / \u6df1\u8272\n\n| \u9875 | \u8fd9\u9875\u8bb2\u4ec0\u4e48 | \u6bcd\u7248 | \u56fe\u4e0a\u6807\u9898 | \u526f\u6807\u9898 | \u914d\u56fe |\n|---|---|---|---|---|---|\n| 01 | \u5c01\u9762 | T02 | \u6211\u505a\u4e86\u4e2a<br>\u8bb0\u8d26\u5c0f\u5de5\u5177 | \u62cd\u4e00\u4e0b\u5c0f\u7968\uff0c\u81ea\u52a8\u8bb0\u597d\u4e00\u7b14 | \u7a97\u53e3\u91cc\u653e\u9996\u9875\u622a\u56fe\uff0c\u73b0\u6210 |\n| 02 | \u539f\u7406 | T04 | \u5c0f\u7968\u662f\u600e\u4e48<br>\u53d8\u6210\u4e00\u7b14\u8d26\u7684 | \u5148\u8ba4\u5b57\uff0c\u518d\u6311\u51fa\u91d1\u989d\u548c\u65e5\u671f | \u4ee3\u7801\u753b\uff1a\u4e09\u6b65\u5404\u4e00\u5f20\u5c0f\u56fe |\n| \u2026 |\n\n\u8981\u4f60\u7ed9\u7684\u56fe\uff1a\n- 03 \u9875\uff1a<\u5177\u4f53\u8981\u4ec0\u4e48\u3001\u4e3a\u4ec0\u4e48\u53ea\u80fd\u4f60\u7ed9>\n```\n\n\u914d\u56fe\u4e00\u680f\u5199\u6e05\u695a\u6765\u6e90\uff0c\u4e09\u79cd\u4e4b\u4e00\uff1a\n- **\u73b0\u6210**\uff1a\u7528\u6237\u7ed9\u7684\u622a\u56fe\u3001\u7167\u7247\u3001\u4ee3\u7801\u6548\u679c\n- **\u4ee3\u7801\u753b**\uff1a\u793a\u610f\u56fe\u3001\u6d41\u7a0b\u3001\u6570\u636e\u56fe\u3001\u56fe\u6807\u3001\u6982\u5ff5\u56fe\uff0c\u81ea\u5df1\u753b\uff08\u89c1\u7b2c 3 \u6b65\uff09\n- **\u8981\u4f60\u7ed9**\uff1a\u53ea\u6709\u7528\u6237\u80fd\u63d0\u4f9b\u7684\uff0c\u6bd4\u5982\u771f\u5b9e\u4ea7\u54c1\u622a\u56fe\u3001\u672c\u4eba\u7167\u7247\u3001\u4ed6\u81ea\u5df1\u7684\u4f5c\u54c1\u3002\u8fd9\u7c7b\u4e0d\u8981\u81ea\u5df1\u753b\u4e2a\u5047\u7684\u5192\u5145\uff0c\u5355\u72ec\u5217\u51fa\u6765\u95ee\n\n\u6bcd\u7248\u600e\u4e48\u9009\u770b `references/layouts.md`\u3002\u6ca1\u6709\u5408\u9002\u7684\u5c31\u5199\"\u6269\u5c55\"\uff0c\u7528\u4e00\u53e5\u8bdd\u8bf4\u660e\u6253\u7b97\u600e\u4e48\u6392\u3002\u4e3b\u9898\u6ca1\u8bf4\u5c31\u7528\u6d45\u8272\u3002\n\n\u7528\u6237\u6539\u5b8c\u6216\u8005\u8bf4\u53ef\u4ee5\uff0c\u518d\u5f80\u4e0b\u8d70\u3002\n\n### 3. \u51c6\u5907\u914d\u56fe\n\n\u6bcd\u7248\u53ea\u7ba1\u628a\u4e1c\u897f\u6446\u6574\u9f50\uff0c\u4e00\u7ec4\u56fe\u597d\u4e0d\u597d\u770b\uff0c\u5f88\u5927\u7a0b\u5ea6\u770b\u914d\u56fe\u3002\u6240\u4ee5\u52a8\u624b\u6392\u7248\u524d\uff0c\u5148\u628a\u6bcf\u5f20\u56fe\u7684\u8d28\u91cf\u8fc7\u4e00\u904d\uff1a\n- \u622a\u56fe\u8981\u6e05\u695a\uff1a\u7528\u9ad8\u5206\u8fa8\u7387\u7684\uff0c\u88c1\u6389\u548c\u8fd9\u9875\u65e0\u5173\u7684\u90e8\u5206\uff08\u6d4f\u89c8\u5668\u5de5\u5177\u680f\u3001\u684c\u9762\u3001\u522b\u7684\u7a97\u53e3\uff09\uff1b\u505a\u6df1\u8272\u7248\u65f6\u5c3d\u91cf\u6362\u6210\u6df1\u8272\u622a\u56fe\n- Logo\u3001\u56fe\u6807\u3001\u54c1\u724c\u7d20\u6750\u7528\u5b98\u65b9\u7684\u77e2\u91cf\u6587\u4ef6\uff08SVG\uff09\uff0c\u4e0d\u8981\u622a\u4e00\u4e2a\u7cca\u7684\u5c0f\u56fe\u653e\u5927\u7528\n- \u7167\u7247\u3001\u6548\u679c\u56fe\u8981\u6311\u6700\u597d\u770b\u7684\u90a3\u5f20\uff0c\u4e0d\u662f\u968f\u624b\u62ff\u7b2c\u4e00\u5f20\n- \u81ea\u5df1\u753b\u7684\u56fe\u8981\u5f80\u7cbe\u81f4\u91cc\u753b\uff0c\u89c4\u5219\u89c1\u4e0b\u9762\n\n\u624b\u4e0a\u7684\u56fe\u4e0d\u591f\u597d\uff0c\u5c31\u5728\u5206\u955c\u8868\u7684\"\u8981\u4f60\u7ed9\u7684\u56fe\"\u91cc\u76f4\u63a5\u8bf4\u54ea\u5f20\u4e0d\u884c\u3001\u8981\u4ec0\u4e48\u6837\u7684\u3002\u5b81\u53ef\u7b49\u7528\u6237\u8865\u4e00\u5f20\u597d\u56fe\uff0c\u4e5f\u4e0d\u8981\u62ff\u4e00\u5f20\u7cca\u7684\u3001\u968f\u624b\u622a\u7684\u56fe\u51d1\u4e0a\u53bb\u3002\n\n\u7528\u6237\u7ed9\u7684\u56fe\u76f4\u63a5\u7528\u3002\u7f3a\u7684\u56fe\u7528 canvas \u6216 SVG \u4ee3\u7801\u753b\uff0c\u53ea\u7528\u7070\u548c\u90a3\u4e00\u5904\u6a59\uff0c\u51e0\u4f55\u7cbe\u786e\uff0c\u4ece\u771f\u5b9e\u6570\u636e\u6216\u771f\u5b9e\u903b\u8f91\u751f\u6210\u3002\u4e0d\u7528\u526a\u8d34\u753b\u3001emoji\u3001\u88c5\u9970\u6e10\u53d8\u3002\u52a8\u624b\u524d\u8bfb `references/figures.md`\uff0c\u90a3\u91cc\u6709\u5177\u4f53\u89c4\u5219\uff0c\u8fd8\u6709\u53ef\u4ee5\u76f4\u63a5\u7528\u7684 `assets/figure-kit.js`\uff08\u989c\u8272\u8ddf\u4e3b\u9898\u8d70\uff09\u3002\n\n### 4. \u6392\u7248\u586b\u5185\u5bb9\n\n\u5728\u7528\u6237\u7684\u5de5\u4f5c\u76ee\u5f55\u91cc\u5efa\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u7528\u8fd9\u671f\u5185\u5bb9\u8d77\u540d\uff0c\u653e\u8fdb\uff1a\n- `index.html`\uff1a\u4ece `assets/starter.html` \u5f00\u59cb\uff0c\u6bcf\u9875\u4e00\u4e2a `<section class=\"slide\" data-layout=\"T04 \u6b65\u9aa4 \u00b7 \u6587\u6863\">`\n- `xhs.css`\u3001`xhs.js`\uff1a\u4ece `assets/` \u590d\u5236\uff0c**\u4e0d\u8981\u6539**\u3002\u8fd9\u4e00\u671f\u7279\u6709\u7684\u6837\u5f0f\u5199\u5728 `index.html` \u7684 `<style>` \u91cc\n- `figure-kit.js`\uff08\u8981\u753b\u56fe\u7684\u8bdd\uff09\u3001\u914d\u56fe\u7684 JS\u3001\u56fe\u7247\u7d20\u6750\n\n\u6bcd\u7248\u7684 HTML \u7ed3\u6784\u4ece `assets/templates.html` \u91cc\u6284\u5bf9\u5e94\u90a3\u6bb5\uff0c\u628a\u865a\u7ebf\u5360\u4f4d `.ph` \u6362\u6210\u771f\u5185\u5bb9\uff08\u56fe\u7247\u653e\u8fdb `.fig`\uff09\u3002\u5b8c\u6574\u89c4\u5219\u5728 `references/design-system.md`\uff0c\u6392\u7248\u524d\u8bfb\u4e00\u904d\u3002\u8981\u70b9\uff1a\n- \u6807\u9898\u7ec4\u4e0b\u9762\u57ab\u5e95\u76d8\uff08`.stage`\uff09\uff0c\u5361\u7247\u653e\u5728\u5e95\u76d8\u4e0a\uff1b\u89c2\u70b9\u9875\u4e0d\u8981\u5e95\u76d8\n- \u5b57\u53f7\u53ea\u7528\u5b57\u53f7\u8868\u91cc\u7684\u51e0\u6863\uff0c\u4e2d\u6587\u82f9\u65b9\uff0c\u6570\u5b57 Inter\uff0c\u4ee3\u7801 Geist Mono\n- \u6a59\u4e00\u9875\u53ea\u7528\u4e00\u5904\uff08\u680f\u76ee\u6807\u7b7e\u524d\u7684\u5c0f\u5706\u70b9\u4e0d\u7b97\uff09\uff0c\u7eff\u53ea\u8868\u793a\"\u5bf9\u3001\u5b8c\u6210\"\n- \u5361\u7247\u63cf\u8fb9 2\u3001\u5706\u89d2 32\uff0c\u5361\u7247\u91cc\u7684\u5206\u533a\u7528\u7ec6\u7ebf\u9694\u5f00\uff0c\u5361\u7247\u4e4b\u95f4\u7559 24\n- \u622a\u56fe\u653e\u8fdb\u7a97\u53e3\u3001\u624b\u673a\u6216\u56fe\u69fd\uff0c\u770b\u8d77\u6765\u50cf\u5728\u771f\u754c\u9762\u91cc\u663e\u793a\n- \u6df1\u8272\u7248\uff1a`<body data-theme=\"dark\">`\uff0c\u6216\u8005\u6e32\u67d3\u65f6\u52a0 `--theme dark`\uff0c\u7248\u5f0f\u4e0d\u7528\u52a8\n\n**\u56fe\u4e0a\u6587\u6848**\uff1a\u53e3\u8bed\u3001\u5e73\u5b9e\uff0c\u50cf\u719f\u4eba\u8bb2\u7ed9\u719f\u4eba\u542c\u300288 \u53f7\u6807\u9898\u6bcf\u884c\u6700\u591a 8 \u4e2a\u5b57\uff0c64 \u53f7\u6807\u9898\u6bcf\u884c 9 \u4e2a\u5b57\u5de6\u53f3\uff0c\u6700\u591a\u4e24\u884c\uff0c\u7528 `<br>` \u624b\u52a8\u65ad\u884c\uff0c\u4e0d\u7559\u5b64\u5b57\u3002\u526f\u6807\u9898\u4e00\u884c\uff0c20 \u5b57\u4ee5\u5185\uff1b\u5361\u7247\u91cc\u7684\u8bf4\u660e 15 \u5b57\u4ee5\u5185\u3002\u4e0d\u5199\u5148\u5426\u540e\u80af\uff08\"\u4e0d\u662f\u2026\u800c\u662f\u2026\"\uff09\u3001\u6392\u6bd4\u3001\u5192\u53f7\u7ed3\u8bba\u3001\u91d1\u53e5\u7ed3\u5c3e\u3001\u53cd\u8f6c\u3002\u82f1\u6587\u80fd\u4e0d\u7528\u5c31\u4e0d\u7528\u3002\u7528\u6237\u6709\u81ea\u5df1\u7684\u6587\u98ce\u89c4\u5219\u7684\u8bdd\uff0c\u7167\u90a3\u4e2a\u6765\u3002\n\n### 5. \u6e32\u67d3\u548c\u81ea\u67e5\n\n```bash\npython3 <\u8fd9\u4e2a skill \u7684\u76ee\u5f55>/scripts/render.py <\u6587\u4ef6\u5939>/index.html\npython3 <\u8fd9\u4e2a skill \u7684\u76ee\u5f55>/scripts/render.py <\u6587\u4ef6\u5939>/index.html <\u6587\u4ef6\u5939>/\u6df1\u8272 --theme dark\n```\n\n\u811a\u672c\u628a `01.png \u2026 NN.png`\uff081080\u00d71440\uff09\u548c `\u603b\u89c8.png` \u8f93\u51fa\u5230\u540c\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u7b2c\u4e8c\u884c\u662f\u6df1\u8272\u7248\u3002\u5b83\u4f1a\u987a\u5e26\u68c0\u67e5\u8fd9\u4e9b\u95ee\u9898\uff0c\u6709\u5c31\u6253\u5370\u51fa\u6765\uff1a\n- \u6587\u5b57\u6ea2\u51fa\u753b\u5e03\uff0c\u6216\u8005\u8d34\u5230\u4e86\u5e95\u8fb9\n- \u5b57\u53f7\u4e0d\u5728\u5b57\u53f7\u8868\u91cc\uff0c\u5b57\u4f53\u4e0d\u5bf9\n- \u4e00\u9875\u8d85\u8fc7\u4e00\u5904\u6a59\n- \u8fd8\u6709\u6ca1\u6362\u6389\u7684\u5360\u4f4d\n\n\u8981\u5148\u88c5\u597d `playwright`\uff08\u518d\u8dd1\u4e00\u6b21 `playwright install chromium`\uff09\u548c `Pillow`\u3002Inter \u548c Geist Mono \u8981\u8054\u7f51\u4ece Google Fonts \u52a0\u8f7d\uff0c\u6ca1\u52a0\u8f7d\u4e0a\u65f6\u811a\u672c\u4f1a\u63d0\u793a\u3002\u4e2d\u6587\u7528\u82f9\u65b9\uff0c\u4e0d\u5728 Mac \u4e0a\u7684\u8bdd\u4f1a\u9000\u56de\u601d\u6e90\u9ed1\u4f53\uff08Noto Sans SC\uff09\uff0c\u8981\u81ea\u5df1\u88c5\u3002\n\n\u53ef\u9009\u7684\u9875\u9762\u5c5e\u6027\uff1a\n- `data-hover=\".tile:nth-child(2)\"`\uff1a\u622a\u56fe\u524d\u628a\u9f20\u6807\u79fb\u5230\u8fd9\u4e2a\u5143\u7d20\u4e0a\uff0c\u7528\u6765\u62cd\u60ac\u505c\u72b6\u6001\n- `data-wait=\"3000\"`\uff1a\u622a\u56fe\u524d\u591a\u7b49\u4e00\u4f1a\u513f\uff0c\u8ba9\u52a8\u753b\u8dd1\u5b8c\uff08\u9ed8\u8ba4 800 \u6beb\u79d2\uff09\n- \u9875\u5185\u5143\u7d20\u52a0 `data-poke`\uff1a\u622a\u56fe\u524d\u4f1a\u6536\u5230\u4e00\u4e2a `poke` \u4e8b\u4ef6\uff0c\u7528\u6765\u89e6\u53d1\u6f14\u793a\u72b6\u6001\n- \u5143\u7d20\u52a0 `data-art`\uff1a\u8fd9\u662f\u56fe\uff08\u5361\u7247\u6548\u679c\u3001\u622a\u56fe\u3001\u4ee3\u7801\u753b\u7684\u4e1c\u897f\uff09\uff0c\u91cc\u9762\u7684\u5b57\u53f7\u548c\u989c\u8272\u4e0d\u6309\u7248\u5f0f\u89c4\u5219\u67e5\n- \u5143\u7d20\u52a0 `data-accent`\uff1a\u91cc\u9762\u7684\u6a59\u8272\u7b97\u540c\u4e00\u5904\uff0c\u6bd4\u5982\u622a\u56fe\u4e0a\u7684\u7f16\u53f7\u548c\u4e0b\u9762\u5217\u8868\u7684\u7f16\u53f7\n\n\u811a\u672c\u62a5\u7684\u95ee\u9898\u5168\u90e8\u6539\u6389\uff0c\u7136\u540e\u81ea\u5df1\u770b\u4e00\u904d\u6bcf\u9875\u56fe\uff0c\u5bf9\u7740 `references/checklist.md` \u8fc7\u4e00\u904d\u3002\u770b\u5f97\u51fa\u6765\u7684\u95ee\u9898\u81ea\u5df1\u6539\uff0c\u4e0d\u8981\u7559\u7ed9\u7528\u6237\u6311\u3002\n\n### 6. \u4ea4\u4ed8\n\n\u628a `\u603b\u89c8.png` \u548c\u5404\u9875\u53d1\u7ed9\u7528\u6237\uff0c\u8bf4\u4e00\u4e0b\uff1a\n- \u6bcf\u9875\u7528\u4e86\u54ea\u4e2a\u6bcd\u7248\uff0c\u54ea\u9875\u505a\u4e86\u6269\u5c55\uff0c\u4e3a\u4ec0\u4e48\n- \u54ea\u4e9b\u56fe\u662f\u4ee3\u7801\u753b\u7684\uff0c\u54ea\u4e9b\u8fd8\u662f\u5360\u4f4d\uff0c\u7b49\u4ed6\u7ed9\n- \u62ff\u4e0d\u51c6\u3001\u60f3\u8ba9\u4ed6\u770b\u4e00\u773c\u7684\u5730\u65b9\uff0c\u6700\u591a\u4e24\u4e09\u4e2a\n\n## \u6269\u5c55\u7248\u5f0f\n\n20 \u4e2a\u6bcd\u7248\u8986\u76d6\u4e0d\u4e86\u7684\u65f6\u5019\u53ef\u4ee5\u81ea\u5df1\u6392\uff0c\u7528 `xhs.css` \u91cc\u73b0\u6210\u7684\u5361\u7247\u3001\u884c\u3001\u96f6\u4ef6\u62fc\u3002\u65b0\u6392\u6cd5\u53ea\u80fd\u7528\u540c\u4e00\u5957\u989c\u8272\u3001\u5b57\u53f7\u3001\u9634\u5f71\u548c\u5706\u89d2\uff0c`data-layout` \u5199\u6210 `\u6269\u5c55 \u00b7 \u65f6\u95f4\u8f74\u5bf9\u6bd4` \u8fd9\u6837\u3002\u540c\u4e00\u79cd\u6269\u5c55\u7528\u987a\u4e86\u4e24\u6b21\u4ee5\u4e0a\uff0c\u5c31\u5efa\u8bae\u7528\u6237\u628a\u5b83\u6536\u8fdb\u7248\u5f0f\u5e93\uff08`templates.html` \u548c `layouts.md`\uff09\u3002\n\n## \u6587\u4ef6\n\n- `references/design-system.md`\uff1a\u989c\u8272\u3001\u5b57\u53f7\u3001\u5e95\u76d8\u3001\u5361\u7247\u7684\u56fa\u5b9a\u89c4\u5219\uff0c\u4ee5\u53ca\u54ea\u4e9b\u5730\u65b9\u53ef\u4ee5\u653e\u5f00\u3002\u6392\u7248\u524d\u8bfb\n- `references/layouts.md`\uff1a20 \u4e2a\u6bcd\u7248\u5404\u9002\u5408\u4ec0\u4e48\u3001\u600e\u4e48\u53d8\uff0c\u4ee5\u53ca\u5e38\u89c1\u9875\u5e8f\u3002\u9009\u6bcd\u7248\u65f6\u8bfb\n- `references/figures.md`\uff1a\u4ee3\u7801\u753b\u56fe\u7684\u98ce\u683c\u548c\u505a\u6cd5\u3002\u753b\u56fe\u524d\u8bfb\n- `references/checklist.md`\uff1a\u4ea4\u4ed8\u524d\u81ea\u67e5\n- `assets/xhs.css`\u3001`assets/xhs.js`\u3001`assets/templates.html`\uff1a\u7248\u5f0f\u5e93\uff08\u6837\u5f0f\u3001\u56fe\u6807\u300120 \u4e2a\u6bcd\u7248\u7684 HTML\uff09\n- `assets/\u7248\u5f0f\u603b\u89c8.png`\u3001`assets/\u7248\u5f0f\u603b\u89c8-\u6df1\u8272.png`\uff1a20 \u4e2a\u6bcd\u7248\u957f\u4ec0\u4e48\u6837\n- `assets/starter.html`\uff1a\u65b0\u4e00\u671f\u7684\u8d77\u59cb\u9875\n- `assets/figure-kit.js`\uff1a\u753b\u56fe\u7528\u7684\u5c0f\u5de5\u5177\n- `scripts/render.py`\uff1a\u6e32\u67d3\u3001\u68c0\u67e5\u3001\u51fa\u603b\u89c8\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"}