AI 技能【免费下载链接】huashu-designHuashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 20 设计哲学 5 维评审 MP4 导出 · Agent-agnostic项目地址https://gitcode.com/gh_mirrors/hu/huashu-design点击查看免费下载本文档是 Huashu DesignClaude Code 里 HTML 原生的设计 skill中「高规格视觉作品」的标准工作流指南。它回答一个核心问题为什么 20 秒以上的品牌宣传片必须先写 10000-12000 字的导演笔记directors notes再动手写动画 HTML以及这套流程从触发判断、五大部分结构、写作建议、HTML 实施、关键帧验证到多视角并行策略的完整执行细节。读完本文你将掌握一套可复制的「先 think 后 execute」的电影级动画生产管线并能在 assets/director-notes-samples/launch-film-30s-sample.md约 78KB · 11500 字 · 13 镜 · 5 大部分齐全中找到一份完整的、可直接当模板使用的参考样本。1. 为什么必须先写 Directors Notes一个真实的实战教训本文档开篇记录了一次真实的实战教训2026-05-11 huashu-md-html v2.0 项目它直接决定了这套流程的存在价值第一轮直接动手写 HTML产出的是「程序员视角的动画」——每个 capability 平均用力、节奏匀速、slogan 撞在一起、缺少叙事弧。第二轮接到用户「停下先按苹果导演视角写 1 万字分镜脚本」的指令写了v5-director-notes.md11500 字、13 镜 shot-by-shot spec然后按脚本实施——一次过、每帧 pause 都耐看、节奏起伏有 climax。核心差异可以浓缩为一句话写脚本是 think写 HTML 是 execute。先 think 透了execute 就是机械翻译先 execute每个 shot 都是临场决策必然乱。写 directors notes 不是「装」而是把所有视觉决策在动手之前沉淀成文档——每一镜都已经在脑里 visualize 过、reasoning 过、和上下文 trace 过。HTML 实施时不再需要做创意决策只需要忠实翻译。这套理念贯穿了整个仓库的工作流设计SKILL.md 的任务路由表中明确写着「launch film/品牌宣传片『Apple级』『超级碗品质』」的入口就是三方向硬门先行 → 用户选定后再写万字 directors notes →references/launch-film-director-notes.md。2. 触发判断启动流程前先问自己 3 个问题并不是所有动画任务都值得走这套万字流程。文档给出了一条清晰的判定路径这支片承担品牌叙事吗有 thesis / slogan reveal / 升级仪式感—— 是 → 走 directors notes 流程观众会暂停看吗可能截图、做 X 海报、做封面、慢速 review—— 是 → 每帧要耐看客户/用户有「我希望像 XXX 那样」的参照Apple / Anthropic / Nike / Penguin / 某导演—— 是 → 必须明确视觉语境任一为「是」就走流程三个都「否」就跳过直接用 references/animations.md 的标准流程。2.1 前置门三方向硬门不豁免这里有一个重要的前置约束launch film 也必须先过 SKILL.md 的三方向硬门——每方向一张「方向板」hero 关键帧真实静帧 色板 气质句 参照用户选定方向后万字 directors notes 才围绕选定方向展开。指定了「Apple 级」等风格词不豁免2026-07-18 HuaStudio 实锤。从 SKILL.md 的设计方向顾问Fallback 模式部分可以看到这条硬门自 2026-07-18 起是100% 必走的任何会产出新视觉设计的任务无论有没有风格参考、有没有品牌名都必须先出三版真实初稿摆给用户选。原因在文档中有过实锤记录用户说「苹果宣传片风格 30s 动画」AI 判定「已说清楚要什么」跳过三方向直接执行自选方案结果被用户抓现行——「Apple 风格」是一个语境不是一个设计深空暗场、大白底衬线、产品色沉浸都是合法诠释选哪个是用户的权利。风格词收窄解释空间不转移选择权。三方向初稿的形态是「每方向 1 张方向板」hero 关键帧的真实 HTML 静帧截图 ×1-2 色板条 一句气质定位 参照作品名——必须是渲出来的画面不是嘴说的文字描述。三方向摆出来后必须结束回合等用户选择不得自行选定继续执行包括 autonomous / 无人值守会话。2.2 典型触发场景速查表用户场景是否触发备注「做个 SaaS 升级宣传片」✅ 触发默认走完整流程「Apple 级别 / 超级碗品质感的视频」✅ 触发 升级强力推荐多视角并行「30 秒品牌 launch film」✅ 触发「这个项目 1 万字脚本再做动画」✅ 触发用户明确指明「简单 motion graphiclogo 转一下」❌ 不触发用 animations.md 标准流程「做个 onboarding 动画 demo」❌ 不触发用 animations.md「教程视频带配音」❌ 不触发走 references/voiceover-pipeline.md「单个 hero animation」⚠️ 看复杂度高规格 hero 触发普通 hero 用 references/hero-animation-case-study.md3. Directors Notes 的 5 大部分结构万字级万字10000-12000 字中文 / 等量英文directors notes必须包含 5 大部分。任一部分缺失都属于不完整质量会受影响。下面结合仓库内完整样本 assets/director-notes-samples/launch-film-30s-sample.md 逐一展开。3.1 Part I · Directors Statement创作论约 1500-2000 字回答 5 个问题这部片不是什么——明确排除如「这不是功能介绍片」「不是 demo」核心 thesis 一行——观众看完只记一句话是哪句跟谁的语境对话——列出 5-8 个视觉参照导演 / 设计师 / 品牌 / 摄影师 / 作品名 年份说明每个参照学了什么三类观众画像 对每类的承诺主受众 / 次受众 / 外受众各对应一段节奏哲学——慢拍 / 加速 / 顶峰 / 缓收的曲线说明 emotional climax 在第几秒不一定是最后一秒最后加一段 anti-slop checklist这部片不做的事具体列出不模糊。样本中的实践可以直观说明这部分的密度它用 10 行左右写清了「这不是功能介绍片」用 5-8 个参照AppleDesigned by Apple in California2013 / Apple Silicon Launch Films 2020-2024 / Anthropic 品牌语言 / Penguin Classics / Pentagram / Kenya Hara《白》2008 / Massimo Vignelli逐一说明「学了什么、不学什么」例如「我们继承 Anthropic 的赤陶橙但做得更克制——永远只作 accent占总画面 8%」按主 / 次 / 外三类受众分别给出承诺并在 1.5 节列出一张带原因的「不做清单」表格——不用紫渐变、不用 emoji 作图标、不画 SVG 人物、不用 Inter/Roboto/Arial 作 display、不用赛博霓虹深蓝底、不堆 effects、不用 Lorem ipsum、不用 stock photo、不画进度条时间码版权署名条。每一条都给了具体原因如「训练语料里『科技感』的万能公式2026 年看是 cyber slop」这让清单可执行而不是口号。3.2 Part II · Visual System视觉系统全谱约 1500-2500 字这是工程化的视觉 spec完整后任何执行者拿到都能产出一致的视觉。必含子节完整色板至少 8-10 色每色含 HEX 功能定义 占画面比例上限字体系统至少 6 个字号层级每层级含字体名 weight size letter-spacing 用途网格系统画布尺寸 外边距 column grid baseline grid 关键安全区 黄金分割锚点动画系统easing 库4 条以内 duration 字典 stagger 法则 scene 过渡规则Chrome 元素贯穿全片的小细节counter / chip / ticker / watermark / texture每个含位置 入退场时机音频系统BGM 30 秒走向曲线分层 SFX 字典10 cues 含时间码 音量 频段隔离反 AI slop checklistper-shot 自检表10-15 项铁律所有视觉决策都从 Visual System 推导不要在 shot list 里临时发明新值。样本的 Part II 是这份 spec 精神的完整示范关键参数可直接复用为模板色板10 色每色都有功能定义与占比上限名称HEX作用占画面比例上限Ivory paper#FAFAF6主底色象牙白一抹温度60-70%Mist#F2EDE4次级背景层 15%Mica#E6E1D6细线 / 分隔符 / 卡片边框 5%Smoke#6B6B6B次级文本 / metadata 5%Cinder#3D3530次级深色深褐黑不是纯黑 10%Ink#1A1A1A主黑 / 主文本20-25%Charred#2A2620极深褐黑封面卡专用 5%Terracotta#C2410C主 accentAnthropic 调5-8%Terra Hot#E55D21高光 variant仅 NEW 标签亮起一瞬 1%Terra Deep#8B2D08阴影 variant赤陶橙投影 1%铁律示例「任何一镜不出现以上 10 色之外的颜色」「赤陶橙系三色合计占画面 10%」「任何文本只能用 4 色之一Ink / Cinder / Smoke / Terracotta」。字体系统10 个字号层级Display XXLNewsreader 700 / 200px / -0.035emslogan 顶字、Display XL48pxcapability number、Display L300-480pxhero md 字符、Display M32-44pxchapter title、Body L18-22px正文、Body M 中文Noto Serif SC 500 / 20-26px / 0.04em、Italic引语副标、Mono SJetBrains Mono 500 / 标签 / 0.18em、Mono XSNEW / version chip / 0.22em、Caret。字体加载策略要求 Google Fonts 预连接、单一link合并所有 weights、录制 MP4 前必须等document.fonts.ready完成。网格系统主画布 1920×1080外边距 80px主内容区 1760×92012-column gridcolumn 132px / gutter 16pxbaseline grid 8px 律所有 vertical position 必须是 8 的倍数黄金分割锚点上 1/3 y360、下 1/3 y720、中线 y540、黄金分割上下 y412/668关键安全区顶部 60px chrome 区 / 底部 60px watermark 区 / 中央 800×600 主内容禁区。动画系统easing 库仅 4 条——expoOut1 - 2^(-10t)默认 90% 入场用、overshootcubic-bezier(0.34, 1.56, 0.64, 1)NEW 标签 / 按钮、linear底色 fade / texture、expoIn2^(10(t-1))退场。duration 字典覆盖字符 stagger30-50ms、小元素300ms、中元素500ms、hero 元素700-900ms、slogan 字符800ms、scene 过渡300ms 重叠、退场200-300ms出场永远快于入场。stagger 法则相邻元素 delay 30-80msscene 过渡永远是 cross-dissolve soft scale两镜重叠 300msSprite end 比下一镜 start 大 0.3s。Chrome 元素5 个Chrome A 左上 capability counterpulse dot 6-dot progress、Chrome B 右上 version chip● HUASHU-MD-HTML · v2.0pulse dot 每 4 秒呼吸、Chrome C 底部 timeline ticker07-22s进度点随 capability 滑动、Chrome D 右下 watermarkCREATED BY HUASHU-DESIGN完全静态、Chrome E 极淡 paper textureSVG 噪点 0.3% scale 呼吸opacity ≤ 0.04。每个都标了位置、字体规格与入退场时机——例如 Chrome C 只在 07-22s 存在使命完成后counter 6/6体面退场。音频系统BGM 30 秒走向曲线分为 L0 Room tone00-30s→ L1 Piano single note00-08s→ L2 Piano arpeggio03-22s→ L3 Cello drone08-22s→ L4 Pulse15-22s→ L5 String swell22-26s→ L6 Decay reverb tail26-30s风格目标为 Max Richter / Ólafur Arnalds / Jóhann Jóhannsson 的 minimal-cinematic register。SFX 字典给出 15 个 cue每个含时间码 类型 音量如impact (slogan ONE) 22.6s -8dB、final stamp 29.0-29.5s -14dB并明确频段隔离规则BGM 占低频 40Hz-2kHz、SFX whooshes/chimes 占中高频 2kHz-8kHz、SFX impacts 占低频 sub 40Hz-120Hz与 cello 重叠时 BGM duck -3dB。反 AI slop 自检表per-shot12 项无紫色任何饱和度、无「圆角卡 左 border accent」组合除非诚实的 mica border、无 emoji 图标、无 SVG 人物、无色板外颜色、无 Inter/Roboto/Arial 作 display、字号字距行高全来自字体系统、vertical position 是 8 的倍数、赤陶橙 10%、至少一处 pause 值得截图的 120% 签名、过渡是 cross-dissolve scale 不是硬切、结尾为下一镜视觉让位。3.3 Part III · Story Arc故事弧约 500-800 字三幕结构 情绪曲线Act I · SETUP0 → 第 1/5 时长e.g. 0-6s for 30s观众进入问题被提出Act II · ESCALATION中间 2/3答案展开主题铺陈Act III · PAYOFF最后 1/4升华、slogan reveal、品牌印章含 ASCII 情绪曲线图 emotional climax 时刻标记。关键决策climax 不一定在末尾。30s 片子 climax 通常在 22-25s不是 29s——最后几秒是 resolution / decay不是 peak。这条规则违反必然让作品「虎头蛇尾」。样本的三幕划分13 镜是这条结构的直接落地ACT I00.0-06.0sSHOT 01-04 提出「什么是 source of truth」ACT II06.0-22.0sSHOT 04-09 让 6 条产物链逐一展开ACT III22.5-30.0sSHOT 10-13 做 slogan reveal 与品牌印章。情绪曲线图中明确标出PEAK 24.5sSIX FORMS. 落地时刻而非 29s——24.5s 之后的 5.5 秒全部是 resolution弦乐 decay、元素沉淀、md 印章独自停留。关键 emotional beats 表02.0s 第一个 keyboard click 进入 → 03.0s md 字符诞生第一次 awe → 08.0s 六卡收拢第一次 click → 18.0s 第一个 NEW 标签老用户「噢」→ 22.5s tension build-up peak → 24.5s emotional climax → 30.0s resolution展示了「情绪曲线不是匀速直线」的工程化表达。3.4 Part IV · Shot-by-Shot Storyboard分镜脚本约 5000-7000 字 · 占 60% 篇幅每镜含11 个字段缺一不可SHOT NN · NAME [TIMECODE] 起止时间 时长 [FUNCTION] 这一镜在故事弧中的功能一句话 [VISUAL] 画面构图 元素位置 运动方向 [CAMERA] 景别远/全/中/近/特对应 zoom 档位 运镜动作 一句动机「静止」也要写为什么静止push-in 必须写具象锚点词汇与预算见 [references/camera-language.md](https://link.gitcode.com/i/30fb5e028f52bf678d10f45955c2a244)景别体系见 [references/storyboard-basics.md](https://link.gitcode.com/i/47f9d1e83cec2ab742cce123dc18f2e5) [TYPE] 排版 spec字体 / 字号 / 字距 / 行高 / 颜色 / 对齐 [ANIM] 每元素 in/out 时机 easing duration stagger delay [AUDIO] music beat SFX cue每镜对应 BGM 节奏 必含 SFX 时间表 [CHROME] 四角元素状态哪些 chrome 在 / 哪些 fade in/out / 哪个 pulse [ANTI-SLOP] 这一镜通过了哪些自检项 有什么 120% 细节签名 [WHY] 承接上一镜的逻辑 推进下一镜的钩子字段平均 30-80 字 → 每镜 400-700 字 → 12-15 镜 → 5000-7000 字。实战经验写完 storyboard 后自己读一遍——任意一镜删掉整支片是否还成立如果可以删那镜就是多余的删掉。样本的 SHOT 03「THE TRANSFORMATION」03.00-05.00s可以作为「一镜 11 字段」的密度示范TIMECODE 精确到 0.1sVISUAL 把 morph 过程拆成 4 个时间窗03.00-03.30s 淡出#和arkdown→ 03.30-04.10s 从 mono 56px 变 serif 480px → 04.10-04.80s 赤陶橙句点 overshoot 浮现 → 04.80-05.00s accent rule 展开TYPE 给出Newsreader 600, 480px, Ink Terracotta dot, letter-spacing -0.04em的完整规格ANIM 逐条列 in/out/easing/durationAUDIO 精确到 piano 第几音 哪个 SFX 在几秒CHROME 记录 Chrome B 在 04.50s 以top: 78px, right: 80px入场ANTI-SLOP 说明「morph 不是淡出淡入的廉价 transition是真正的字符变形ghost 残影叠加」「480px Newsreader 的 -0.04em 字距让 m 和 d 几乎贴合但不接触」WHY 点出「从 mono 到 serif是从『我在打字』到『我在写作』的隐喻」。每镜都有至少一个 pause-and-look signature样本中称之为「120% 细节」例如 SHOT 05 的 small caps OpenType feature、SHOT 07 的右对齐 italic 页眉、SHOT 08 的「大32开 · 176×240mm」中英混排——这些是让画面「暂停时值得看」的工程保证。3.5 Part V · Production Manifest制作清单约 800-1200 字工程交付清单字体加载 URL含 preconnectCSS 变量直接可粘贴BGM 来源选择标准 Suno/Udio prompt 关键词 备选库SFX 字典按时间码逐 cue 列出文件路径 音量关键帧验证计划12-15 张 pause-and-check 关键帧时间码每帧验证项列出fonts / positions / chrome state录制参数fps / codec / bitrate / presetffmpeg 音频混合命令含 audio stream 验证交付物清单mp4 / mp4-60fps / gif / poster.png / silent.mp4 / shot-list.csv全链路时间估算小时级精度样本 Part V 给出了可直接复用的完整配置字体加载Google Fonts含 preconnectlink relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNewsreader:ital,wght0,300;0,400;0,500;0,600;0,700;1,400;1,500familyJetBrainsMono:wght400;500;700familyNotoSerifSC:wght400;500;700;900displayswap relstylesheet实测加载时长约 800-1500msdocument.fonts.ready必须等到返回 true 才启动 Stage 计时器Stage 组件已实现。色板 CSS 变量直接可粘贴:root { --paper: #FAFAF6; --mist: #F2EDE4; --mica: #E6E1D6; --smoke: #6B6B6B; --cinder: #3D3530; --ink: #1A1A1A; --charred: #2A2620; --terracotta: #C2410C; --terra-hot: #E55D21; --terra-deep: #8B2D08; }BGM 生成Suno/Udio prompt 关键词minimal cinematic piano, slow tempo 60bpm, single piano notes, sparse arpeggio, low cello drone, subtle sub-kick percussion, swelling strings at climax, decay to silence, in the style of Max Richter on the nature of daylight, no vocals, 30 seconds duration, ivory paper mood最低标准30 秒长度、44.1kHz、aim for -16 LUFS integrated loudness。备选免版权库为 artlist.io / bensound.com / musicbed.com 的 minimal cinematic 类别。SFX 来源首选 huashu-design skill 自带的assets/sfx/预制资源。仓库当前实际存在的目录结构为 assets/sfx 下container/card-flip、card-snap、modal-open、stack-collapse、feedback/achievement、error-tone、notification-pop、success-chime、impact/brand-stamp、drop-thud、logo-reveal-v2、logo-reveal、keyboard/delete-key、enter、space-tap、type-fast、type、magic/ai-process、sparkle、transform、progress/complete-done、generate-start、loading-tick、terminal/command-execute、cursor-blink、output-appear、transition/dissolve、slide-in、swipe-horizontal、whoosh-fast、whoosh、ui/click-soft、click、focus、hover-subtle、tap-finger、toggle-on——共 37 个 mp3可按类型直接映射到 SFX 字典的 cuekeyboard clicks →sfx/keyboard/、whoosh →sfx/transition/、chime →sfx/feedback/、impact →sfx/impact/、click →sfx/ui/。录制参数对应仓库 scripts/render-video.jsnode scripts/render-video.js \ --file file:///path/to/v5-six-forms.html \ --duration 30 \ --fps 25 \ --width 1920 \ --height 1080 \ --out v5-final-silent.mp4codec 关键参数libx264、yuv420p兼容性、12 Mbps30s 约 45MB、profile high、preset slowquality speed。后续 60fps 插帧可选bash scripts/convert-formats.sh v5-final-silent.mp4 --fps 60。音频混合两步 验证# Step 1: 加 BGM bash scripts/add-music.sh v5-final-silent.mp4 \ --bgm assets/bgm/cinematic-minimal-30s.mp3 \ --bgm-volume -18dB \ --out v5-with-bgm.mp4 # Step 2: 加 SFX cuesffmpeg -filter_complex amix 多路混合按 SFX 字典逐 cue adelay ffmpeg -i v5-with-bgm.mp4 \ -i assets/sfx/ui/click.mp3 -i assets/sfx/impact/brand-stamp.mp3 \ -filter_complex [1]adelay500|500[s1];[2]adelay22600|22600[s2];...[0][s1][s2]...amixinputsN:durationlongest:dropout_transition0[out] \ -map 0:v -map [out] \ -c:v copy -c:a aac -b:a 192k \ v5-final.mp4 # Step 3: 验证 audio stream ffprobe -i v5-final.mp4 -show_streams -select_streams a 21 | grep -E (codec_type|sample_rate|channels|duration)期望输出audio codec aac、sample rate 44100/48000Hz、channels 2stereo、duration 30.0s。交付物清单主交付v5-final.mp430s / 1920×1080 / 25fps / with audio / ~50MB 高帧率版v5-final-60fps.mp460fps 插帧X/YouTubev5-final.gifpalette 优化 8MB公众号 静音版v5-final-silent.mp4备份便于重新配音v5-poster.png截 t28.5s 一帧做封面 directors notes HTML 源文件 v5-shot-list.csvshot 时间码对照表。全链路时间估算8-11 小时HTML 动画实施 4-6h、关键帧截图视觉校验 1h、录制无声 MP4 5-10min、BGM 生成 30min、SFX 配 cue 混音 2-3h、GIF 派生 5min、海报 10min、最终交付 10min。4. 写 Directors Notes 的 5 条建议4.1 用导演的口吻不用 PM 的口吻❌「This shot displays the product features.」 ✅「This is the hero shot — if the audience pauses anywhere, I want it to be here.」导演笔记是给执行者读的但也是给未来的自己读的。第一人称 judgment 表达比 description 表达留更多决策线索。4.2 引用具体作品含年份不只是流派名❌「Apple-inspired」 ✅「Apple Designed by Apple in California (2013, dir. Mark Romanek) — 学的是慢拍 衬线 大白底」引用具体作品的好处(a) 任何观众都能上网搜到对照 (b) 你逼自己想清楚学的是什么具体技术 (c) 防止「灵感模糊」。4.3 每个决策都 trace 回 first principle整支片有一句 first principle如 Markdown is the new typewriter.。每个具体决策——配色 / 字体 / 节奏 / chrome——都要能 trace 回这句话。trace 不上的决策就是装饰删掉。样本的附录正是这句话的完整落地「一支关于『源头』的 typographic film主角是一个md.字符」——如果某个具体决策无法 trace 回这一句话就不要做。4.4 写 anti-slop 比写 do-this 更重要「这部片不做的事」清单紫渐变 / emoji / Lorem ipsum / Inter display / SVG 画人物 / 圆角卡 左 border accent比「这部片做的事」清单更能保护质量。正向决策无穷多负向 checklist 是有限的——但负向 checklist 一旦违反就是 slop。4.5 写完不要立即实施——隔 30 分钟再读一遍写作时大脑在「生产模式」看不见 inconsistency。隔 30 分钟读自己写的 storyboard会发现某两镜功能重复删一个、某镜叙事跳跃太大加过渡、emotional climax 位置错移动、chrome 元素和 shot 数量不匹配重新对齐。这 30 分钟省下的是后期 2 小时的返工。5. Directors Notes → HTML 实施流程写完 directors notes 后HTML 实施步骤复用 starter componentsassets/animations.jsx 的 Stage/Sprite/Easing/interpolate— 不重新发明CSS 变量直接从 Visual System Part II 粘贴— 不在 HTML 里临时改色按 Sprite start/end 时间轴对照 Part IV 时间码— 不擅自加镜chrome 元素抽成独立组件ChromeA/B/C/D用 useTime() 驱动状态切换destination cards 内容必须真实可读不是 fake bar lines——这是 v5 项目里最被反复提及的 120% 细节签名样本中每张 destination card 里都是可读的英文哲学小段或真实的 markdown 源码不是装饰条每写完一镜就立即截关键帧验证用?tNNURL 参数 Playwright不要写完全片再统一验证其中第 1 步的 Stage/Sprite/Easing/interpolate/useTime 就是仓库 assets/animations.jsx 中提供的动画运行时基础件directors notes 中写死的 easing 库expoOut/overshoot/linear/expoIn与 duration 字典最终都会映射到这些组件的参数上——这正是「笔记是 spec、组件是执行器」的分工。第 4 步的 useTime() 驱动与样本 Part II.5 中 Chrome 元素「按时间码入退场」的 spec 一一对应。6. 关键帧验证流程URL 参数实现必须在 Stage 组件加const urlMatch window.location.search.match(/[?]t([\d.])/); const frozenTime urlMatch ? parseFloat(urlMatch[1]) : null; const [time, setTime] useState(frozenTime ! null ? frozenTime : 0); const [playing, setPlaying] useState(frozenTime null);→ 这样file:///path/animation.html?t14.5直接 freeze 在 14.5 秒。批量截图Playwright CLI 循环for t in 0.5 2.5 4.9 7.0 10.5 13.5 16.5 19.0 21.5 23.4 25.5 28.0 29.9; do npx -y playwright screenshot \ file://$PWD/animation.html?t$t \ keyframes/t-$t.png \ --viewport-size1920,1136 \ --wait-for-timeout2500 done样本的验证计划进一步给出了每帧的验证意图如t0.5 ← SHOT 01 mid: blank ivory page检验 paper texture 不抢戏、t19.0 ← SHOT 08 mid: PDFs fanned out检验 crop marks 可见、t28.5 ← SHOT 12 marketing frame检验整体 marketing-ready 一帧一共 16 个关键帧时间码覆盖每一镜的中段与结束态。每张截图必须验证元素无溢出 1920×1080 canvas字距、行高 visually correct不挤、不散关键 typography 细节句点颜色 / em-dash / italic / small caps可识别chrome 元素位置 状态正确反 AI slop checklist 通过「pause 时值得看」的 120% 细节存在文档特别强调关键帧验证是最便宜的 quality gate——跳过它直接录 MP4 必然返工。7. 多视角并行策略advanced复杂项目如 launch film 选不出方向 / 想看多个美学差异 / 客户没拍板风格可以启动多个 subagent 并行做不同导演视角的版本。实战配置2026-05-11 huashu-md-html 项目并行 6 个版本v5 · 基线Anthropic / Penguin Classics 出版社品位 v5a · Wes Anderson对称 复古 章节卡片 v5b · Saul Bass剪纸 60s 大字 几何切割 v5c · 王家卫中文衬线 慢动作 怀旧 v5d · Massimo Vignelli现代主义 grid 红黑 v5e · 原研哉 Kenya Hara极简日式 留白 v5f · 草间彌生 Yayoi Kusama圆点 重复 单一强色每个 subagent 接到独立 brief项目背景同一份、必读参考同一份 v5-director-notes.md 作为方法论模板、指定的艺术家 DNA色板 / 字体 / 视觉语言 / 节奏 / 招牌元素 / 反 slop 强化版本每条 30-50 字、统一任务清单director-notes.md animation.html keyframes/ README.md、统一约束30s / 1920×1080 / file:// / Google Fonts。并行启动 后台运行约 30-60 分钟出 6 套完整版本。完成后审校对比① 各版本核心美学决策表② 关键帧并排对比每版同时刻一帧③ 投票哪个最贴合用户的真实需求。关键不要让 subagent 之间相互参考——它们必须独立产出否则就会撞到「平均值」。每个 subagent 的指令里要明说「不要重复 v5 的美学」。仓库中 references/multi-perspective-parallel-case-study.md 对这类多视角并行案例有更深入的展开可配合阅读。8. 参考样本完整 directors notes 参考样本self-contained本 skill 内assets/director-notes-samples/launch-film-30s-sample.md约 78KB · 11500 字 · 13 镜 · 5 大部分齐全这份样本的完整内容链Part I 创作论含 7 个视觉参照、三类受众画像、反 slop 不做清单→ Part II 视觉系统10 色色板 / 10 级字体系统 / 1920×1080 网格 / 4 条 easing / 5 个 Chrome / 7 层 BGM 15 SFX cues / 12 项 per-shot 自检→ Part III 故事弧三幕 PEAK 24.5s 情绪曲线→ Part IV 13 镜分镜每镜 11 字段全量展开→ Part V 制作清单字体 / CSS 变量 / BGM prompt / 录制参数 / 混音命令 / 交付物 / 8-11h 时间表 first principle 附录。原始项目位置含对应实施 HTML 关键帧为作者本地文件、未随仓库分发v5-director-notes.md、v5-six-forms.html、v5-keyframes/。写新项目时强烈建议先 Read 这份样本理解工作量和细节密度再决定要不要全套走流程。9. 反模式不要这样做❌写 1000 字的精简版 directors notes 就动手→ 精简版必然漏 Visual System 的某个子项导致 HTML 实施时不停回头补 spec。要做就做万字级要省就直接跳过。❌storyboard 只写 5-8 镜→ 30 秒片至少 12-15 镜每镜 2-3 秒。镜少 节奏匀速 没 climax。❌directors notes 写完就交付不做实施→ 文档不是交付物动画才是。文档 动画一起交付文档作为「设计依据」附录。❌多视角并行时让 subagent 看其他版本→ 各 subagent 必须独立否则趋同。审校阶段才对比。❌跳过关键帧验证直接录 MP4→ 必然返工。关键帧验证是最便宜的 quality gate。❌把动画细节决策推迟到「等我录的时候再想」→ 录制阶段是机械执行不能做创意决策。所有决策必须在 directors notes 写死。10. 与仓库整体工作流的衔接这套 launch film 流程在 SKILL.md 的任务路由表中位于「launch film/品牌宣传片」行前面还有一道三方向硬门见本文 2.1 节动画实施阶段还会受到 scripts/design-gate-hook.sh 的硬检查约束≥45s 长片渲染前检查direction-approved.md缺文件会 block 渲染用户明说跳过可用SKIP_DESIGN_GATE1显式放行。与它相邻的参考文档包括references/animations.md普通动画标准流程、references/camera-language.md镜头语言词汇与预算、references/storyboard-basics.md分镜基础与景别体系、references/voiceover-pipeline.md带配音长视频、references/hero-animation-case-study.md普通 hero 动画——按触发判断表本文 2.2 节选择正确入口才能避免「高规格作品过度简化」与「简单 demo 过度工程化」两个方向的失衡。赞分享AI 技能【免费下载链接】huashu-designHuashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 20 设计哲学 5 维评审 MP4 导出 · Agent-agnostic项目地址https://gitcode.com/gh_mirrors/hu/huashu-design点击查看免费下载相关推荐OneUptime 工作流编排实战从画布到源码的工作流编写完整指南OneUptime 工作流编排实战从画布到源码的工作流编写完整指南 OneUptime 内置的可视化工作流引擎允许你通过拖拽式画布把触发器Trigger可观测性后端运维前端云原生微服务AI AgentLifeOS Interceptor Reproduce 工作流实战先在真实 Chrome 中复现 Bug再做代码分析LifeOS Interceptor Reproduce 工作流实战先在真实 Chrome 中复现 Bug再做代码分析 本指南围绕 LifeOS 仓库中 IAI 技能人工智能AI 应用easy-vibe 课程中的 Double Diamond 模型先做对的事再把事做对Discover / Define / Develop / Deliver 完整实战指南easy vibe 课程中的 Double Diamond 模型先做对的事再把事做对Discover / Define / Develop / Deliv教程文档人工智能Vibe Coding上一篇MMArt-PPR10K数据集深度探索55K样本如何赋能AI修图模型下一篇深入解析 Gutenberg 的 withGlobalEvents 高阶组件统一 window 全局事件监听的生命周期管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考