（8554期）花叔Design – HTML驱动的高端设计工作流

HTML驱动的高端设计工作流 用HTML实现高保真原型、交互Demo、幻灯片及动画的一体化设计能力，强调品牌资产协议与反AI slop哲学，支持视频导出与专家级设计评审。 使用说明 花叔Design（Huashu-Design）——HTML驱动的高端设计工作流 花叔Design是一套以HTML为工具、面向专业设计产出的技能体系，核心定位是「用代码做设计」而非「写网页」。它区别于通用前端开发，强调根据任务类型embody不同设计专家身份：做幻灯片时是幻灯片设计师，做动画时是动画师，做App原型时是UX设计师。 核心用法 技能覆盖四大产出场景：交互原型（高保真可点击mockup）、设计变体探索（Tweaks实时调参并排对比）、演示幻灯片（1920×1080 HTML deck，支持导出PDF/PPTX）、动画Demo（时间轴驱动motion design，支持25fps/60fps MP4及优化GIF导出）。所有产出遵循「HTML优先」架构，确保浏览器可运行、可验证。 显著优点 品牌资产协议（§1.a）：任务涉及具体品牌时强制执行五步流程——问清单→搜官方渠道→下载Logo/产品图/UI截图→验证提取→固化brand-spec.md。这是v1版本最核心的稳定性约束，直接决定输出是40分还是90分。 反AI slop哲学：系统性规避训练语料中的「视觉最大公约数」（紫渐变、emoji图标、圆角卡片+左border accent、SVG手画产品等），通过品牌真实资产、具体设计哲学引用（Pentagram/Field.io/Kenya Hara等）、排版细节（text-wrap: pretty、oklch色值、「」引号）建立专业识别度。 解说驱动长动画pipeline：针对5-20分钟概念视频，采用「豆包TTS生人声→实测时长生timeline.json→NarrationStage驱动画面→ducking混音」流程，铁律是「整片为一个连续运动叙事，禁PowerPoint切换」。 专家级5维度评审：交付后可选项，从哲学一致性、视觉层级、细节执行、功能性、创新性各0-10分打分，输出修复清单。 潜在局限 学习曲线陡峭：需理解React+Babel inline架构、Playwright验证、品牌资产协议等复杂流程，新手易因跳过检查点而返工。 环境依赖：视频导出需ffmpeg、Playwright等本地工具链，跨平台适配需额外注意。 非生产级Web开发：明确排除SEO网站、后端动态系统，这些需用frontend-design skill。 适合人群 需要高保真原型演示的产品经理/UX设计师 追求「Apple级别」动画质感的品牌/营销团队 希望用代码实现精确视觉控制的设计系统负责人 内容创作者（需要带解说的知识科普视频） 常规风险 事实验证遗漏：涉及具体产品时若跳过WebSearch验证存在性/版本/规格，会导致基于错误假设的返工（如DJI Pocket 4案例）。 资产协议执行不完整：只抽色值不找Logo/产品图，会用CSS剪影生成「通用科技动画」，品牌识别度归零。 动画质感陷阱：未读animation-pitfalls.md直接写Stage/Sprite，易踩14类坑（如scrollIntoView破坏容器、未实现ready/recording检测导致录视频失败）。 音频半成品：动画默认需带BGM+SFX双轨，跳过则感知廉价。 原始说明 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计...