1实现原理 · 为什么它能做到
把交付定义为「工作室」而非单个 HTML 生成器：一件交付要依次扮演艺术总监/品牌研究员/视觉设计师/动效设计师/前端工程师/文案六个角色，媒介变了主导角色就要换。
SKILL.md
**你是设计师，不是写HTML的程序员。** HTML只是你的媒介，就像别人用Figma、…用AE、用InDesign——工具不定义你，交付标准才定义你。
这里在做什么：先把「AI 默认产出不够像人做的」归因到身份与标准，而不是技巧；后续反 slop 与资产协议都由此推出。
三方向硬门：任何会产出新视觉设计的任务 100% 先并行产出三个差异化方向（含真实视觉初稿）给用户选，用户选定后才执行；指定风格或给了品牌资产同样不豁免。
SKILL.md
**任何会产出新视觉设计的任务，无一例外**——需求模糊触发、需求清晰也触发、用户指定了风格（「Apple 宣传片风格」「Stripe 那种感觉」）**同样触发**、给了品牌名/品牌资产**同样触发**。
这里在做什么：把选择权设为不可跳过的前置步骤，防止 AI 自选方向后整片返工；豁免仅三种且必须落档 direction-approved.md。
事实先于假设：#0 原则凌驾其他流程，涉及具体产品/技术/事件的事实性断言先 WebSearch 验证并写入 product-facts.md，禁止凭训练语料断言。
SKILL.md
任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 `WebSearch` 验证，禁止凭训练语料做断言。
这里在做什么：把「我记得…」类句式列为禁止句式，用检索+落档替代记忆，并给 DJI Pocket 4 误判反例（成本对比 WebSearch 10 秒 << 返工 2 小时）。
品牌资产协议（5 步硬流程）：涉及具体品牌时必须取齐官方 logo/产品图/UI 截图，具名产品 logo 是必需资产（出现几个取几个），单文件 HTML 必须 base64 内嵌，缺一即 STOP。
SKILL.md
🔴 **铁律：设计里只要出现一个能被认出的产品/品牌名，它的官方 logo 就是必需资产**（出现几个就取几个），不是「有就用、没有拉倒」。
这里在做什么：把「资产 > 规范」落成可自检的门，对抗「凭想象画品牌」；即使走 Fallback 三方向也不豁免取 logo。
反 AI slop 用「品牌识别度」做判据：AI 默认产出=训练语料平均=稀释品牌，故逐项给出紫渐变/emoji 图标/圆角+左 border/ SVG 画人/Inter 作 display 等禁用清单，唯一合法破例是「品牌本身用」。
SKILL.md
紫渐变、emoji 图标、圆角卡片+左 border accent、SVG 画人脸——这些东西之所以是 slop，不是因为它们本身丑，而是因为**它们是 AI 默认模式下的产物，不携带任何品牌信息**。
这里在做什么：把审美洁癖转写成可推理的「是否携带品牌信息」，并给正向替代（真图/oklch/「」引号/一处 120% 细节）。
Fallback 三套并行逻辑：秒数轮盘（date +%S %20 从 60 种 HTML 原生风格库分区抽签）+ 现实参照（搜索获奖真实案例拆解迁移）+ 最佳设计师（顶级工作室哲学定制），三版骨架必须互异、共用同一批真图。
SKILL.md
跑 `date +%S` 取秒数，算 `秒数 % 20 + 1` 得 1-20，从 `design-styles.md` **对应分区**取那一号风格，subagent 严格按其视觉 DNA + HTML 实现做。
这里在做什么：用时间掷骰强制打破模型「每次偷选安全极简」的确定性偏好，并明确信息图不再往网页分区塞。
检查点物化为 Gate 文件：brand-spec.md / direction-approved.md / 导演稿.md 必须在项目目录存在，设计 gate hook 可在 ≥45s 长片渲染前硬拦，「用户说继续」不等于跳过该步内部 gate。
SKILL.md
检查点容易在长会话里被「继续/开工/快点」的惯性冲掉（2026-07-17 B00实测：跳过方向确认渲210s全片→整片视觉返工）。所以三个关键检查点物化为**项目目录里必须存在的文件**
这里在做什么：把「等用户确认」变成外部工具可校验的文件存在性（scripts/design-gate-hook.sh），长会话也无法默认冲掉。
动画默认交付带音频 MP4：HyperFrames 后端渲染 + 25/60fps 录制 + 派生 GIF + BGM/SFX 双轨（37 个预制音效），ffprobe 验出 audio stream 才算成品。
SKILL.md
**BGM + SFX 双轨制必须同时做**——只做 BGM 是 ⅓ 分完成度；SFX 占高频、BGM 占低频，频段隔离见 audio-design-rules.md 的 ffmpeg 模板
这里在做什么：把「无声版本=半成品」写进交付标准，并附完整管线（render-video*.js、convert-formats.sh、add-music.sh、sfx-cues.sh）与音效密度配方。
2核心能力
01高保真交互原型（App / Web，可点击、可切换状态）
02演示幻灯片 deck：HTML deck（1920×1080 + 概览墙）→ PDF → 可选可编辑 PPTX 双路线
03时间轴动画 / 视频导出（MP4 25/60fps、GIF、BGM + SFX，新项目默认 HyperFrames 后端）
04信息图 / 数据可视化（印刷级排版、可导 PDF/PNG/SVG、独立分区 20 种风格）
05设计方向顾问：三套互补逻辑并行出 3 版真实视觉，背后 60 种 HTML 原生风格库
06App/iOS 原型专属守则：单文件 inline React、ios_frame 设备框、Playwright 点击测试、平铺多屏可交互
07带解说的长概念视频：解说稿驱动 + 豆包 TTS 实测 timeline + narration_stage.jsx（hero 跨段 morph、字幕）
08Tweaks 实时调参 + 5 维度专家评审（哲学一致性/视觉层级/细节执行/功能性/创新性）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | Node/npm 及 playwright/sharp/pptxgenjs/pdf-lib 依赖 |
| cli | ffmpeg（sfx-cues.sh / render-narration.sh / convert-formats.sh / add-music.sh 的合成与混音） |
| cli | Playwright 截图/点击验证（npx playwright screenshot / verify.py） |
| network | 免版权图库 Wikimedia Commons / Unsplash / Pexels（scripts/fetch_images.py 下载真图，内置清代理+合规 UA） |
| api | 豆包 TTS（scripts/cloud/tts-doubao.mjs，可选云能力，自备 key） |
| api | 火山方舟 AI 看片评审（scripts/cloud/ai-review-video.py，可选云能力，自备 key + 显式确认） |
| cli | HyperFrames 渲染后端（新动画项目默认：npm run check 五门审计 → npx hyperframes render） |
| network | Agent 侧 WebSearch（#0 事实验证、逻辑二核实参照案例真实存在） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: scripts/render-video.js / render-video-seek.js / verify.js / verify-video.s
- 网络端点: 声明外部网络访问: scripts/cloud/ai-review-video.py → ark.cn-beijing.volces.com（Volcengine Ark
- 本地工作目录: 文件读写与工件输出: 项目目录交付物：主 HTML、design-demos/*.html、截图、导出 MP4/GIF/PDF/PPTX
审计说明： 判级对象为本 skill 目录（pin 路径 "." = 仓库根）：核心管线是本地 HTML/CSS/JS + ffmpeg + playwright，README 声明「core pipeline runs 100% locally — zero network calls, zero API keys」；但目录内自带 scripts/cloud/ai-review-video.py 与 scripts/cloud/tts-doubao.mjs，会为自身声明用途读取自备 API key（.env）并把用户自己的成片/解说文案送到火山方舟与豆包 TTS 外部服务——命中「为自身声明用途读凭证/env，或把用户素材送外部服务后端」，故判 orange（可选、需自备 key+显式确认，属可控但非纯本地）。fetch_images.py 拉取 Wikimedia/Unsplash/Pexels 属固定公开端点（yellow 量级）被 orange 覆盖。scripts/verify-video.sh 的 eval 与 design-gate-hook.sh 属未受控执行/hook 线索，记入 risks 不改档。同仓 README 的外链（GitHub Releases/YouTube/star-history）属文档与产物期，不判级。
5第二遍独立确认
- [discrepancy] README 宣称「core pipeline 100% locally, zero network calls, zero API keys」与目录内 scripts/cloud/* 是否矛盾 — 声明仅覆盖核心管线（design → render → MP4/PDF/PPTX export），成立；但 skill 目录自带 scripts/cloud/tts-doubao.mjs 与 ai-review-video.py，会读自备 env key 并把用户成片/文案外发火山方舟与豆包 TTS。二者并行不冲突，但判级须按目录取 orange 而非 green/blue。
- [ok] 三方向硬门是否真的可执行、有完整实现路径 — SKILL.md 给出 Fallback Phase 1-5 完整流程、subagent 串/并行规范、三方向初稿形态（网页/信息图/原型 1 HTML+截图，deck 2 页，动画 1 张方向板）、唯一豁免三情形与 direction-approved.md 落档；README 以「设计方向顾问」条目与 demo 佐证。
- [ok] Gate 文件与 hook 是否真实存在且可被硬拦 — SKILL.md 列出 brand-spec.md / direction-approved.md / 导演稿.md 三 Gate 文件与 scripts/design-gate-hook.sh（≥45s 长片渲染前硬检查，SKIP_DESIGN_GATE=1 显式放行）；弱 runtime 降级模式第 5 条明确不豁免 gate 文件。
- [ok] 品牌资产 5 步硬流程与具名 logo 子门是否成立 — 正文给出「问→搜官方渠道→下载（三条兜底）→验证+提取→固化 brand-spec.md」五步，并规定单文件 HTML 必须 base64 内嵌 logo/图片，缺一即 STOP；README 有对应的品牌资产协议 5 步 showcase。
- [ok] 动画音视频管线（HyperFrames 默认 / 60fps / BGM+SFX 双轨）是否可落地 — 正文点名 render-video.js、render-video-seek.js --fps=60、convert-formats.sh、add-music.sh、sfx-cues.sh 与 37 个预制 SFX、6 首 BGM；scripts/sfx-cues.sh 原文可读，ffmpeg amix 混音实现成立。
- [unlocatable] meta.installs 是否有可定位到本 skill 的安装量 — README 只给仓库级命令 `npx skills add alchaincyf/huashu-design`，无 per-skill 安装计数；骨架 installs=null，维持 null。
- [unlocatable] security.scripts_executed 清单是否穷举 — 风险扫描显示「执行外部程序 121 条命中」「写盘 17 条」，bundle 每类只列最多 6 条样例，且 §1 只列最大 60 个文件（共 191）。当前清单依据 bundle §1/§2 与风险扫描命中项归纳，可能仍漏列个别脚本；只读侦查未运行任何脚本，不跨 commit 推广。
- [ok] scripts/verify-video.sh 的 eval 是否构成注入风险 — 风险扫描命中沙箱/未受控执行：`FPS=$(python3 -c "print(round(eval('${FPS_RAW:-0}' ...`，eval 的输入为 ffprobe 解析出的帧率原始串，非用户任意输入，风险有限，但属脚本内动态求值，记入 risks。
6结论
适合： 适合：① 用 HTML/CSS/JS 做高保真原型、演示 deck、时间轴动画、信息图与设计评审的 agent 工作流；② 希望产出「不像 AI 默认模板」、带真实品牌资产与反 slop 纪律的设计交付；③ 需要可点击 App 原型（真设备框 + Playwright 点击测试）或带 BGM+SFX 的成片导出；④ 模糊需求时想要三方向真实初稿供决策，且愿意接受检查点/gate 的流程约束；⑤ 跨 agent（Claude Code/Cursor/Codex 等）安装，或按弱 runtime 降级使用。
不适合： 不适合：① 生产级 Web App、SEO 网站、需后端的动态系统（官方明示不适用）；② 只想要一个成品、拒绝三方向与 gate 流程的用户（硬门会反复停下等选择）；③ 纯文本/无视觉产出的任务；④ 完全离线且不接受任何脚本/宿主工具（playwright/ffmpeg/node）的环境；⑤ 不愿自备 key、又需要使用云端 TTS/AI 评审的场景。
Install Agent-Ready
① Verified Mirror 2026-10-10
Option A · Direct DownloadDownload huashu-design.tar.gz
sha256:
Option B · Copy Guide for Agent17cee9ca3b7bc336…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0830494ecb.