{"id":38001,"date":"2026-03-25T00:55:46","date_gmt":"2026-03-24T17:55:46","guid":{"rendered":"https:\/\/dps.media\/?p=38001"},"modified":"2026-03-25T00:59:02","modified_gmt":"2026-03-24T17:59:02","slug":"%e7%94%a8-remotion-%e5%88%b6%e4%bd%9c%e8%a7%86%e9%a2%91%e4%b8%8e-agentic-coding","status":"publish","type":"post","link":"https:\/\/dps.media\/zh\/%e7%94%a8-remotion-%e5%88%b6%e4%bd%9c%e8%a7%86%e9%a2%91%e4%b8%8e-agentic-coding\/","title":{"rendered":"\u4f7f\u7528 Agentic Coding \u548c Remotion \u5236\u4f5c\u89c6\u9891"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><style>\n#dps-isolated-root * { margin: 0; padding: 0; box-sizing: border-box; font-family: inherit; }\n\n#dps-isolated-root {\n  font-family: 'Google Sans', 'Product Sans', 'Segoe UI', sans-serif;\n  background: #f8f6f1;\n  color: #1a1a1a;\n  min-height: 100vh;\n  line-height: 1.6;\n}\n#dps-isolated-root .dps-i-hero {\n  background: #fff;\n  border-bottom: 1px solid #e8e3d8;\n  padding: 56px 40px 48px;\n  position: relative;\n  overflow: hidden;\n}\n#dps-isolated-root .dps-i-hero::before {\n  content: '';\n  position: absolute;\n  top: -80px; right: -80px;\n  width: 320px; height: 320px;\n  background: radial-gradient(circle, rgba(255,107,43,0.1) 0%, transparent 70%);\n  border-radius: 50%;\n  pointer-events: none;\n}\n#dps-isolated-root .dps-i-hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }\n#dps-isolated-root .dps-i-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff3ee;\n  color: #e8530a;\n  border: 1px solid #ffd5bf;\n  border-radius: 100px;\n  padding: 4px 14px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  margin-bottom: 22px;\n}\n#dps-isolated-root .dps-i-hero-title {\n  font-size: clamp(1.8rem, 4.5vw, 3rem);\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  line-height: 1.15;\n  color: #0f0f0f;\n  margin-bottom: 16px;\n}\n#dps-isolated-root .dps-i-accent { color: #e8530a; }\n#dps-isolated-root .dps-i-hero-sub {\n  font-size: 1rem;\n  color: #555;\n  max-width: 540px;\n  line-height: 1.75;\n  margin-bottom: 32px;\n}\n#dps-isolated-root .dps-i-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }\n#dps-isolated-root .dps-i-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 7px 14px;\n  border-radius: 100px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid #e0dbd0;\n  background: #fafaf8;\n  color: #555;\n}\n#dps-isolated-root .dps-i-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #e8530a;\n  color: #fff;\n  border: none;\n  border-radius: 10px;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  letter-spacing: 0.01em;\n  transition: background 0.15s, transform 0.12s;\n}\n#dps-isolated-root .dps-i-copy-btn:hover { background: #c94408; transform: translateY(-1px); }\n#dps-isolated-root .dps-i-copy-btn.dps-i-copied { background: #1a8a4a; }\n#dps-isolated-root .dps-i-main { max-width: 860px; margin: 0 auto; padding: 0 40px 80px; }\n#dps-isolated-root .dps-i-section { margin-top: 52px; }\n#dps-isolated-root .dps-i-section-label {\n  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;\n  text-transform: uppercase; color: #e8530a; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-section-title {\n  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;\n  color: #0f0f0f; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-section-desc { font-size: 0.92rem; color: #666; margin-bottom: 24px; line-height: 1.75; }\n#dps-isolated-root .dps-i-inline-code {\n  font-family: 'Fira Mono', 'Consolas', monospace;\n  background: #f0ece4; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #444;\n}\n#dps-isolated-root .dps-i-cards-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;\n}\n#dps-isolated-root .dps-i-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; padding: 20px 18px;\n  transition: box-shadow 0.18s, border-color 0.18s;\n}\n#dps-isolated-root .dps-i-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-color: #d5cfc4; }\n#dps-isolated-root .dps-i-card-icon {\n  width: 38px; height: 38px; background: #fff3ee; border-radius: 10px;\n  display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px;\n}\n#dps-isolated-root .dps-i-card-title { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; }\n#dps-isolated-root .dps-i-card-desc { font-size: 0.82rem; color: #888; line-height: 1.6; }\n#dps-isolated-root .dps-i-steps { display: flex; flex-direction: column; }\n#dps-isolated-root .dps-i-step { display: flex; gap: 18px; position: relative; }\n#dps-isolated-root .dps-i-step-connector {\n  position: absolute; left: 19px; top: 52px; bottom: 0;\n  width: 2px; background: linear-gradient(to bottom, rgba(232,83,10,0.2), transparent);\n}\n#dps-isolated-root .dps-i-step-num {\n  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;\n  background: #e8530a; color: #fff; font-size: 14px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  margin-top: 18px; position: relative; z-index: 1;\n}\n#dps-isolated-root .dps-i-step-body {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 16px 18px; flex: 1; margin-bottom: 10px;\n}\n#dps-isolated-root .dps-i-step-title { font-size: 0.92rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }\n#dps-isolated-root .dps-i-step-desc { font-size: 0.82rem; color: #888; line-height: 1.6; }\n#dps-isolated-root .dps-i-step-tag {\n  display: inline-block; margin-top: 8px;\n  background: #f8f6f1; border: 1px solid #e8e3d8; border-radius: 6px;\n  padding: 2px 8px; font-size: 11px; font-weight: 600; color: #888;\n  font-family: 'Fira Mono', monospace;\n}\n#dps-isolated-root .dps-i-timeline {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; overflow: hidden;\n}\n#dps-isolated-root .dps-i-timeline-row {\n  display: flex; align-items: stretch; border-bottom: 1px solid #f0ece4;\n}\n#dps-isolated-root .dps-i-timeline-row:last-child { border-bottom: none; }\n#dps-isolated-root .dps-i-timeline-time {\n  flex-shrink: 0; width: 88px; background: #f8f6f1;\n  font-size: 12px; font-weight: 700; color: #e8530a;\n  display: flex; align-items: center; justify-content: center;\n  padding: 18px 8px; border-right: 1px solid #f0ece4;\n  letter-spacing: 0.03em; font-family: 'Fira Mono', monospace;\n}\n#dps-isolated-root .dps-i-timeline-content { padding: 16px 20px; flex: 1; }\n#dps-isolated-root .dps-i-timeline-label { font-weight: 700; font-size: 13px; color: #1a1a1a; margin-bottom: 4px; }\n#dps-isolated-root .dps-i-timeline-desc { font-size: 0.83rem; color: #888; line-height: 1.55; }\n#dps-isolated-root .dps-i-code-group { display: flex; flex-direction: column; gap: 8px; }\n#dps-isolated-root .dps-i-code-row { background: #161616; border-radius: 12px; overflow: hidden; }\n#dps-isolated-root .dps-i-code-header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 8px 16px; background: #0f0f0f; border-bottom: 1px solid #2a2a2a;\n}\n#dps-isolated-root .dps-i-code-label {\n  font-size: 11px; font-weight: 600; color: #888;\n  text-transform: uppercase; letter-spacing: 0.08em;\n}\n#dps-isolated-root .dps-i-code-copy-btn {\n  font-size: 11px; font-weight: 600; color: #aaa; background: none;\n  border: 1px solid #444; border-radius: 5px; padding: 3px 10px; cursor: pointer;\n  transition: color 0.12s, border-color 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-code-copy-btn:hover { color: #fff; border-color: #888; }\n#dps-isolated-root .dps-i-code-body {\n  padding: 14px 18px; font-family: 'Fira Mono', 'Consolas', monospace;\n  font-size: 13px; color: #d4c9b5; line-height: 1.75; white-space: pre; overflow-x: auto;\n}\n#dps-isolated-root .dps-i-kw { color: #7dd3a8; }\n#dps-isolated-root .dps-i-cmt { color: #555; }\n#dps-isolated-root .dps-i-str { color: #f9b26a; }\n#dps-isolated-root .dps-i-asset-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;\n}\n#dps-isolated-root .dps-i-asset-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 18px 14px; text-align: center; transition: box-shadow 0.15s;\n}\n#dps-isolated-root .dps-i-asset-card:hover { box-shadow: 0 3px 16px rgba(0,0,0,0.06); }\n#dps-isolated-root .dps-i-asset-type {\n  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;\n  text-transform: uppercase; color: #e8530a; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-asset-title { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }\n#dps-isolated-root .dps-i-asset-desc { font-size: 0.78rem; color: #999; }\n#dps-isolated-root .dps-i-checklist {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; overflow: hidden;\n}\n#dps-isolated-root .dps-i-check-item {\n  display: flex; align-items: flex-start; gap: 12px;\n  padding: 14px 20px; border-bottom: 1px solid #f4f0e8;\n  cursor: pointer; transition: background 0.1s;\n}\n#dps-isolated-root .dps-i-check-item:last-child { border-bottom: none; }\n#dps-isolated-root .dps-i-check-item:hover { background: #fafaf8; }\n#dps-isolated-root .dps-i-check-box {\n  flex-shrink: 0; width: 20px; height: 20px; border: 2px solid #d8d3c8;\n  border-radius: 5px; margin-top: 1px; display: flex; align-items: center;\n  justify-content: center; transition: background 0.12s, border-color 0.12s;\n  font-size: 12px; color: #fff;\n}\n#dps-isolated-root .dps-i-check-item.dps-i-chk .dps-i-check-box { background: #1a8a4a; border-color: #1a8a4a; }\n#dps-isolated-root .dps-i-check-text { font-size: 0.88rem; color: #333; line-height: 1.5; }\n#dps-isolated-root .dps-i-check-item.dps-i-chk .dps-i-check-text { text-decoration: line-through; color: #bbb; }\n#dps-isolated-root .dps-i-bench-table {\n  width: 100%; border-collapse: collapse; background: #fff;\n  border-radius: 12px; overflow: hidden; border: 1px solid #e8e3d8;\n}\n#dps-isolated-root .dps-i-th {\n  background: #f8f6f1; padding: 11px 16px; text-align: left;\n  font-weight: 700; color: #666; font-size: 11px;\n  text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid #e8e3d8;\n}\n#dps-isolated-root .dps-i-td {\n  padding: 11px 16px; border-bottom: 1px solid #f4f0e8; color: #333; font-size: 0.88rem;\n}\n#dps-isolated-root .dps-i-tr:last-child .dps-i-td { border-bottom: none; }\n#dps-isolated-root .dps-i-best { color: #1a8a4a; font-weight: 700; }\n#dps-isolated-root .dps-i-bar-wrap {\n  background: #f0ece4; border-radius: 100px; height: 5px;\n  overflow: hidden; width: 100%; min-width: 60px;\n}\n#dps-isolated-root .dps-i-bar-fill {\n  height: 100%; border-radius: 100px;\n  background: linear-gradient(90deg, #1a8a4a, #7dd3a8);\n}\n#dps-isolated-root .dps-i-bar-slow { background: linear-gradient(90deg, #e8530a, #f9b26a) !important; }\n#dps-isolated-root .dps-i-rules-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;\n}\n#dps-isolated-root .dps-i-rule-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start;\n}\n#dps-isolated-root .dps-i-rule-dot {\n  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;\n  background: #e8530a; margin-top: 6px;\n}\n#dps-isolated-root .dps-i-rule-text { font-size: 0.86rem; color: #444; line-height: 1.6; }\n#dps-isolated-root .dps-i-rule-bold { font-weight: 700; color: #1a1a1a; }\n#dps-isolated-root .dps-i-modal-overlay {\n  position: fixed; inset: 0; background: rgba(0,0,0,0.5);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 9999; padding: 20px;\n  opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n#dps-isolated-root .dps-i-modal-overlay.dps-i-open { opacity: 1; pointer-events: all; }\n#dps-isolated-root .dps-i-modal {\n  background: #fff; border-radius: 16px; padding: 28px;\n  max-width: 640px; width: 100%;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.2);\n  transform: translateY(16px); transition: transform 0.2s;\n  max-height: 85vh; overflow-y: auto;\n}\n#dps-isolated-root .dps-i-modal-overlay.dps-i-open .dps-i-modal { transform: translateY(0); }\n#dps-isolated-root .dps-i-modal-header {\n  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;\n}\n#dps-isolated-root .dps-i-modal-title { font-size: 1.1rem; font-weight: 700; color: #0f0f0f; }\n#dps-isolated-root .dps-i-modal-close {\n  width: 32px; height: 32px; border: none; background: #f4f0e8;\n  border-radius: 8px; cursor: pointer; font-size: 18px;\n  display: flex; align-items: center; justify-content: center;\n  color: #666; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-modal-close:hover { background: #ede8de; }\n#dps-isolated-root .dps-i-modal-desc {\n  font-size: 0.87rem; color: #666; margin-bottom: 14px; line-height: 1.65;\n}\n#dps-isolated-root .dps-i-modal-textarea {\n  width: 100%; background: #f8f6f1; border: 1px solid #e8e3d8;\n  border-radius: 10px; padding: 14px 16px;\n  font-size: 12.5px; font-family: 'Fira Mono', monospace;\n  color: #333; line-height: 1.65; resize: vertical;\n  min-height: 210px; margin-bottom: 14px; outline: none;\n}\n#dps-isolated-root .dps-i-modal-textarea:focus { border-color: #e8530a; }\n#dps-isolated-root .dps-i-modal-footer { display: flex; justify-content: flex-end; gap: 10px; }\n#dps-isolated-root .dps-i-btn-secondary {\n  padding: 10px 20px; border: 1px solid #e0dbd0; background: #fff;\n  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;\n  color: #555; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-btn-secondary:hover { background: #f8f6f1; }\n#dps-isolated-root .dps-i-btn-primary {\n  padding: 10px 20px; background: #e8530a; border: none;\n  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;\n  color: #fff; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-btn-primary:hover { background: #c94408; }\n#dps-isolated-root .dps-i-btn-primary.dps-i-copied { background: #1a8a4a; }\n#dps-isolated-root .dps-i-footer {\n  border-top: 1px solid #e8e3d8; background: #fff; padding: 28px 40px; margin-top: 56px;\n}\n#dps-isolated-root .dps-i-footer-inner {\n  max-width: 860px; margin: 0 auto;\n  display: flex; flex-wrap: wrap; align-items: center;\n  justify-content: space-between; gap: 10px;\n}\n#dps-isolated-root .dps-i-footer-brand { font-weight: 800; font-size: 1rem; color: #e8530a; }\n#dps-isolated-root .dps-i-footer-meta { font-size: 12px; color: #bbb; }\n@media (max-width: 600px) {\n  #dps-isolated-root .dps-i-hero { padding: 36px 20px 32px; }\n  #dps-isolated-root .dps-i-main { padding: 0 20px 60px; }\n  #dps-isolated-root .dps-i-footer { padding: 24px 20px; }\n  #dps-isolated-root .dps-i-timeline-time { width: 66px; font-size: 11px; }\n}\n<\/style><div id=\"dps-isolated-root\">\n\n  <div class=\"dps-i-hero\">\n    <div class=\"dps-i-hero-inner\">\n      <div class=\"dps-i-badge\" aria-label=\"DPS Video Agent \u5fbd\u7ae0\">\n        <span aria-hidden=\"true\">\ud83c\udfac<\/span> DPS \u89c6\u9891 Agent \u64cd\u4f5c\u624b\u518c\n      <\/div>\n      <div class=\"dps-i-hero-title\">\n        \u5236\u4f5c\u89c6\u9891\u4f7f\u7528 <span class=\"dps-i-accent\">Remotion<\/span><br>\u53ca Agentic Coding\n      <\/div>\n      <div class=\"dps-i-hero-sub\">\n        Remotion \u65b0\u624b\u6807\u51c6\u6307\u5357\uff1a\u5b9e\u73b0\u77ed\u89c6\u9891\u751f\u4ea7\u81ea\u52a8\u5316\u6807\u51c6 <a class=\"wpil_keyword_link\" href=\"https:\/\/dps.media\/zh\/\" title=\"DPS.MEDIA \u80a1\u4efd\u516c\u53f8\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"868\">DPS\u5a92\u4f53<\/a> \u2014 \u4ece\u914d\u7f6e\u5230\u6700\u7ec8\u6e32\u67d3\uff0c\u53ea\u9700\u51e0\u6761 npm \u547d\u4ee4\u548c\u4e00\u4e2a Agent \u63d0\u793a\u8bcd\u3002.\n      <\/div>\n      <div class=\"dps-i-hero-actions\">\n        <button class=\"dps-i-copy-btn\" id=\"dps-open-prompt-btn\" aria-label=\"\u6253\u5f00\u590d\u5236\u53d1\u9001\u7ed9 Agent Code \u7684\u63d0\u793a\u8bcd\u7a97\u53e3\">\n          <span aria-hidden=\"true\">\u26a1<\/span> \u590d\u5236 Agent \u63d0\u793a\u8bcd\n        <\/button>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83d\udcd0<\/span> 9:16 \u00b7 Reels \/ TikTok \/ Shorts<\/div>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83c\uddfb\ud83c\uddf3<\/span> \u5e26\u58f0\u8c03\u7684\u8d8a\u5357\u8bed<\/div>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83d\udd04<\/span> 2026-03-25<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"dps-i-main\">\n\n    <!-- OVERVIEW -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u6982\u89c8<\/div>\n      <div class=\"dps-i-section-title\">\u4ec0\u4e48\u662f Remotion + Agentic Coding\uff1f<\/div>\n      <div class=\"dps-i-section-desc\">Remotion \u5141\u8bb8\u901a\u8fc7 React \u4ee3\u7801\u521b\u5efa\u89c6\u9891\u2014\u2014\u52a8\u753b\u3001\u6587\u672c\u3001\u7d20\u6750\u5b8c\u5168\u7a0b\u5e8f\u5316\u3002\u7ed3\u5408 Agentic Coding\uff0cAI Agent \u53ef\u4ee5\u9605\u8bfb\u7b80\u62a5 \u2192 \u7f16\u5199\u5267\u672c \u2192 \u751f\u6210 Remotion \u4ee3\u7801 \u2192 \u6e32\u67d3 MP4\uff0c\u65e0\u9700\u4eba\u5de5\u5e72\u9884\u6bcf\u4e00\u6b65\u3002.<\/div>\n      <div class=\"dps-i-cards-grid\">\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\u269b\ufe0f<\/div>\n          <div class=\"dps-i-card-title\">\u57fa\u4e8e React \u7684\u89c6\u9891<\/div>\n          <div class=\"dps-i-card-desc\">\u7f16\u5199 React \u7ec4\u4ef6\uff0cRemotion \u5c06\u5176\u6e32\u67d3\u4e3a MP4\u3002\u52a8\u753b\u4f7f\u7528 useCurrentFrame() \u548c useVideoConfig()\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83e\udd16<\/div>\n          <div class=\"dps-i-card-title\">Agentic \u5de5\u4f5c\u6d41<\/div>\n          <div class=\"dps-i-card-desc\">Agent \u8bfb\u53d6\u6e90\u94fe\u63a5\u3001\u7f16\u5199\u5267\u672c\u3001\u751f\u6210\u4ee3\u7801\u3001\u8fd0\u884c npm run render \u2014\u2014 \u6839\u636e\u672c\u624b\u518c\u5168\u81ea\u52a8\u5316\u6267\u884c\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83d\udcf1<\/div>\n          <div class=\"dps-i-card-title\">9:16 \u4f18\u5148<\/div>\n          <div class=\"dps-i-card-desc\">\u6240\u6709\u5408\u6210\uff08Composition\uff09\u9ed8\u8ba4\u4f7f\u7528 1080\u00d71920\u3002\u9002\u7528\u4e8e Reels\u3001TikTok\u3001YouTube Shorts\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83c\udfce\ufe0f<\/div>\n          <div class=\"dps-i-card-title\">\u5feb\u901f\u6e32\u67d3<\/div>\n          <div class=\"dps-i-card-desc\">\u4f7f\u7528 @remotion\/media + concurrency=4\u3002\u5728\u6807\u51c6\u672c\u5730\u673a\u5668\u4e0a\uff0c300 \u5e27\u7684\u57fa\u51c6\u6d4b\u8bd5\u7ea6\u4e3a 49\u201351 \u79d2\u3002.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- SOP STEPS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">SOP \u5b9e\u65bd\u6d41\u7a0b<\/div>\n      <div class=\"dps-i-section-title\">\u5236\u4f5c\u5b8c\u6574\u89c6\u9891\u7684 7 \u4e2a\u6b65\u9aa4<\/div>\n      <div class=\"dps-i-section-desc\">Agent \u81ea\u52a8\u8fd0\u884c\u5168\u90e8 7 \u4e2a\u6b65\u9aa4\u3002\u60a8\u53ea\u9700\u63d0\u4f9b\u5185\u5bb9\u6e90\u94fe\u63a5\u5e76\u5728\u7b2c 5 \u6b65\u786e\u8ba4\u9884\u89c8\u3002\u65e0\u9700\u91cd\u590d\u8be2\u95ee\u624b\u518c\u4e2d\u5df2\u786e\u5b9a\u7684\u5185\u5bb9\u3002.<\/div>\n      <div class=\"dps-i-steps\">\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">1<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u8bfb\u53d6\u6e90\u94fe\u63a5\u5e76\u63d0\u53d6\u8981\u70b9<\/div>\n            <div class=\"dps-i-step-desc\">Agent \u83b7\u53d6\u60a8\u63d0\u4f9b\u7684 URL\uff0c\u89e3\u6790\u5185\u5bb9\u5e76\u63d0\u53d6\u6545\u4e8b\u60c5\u8282\uff1a\u94a9\u5b50\uff08hook\uff09\u3001\u6838\u5fc3\u6d1e\u5bdf\u3001\u89e3\u51b3\u65b9\u6848\u3001CTA\u3002\u5fc5\u987b\u4e25\u683c\u9075\u5faa\u94fe\u63a5\u5185\u5bb9 \u2014\u2014 \u4e0d\u5f97\u5728\u539f\u59cb\u8303\u56f4\u4e4b\u5916\u81ea\u884c\u521b\u4f5c\u3002.<\/div>\n            <div class=\"dps-i-step-tag\">web_fetch(url)<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">2<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u7f16\u5199 30 \u79d2\u7ed3\u6784\u5267\u672c<\/div>\n            <div class=\"dps-i-step-desc\">\u94a9\u5b50 (0\u20133s) \u2192 \u6d1e\u5bdf + \u4ef7\u503c (3\u201318s) \u2192 \u89e3\u51b3\u65b9\u6848 (18\u201326s) \u2192 Logo + CTA (26\u201330s)\u3002\u4f7f\u7528\u5e26\u58f0\u8c03\u7684\u8d8a\u5357\u8bed\uff0c\u77ed\u53e5\uff0c\u907f\u514d\u5806\u780c\u6587\u5b57\uff0c\u8282\u594f\u5feb\u3002.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">3<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u9009\u62e9\u5e76\u8bbe\u8ba1\u6bcf\u573a\u89c6\u89c9\u6548\u679c<\/div>\n            <div class=\"dps-i-step-desc\">\u6765\u81ea Pexels\/Pixabay\/Coverr \u7684\u5546\u52a1\u7d20\u6750\uff08\u68c0\u67e5\u5546\u4e1a\u7528\u9014\uff09\u3002\u6392\u7248\u6e05\u6670\uff0c\u53e0\u52a0\u5c42\u8db3\u591f\u6df1\u3002DPS Logo \u662f\u5fc5\u987b\u7684\u3002\u5176\u4f59\u89c6\u89c9\u6548\u679c\u7531 Agent \u4e3b\u52a8\u9009\u62e9\u9002\u5408\u7684\u57fa\u8c03\u3002.<\/div>\n            <div class=\"dps-i-step-tag\">@remotion\/media \u00b7 Video \u7ec4\u4ef6<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">4<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u9009\u62e9\u5408\u9002\u7684\u97f3\u4e50\u6c1b\u56f4\u5e76\u8c03\u8282\u97f3\u91cf<\/div>\n            <div class=\"dps-i-step-desc\">\u514d\u8d39\u6765\u6e90\uff1aMixkit\u3001Pixabay\u3002\u5206\u6790\u89c6\u9891\/\u6587\u7ae0\uff1a\u97f3\u4e50\u5c0f\u58f0\u4f46\u6709\u6d3b\u529b\u3002\u8f6c\u573a\u5904\u4f7f\u7528\u8f7b\u5fae\u7684 whoosh\/pop \u97f3\u6548\u3002\u80cc\u666f\u97f3\u4e50\u97f3\u91cf\u59cb\u7ec8\u4f4e\u4e8e\u4e3b\u8981\u6587\u5b57\/\u8bed\u97f3\u3002.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">5<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u5feb\u901f\u6e32\u67d3\u524d 10 \u79d2\u9884\u89c8<\/div>\n            <div class=\"dps-i-step-desc\">\u8fd0\u884c\u9884\u89c8\u4ee5\u5728\u5b8c\u6574\u6e32\u67d3\u524d\u5ba1\u6838\u521b\u610f\u3002\u5982\u6709\u4fee\u6539\u610f\u89c1\uff0cAgent \u4f1a\u5728\u8fdb\u5165\u7b2c 6 \u6b65\u4e4b\u524d\u5728\u6b64\u6b65\u9aa4\u7acb\u5373\u8c03\u6574\u3002.<\/div>\n            <div class=\"dps-i-step-tag\">npm run render:article:preview<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">6<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u6e32\u67d3\u6700\u7ec8\u5168\u8d28\u91cf\u89c6\u9891<\/div>\n            <div class=\"dps-i-step-desc\">\u9884\u89c8\u901a\u8fc7\u540e\uff0c\u8fd0\u884c\u6700\u7ec8\u6e32\u67d3\u3002\u9ed8\u8ba4\u5e76\u53d1\u6570 (concurrency) = 4\u3002\u4ea4\u4ed8\u524d\u68c0\u67e5\u8f93\u51fa\u6587\u4ef6\u662f\u5426\u5b58\u5728\u3002.<\/div>\n            <div class=\"dps-i-step-tag\">npm run render:article:final<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-num\">7<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">\u5982\u6709\u65b0\u5efa\u8bae\u5219\u66f4\u65b0\u64cd\u4f5c\u624b\u518c<\/div>\n            <div class=\"dps-i-step-desc\">\u6240\u6709\u786e\u5b9a\u7684\u53cd\u9988\u90fd\u4f1a\u8bb0\u5f55\u5728\u624b\u518c\u6587\u4ef6\u7684\u201c\u5df2\u786e\u5b9a\u4fee\u6539\u5386\u53f2\u201d\u90e8\u5206\u3002\u8fd9\u662f Agent \u4e0b\u6b21\u5de5\u4f5c\u7684\u552f\u4e00\u4e8b\u5b9e\u6765\u6e90\u3002.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- VIDEO STRUCTURE -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u5185\u5bb9\u7ed3\u6784<\/div>\n      <div class=\"dps-i-section-title\">DPS \u6807\u51c6 30 \u79d2\u89c6\u9891\u6a21\u677f<\/div>\n      <div class=\"dps-i-section-desc\">\u6bcf\u4e2a\u89c6\u9891\u5fc5\u987b\u9075\u5faa\u6b64\u987a\u5e8f\u3002\u94a9\u5b50\u5fc5\u987b\u5728\u5934 3 \u79d2\u5185\u51fa\u73b0 \u2014\u2014 \u5426\u5219\u89c2\u4f17\u4f1a\u5728\u770b\u5230\u4ef7\u503c\u4e4b\u524d\u5c31\u5212\u8d70\u3002.<\/div>\n      <div class=\"dps-i-timeline\">\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">0 \u2013 3s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83c\udfa3 \u5f3a\u529b\u94a9\u5b50<\/div>\n            <div class=\"dps-i-timeline-desc\">\u5f15\u8d77\u597d\u5947\u7684\u95ee\u9898\u3001\u9707\u60ca\u7684\u6570\u636e\u6216\u76f4\u63a5\u7684\u75db\u70b9\u3002\u552f\u4e00\u76ee\u6807\uff1a\u8ba9\u89c2\u4f17\u5728\u5934 3 \u79d2\u5185\u4e0d\u5212\u8d70\u3002.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">3 \u2013 18s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83d\udca1 \u6d1e\u5bdf + \u6838\u5fc3\u4ef7\u503c<\/div>\n            <div class=\"dps-i-timeline-desc\">\u5c55\u793a\u6838\u5fc3\u6d1e\u5bdf\u548c\u7b80\u77ed\u8bc1\u636e\u3002\u6392\u7248\u7a81\u51fa\uff0c\u8f6c\u573a\u8282\u594f\u679c\u65ad\u3002\u6bcf\u5e27\u6700\u591a 2-3 \u884c\u6587\u672c\u3002.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">18 \u2013 26s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83d\uddfa\ufe0f \u89e3\u51b3\u65b9\u6848 \/ \u8def\u7ebf\u56fe<\/div>\n            <div class=\"dps-i-timeline-desc\">\u56de\u7b54\u201c\u90a3\u4e48\u8be5\u600e\u4e48\u505a\uff1f\u201d\u3002\u7b80\u5355\u3001\u53ef\u6267\u884c\uff0c\u6700\u591a 1-3 \u70b9\u3002\u6b64\u5904\u4e0d\u8981\u957f\u7bc7\u5927\u8bba\u3002.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">26 \u2013 30s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83c\udfaf DPS Logo + \u660e\u786e CTA<\/div>\n            <div class=\"dps-i-timeline-desc\">\u5fc5\u987b\u5305\u542b DPS Logo\u3002\u5177\u4f53\u7684 CTA\uff1a\u7f51\u7ad9\u3001\u70ed\u7ebf\u6216\u5173\u6ce8\u3002\u679c\u65ad\u7ed3\u675f \u2014\u2014 \u4e0d\u8981\u8ba9\u89c6\u9891\u6de1\u51fa\u5230\u865a\u65e0\u3002.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RENDER COMMANDS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u6e32\u67d3\u547d\u4ee4<\/div>\n      <div class=\"dps-i-section-title\">\u5df2\u786e\u5b9a\u7684 npm \u547d\u4ee4<\/div>\n      <div class=\"dps-i-section-desc\">\u9ed8\u8ba4\u5408\u6210\uff1a <span class=\"dps-i-inline-code\">DPSArticle2026Fast<\/span>. \u3002\u66f4\u6362\u673a\u5668\u6216\u5927\u5e45\u66f4\u6539\u914d\u7f6e\u65f6\u8bf7\u91cd\u65b0\u8fd0\u884c\u57fa\u51c6\u6d4b\u8bd5\u3002.<\/div>\n      <div class=\"dps-i-code-group\">\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">\u5feb\u901f\u9884\u89c8 \u2014 \u524d 10 \u79d2 (\u7528\u4e8e\u5ba1\u6838\u521b\u610f)<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:preview\" aria-label=\"\u590d\u5236\u5feb\u901f\u9884\u89c8\u547d\u4ee4\">\u590d\u5236<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:preview    <span class=\"dps-i-cmt\"># ~15s \u00b7 \u4ec5\u6e32\u67d3\u524d 10s<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">30s \u5168\u7a0b\u9884\u89c8 \u2014 \u4f4e\u7f29\u653e<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:preview:full\" aria-label=\"\u590d\u5236\u5b8c\u6574\u9884\u89c8\u547d\u4ee4\">\u590d\u5236<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:preview:full  <span class=\"dps-i-cmt\"># \u5ba1\u6838\u6574\u4f53\u89c6\u9891\u6d41\u8282\u594f<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">\u6700\u7ec8\u6e32\u67d3 \u2014 1080\u00d71920 \u5168\u8d28\u91cf<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:final\" aria-label=\"\u590d\u5236\u6700\u7ec8\u6e32\u67d3\u547d\u4ee4\">\u590d\u5236<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:final        <span class=\"dps-i-cmt\"># 1080\u00d71920 \u00b7 \u5e76\u53d1=4<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">\u57fa\u51c6\u6d4b\u8bd5 \u2014 \u6362\u673a\u65f6\u91cd\u65b0\u6d4b\u91cf<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run benchmark:article\" aria-label=\"\u590d\u5236\u57fa\u51c6\u6d4b\u8bd5\u547d\u4ee4\">\u590d\u5236<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run benchmark:article           <span class=\"dps-i-cmt\"># \u6d4b\u91cf\u901f\u5ea6\uff0c\u9009\u62e9\u6700\u4f18\u5e76\u53d1\u6570<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">\u5e26\u660e\u786e\u6807\u5fd7\u7684\u901a\u8fc7 CLI \u624b\u52a8\u64cd\u4f5c<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npx remotion render DPSArticle2026Fast out\/video.mp4 --concurrency=4\" aria-label=\"\u590d\u5236\u624b\u52a8 CLI \u547d\u4ee4\">\u590d\u5236<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npx<\/span> remotion render <span class=\"dps-i-str\">DPSArticle2026Fast<\/span> out\/video.mp4 \\\\n  \u2013concurrency=4<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- BENCHMARK -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u6e32\u67d3\u6027\u80fd<\/div>\n      <div class=\"dps-i-section-title\">\u5b9e\u9645\u57fa\u51c6\u6d4b\u8bd5 \u2014 300 \u5e27\u793a\u4f8b<\/div>\n      <div class=\"dps-i-section-desc\">\u5728\u672c\u5730\u673a\u5668\u4e0a\u5bf9\u5408\u6210\u8fdb\u884c\u6d4b\u91cf <span class=\"dps-i-inline-code\">DPSArticle2026Fast<\/span>. \u3002\u786e\u5b9a\u4f7f\u7528 <strong>concurrency=4<\/strong> \u4ee5\u83b7\u5f97\u6700\u5feb\u4e14\u6700\u7a33\u5b9a\u7684\u7ed3\u679c\u3002.<\/div>\n      <table class=\"dps-i-bench-table\" aria-label=\"\u6309\u5e76\u53d1\u6570\u5212\u5206\u7684\u6e32\u67d3\u57fa\u51c6\u6d4b\u8bd5\u8868\">\n        <thead>\n          <tr>\n            <th class=\"dps-i-th\">\u5e76\u53d1\u6570 (Concurrency)<\/th>\n            <th class=\"dps-i-th\">\u5e73\u5747\u65f6\u95f4<\/th>\n            <th class=\"dps-i-th\">\u5907\u6ce8<\/th>\n            <th class=\"dps-i-th\">\u76f8\u5bf9\u6027\u80fd<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td dps-i-best\">4 \u00a0\u2713 \u9ed8\u8ba4<\/td>\n            <td class=\"dps-i-td dps-i-best\">~49.8s<\/td>\n            <td class=\"dps-i-td dps-i-best\">\u6700\u5feb\uff0c\u7a33\u5b9a<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"\u6027\u80fd 100%\"><div class=\"dps-i-bar-fill\" style=\"width:100%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">5<\/td>\n            <td class=\"dps-i-td\">~56.4s<\/td>\n            <td class=\"dps-i-td\">\u597d<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"\u6027\u80fd 75%\"><div class=\"dps-i-bar-fill\" style=\"width:75%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">6<\/td>\n            <td class=\"dps-i-td\">~60.3s<\/td>\n            <td class=\"dps-i-td\">\u4e2d\u7b49<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"\u6027\u80fd 58%\"><div class=\"dps-i-bar-fill dps-i-bar-slow\" style=\"width:58%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">7 \u2013 8<\/td>\n            <td class=\"dps-i-td\">~72s<\/td>\n            <td class=\"dps-i-td\">\u6700\u6162<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"\u6027\u80fd 38%\"><div class=\"dps-i-bar-fill dps-i-bar-slow\" style=\"width:38%\"><\/div><\/div><\/td>\n          <\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    <!-- DESIGN RULES -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u8bbe\u8ba1\u89c4\u8303<\/div>\n      <div class=\"dps-i-section-title\">\u52a8\u753b\u4e0e\u8bbe\u8ba1\u6807\u51c6<\/div>\n      <div class=\"dps-i-section-desc\">\u9002\u7528\u4e8e\u6240\u6709\u89c6\u9891\u3002Agent \u5fc5\u987b\u9075\u5b88\u4ee5\u786e\u4fdd\u6240\u6709\u5185\u5bb9\u4e2d DPS \u54c1\u724c\u7684\u7edf\u4e00\u6027\u3002.<\/div>\n      <div class=\"dps-i-rules-grid\">\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u8f6c\u573a\u5feb\u901f\u3001\u679c\u65ad<\/span> \u2014 \u5408\u7406\u4f7f\u7528\u6ed1\u52a8 (slide) \u6216\u526a\u5207 (cut)\u3002\u9664\u975e\u4e3a\u4e86\u523b\u610f\u8425\u9020\u60c5\u611f\uff0c\u5426\u5219\u4e0d\u8981\u4f7f\u7528\u6de1\u51fa (fade)\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u79fb\u52a8\u7aef\u4f18\u5148\u6392\u7248<\/span> \u2014 \u5b57\u4f53\u8db3\u591f\u5927\uff0c\u5728\u624b\u673a\u4e0a\u89c2\u770b\u65f6\u65e0\u9700\u7f29\u653e\u5373\u53ef\u9605\u8bfb\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u906e\u7f69\u8db3\u591f\u6df1<\/span> \u2014 \u65e0\u8bba\u80cc\u666f\u89c6\u9891\u660e\u6697\uff0c\u6587\u5b57\u5fc5\u987b\u6e05\u6670\u7a81\u51fa\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u4e0d\u5806\u780c\u6587\u5b57<\/span> \u2014 \u6bcf\u5e27\u6700\u591a 2\u20133 \u884c\u6587\u5b57\u3002\u5982\u679c\u5185\u5bb9\u66f4\u591a\uff0c\u8bf7\u6dfb\u52a0\u65b0\u573a\u666f\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u5fc5\u987b\u5305\u542b DPS Logo<\/span> \u2014 \u5728\u7ed3\u5c3e\u7684 CTA \u573a\u666f\u4e2d\u6e05\u6670\u51fa\u73b0\u3002\u53ef\u5728\u6574\u4e2a\u89c6\u9891\u4e2d\u6dfb\u52a0\u8f7b\u5fae\u6c34\u5370\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">\u5141\u8bb8\u8f7b\u5fae\u97f3\u6548<\/span> \u2014 \u8f6c\u573a\u65f6\u4f7f\u7528 whoosh\/pop \u97f3\u6548\u4ee5\u589e\u5f3a\u8282\u594f\u611f\u3002\u4e0d\u53ef\u6ee5\u7528\uff0c\u4e0d\u53ef\u63a9\u76d6\u5185\u5bb9\u3002.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- ASSETS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u7d20\u6750\u6765\u6e90<\/div>\n      <div class=\"dps-i-section-title\">\u514d\u8d39\u7d20\u6750 \u2014 \u5df2\u786e\u8ba4\u5546\u4e1a\u7528\u9014<\/div>\n      <div class=\"dps-i-section-desc\">\u4f7f\u7528\u524d\u52a1\u5fc5\u786e\u8ba4\u8bb8\u53ef\u8bc1\u5141\u8bb8\u5546\u4e1a\u7528\u9014\u3002\u907f\u514d\u5728\u672a\u83b7\u5f97\u6388\u6743\u7684\u60c5\u51b5\u4e0b\u4f7f\u7528\u5e26\u6709\u660e\u663e\u54c1\u724c Logo \u7684\u7d20\u6750\u3002.<\/div>\n      <div class=\"dps-i-asset-grid\">\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">\u89c6\u9891\u7d20\u6750<\/div>\n          <div class=\"dps-i-asset-title\">Pexels<\/div>\n          <div class=\"dps-i-asset-desc\">pexels.com \u00b7 \u514d\u8d39\u5546\u4e1a\u7528\u9014 \u00b7 \u65e0\u9700\u7f72\u540d<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">\u89c6\u9891\u7d20\u6750<\/div>\n          <div class=\"dps-i-asset-title\">Pixabay<\/div>\n          <div class=\"dps-i-asset-desc\">pixabay.com \u00b7 Pixabay \u8bb8\u53ef\u8bc1 \u00b7 \u514d\u8d39\u5546\u4e1a\u7528\u9014<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">\u89c6\u9891\u7d20\u6750<\/div>\n          <div class=\"dps-i-asset-title\">Coverr<\/div>\n          <div class=\"dps-i-asset-desc\">coverr.co \u00b7 \u9ad8\u8d28\u91cf\u514d\u8d39\u5546\u4e1a\u89c6\u9891\u5faa\u73af\u7d20\u6750<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">\u97f3\u4e50<\/div>\n          <div class=\"dps-i-asset-title\">Mixkit<\/div>\n          <div class=\"dps-i-asset-desc\">mixkit.co \u00b7 \u514d\u8d39\u8bb8\u53ef\u8bc1 \u00b7 \u65e0\u9700\u7f72\u540d<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">\u97f3\u4e50<\/div>\n          <div class=\"dps-i-asset-title\">Pixabay Music<\/div>\n          <div class=\"dps-i-asset-desc\">pixabay.com\/music \u00b7 Pixabay \u8bb8\u53ef\u8bc1 \u00b7 \u514d\u8d39\u5546\u4e1a\u7528\u9014<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CHECKLIST -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">\u4ea4\u4ed8\u6e05\u5355<\/div>\n      <div class=\"dps-i-section-title\">\u89c6\u9891\u4ea4\u4ed8\u524d\u5fc5\u987b\u68c0\u67e5\u7684 6 \u4e2a\u8981\u70b9<\/div>\n      <div class=\"dps-i-section-desc\">\u5b8c\u6210\u540e\u70b9\u51fb\u52fe\u9009\u5404\u9879\u3002\u5728\u5411\u5ba2\u6237\u53d1\u9001\u89c6\u9891\u524d\uff0cAgent \u5fc5\u987b\u786e\u8ba4\u5df2\u5b8c\u6210\u6240\u6709 6 \u4e2a\u8981\u70b9\u3002.<\/div>\n      <div class=\"dps-i-checklist\">\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u89c6\u9891\u6bd4\u4f8b\u6b63\u786e 9:16<\/strong> \u2014 1080\u00d71920px\uff0c\u4efb\u4f55\u8fb9\u7f18\u4e0d\u5f97\u6709\u88c1\u526a\u6216\u9ed1\u8fb9\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u8d8a\u5357\u8bed\u6587\u5b57\u5e26\u58f0\u8c03<\/strong> \u2014 \u65e0\u62fc\u5199\u9519\u8bef\uff0c\u4e0d\u7f3a\u5c11\u58f0\u8c03\u6216\u8f85\u52a9\u7b26\u53f7\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u5185\u5bb9\u7d27\u6263\u6e90\u94fe\u63a5<\/strong> \u2014 \u4e0d\u5f97\u8d85\u51fa\u7528\u6237\u63d0\u4f9b\u7684\u539f\u59cb\u6587\u7ae0\u8303\u56f4\u8fdb\u884c\u521b\u4f5c\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u5305\u542b DPS Logo<\/strong> \u2014 \u5728\u89c6\u9891\u4e2d\u6e05\u6670\u51fa\u73b0\uff0c\u81f3\u5c11\u5728\u6700\u540e\u7684 CTA \u573a\u666f\u4e2d\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u80cc\u666f\u97f3\u4e50\u98ce\u683c\u5951\u5408<\/strong> \u2014 \u97f3\u91cf\u4f4e\u4e8e\u4e3b\u8981\u6587\u5b57\/\u914d\u97f3\uff0c\u4e0d\u63a9\u76d6\u5185\u5bb9\u3002.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>\u8f93\u51fa\u6587\u4ef6\u5b58\u5728<\/strong> \u2014 \u6e32\u67d3\u6210\u529f\uff0cMP4 \u6587\u4ef6\u53ef\u8bbf\u95ee\u4e14\u65e0\u635f\u574f\u3002.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"dps-i-footer\">\n    <div class=\"dps-i-footer-inner\">\n      <div class=\"dps-i-footer-brand\">DPS\u5a92\u4f53<\/div>\n      <div class=\"dps-i-footer-meta\">DPS Video Agent Playbook \u00b7 \u66f4\u65b0\u65e5\u671f\uff1a2026-03-25 \u00b7 Remotion + Agentic Coding<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- MODAL -->\n  <div class=\"dps-i-modal-overlay\" id=\"dps-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Agent \u63d0\u793a\u8bcd\u590d\u5236\u7a97\u53e3\">\n    <div class=\"dps-i-modal\">\n      <div class=\"dps-i-modal-header\">\n        <div class=\"dps-i-modal-title\">\u26a1 \u53d1\u9001\u7ed9 Agent Code \u7684\u63d0\u793a\u8bcd<\/div>\n        <button class=\"dps-i-modal-close\" id=\"dps-modal-close\" aria-label=\"\u5173\u95ed\u7a97\u53e3\">\u2715<\/button>\n      <\/div>\n      <div class=\"dps-i-modal-desc\">\n        \u590d\u5236\u4ee5\u4e0b\u63d0\u793a\u8bcd\u5e76\u7c98\u8d34\u5230 Agent\uff08Claude, Cursor, Windsurf, Copilot...\uff09\u4e2d\u3002\u5c06 <strong>[\u5728\u6b64\u7c98\u8d34 URL]<\/strong> \u66ff\u6362\u4e3a\u9700\u8981\u5236\u4f5c\u89c6\u9891\u7684\u6587\u7ae0\u94fe\u63a5\u3002Agent \u5c06\u6839\u636e DPS Playbook \u81ea\u52a8\u8fd0\u884c\u5168\u90e8 7 \u4e2a\u6b65\u9aa4\u3002.\n      <\/div>\n      <textarea class=\"dps-i-modal-textarea\" id=\"dps-prompt-text\" readonly aria-label=\"\u53d1\u9001\u7ed9 Agent Code \u7684\u5b8c\u6574\u63d0\u793a\u8bcd\u5185\u5bb9\">B\u1ea1n l\u00e0 DPS Video Agent. \u0110\u1ecdc file DPS Video Agent Playbook (dps-playbook.md ho\u1eb7c n\u1ed9i dung \u0111\u00e3 cung c\u1ea5p) v\u00e0 th\u1ef1c hi\u1ec7n \u0111\u00fang SOP 7 b\u01b0\u1edbc d\u01b0\u1edbi \u0111\u00e2y.\n\n== Y\u00caU C\u1ea6U ==\nLink ngu\u1ed3n n\u1ed9i dung: [PASTE URL T\u1ea0I \u0110\u00c2Y]\nFormat: Video d\u1ecdc 9:16 (1080\u00d71920), 30 gi\u00e2y\nNg\u00f4n ng\u1eef: Ti\u1ebfng Vi\u1ec7t c\u00f3 d\u1ea5u, kh\u00f4ng l\u1ed7i ch\u00ednh t\u1ea3\nLogo DPS: B\u1eaft bu\u1ed9c c\u00f3 trong video\nNh\u1ea1c n\u1ec1n: Free commercial use, h\u1ee3p vibe th\u01b0\u01a1ng hi\u1ec7u\n\n== QUY TR\u00ccNH ==\nB\u01b0\u1edbc 1: Fetch v\u00e0 ph\u00e2n t\u00edch n\u1ed9i dung t\u1eeb URL \u2014 b\u00e1m \u0111\u00fang link, kh\u00f4ng t\u1ef1 s\u00e1ng t\u00e1c ngo\u00e0i ph\u1ea1m vi\nB\u01b0\u1edbc 2: Vi\u1ebft k\u1ecbch b\u1ea3n theo c\u1ea5u tr\u00fac: Hook (0-3s) \u2192 Insight (3-18s) \u2192 Gi\u1ea3i ph\u00e1p (18-26s) \u2192 Logo + CTA (26-30s)\nB\u01b0\u1edbc 3: Sinh code Remotion cho composition DPSArticle2026Fast \u2014 d\u00f9ng @remotion\/media cho Video component\nB\u01b0\u1edbc 4: Ch\u1ecdn footage t\u1eeb Pexels\/Pixabay\/Coverr v\u00e0 nh\u1ea1c t\u1eeb Mixkit\/Pixabay (ki\u1ec3m tra commercial use)\nB\u01b0\u1edbc 5: Ch\u1ea1y preview \u0111\u1ec3 duy\u1ec7t: npm run render:article:preview\nB\u01b0\u1edbc 6: Sau khi c\u00f3 feedback, render final: npm run render:article:final (\u2013concurrency=4)\nB\u01b0\u1edbc 7: X\u00e1c nh\u1eadn \u0111\u1ee7 6 \u0111i\u1ec3m checklist b\u00e0n giao tr\u01b0\u1edbc khi g\u1eedi file\n\n== TI\u00caU CHU\u1ea8N ==\n\u2013 Transition: nhanh, d\u1ee9t kho\u00e1t (slide\/cut). Kh\u00f4ng fade m\u1edd.\n\u2013 Typography: r\u00f5, \u0111\u1ecdc \u0111\u01b0\u1ee3c tr\u00ean mobile, overlay \u0111\u1ee7 \u0111\u1eadm\n\u2013 Kh\u00f4ng nh\u1ed3i qu\u00e1 2-3 d\u00f2ng text\/frame\n\u2013 Volume nh\u1ea1c n\u1ec1n th\u1ea5p h\u01a1n text\/voice ch\u00ednh\n\u2013 Kh\u00f4ng h\u1ecfi l\u1ea1i nh\u1eefng g\u00ec \u0111\u00e3 ch\u1ed1t trong Playbook \u2014 ch\u1ee7 \u0111\u1ed9ng l\u00e0m v\u00e0 b\u00e1o c\u00e1o k\u1ebft qu\u1ea3.<\/textarea>\n      <div class=\"dps-i-modal-footer\">\n        <button class=\"dps-i-btn-secondary\" id=\"dps-modal-cancel\">\u5173\u95ed<\/button>\n        <button class=\"dps-i-btn-primary\" id=\"dps-modal-copy\" aria-label=\"\u590d\u5236\u5168\u90e8\u63d0\u793a\u8bcd\u5230\u526a\u8d34\u677f\">\ud83d\udccb \u590d\u5236\u63d0\u793a\u8bcd<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div><script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  var openBtn = document.getElementById('dps-open-prompt-btn');\n  var modal = document.getElementById('dps-modal');\n  var closeBtn = document.getElementById('dps-modal-close');\n  var cancelBtn = document.getElementById('dps-modal-cancel');\n  var copyModalBtn = document.getElementById('dps-modal-copy');\n  var promptText = document.getElementById('dps-prompt-text');\n\n  function openModal() {\n    if (modal) { modal.classList.add('dps-i-open'); }\n  }\n  function closeModal() {\n    if (modal) { modal.classList.remove('dps-i-open'); }\n  }\n  function doCopy(text, btn, label) {\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(text).then(function() {\n        btn.textContent = label;\n        setTimeout(function() {\n          if (btn.id === 'dps-modal-copy') {\n            btn.textContent = '\ud83d\udccb Copy Prompt';\n          } else {\n            btn.textContent = 'Copy';\n          }\n        }, 2000);\n      });\n    } else {\n      var tmp = document.createElement('textarea');\n      tmp.value = text;\n      document.body.appendChild(tmp);\n      tmp.select();\n      document.execCommand('copy');\n      document.body.removeChild(tmp);\n      btn.textContent = label;\n      setTimeout(function() {\n        if (btn.id === 'dps-modal-copy') {\n          btn.textContent = '\ud83d\udccb Copy Prompt';\n        } else {\n          btn.textContent = 'Copy';\n        }\n      }, 2000);\n    }\n  }\n\n  if (openBtn) { openBtn.addEventListener('click', openModal); }\n  if (closeBtn) { closeBtn.addEventListener('click', closeModal); }\n  if (cancelBtn) { cancelBtn.addEventListener('click', closeModal); }\n  if (modal) {\n    modal.addEventListener('click', function(e) {\n      if (e.target === modal) { closeModal(); }\n    });\n  }\n  if (copyModalBtn) {\n    copyModalBtn.addEventListener('click', function() {\n      if (promptText) {\n        copyModalBtn.classList.add('dps-i-copied');\n        doCopy(promptText.value, copyModalBtn, '\u2705 \u0110\u00e3 copy!');\n        setTimeout(function() { copyModalBtn.classList.remove('dps-i-copied'); }, 2000);\n      }\n    });\n  }\n\n  var codeBtns = document.querySelectorAll('.dps-i-code-copy-btn');\n  var i = 0;\n  while (i < codeBtns.length) {\n    (function(btn) {\n      btn.addEventListener('click', function() {\n        var txt = btn.getAttribute('data-copy');\n        if (txt) { doCopy(txt, btn, 'Copied!'); }\n      });\n    })(codeBtns[i]);\n    i = i + 1;\n  }\n\n  var items = document.querySelectorAll('.dps-i-check-item');\n  var j = 0;\n  while (j < items.length) {\n    (function(item) {\n      item.addEventListener('click', function() {\n        var box = item.querySelector('.dps-i-check-box');\n        if (item.classList.contains('dps-i-chk')) {\n          item.classList.remove('dps-i-chk');\n          if (box) { box.textContent = ''; }\n        } else {\n          item.classList.add('dps-i-chk');\n          if (box) { box.textContent = '\u2713'; }\n        }\n      });\n    })(items[j]);\n    j = j + 1;\n  }\n});\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfac DPS Video Agent Playbook \u4f7f\u7528 Remotion \u548c Agentic Coding \u5236\u4f5c\u89c6\u9891 \u9002\u5408 Remotion \u521d\u5b66\u8005\u7684\u6807\u51c6\u6307\u5357\uff0c\u53ef\u901a\u8fc7\u51e0\u4e2a npm \u547d\u4ee4\u548c\u53d1\u9001\u7ed9 agent \u7684\u63d0\u793a\u8bcd\u6765\u81ea\u52a8\u5316\u5236\u4f5c\u7b26\u5408 DPS.MEDIA \u6807\u51c6\u7684\u77ed\u89c6\u9891 \u2014 \u4ece\u8bbe\u7f6e\u5230\u6700\u7ec8\u6e32\u67d3\u3002 \u26a1 \u4e3a Agent \u590d\u5236\u63d0\u793a\u8bcd \ud83d\udcd0 9:16 \u00b7 [\u2026]<\/p>","protected":false},"author":1,"featured_media":38005,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"rankmath_keywords":{"primary":"","secondary":[""]},"yoast_keywords":{"primary":"","secondary":[]},"yoast_focuskw":"","rankmath_focuskw":"","seo_keywords":{"primary":"","secondary":[""]},"_links":{"self":[{"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/posts\/38001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/comments?post=38001"}],"version-history":[{"count":0,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/posts\/38001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/media\/38005"}],"wp:attachment":[{"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/media?parent=38001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/categories?post=38001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dps.media\/zh\/wp-json\/wp\/v2\/tags?post=38001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}