{"slug":"chengfeng-visual","title":"\u53e3\u64ad\u753b\u9762\u5305\u88c5","description":"\u5728\u5f55\u5c4f\u4e0a\u53e0\u52a0 HTML \u753b\u9762\u5c42\uff1a\u5708\u91cd\u70b9\u3001\u6574\u5c4f\u52a8\u753b\u3001\u63a8\u8fd1\uff0c\u968f\u5b57\u5e55\u4e0e\u64ad\u653e\u5668\u9010\u5e27\u9a71\u52a8\u3002","category":"\u526a\u8f91\u4e0e\u5305\u88c5","tags":["\u753b\u9762","\u52a8\u753b","\u5305\u88c5"],"author":"\u4e58\u98ce","source_url":"https://github.com/Agentchengfeng/chengfeng-videocut-skills/blob/main/plugins/chengfeng-videocut/skills/chengfeng-visual/SKILL.md","license":"Apache-2.0","status":"published","verification":"source_reviewed","verification_notes":"\u6765\u6e90 Agentchengfeng/chengfeng-videocut-skills\uff08plugins/chengfeng-videocut/skills/chengfeng-visual/SKILL.md\uff09\uff0c\u672c\u5730\u6253\u5305\u4e0a\u4f20\uff1b\u672a\u6267\u884c\u5305\u5185\u811a\u672c\u3002","revision":"c284b0523b7741bf82b678862d367ca6","created_at":"2026-10-28T08:05:01+00:00","updated_at":"2026-10-28T08:05:16+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/chengfeng-visual","skill_url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/SKILL.md","download_url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/download","install_url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/install","files":[{"path":"SKILL.md","bytes":5448,"url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/SKILL.md"},{"path":"agents/openai.yaml","bytes":434,"url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/agents/openai.yaml"},{"path":"animation-styles/styles.json","bytes":533,"url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/animation-styles/styles.json"},{"path":"references/visual-judgment.md","bytes":1988,"url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/references/visual-judgment.md"},{"path":"references/visual-module-contract.md","bytes":3021,"url":"https://shiliuai.cn/api/v2/skills/chengfeng-visual/files/references/visual-module-contract.md"}],"content":"---\nname: chengfeng-visual\ndescription: \u7ed9\u526a\u597d\u7684\u53e3\u64ad\u914d\u753b\u9762\uff1a\u5728\u5f55\u5c4f\u4e0a\u76d6 HTML \u5c42\uff08\u5708\u91cd\u70b9\u6807\u6ce8 / \u5c0f\u9ed1\u6574\u5c4f\u52a8\u753b / \u63a8\u8fd1\uff09\uff0c\u5c42\u7ed1\u5b57\u5e55\u5c4f\u3001\u7531\u64ad\u653e\u5668\u9010\u5e27\u9a71\u52a8\u3001\u76f4\u63a5\u5728\u9884\u89c8\u91cc\u770b\u3002\u7528\u6237\u8bf4\u505a\u5206\u955c\u3001\u914d\u753b\u9762\u3001\u52a0\u52a8\u753b\u3001\u5708\u91cd\u70b9\u3001B-roll\u3001\u505a storyboard \u65f6\u4f7f\u7528\u3002\u4e0d\u8981\u7528\u4e8e\u5220\u8bcd\u526a\u8f91\u3001\u5b57\u5e55\u3001\u7269\u7406\u526a\u5207\u6216\u6210\u7247\u6e32\u67d3\u3002\nuser-invocable: true\n---\n\n# \u753b\u9762\uff08\u5206\u955c\uff09\n\n**\u8fd9\u662f\u4e00\u4ef6\u4e8b\uff0c\u4e0d\u662f\u6d41\u7a0b\u7684\u4e00\u6bb5\u3002** \u7528\u6237\u4ec0\u4e48\u65f6\u5019\u558a\u5b83\u5c31\u4ec0\u4e48\u65f6\u5019\u505a\uff0c\u6539\u5b8c\u526a\u8f91\u53ef\u4ee5\u56de\u6765\u518d\u505a\u3002\n\n\u524d\u63d0\u53ea\u6709\u4e24\u4e2a\uff1a**\u8d26\u672c\u548c\u5b57\u5e55\u5df2\u7ecf\u5b58\u5728**\uff08\u5c42\u6309\u5b57\u5e55\u5c4f\u653e\u3001\u65f6\u95f4\u4ece\u8d26\u672c\u7b97\uff09\u3002\n\n```text\n\u9700\u8981   edit-list.json\u3001transcript.json\u3001subtitles.json\n\u4ea7\u51fa   visuals.json + modules/<\u5e8f\u53f7-\u540d\u5b57>/index.html\n```\n\n\u5e72\u5b8c\u5c31\u505c\uff0c**\u4e0d\u6307\u6325\u7528\u6237\u4e0b\u4e00\u6b65**\u3002\n\n\u5148\u8bfb\u53d6\u5e76\u6267\u884c [\u4e1a\u52a1 Skill \u7684\u9636\u6bb5\u5408\u540c](../../references/business-workflow-contract.md)\u3002\n\u6a21\u5757\u5199\u6cd5\u7684\u786c\u89c4\u77e9\u89c1 [\u6a21\u5757\u5951\u7ea6](references/visual-module-contract.md)\uff0c\n\u5224\u65ad\u89c4\u5219\u89c1 [\u753b\u9762\u5224\u65ad](references/visual-judgment.md)\u3002\n\n## 0. \u5c31\u7eea\n\n\u5148\u6267\u884c [\u68c0\u67e5\u66f4\u65b0](../chengfeng-check-updates/SKILL.md) \u7684\u300c\u5c31\u7eea\u68c0\u67e5\u300d\u2014\u2014skills \u662f\u5426\n\u6700\u65b0\u3001Runtime \u662f\u5426\u914d\u5957\uff1b**\u63d2\u4ef6\u6839**\u4e5f\u5728\u90a3\u91cc\u5b9a\u4f4d\uff08\u672c\u6587\u547d\u4ee4\u91cc\u7684 `<\u63d2\u4ef6\u6839>` \u90fd\u4ee3\u5165\n\u90a3\u4e2a\u5b57\u9762\u8def\u5f84\uff09\u3002\u53ea\u6709\u300c\u5c31\u7eea\u300d\u624d\u7ee7\u7eed\uff1b\u300c\u9700\u65b0\u4f1a\u8bdd\u300d\u6216\u300c\u505c\u300d\u6309\u5b83\u7684\u5904\u7f6e\u6267\u884c\n\uff08\u542b\u300c\u7981\u6b62\u81ea\u5236\u66ff\u4ee3\u754c\u9762\u300d\u7981\u4ee4\uff09\uff0c\u4e1a\u52a1 Skill \u4e0d\u81ea\u5e26\u73af\u5883\u903b\u8f91\u3002\n\n\u82e5\u5c31\u7eea\u7ed3\u679c\u4e3a `runtime.kind=desktop-managed`\uff0c\u76f4\u63a5\u590d\u7528\u684c\u9762 App \u5df2\u5b89\u88c5\u7684\u7a33\u5b9a CLI \u4e0e\n\u540c\u4e00 `launchd/windows-task` \u670d\u52a1\uff1b\u4e0d\u8981\u89e3\u6790 Electron \u8def\u5f84\u3001\u53e6\u88c5\u4f9d\u8d56\u6216\u8d77\u7b2c\u4e8c\u4e2a\nRuntime\u3002\n\n## \u547d\u4ee4\n\n```bash\nnode \"<\u63d2\u4ef6\u6839>/scripts/ensure-running.cjs\" --json\nnode \"<\u63d2\u4ef6\u6839>/scripts/videocut-cli.cjs\" visual get   <project> --json\nnode \"<\u63d2\u4ef6\u6839>/scripts/videocut-cli.cjs\" visual frame <project> --cues sub-0004,sub-0005 --count 12 --out <dir> --json\nnode \"<\u63d2\u4ef6\u6839>/scripts/videocut-cli.cjs\" visual add   <project> --module modules/01-xx/index.html --cues sub-0004,sub-0005 [--zoom x,y,w,h] [--id vis-0001] --json\nnode \"<\u63d2\u4ef6\u6839>/scripts/videocut-cli.cjs\" visual remove <project> --id vis-0001 --json\n```\n\n`ensure-running` \u5fc5\u987b\u5148\u8bc1\u660e canonical 5190 \u5c5e\u4e8e\u5f53\u524d\u5e73\u53f0\u7684\u6258\u7ba1\u670d\u52a1\uff1b\u5931\u8d25\u5c31\u900f\u4f20\u5e76\n\u505c\u6b62\uff0c\u4e0d\u56de\u9000 foreground \u6216\u81ea\u9009\u7aef\u53e3\u3002\n\n\u5c42\u7ed1**\u5b57\u5e55\u5c4f**\uff08`--cues`\uff09\uff0c\u4ea7\u54c1\u81ea\u5df1\u6362\u7b97\u6210\u8bcd id\u2014\u2014\u5c42\u6c38\u8fdc\u4e0d\u53ef\u80fd\u7ed1\u4e0a\u6ca1\u4eba\u8bf4\u7684\u8bcd\uff0c\n\u526a\u8f91\u53d8\u4e86\u5c42\u81ea\u5df1\u8ddf\u7740\u632a\u3002**\u4e0d\u5b58\u79d2\u6570\u3002**\n\n## \u56db\u6b65\uff0c\u4e00\u6b65\u4e0d\u8df3\n\n```text\n\u2460 \u6587\u5b57\u5b9a\u4efb\u52a1    \u8bfb subtitles.json\uff0c\u6309\u8bed\u4e49\u5206\u6bb5\uff0c\u6bcf\u6bb5\u56de\u7b54\uff1a\n               \u6559\u7a0b/\u6f14\u793a/\u8bc1\u660e\uff0c\u8fd8\u662f\u6982\u5ff5/\u903b\u8f91/\u8fc7\u6e21\uff1f\n\u2461 \u62bd\u5e27\u770b\u753b\u9762    visual frame \u62bd 8-12 \u5e27\uff0c\u771f\u7684\u7528\u773c\u775b\u770b\u3002\n               \u5b9e\u6d4b 12 \u6bb5\u91cc\u6709 2 \u6bb5\u88ab\u753b\u9762\u63a8\u7ffb\u6587\u5b57\u9884\u5224 \u2014\u2014 \u8fd9\u6b65\u4e0d\u662f\u8d70\u5f62\u5f0f\n\u2462 \u91cf\u8fd0\u52a8\u7a97\u53e3    \u76f8\u90bb\u5e27\u505a\u50cf\u7d20\u5dee\uff0c\u627e\u51fa\u6eda\u52a8/\u5207\u6362/\u64cd\u4f5c\u7684\u65f6\u523b\u3002\n               \u5c42\u53ea\u76d6\u7a33\u5b9a\u7a97\u53e3\uff0c\u5708\u5728\u753b\u9762\u5f00\u59cb\u52a8\u4e4b\u524d\u9000\u573a\n\u2463 \u505a\u5c42\u653e\u5c42     \u5199\u6a21\u5757 \u2192 visual add \u2192 \u5728\u9884\u89c8\u91cc\u9010\u5c42\u6838\u5bf9\n```\n\n### \u2461 \u7684\u5224\u65ad\u89c4\u5219\n\n```text\n\u753b\u9762\u6b63\u662f\u4ed6\u8bf4\u7684\u4e1c\u897f     \u2192 \u6807\u6ce8\uff1a\u5708\u4f4f\u3001\u8bf4\u5230\u54ea\u4e2a\u8bcd\u5708\u54ea\u91cc\u3002\u771f\u8bc1\u636e\u4e0d\u8bb8\u76d6\n\u753b\u9762\u5f31\u76f8\u5173/\u7a7a\u767d       \u2192 \u5c0f\u9ed1\u52a8\u753b\uff1a\u6574\u5c4f\u767d\u5e95\uff0c\u4ece\u98ce\u683c\u5e93\u505a\n\u753b\u9762\u81ea\u8eab\u8db3\u591f\u6e05\u695a      \u2192 \u4e0d\u52a8\u3002\u8fd9\u662f\u6700\u5e38\u89c1\u7684\u6b63\u786e\u7b54\u6848\uff08\u5b9e\u6d4b 13 \u6bb5\u91cc 4 \u6bb5\u4e0d\u52a8\uff09\n```\n\n### \u2462 \u7684\u4ea7\u51fa\u7269\u662f\u6570\u5b57\uff0c\u4e0d\u662f\u611f\u89c9\n\n```text\n\u5708\u7684\u5750\u6807      \u50cf\u7d20\u7edf\u8ba1\u91cf\u51fa\u6765\uff08\u7070\u5ea6\u626b\u63cf\u627e\u6587\u5b57\u884c\uff09\uff0c\u4e0d\u8bb8\u76ee\u6d4b \u2014\u2014 \u76ee\u6d4b\u5dee\u8fc7 50px\n\u4e92\u52a8\u65f6\u523b      \u9010\u5e27\u50cf\u7d20\u5dee\u627e\u7a81\u53d8\uff08\u5b9e\u6d4b\u4e00\u6b21\u4ece 4 \u8df3\u5230 335\uff09\uff0c\u5708\u5728\u5b83\u4e4b\u524d 0.2s \u9000\u5b8c\n\u7a33\u5b9a\u7a97\u53e3      \u5f00\u5934\u5e38\u6709\u6eda\u52a8\uff08\u4ed6\u5728\u627e\u5185\u5bb9\uff09\uff0c\u5c42\u4ece\u505c\u7a33\u90a3\u5c4f\u7684 cue \u5f00\u59cb\u7ed1\n```\n\n## \u63a8\u8fd1\uff08zoom\uff09\u7528\u4e4b\u524d\u5148\u60f3\n\n```text\n\u9ed8\u8ba4\u4e0d\u63a8\u8fd1\u3002   960x720 \u7684\u5f55\u5c4f\u653e\u5927\u5c31\u7cca\uff0c\u7528\u6237\u4f1a\u7acb\u523b\u770b\u51fa\u6765\n\u975e\u63a8\u4e0d\u53ef\u65f6     \u22641.6 \u500d\u3001\u533a\u57df\u53d6 62.5% \u89c1\u65b9\u5c45\u4e2d \u2014\u2014 \u6784\u56fe\u5b8c\u6574 > \u8bfb\u6e05\u5c0f\u5b57\n\u5b57\u592a\u5c0f\u8bfb\u4e0d\u6e05   \u7528\u5708\u5f15\u5bfc\u89c6\u7ebf\u5c31\u591f\u4e86\uff1b\u771f\u8981\u8bfb\u6e05\uff0c\u7b54\u6848\u662f\u9ad8\u5206\u8fa8\u7387\u91cd\u5f55\uff0c\u4e0d\u662f\u653e\u5927\n```\n\n## \u5ba1\u9605\u5faa\u73af\n\n\u6a21\u5757\u76ee\u5f55\u7528**\u5e8f\u53f7\u547d\u540d**\uff08`01-daily-report`\u3001`05-anim-task-split`\uff09\uff0c\n\u65f6\u95f4\u7ebf\u8f68\u9053\u4e0a\u663e\u793a\u76ee\u5f55\u540d\uff0c\u7528\u6237\u62a5\u53f7\u4f60\u6539\u90a3\u4e00\u5c42\uff0c\u522b\u7684\u4e0d\u52a8\u3002\n\n\u4e24\u6761\u6539\u5c42\u7eaa\u5f8b\uff0c\u5404\u5bf9\u5e94\u4e00\u6b21\u771f\u4e8b\u6545\uff1a\n\n```text\n\u6539\u5c42\u5fc5\u67e5\u6a21\u5757     \u5c42\u6536\u7a84/\u5ef6\u957f\u540e\uff0c\u6a21\u5757\u91cc\u5199\u6b7b\u7684\u76f8\u5bf9\u65f6\u523b\u4e0d\u4f1a\u8ddf\u7740\u53d8 \u2014\u2014\n                \u5708\u7684\u51fa\u573a\u65f6\u523b\u53ef\u80fd\u843d\u5230\u5c42\u7ed3\u675f\u4e4b\u540e\uff0c\u6c38\u8fdc\u4e0d\u51fa\u73b0\n\u9a8c\u6536\u770b\u50cf\u7d20      \u622a\u56fe\u770b\u753b\u9762\uff0c\u4e0d\u67e5 DOM \u5c5e\u6027\u3002\u300c\u53ef\u89c1\u6027\u7ffb\u8f6c\u6b63\u786e\u300d\u7684 iframe\n                \u66fe\u7ecf\u7269\u7406\u4e0a\u4e0d\u5728\u753b\u9762\u91cc \u2014\u2014 \u5c5e\u6027\u5168\u5bf9\u3001\u5c4f\u5e55\u5168\u7a7a\n```\n\n## \u4e0d\u8bb8\u505a\u4ec0\u4e48\n\n- \u4e0d\u8bb8\u8df3\u8fc7\u62bd\u5e27\u548c\u8fd0\u52a8\u7a97\u53e3\u76f4\u63a5\u505a\uff08\u4e24\u79cd\u9519\u5404\u72af\u8fc7\u4e00\u6b21\uff1a\u76d6\u6389\u771f\u8bc1\u636e\u3001\u5708\u60ac\u5728\u6eda\u52a8\u4e0a\uff09\n- \u4e0d\u8bb8\u628a\u6bcf\u6bb5\u90fd\u505a\u70b9\u4ec0\u4e48\u2014\u2014\u94fa\u6ee1\u4e0d\u662f\u76ee\u6807\uff0c\u4e0d\u52a8\u662f\u5e38\u89c1\u7b54\u6848\n- \u4e0d\u8bb8\u5b58\u79d2\u6570\u3001\u4e0d\u8bb8\u76ee\u6d4b\u5750\u6807\u3001\u4e0d\u8bb8\u5728\u767d\u5e95\u9875\u9762\u4e0a\u52a0\u538b\u6697\n- \u6ca1\u6709\u771f\u5b9e\u5185\u5bb9\u4e0d\u8bb8\u62ff\u5360\u4f4d\u56fe\u5145\u6570\n- \u98ce\u683c\u4ece\u6ce8\u518c\u8868\u9009\uff0c\u4e0d\u5f97\u51ed\u7a7a\u53d1\u660e\n- **\u54c1\u724c\u56fe\u6807\u7528\u5b98\u65b9\u5b57\u5f62\uff0c\u4e0d\u8bb8\u624b\u753b\u66ff\u8eab**\uff08X \u7528\u4e24\u7b14\u4ea4\u53c9\u7ebf\u753b\u8fc7\uff0c\u88ab\u7528\u6237\u6293\u4e86\uff09\u3002\n  \u672c\u5730\u7d22\u5f15\u6ca1\u6709\u7684\uff0c\u4ece simple-icons \u53d6\u5355\u8272\u5b98\u65b9 glyph\uff08\u9ed1\u767d\u98ce\u683c\u6b63\u597d\u914d\uff09\uff0c\n  \u539f svg \u5b58\u8fdb\u6a21\u5757\u76ee\u5f55\u5907\u67e5\uff1b\u540c\u4e00\u6761\u7247\u91cc\u540c\u4e00\u54c1\u724c\u53ea\u80fd\u957f\u4e00\u4e2a\u6837\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"}