{"id":"26ce102e-d44a-4dc1-8915-e83e2e3f997b","entityType":"agent","slug":"clawhub-swang066-huashu-design","name":"花叔Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-swang066-huashu-design","canonicalPath":"/agent/clawhub-swang066-huashu-design","generatedAt":"2026-10-09T23:44:05.957Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":null},"description":"花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计... Skill: 花叔Design Owner: swang066 Summary: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T04:25:46.479Z | auto huashu-design 1.0.0 - Initial release of Huashu-Design: an HTML-based workflow for hi-fi prototypes, interactive demos, slides, animation, an","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 2.3K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s176q3ybp3aczhkx9vxevhqhn987km6w:huashu-design","sourceUrl":"https://clawhub.ai/swang066/huashu-design","homepage":"https://clawhub.ai/swang066/skills/huashu-design","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/swang066/huashu-design","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/swang066/skills/huashu-design","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":67,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":null},"stars":null,"forks":null,"downloads":2322,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"2.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T16:22:26.384Z","lastCrawledAt":"2026-10-09T16:22:26.384Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T16:22:26.384Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-05-28T04:25:46.479Z","changelog":"huashu-design 1.0.0 - Initial release of Huashu-Design: an HTML-based workflow for hi-fi prototypes, interactive demos, slides, animation, and design exploration. - Features an end-to-end process for asset gathering, design direction advising, expert review, and multi-format (HTML/MP4/GIF) output. - Emphasizes \"fact-checking first\" for all product-specific tasks, with strict workflows for brand assets (logos, product images, UI screenshots, color/fonts). - Includes clear fallback “design advisor” mode with 20+ philosophies and multi-demo generation when user input is vague. - Workflow prioritizes real assets, deep reasoning, anti-generic design, and rigorous quality gates over generic/placeholder content. - Playwright testing, media export with BGM and narration pipeline, and detailed review criteria are built-in.","fileCount":102,"zipByteSize":553261}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s176q3ybp3aczhkx9vxevhqhn987km6w:huashu-design","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-09T23:44:05.952Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-swang066-huashu-design/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":null},"readme":"Skill: 花叔Design\n\nOwner: swang066\n\nSummary: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-05-28T04:25:46.479Z | auto\n\nhuashu-design 1.0.0\n\n- Initial release of Huashu-Design: an HTML-based workflow for hi-fi prototypes, interactive demos, slides, animation, and design exploration.\n- Features an end-to-end process for asset gathering, design direction advising, expert review, and multi-format (HTML/MP4/GIF) output.\n- Emphasizes \"fact-checking first\" for all product-specific tasks, with strict workflows for brand assets (logos, product images, UI screenshots, color/fonts).\n- Includes clear fallback “design advisor” mode with 20+ philosophies and multi-demo generation when user input is vague.\n- Workflow prioritizes real assets, deep reasoning, anti-generic design, and rigorous quality gates over generic/placeholder content.\n- Playwright testing, media export with BGM and narration pipeline, and detailed review criteria are built-in.\n\nArchive index:\n\nArchive v1.0.0: 102 files, 553261 bytes\n\nFiles: assets/android_frame.jsx (4506b), assets/animations.jsx (10079b), assets/banner.svg (9502b), assets/browser_window.jsx (3975b), assets/deck_index.html (8145b), assets/deck_stage.js (11678b), assets/design_canvas.jsx (5195b), assets/director-notes-samples/launch-film-30s-sample.md (80207b), assets/ios_frame.jsx (4753b), assets/macos_window.jsx (2536b), assets/narration_stage.jsx (17626b), assets/personal-asset-index.example.json (1826b), assets/showcases/cover/cover-build.html (5664b), assets/showcases/cover/cover-pentagram.html (4914b), assets/showcases/cover/cover-takram.html (11823b), assets/showcases/INDEX.md (5538b), assets/showcases/infographic/infographic-build.html (11696b), assets/showcases/infographic/infographic-pentagram.html (13911b), assets/showcases/infographic/infographic-takram.html (22396b), assets/showcases/ppt/ppt-build.html (9083b), assets/showcases/ppt/ppt-pentagram.html (11955b), assets/showcases/ppt/ppt-takram.html (15656b), assets/showcases/website-ai-nav/ainav-build.html (9621b), assets/showcases/website-ai-nav/ainav-pentagram.html (10553b), assets/showcases/website-ai-nav/ainav-takram.html (12747b), assets/showcases/website-ai-writing/aiwriting-build.html (14066b), assets/showcases/website-ai-writing/aiwriting-pentagram.html (14226b), assets/showcases/website-ai-writing/aiwriting-takram.html (18003b), assets/showcases/website-devdocs/devdocs-build.html (9928b), assets/showcases/website-devdocs/devdocs-pentagram.html (12801b), assets/showcases/website-devdocs/devdocs-takram.html (13106b), assets/showcases/website-homepage/homepage-build.html (8314b), assets/showcases/website-homepage/homepage-pentagram.html (8491b), assets/showcases/website-homepage/homepage-takram.html (10543b), assets/showcases/website-saas/saas-build.html (12901b), assets/showcases/website-saas/saas-pentagram.html (15050b), assets/showcases/website-saas/saas-takram.html (18209b), demos/c1-ios-prototype-en.html (35163b), demos/c1-ios-prototype.html (35149b), demos/c2-slides-pptx-en.html (32906b), demos/c2-slides-pptx.html (32975b), demos/c3-motion-design-en.html (37031b), demos/c3-motion-design.html (37048b), demos/c4-tweaks-en.html (31102b), demos/c4-tweaks.html (31150b), demos/c5-infographic-en.html (24941b), demos/c5-infographic.html (24823b), demos/c6-expert-review-en.html (26382b), demos/c6-expert-review.html (26822b), demos/hero-animation-v10-en.html (48712b), demos/md-html-narration/md-html-demo.html (37270b), demos/md-html-narration/script.md (3452b), demos/voiceover-demo/script.md (589b), demos/voiceover-demo/什么是token.html (11410b), demos/w1-brand-protocol-en.html (20572b), demos/w1-brand-protocol.html (20905b), demos/w2-junior-designer-en.html (31305b), demos/w2-junior-designer.html (31764b), demos/w3-fallback-advisor-en.html (23802b), demos/w3-fallback-advisor.html (26314b), LICENSE (1086b), README.md (16506b), README.zh.md (15312b), references/animation-best-practices.md (21012b), references/animation-pitfalls.md (22314b), references/animations.md (7427b), references/apple-gallery-showcase.md (11233b), references/audio-design-rules.md (9719b), references/cinematic-patterns.md (11086b), references/content-guidelines.md (8389b), references/critique-guide.md (7463b), references/design-context.md (6704b), references/design-styles.md (18484b), references/editable-pptx.md (15942b), references/hero-animation-case-study.md (11348b), references/launch-film-director-notes.md (14284b), references/multi-perspective-parallel-case-study.md (11090b), references/react-setup.md (9318b), references/scene-templates.md (7144b), references/sfx-library.md (9762b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: huashu-design\ndescription: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、概念解释视频、长视频科普、配音动画、voiceover、narration、TTS+动画、5分钟讲清楚什么是XX。**主干能力**：Junior Designer工作流（先给假设+reasoning+placeholder再迭代）、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components（幻灯片外壳/变体画布/动画引擎/设备边框/解说Stage）、App原型专属守则（默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试）、Playwright验证、HTML动画→MP4/GIF视频导出（25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade）、**带解说的长动画pipeline**（豆包TTS生人声+实测时长生timeline.json+NarrationStage驱动画面+ducking混音→交付HTML实播+发布MP4双形态；铁律：整片是一个连续的运动叙事，禁PowerPoint切换）。**需求模糊时的Fallback**：设计方向顾问模式——从5流派×20种设计哲学（Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等）推荐3个差异化方向，展示24个预制showcase（8场景×3风格），并行生成3个视觉Demo让用户选。**交付后可选**：专家级5维度评审（哲学一致性/视觉层级/细节执行/功能性/创新性各打10分+修复清单）。\n---\n\n# 花叔Design · Huashu-Design\n\n你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。\n\n**HTML是工具，但你的媒介和产出形式会变**——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。**根据任务embody对应领域的专家**：动画师/UX设计师/幻灯片设计师/原型师。\n\n## 使用前提\n\n这个skill专为「用HTML做视觉产出」的场景设计，不是给任何HTML任务用的万能勺。适用场景：\n\n- **交互原型**：高保真产品mockup，用户可以点击、切换、感受流程\n- **设计变体探索**：并排对比多个设计方向，或用Tweaks实时调参\n- **演示幻灯片**：1920×1080的HTML deck，可以当PPT用\n- **动画Demo**：时间轴驱动的motion design，做视频素材或概念演示\n- **信息图/可视化**：精确排版、数据驱动、印刷级质量\n\n不适用场景：生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。\n\n## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程）\n\n> **任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 `WebSearch` 验证，禁止凭训练语料做断言。**\n\n**触发条件（满足任一）**：\n- 用户提到你不熟悉或不确定的具体产品名（如\"大疆 Pocket 4\"、\"Nano Banana Pro\"、\"Gemini 3 Pro\"、某新版 SDK）\n- 涉及 2024 年及之后的发布时间线、版本号、规格参数\n- 你内心冒出\"我记得好像是...\"、\"应该还没发布\"、\"大概在...\"、\"可能不存在\"的句式\n- 用户请求给某个具体产品/公司做设计物料\n\n**硬流程（开工前执行，优先于 clarifying questions）**：\n1. `WebSearch` 产品名 + 最新时间词（\"2026 latest\"、\"launch date\"、\"release\"、\"specs\"）\n2. 读 1-3 条权威结果，确认：**存在性 / 发布状态 / 最新版本号 / 关键规格**\n3. 把事实写进项目的 `product-facts.md`（见工作流 Step 2），不靠记忆\n4. 搜不到或结果模糊 → 问用户，而不是自行假设\n\n**反例**（2026-04-20 真实踩过的坑）：\n- 用户：\"给大疆 Pocket 4 做发布动画\"\n- 我：凭记忆说\"Pocket 4 还没发布，我们做概念 demo\"\n- 真相：Pocket 4 已在 4 天前（2026-04-16）发布，官方 Launch Film + 产品渲染图俱在\n- 后果：基于错误假设做了\"概念剪影\"动画，违背用户期待，返工 1-2 小时\n- **成本对比：WebSearch 10 秒 << 返工 2 小时**\n\n**这条原则优先级高于\"问 clarifying questions\"**——问问题的前提是你对事实已有正确理解。事实错了，问什么都是歪的。\n\n**禁止句式（看到自己要说这些时，立即停下去搜）**：\n- ❌ \"我记得 X 还没发布\"\n- ❌ \"X 目前是 vN 版本\"（未经搜索的断言）\n- ❌ \"X 这个产品可能不存在\"\n- ❌ \"据我所知 X 的规格是...\"\n- ✅ \"我 `WebSearch` 一下 X 最新状态\"\n- ✅ \"搜到的权威来源说 X 是 ...\"\n\n**与\"品牌资产协议\"的关系**：本原则是资产协议的**前提**——先确认产品存在且是什么，再去找它的 logo/产品图/色值。顺序不能反。\n\n---\n\n## 核心哲学（优先级从高到低）\n\n### 1. 从existing context出发，不要凭空画\n\n好的hi-fi设计**一定**是从已有上下文长出来的。先问用户是否有design system/UI kit/codebase/Figma/截图。**凭空做hi-fi是last resort，一定会产出generic的作品**。如果用户说没有，先帮他去找（看项目里有没有，看有没有参考品牌）。\n\n**如果还是没有，或者用户需求表达很模糊**（如\"做个好看的页面\"、\"帮我设计\"、\"不知道要什么风格\"、\"做个XX\"没有具体参考），**不要凭通用直觉硬做**——进入 **设计方向顾问模式**，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。\n\n#### 1.a 核心资产协议（涉及具体品牌时强制执行）\n\n> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。\n>\n> **v1.1 重构（2026-04-20）**：从「品牌资产协议」升级为「核心资产协议」。之前的版本过度聚焦色值和字体，漏掉了设计中最基础的 logo / 产品图 / UI 截图。花叔的原话：「除了所谓的品牌色，显然我们应该找到并且用上大疆的 logo，用上 pocket4 的产品图。如果是网站或者 app 等非实体产品的话，logo 至少该是必须的。这可能是比所谓的品牌设计的 spec 更重要的基本逻辑。否则，我们在表达什么呢？」\n\n**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。\n\n**前置硬条件**：走协议前必须已通过「#0 事实验证先于假设」确认品牌/产品存在且状态已知。如果你还不确定产品是否已发布/规格/版本，先回去搜。\n\n##### 核心理念：资产 > 规范\n\n**品牌的本质是「它被认出来」**。认出来靠什么？按识别度排序：\n\n| 资产类型 | 识别度贡献 | 必需性 |\n|---|---|---|\n| **Logo** | 最高 · 任何品牌出现 logo 就一眼识别 | **任何品牌都必须有** |\n| **产品图/产品渲染图** | 极高 · 实体产品的\"主角\"就是产品本身 | **实体产品（硬件/包装/消费品）必须有** |\n| **UI 截图/界面素材** | 极高 · 数字产品的\"主角\"是它的界面 | **数字产品（App/网站/SaaS）必须有** |\n| **色值** | 中 · 辅助识别，脱离前三项时经常撞衫 | 辅助 |\n| **字体** | 低 · 需配合前述才能建立识别 | 辅助 |\n| **气质关键词** | 低 · agent 自检用 | 辅助 |\n\n**翻译成执行规则**：\n- 只抽色值 + 字体、不找 logo / 产品图 / UI → **违反本协议**\n- 用 CSS 剪影/SVG 手画替代真实产品图 → **违反本协议**（生成的就是「通用科技动画」，任何品牌都长一样）\n- 找不到资产不告诉用户、也不 AI 生成，硬做 → **违反本协议**\n- 宁可停下问用户要素材，也不要用 generic 填充\n\n##### 5 步硬流程（每步有 fallback，绝不静默跳过）\n\n##### Step 1 · 问（资产清单一次问全）\n\n不要只问「有 brand guidelines 吗？」——太宽泛，用户不知道该给什么。按清单逐项问：\n\n```\n关于 ，你手上有以下哪些资料？我按优先级列：\n1. Logo（SVG / 高清 PNG）—— 任何品牌必备\n2. 产品图 / 官方渲染图 —— 实体产品必备（如 DJI Pocket 4 的产品照）\n3. UI 截图 / 界面素材 —— 数字产品必备（如 App 主要页面截图）\n4. 色值清单（HEX / RGB / 品牌色盘）\n5. 字体清单（Display / Body）\n6. Brand guidelines PDF / Figma design system / 品牌官网链接\n\n有的直接发我，没有的我去搜/抓/生成。\n```\n\n##### Step 2 · 搜官方渠道（按资产类型）\n\n| 资产 | 搜索路径 |\n|---|---|\n| **Logo** | `.com/brand` · `.com/press` · `.com/press-kit` · `brand..com` · 官网 header 的 inline SVG |\n| **产品图/渲染图** | `.com/` 产品详情页 hero image + gallery · 官方 YouTube launch film 截帧 · 官方新闻稿附图 |\n| **UI 截图** | App Store / Google Play 产品页截图 · 官网 screenshots section · 产品官方演示视频截帧 |\n| **色值** | 官网 inline CSS / Tailwind config / brand guidelines PDF |\n| **字体** | 官网 `` 引用 · Google Fonts 追踪 · brand guidelines |\n\n`WebSearch` 兜底关键词：\n- Logo 找不到 → ` logo download SVG`、` press kit`\n- 产品图找不到 → ` official renders`、` product photography`\n- UI 找不到 → ` app screenshots`、` dashboard UI`\n\n##### Step 3 · 下载资产 · 按类型三条兜底路径\n\n**3.1 Logo（任何品牌必需）**\n\n三条路径按成功率递减：\n1. 独立 SVG/PNG 文件（最理想）：\n ```bash\n curl -o assets/-brand/logo.svg https://.com/logo.svg\n curl -o assets/-brand/logo-white.svg https://.com/logo-white.svg\n ```\n2. 官网 HTML 全文提取 inline SVG（80% 场景必用）：\n ```bash\n curl -A \"Mozilla/5.0\" -L https://.com -o assets/-brand/homepage.html\n # 然后 grep ... 提取 logo 节点\n ```\n3. 官方社交媒体 avatar（最后手段）：GitHub/Twitter/LinkedIn 的公司头像通常是 400×400 或 800×800 透明底 PNG\n\n**3.2 产品图/渲染图（实体产品必需）**\n\n按优先级：\n1. **官方产品页 hero image**（最高优先级）：右键查看图片地址 / curl 获取。分辨率通常 2000px+\n2. **官方 press kit**：`.com/press` 常有高清产品图下载\n3. **官方 launch video 截帧**：用 `yt-dlp` 下载 YouTube 视频，ffmpeg 抽几帧高清图\n4. **Wikimedia Commons**：公共领域常有\n5. **AI 生成兜底**（nano-banana-pro）：把真实产品图作为参考发给 AI，让它生成符合动画场景的变体。**不要用 CSS/SVG 手画代替**\n\n```bash\n# 示例：下载 DJI 官网产品 hero image\ncurl -A \"Mozilla/5.0\" -L \"\" -o assets/-brand/product-hero.png\n```\n\n**3.3 UI 截图（数字产品必需）**\n\n- App Store / Google Play 的产品截图（注意：可能是 mockup 而非真实 UI，要对比）\n- 官网 screenshots section\n- 产品演示视频截帧\n- 产品官方 Twitter/X 的发布截图（常是最新版本）\n- 用户有账号时，直接截屏真实产品界面\n\n**3.4 · 素材质量门槛「5-10-2-8」原则（铁律）**\n\n> **Logo 的规则不同于其他素材**。Logo 有就必须用（没有就停下问用户）；其他素材（产品图/UI/参考图/配图）遵循「5-10-2-8」质量门槛。\n>\n> 2026-04-20 花叔原话：「我们的原则是搜索 5 轮，找到 10 个素材，选择 2 个好的。每个需要评分 8/10 以上，宁可少一些，也不为了完成任务滥竽充数。」\n\n| 维度 | 标准 | 反模式 |\n|---|---|---|\n| **5 轮搜索** | 多渠道交叉搜（官网 / press kit / 官方社媒 / YouTube 截帧 / Wikimedia / 用户账号截屏），不是一轮抓前 2 个就停 | 第一页结果直接用 |\n| **10 个候选** | 至少凑 10 个备选才开始筛 | 只抓 2 个，没得选 |\n| **选 2 个好的** | 从 10 个里精选 2 个作为最终素材 | 全都用 = 视觉过载 + 品位稀释 |\n| **每个 8/10 分以上** | 不够 8 分**宁可不用**，用诚实 placeholder（灰块+文字标签）或 AI 生成（nano-banana-pro 以官方参考为基底）| 凑数 7 分素材进 brand-spec.md |\n\n**8/10 评分维度**（打分时记录在 `brand-spec.md`）：\n\n1. **分辨率** · ≥2000px（印刷/大屏场景 ≥3000px）\n2. **版权清晰度** · 官方来源 > 公共领域 > 免费素材 > 疑似盗图（疑似盗图直接 0 分）\n3. **与品牌气质契合度** · 和 brand-spec.md 里的「气质关键词」一致\n4. **光线/构图/风格一致性** · 2 个素材放一起不打架\n5. **独立叙事能力** · 能单独表达一个叙事角色（不是装饰）\n\n**为什么这个门槛是铁律**：\n- 花叔的哲学：**宁缺毋滥**。滥竽充数的素材比没有更糟——污染视觉品味、传递「不专业」信号\n- **「一个细节做到 120%，其他做到 80%」的量化版**：8 分是\"其他 80%\" 的底线，真正 hero 素材要 9-10 分\n- 消费者看作品时，每一个视觉元素都在**积分或扣分**。7 分素材 = 扣分项，不如留空\n\n**Logo 例外**（重申）：有就必须用，不适用「5-10-2-8」。因为 logo 不是「多选一」问题，而是「识别度根基」问题——就算 logo 本身只有 6 分，也比没有 logo 强 10 倍。\n\n##### Step 4 · 验证 + 提取（不只是 grep 色值）\n\n| 资产 | 验证动作 |\n|---|---|\n| **Logo** | 文件存在 + SVG/PNG 可打开 + 至少两个版本（深底/浅底用）+ 透明背景 |\n| **产品图** | 至少一张 2000px+ 分辨率 + 去背或干净背景 + 多个角度（主视角、细节、场景） |\n| **UI 截图** | 分辨率真实（1x / 2x）+ 是最新版本（不是旧版）+ 无用户数据污染 |\n| **色值** | `grep -hoE '#[0-9A-Fa-f]{6}' assets/-brand/*.{svg,html,css} \\| sort \\| uniq -c \\| sort -rn \\| head -20`，过滤黑白灰 |\n\n**警惕示范品牌污染**：产品截图里常有用户 demo 的品牌色（如某工具截图演示喜茶红），那不是该工具的色。**同时出现两种强色时必须区分**。\n\n**品牌多切面**：同一品牌的官网营销色和产品 UI 色经常不同（Lovart 官网暖米+橙，产品 UI 是 Charcoal + Lime）。**两套都是真的**——根据交付场景选合适的切面。\n\n##### Step 5 · 固化为 `brand-spec.md` 文件（模板必须覆盖所有资产）\n\n```markdown\n# · Brand Spec\n> 采集日期：YYYY-MM-DD\n> 资产来源：<列出下载来源>\n> 资产完整度：<完整 / 部分 / 推断>\n\n## 🎯 核心资产（一等公民）\n\n### Logo\n- 主版本：`assets/-brand/logo.svg`\n- 浅底反色版：`assets/-brand/logo-white.svg`\n- 使用场景：<片头/片尾/角落水印/全局>\n- 禁用变形：<不能拉伸/改色/加描边>\n\n### 产品图（实体产品必填）\n- 主视角：`assets/-brand/product-hero.png`（2000×1500）\n- 细节图：`assets/-brand/product-detail-1.png` / `product-detail-2.png`\n- 场景图：`assets/-brand/product-scene.png`\n- 使用场景：<特写/旋转/对比>\n\n### UI 截图（数字产品必填）\n- 主页：`assets/-brand/ui-home.png`\n- 核心功能：`assets/-brand/ui-feature-.png`\n- 使用场景：<产品展示/Dashboard 渐现/对比演示>\n\n## 🎨 辅助资产\n\n### 色板\n- Primary: #XXXXXX <来源标注>\n- Background: #XXXXXX\n- Ink: #XXXXXX\n- Accent: #XXXXXX\n- 禁用色: <品牌明确不用的色系>\n\n### 字型\n- Display: \n- Body: \n- Mono（数据 HUD 用）: \n\n### 签名细节\n- <哪些细节是「120% 做到」的>\n\n### 禁区\n- <明确不能做的：比如 Lovart 不用蓝色、Stripe 不用低饱和暖色>\n\n### 气质关键词\n- <3-5 个形容词>\n```\n\n**写完 spec 后的执行纪律（硬要求）**：\n- 所有 HTML 必须**引用** `brand-spec.md` 里的资产文件路径，不允许用 CSS 剪影/SVG 手画代替\n- Logo 作为 `` 引用真实文件，不重画\n- 产品图作为 `` 引用真实文件，不用 CSS 剪影代替\n- CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-*)`\n- 这让品牌一致性从「靠自觉」变成「靠结构」——想临时加色要先改 spec\n\n##### 全流程失败的兜底\n\n按资产类型分别处理：\n\n| 缺失 | 处理 |\n|---|---|\n| **Logo 完全找不到** | **停下问用户**，不要硬做（logo 是品牌识别度的根基） |\n| **产品图（实体产品）找不到** | 优先 nano-banana-pro AI 生成（以官方参考图为基底）→ 次选向用户索取 → 最后才是诚实 placeholder（灰块+文字标签，明确标注\"产品图待补\"） |\n| **UI 截图（数字产品）找不到** | 向用户索取自己账号的截屏 → 官方演示视频截帧。不用 mockup 生成器凑 |\n| **色值完全找不到** | 按「设计方向顾问模式」走，向用户推荐 3 个方向并标注 assumption |\n\n**禁止**：找不到资产就静默用 CSS 剪影/通用渐变硬做——这是协议最大的反 pattern。**宁可停下问，也不要凑**。\n\n##### 反例（真实踩过的坑）\n\n- **Kimi 动画**：凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍\n- **Lovart 设计**：把产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计\n- **DJI Pocket 4 发布动画（2026-04-20，触发本协议升级的真实案例）**：走了旧版只抽色值的协议，没下载 DJI logo、没找 Pocket 4 产品图，用 CSS 剪影代替产品——做出来是「通用黑底+橙 accent 的科技动画」，没有大疆识别度。花叔原话：「否则，我们在表达什么呢？」→ 协议升级。\n- 抽完色没写进 brand-spec.md，第三页就忘了主色数值，临场加了个「接近但不是」的 hex——品牌一致性崩溃\n\n##### 协议代价 vs 不做代价\n\n| 场景 | 时间 |\n|---|---|\n| 正确走完协议 | 下载 logo 5 min + 下载 3-5 张产品图/UI 10 min + grep 色值 5 min + 写 spec 10 min = **30 分钟** |\n| 不做协议的代价 | 做出没识别度的通用动画 → 用户返工 1-2 小时，甚至重做 |\n\n**这是稳定性最便宜的投资**。尤其对商单/发布会/重要客户项目，30 分钟的资产协议是保命钱。\n\n### 2. Junior Designer模式：先展示假设，再执行\n\n你是manager的junior designer。**不要一头扎进去闷头做大招**。HTML文件的开头先写下你的assumptions + reasoning + placeholders，**尽早show给用户**。然后：\n- 用户确认方向后，再写React组件填placeholder\n- 再show一次，让用户看进度\n- 最后迭代细节\n\n这个模式的底层逻辑是：**理解错了早改比晚改便宜100倍**。\n\n### 3. 给variations，不给「最终答案」\n\n用户要你设计，不要给一个完美方案——给3+个变体，跨不同维度（视觉/交互/色彩/布局/动画），**从by-the-book到novel逐级递进**。让用户mix and match。\n\n实现方式：\n- 纯视觉对比 → 用`design_canvas.jsx`并排展示\n- 交互流程/多选项 → 做完整原型，把选项做成Tweaks\n\n### 4. Placeholder > 烂实现\n\n没图标就留灰色方块+文字标签，别画烂SVG。没数据就写``，别编造看起来像数据的假数据。**Hi-fi里，一个诚实的placeholder比一个拙劣的真实尝试好10倍**。\n\n### 5. 系统优先，不要填充\n\n**Don't add filler content**。每个元素都必须earn its place。空白是设计问题，用构图解决，不是靠编造内容填满。**One thousand no's for every yes**。尤其警惕：\n- 「data slop」——没用的数字、图标、stats装饰\n- 「iconography slop」——每个标题都配icon\n- 「gradient slop」——所有背景都渐变\n\n### 6. 反AI slop（重要，必读）\n\n#### 6.1 什么是 AI slop？为什么要反？\n\n**AI slop = AI 训练语料里最常见的\"视觉最大公约数\"**。\n紫渐变、emoji 图标、圆角卡片+左 border accent、SVG 画人脸——这些东西之所以是 slop，不是因为它们本身丑，而是因为**它们是 AI 默认模式下的产物，不携带任何品牌信息**。\n\n**规避 slop 的逻辑链**：\n1. 用户请你做设计，是要**他的品牌被认出来**\n2. AI 默认产出 = 训练语料的平均 = 所有品牌混合 = **没有任何品牌被认出来**\n3. 所以 AI 默认产出 = 帮用户把品牌稀释成\"又一个 AI 做的页面\"\n4. 反 slop 不是审美洁癖，是**替用户保护品牌识别度**\n\n这也是为什么 §1.a 品牌资产协议是 v1 最硬的约束——**服从规范是反 slop 的正向方式**（对的事），清单只是反 slop 的反向方式（不做错的事）。\n\n#### 6.2 核心要规避的（带\"为什么\"）\n\n| 元素 | 为什么是 slop | 什么情况可以用 |\n|------|-------------|---------------|\n| 激进紫色渐变 | AI 训练语料里\"科技感\"的万能公式，出现在 SaaS/AI/web3 每一个落地页 | 品牌本身用紫渐变（如 Linear 某些场景）、或任务就是讽刺/展示这类 slop |\n| Emoji 作图标 | 训练语料里每个 bullet 都配 emoji，是\"不够专业就用 emoji 凑\"的病 | 品牌本身用（如 Notion），或产品受众是儿童/轻松场景 |\n| 圆角卡片 + 左彩色 border accent | 2020-2024 Material/Tailwind 时期的烂大街组合，已成视觉噪音 | 用户明确要求、或这个组合在品牌 spec 里被保留 |\n| SVG 画 imagery（人脸/场景/物品）| AI 画的 SVG 人物永远五官错位，比例诡异 | **几乎没有**——有图就用真图（Wikimedia/Unsplash/AI 生成），没图就留诚实 placeholder |\n| **CSS 剪影/SVG 手画代替真实产品图** | 生成的就是「通用科技动画」——黑底+橙 accent+圆角长条，任何实体产品都长一样，品牌识别度归零（DJI Pocket 4 实测 2026-04-20）| **几乎没有**——先走核心资产协议找真实产品图；真没有时用 nano-banana-pro 以官方参考图为基底生成；实在不行标诚实 placeholder 告诉用户\"产品图待补\" |\n| Inter/Roboto/Arial/system fonts 作 display | 太常见，读者看不出这是\"有设计的产品\"还是\"demo 页\" | 品牌 spec 明确用这些字体（Stripe 用 Sohne/Inter 变体，但是经过微调的） |\n| 赛博霓虹 / 深蓝底 `#0D1117` | GitHub dark mode 美学的烂大街复制 | 开发者工具产品且品牌本身走这方向 |\n\n**判断边界**：「品牌本身用」是唯一能合法破例的理由。品牌 spec 里明写了用紫渐变，那就用——此时它不再是 slop，是品牌签名。\n\n#### 6.3 正向做什么（带\"为什么\"）\n\n- ✅ `text-wrap: pretty` + CSS Grid + 高级 CSS：排版细节是 AI 分不清的\"品味税\"，会用这些的 agent 看起来像真设计师\n- ✅ 用 `oklch()` 或 spec 里已有的色，**不凭空发明新颜色**：所有临场发明的色都会让品牌识别度下降\n- ✅ 配图优先 AI 生成（Gemini / Flash / Lovart），HTML 截图仅在精确数据表格时用：AI 生成的图比 SVG 手画准确，比 HTML 截图有质感\n- ✅ 文案用「」引号不用 \"\"：中文排印规范，也是\"有审校过\"的细节信号\n- ✅ 一个细节做到 120%，其他做到 80%：品味 = 在合适的地方足够精致，不是均匀用力\n\n#### 6.4 反例隔离（演示型内容）\n\n当任务本身就要展示反设计（如本任务就是讲\"什么是 AI slop\"、或对比评测），**不要整页堆 slop**，而是用**诚实的 bad-sample 容器**隔离——加虚线边框 + \"反例 · 不要这样做\" 角标，让反例服务于叙事而不是污染页面主调。\n\n这不是硬规则（不做成模板），是原则：**反例要看得出是反例，不是让页面真的变成 slop**。\n\n完整清单见 `references/content-guidelines.md`。\n\n## 设计方向顾问（Fallback 模式）\n\n**什么时候触发**：\n- 用户需求模糊（\"做个好看的\"、\"帮我设计\"、\"这个怎么样\"、\"做个XX\"没有具体参考）\n- 用户明确要\"推荐风格\"、\"给几个方向\"、\"选个哲学\"、\"想看不同风格\"\n- 项目和品牌没有任何 design context（既没有 design system，又找不到参考）\n- 用户主动说\"我也不知道要什么风格\"\n\n**什么时候 skip**：\n- 用户已经给了明确的风格参考（Figma / 截图 / 品牌规范）→ 直接走「核心哲学 #1」主干流程\n- 用户已经说清楚要什么（\"做个 Apple Silicon 风格的发布会动画\"）→ 直接进 Junior Designer 流程\n- 小修小补、明确的工具调用（\"帮我把这段 HTML 变成 PDF\"）→ skip\n\n不确定就用最轻量版：**列出 3 个差异化方向让用户二选一，不展开不生成**——尊重用户节奏。\n\n### 完整流程（8 个 Phase，顺序执行）\n\n**Phase 1 · 深度理解需求**\n提问（一次最多 3 个）：目标受众 / 核心信息 / 情感基调 / 输出格式。需求已清晰则跳过。\n\n**Phase 2 · 顾问式重述**（100-200 字）\n用自己的话重述本质需求、受众、场景、情感基调。以「基于这个理解，我为你准备了 3 个设计方向」结尾。\n\n**Phase 3 · 推荐 3 套设计哲学**（必须差异化）\n\n每个方向必须：\n- **含设计师/机构名**（如「Kenya Hara 式东方极简」，不是只说「极简主义」）\n- 50-100 字解释「为什么这个设计师适合你」\n- 3-4 条标志性视觉特征 + 3-5 个气质关键词 + 可选代表作\n\n**差异化规则**（必守）：3 个方向**必须来自 3 个不同流派**，形成明显视觉反差：\n\n| 流派 | 视觉气质 | 适合作为 |\n|------|---------|---------|\n| 信息建筑派（01-04） | 理性、数据驱动、克制 | 安全/专业选择 |\n| 运动诗学派（05-08） | 动感、沉浸、技术美学 | 大胆/前卫选择 |\n| 极简主义派（09-12） | 秩序、留白、精致 | 安全/高端选择 |\n| 实验先锋派（13-16） | 先锋、生成艺术、视觉冲击 | 大胆/创新选择 |\n| 东方哲学派（17-20） | 温润、诗意、思辨 | 差异化/独特选择 |\n\n❌ **禁止从同一流派推荐 2 个以上** — 差异化不够用户看不出区别。\n\n详细 20 种风格库 + AI 提示词模板 → `references/design-styles.md`。\n\n**Phase 4 · 展示预制 Showcase 画廊**\n\n推荐 3 方向后，**立即检查** `assets/showcases/INDEX.md` 是否有匹配的预制样例（8 场景 × 3 风格 = 24 个样例）：\n\n| 场景 | 目录 |\n|------|------|\n| 公众号封面 | `assets/showcases/cover/` |\n| PPT 数据页 | `assets/showcases/ppt/` |\n| 竖版信息图 | `assets/showcases/infographic/` |\n| 个人主页 / AI 导航 / AI 写作 / SaaS / 开发文档 | `assets/showcases/website-*/` |\n\n匹配话术：「在启动实时 Demo 之前，先看看这 3 个风格在类似场景的效果 →」然后 Read 对应 .png。\n\n场景模板按输出类型组织 → `references/scene-templates.md`。\n\n**Phase 5 · 生成 3 个视觉 Demo**\n\n> 核心理念：**看到比说到更有效。** 别让用户凭文字想象，直接看。\n\n为 3 个方向各生成一个 Demo——**如果当前 agent 支持 subagent 并行**，启动 3 个并行子任务（后台执行）；**不支持就串行生成**（先后做 3 次，同样能用）。两种路径都能工作：\n- 使用**用户真实内容/主题**（不是 Lorem ipsum）\n- HTML 存 `_temp/design-demos/demo-[风格].html`\n- 截图：`npx playwright screenshot file:///path.html out.png --viewport-size=1200,900`\n- 全部完成后一起展示 3 张截图\n\n风格类型路径：\n| 风格最佳路径 | Demo 生成方式 |\n|-------------|--------------|\n| HTML 型 | 生成完整 HTML → 截图 |\n| AI 生成型 | `nano-banana-pro` 用风格 DNA + 内容描述 |\n| 混合型 | HTML 布局 + AI 插画 |\n\n**Phase 6 · 用户选择**：选一个深化 / 混合（\"A 的配色 + C 的布局\"）/ 微调 / 重来 → 回 Phase 3 重新推荐。\n\n**Phase 7 · 生成 AI 提示词**\n结构：`[设计哲学约束] + [内容描述] + [技术参数]`\n- ✅ 用具体特征而非风格名（写「Kenya Hara 的留白感+赤土橙 #C04A1A」，不写「极简」）\n- ✅ 包含颜色 HEX、比例、空间分配、输出规格\n- ❌ 避开审美禁区（见反 AI slop）\n\n**Phase 8 · 选定方向后进入主干**\n方向确认 → 回到「核心哲学」+「工作流程」的 Junior Designer pass。这时已经有明确的 design context，不再是凭空做。\n\n**真实素材优先原则**（涉及用户本人/产品时）：\n1. 先查用户配置的**私有 memory 路径**下的 `personal-asset-index.json`（Claude Code 默认在 `~/.claude/memory/`；其他 agent 按其自身约定）\n2. 首次使用：复制 `assets/personal-asset-index.example.json` 到上述私有路径，填入真实数据\n3. 找不到就直接问用户要，不要编造——真实数据文件不要放在 skill 目录内避免随分发泄露隐私\n\n## App / iOS 原型专属守则\n\n做 iOS/Android/移动 app 原型时（触发：「app 原型」「iOS mockup」「移动应用」「做个 app」），下面四条**覆盖**通用 placeholder 原则——app 原型是 demo 现场，静态摆拍和米白占位卡没有说服力。\n\n### 0. 架构选型（必先决定）\n\n**默认单文件 inline React**——所有 JSX/data/styles 直接写进主 HTML 的 `` 标签，**不要**用 `` 外部加载引擎。本机双击打开（`file://` 协议）→ Babel Standalone 走 XHR 拉 `.jsx` → Chrome 报 `Cross origin requests are only supported for protocol schemes: http, https, chrome, chrome-extension...` → 整页黑屏，不报 `pageerror` 只报 console error，很容易当\"动画没触发\"误诊。\n\n启 HTTP server 也未必救得了——本机有全局代理时 `localhost` 也会走代理，返回 502 / 连接失败。\n\n**规则**：\n\n- **单文件交付（双击打开即用的 HTML）** → `animations.jsx` 必须**内联**到 `` 标签内，不要用 `src=\"animations.jsx\"`\n- **多文件项目（起 HTTP server 演示）** → 可以外部加载，但交付时明确写清 `python3 -m http.server 8000` 命令\n- 判断标准：交付给用户的是\"HTML 文件\"还是\"带 server 的项目目录\"？前者用内联\n- Stage 组件 / animations.jsx 经常 200+ 行——贴进 HTML `\n\n```\n\n## 常用动画模式\n\n### 1. Fade In / Fade Out\n\n```jsx\nfunction FadeIn({ children }) {\n const { t } = useSprite();\n const opacity = interpolate(t, [0, 0.3], [0, 1], Easing.easeOut);\n return
{children}
;\n}\n```\n\n**注意范围**：`[0, 0.3]`意思是在sprite的前30%时间完成渐入，后面保持opacity=1。\n\n### 2. Slide In\n\n```jsx\nfunction SlideIn({ children, from = 'left' }) {\n const { t } = useSprite();\n const progress = interpolate(t, [0, 0.4], [0, 1], Easing.easeOut);\n const offset = (1 - progress) * 100;\n const directions = {\n left: `translateX(-${offset}px)`,\n right: `translateX(${offset}px)`,\n top: `translateY(-${offset}px)`,\n bottom: `translateY(${offset}px)`,\n };\n return (\n
\n {children}\n
\n );\n}\n```\n\n### 3. 逐字打字机\n\n```jsx\nfunction Typewriter({ text }) {\n const { t } = useSprite();\n const charCount = Math.floor(text.length * Math.min(t * 2, 1));\n return {text.slice(0, charCount)};\n}\n```\n\n### 4. 数字计数\n\n```jsx\nfunction CountUp({ from = 0, to = 100, duration = 0.6 }) {\n const { t } = useSprite();\n const progress = interpolate(t, [0, duration], [0, 1], Easing.easeOut);\n const value = Math.floor(from + (to - from) * progress);\n return {value.toLocaleString()};\n}\n```\n\n### 5. 分段解释（典型教学动画）\n\n```jsx\nfunction Scene() {\n return (\n \n {/* Phase 1: 展示问题 */}\n \n \n \n\n {/* Phase 2: 展示思路 */}\n \n \n \n\n {/* Phase 3: 展示结果 */}\n \n \n \n\n {/* 全程显示的字幕 */}\n \n \n \n \n );\n}\n```\n\n## Easing函数\n\n预设的easing curves：\n\n| Easing | 特性 | 用在 |\n|--------|------|------|\n| `linear` | 匀速 | 滚动字幕、持续动画 |\n| `easeIn` | 慢→快 | 退场消失 |\n| `easeOut` | 快→慢 | 入场出现 |\n| `easeInOut` | 慢→快→慢 | 位置变化 |\n| **`expoOut`** ⭐ | **指数缓出** | **Anthropic 级主 easing**（物理重量感）|\n| **`overshoot`** ⭐ | **弹性回弹** | **Toggle / 按钮弹出 / 强调交互** |\n| `spring` | 弹簧 | 交互反馈、几何体归位 |\n| `anticipation` | 先反向再正向 | 强调动作 |\n\n**默认主 easing 用 `expoOut`**（不是 `easeOut`）—— 见 `animation-best-practices.md` §2。\n入场用 `expoOut`、出场用 `easeIn`、toggle 用 `overshoot`——Anthropic 级动画的基础规律。\n\n## 节奏和时长指南\n\n### 微交互（0.1-0.3秒）\n- 按钮hover\n- 卡片expand\n- Tooltip出现\n\n### UI过渡（0.3-0.8秒）\n- 页面切换\n- 模态框出现\n- 列表item加入\n\n### 叙事动画（2-10秒每段）\n- 概念解释的一个phase\n- 数据图表的reveal\n- 场景转换\n\n### 单段叙事动画最长不超过10秒\n人类注意力有限。10秒讲一件事，讲完换下一件。\n\n## 设计动画的思考顺序\n\n### 1. 先有内容/故事，再有动画\n\n**错误**：先想要做fancy动画，再塞内容进去\n**正确**：先想清楚要传达什么信息，再用动画手段serve这个信息\n\n动画是**signal**，不是**装饰**。一个fade-in强调的是\"这里很重要，请看\"——如果什么都fade-in，signal就失效。\n\n### 2. 分Scene写时间轴\n\n```\n0:00 - 0:03 问题出现（fade in）\n0:03 - 0:06 问题放大/展开（zoom+pan）\n0:06 - 0:09 解法出现（slide in from right）\n0:09 - 0:12 解法展开说明（typewriter）\n0:12 - 0:15 结果演示（counter up + chart reveal）\n0:15 - 0:18 总结一句话（static，读3秒）\n0:18 - 0:20 CTA或fade out\n```\n\n写完时间轴再写组件。\n\n### 3. 资源先行\n\n动画要用的图片/图标/字体**先**准备好。不要画到一半去找素材——打断节奏。\n\n## 常见问题\n\n**动画卡顿**\n→ 主要是layout thrashing。用`transform`和`opacity`，不要动`top`/`left`/`width`/`height`/`margin`。浏览器GPU加速`transform`。\n\n**动画太快，看不清楚**\n→ 人读一个汉字需要100-150ms，一个词300-500ms。如果你用文字讲故事，单句至少留3秒。\n\n**动画太慢，观众无聊**\n→ 有趣的视觉变化要密集。静态画面超过5秒就会闷。\n\n**多个动画互相影响**\n→ 用CSS的`will-change: transform`提前告诉浏览器这个元素会动，减少reflow。\n\n**录制成视频**\n→ 用 skill 自带工具链（一条命令出三种格式）：见 `video-export.md`\n- `scripts/render-video.js` — HTML → 25fps MP4（Playwright + ffmpeg）\n- `scripts/convert-formats.sh` — 25fps MP4 → 60fps MP4 + 优化 GIF\n- 想要更精确的帧渲染？让 render(t) 成为 pure function，见 `animation-pitfalls.md` 第 5 条\n\n## 和视频工具的配合\n\n这个skill做的是**HTML动画**（在浏览器里跑的）。如果最终产出要作为视频素材：\n\n- **短动画/concept demo**：用这里的方法做HTML动画 → 屏幕录制\n- **长视频/叙事**：本 skill 专注 HTML 动画，长视频用 AI 视频生成类 skill 或专业视频软件\n- **motion graphics**：专业的After Effects/Motion Canvas更合适\n\n## 关于Popmotion等库\n\n如果你真的需要物理动画（spring、decay、keyframes with precise timing），我们的engine搞不定，可以fallback到Popmotion：\n\n```html\n\n```\n\n但**先试试我们的engine**。90%的情况够用。\n\nFile v1.0.0:references/apple-gallery-showcase.md\n\n# Apple Gallery Showcase · 画廊展示墙动画风格\n\n> 灵感来源：Claude Design 官网 hero 视频 + 苹果产品页「作品墙」式陈列\n> 实战出处：huashu-design 发布 hero v5\n> 适用场景：**产品发布 hero 动画、skill 能力演示、作品集展示**——任何需要把「多件高质量产出」同时展陈并引导观众注意力的场景\n\n---\n\n## 触发判断：什么时候用这个风格\n\n**适合**：\n- 有10张以上真实产出要同屏展示（PPT、App、网页、信息图）\n- 观众是专业受众（开发者、设计师、产品经理），对「质感」敏感\n- 希望传递的气质是「克制、展览式、高级、有空间感」\n- 需要焦点和全局同时存在（看细节但不失整体）\n\n**不适合**：\n- 单产品聚焦（用 frontend-design 的产品 hero 模板）\n- 情绪向/故事性强的动画（用时间轴叙事模板）\n- 小屏幕 / 竖屏（倾斜视角在小画面上会糊）\n\n---\n\n## 核心视觉 Token\n\n```css\n:root {\n /* 浅色画廊调板 */\n --bg: #F5F5F7; /* 主画布底 — 苹果官网灰 */\n --bg-warm: #FAF9F5; /* 温暖米白变体 */\n --ink: #1D1D1F; /* 主字色 */\n --ink-80: #3A3A3D;\n --ink-60: #545458;\n --muted: #86868B; /* 次级文字 */\n --dim: #C7C7CC;\n --hairline: #E5E5EA; /* 卡片1px边框 */\n --accent: #D97757; /* 赤陶橙 — Claude brand */\n --accent-deep:#B85D3D;\n\n --serif-cn: \"Noto Serif SC\", \"Songti SC\", Georgia, serif;\n --serif-en: \"Source Serif 4\", \"Tiempos Headline\", Georgia, serif;\n --sans: \"Inter\", -apple-system, \"PingFang SC\", system-ui;\n --mono: \"JetBrains Mono\", \"SF Mono\", ui-monospace;\n}\n```\n\n**关键原则**：\n1. **绝不用纯黑底**。黑底会让作品看起来像电影、不像「可以被采用的工作成果」\n2. **赤陶橙是唯一色相accent**，其他全部是灰阶 + 白\n3. **三字体栈**（serif英+serif中+sans+mono）营造「出版物」而非「互联网产品」的气质\n\n---\n\n## 核心布局模式\n\n### 1. 悬浮卡片（整个风格的基本单元）\n\n```css\n.gallery-card {\n background: #FFFFFF;\n border-radius: 14px;\n padding: 6px; /* 内边距是「装裱纸」 */\n border: 1px solid var(--hairline);\n box-shadow:\n 0 20px 60px -20px rgba(29, 29, 31, 0.12), /* 主阴影，软且长 */\n 0 6px 18px -6px rgba(29, 29, 31, 0.06); /* 第二层近光，制造浮感 */\n aspect-ratio: 16 / 9; /* 统一 slide 比例 */\n overflow: hidden;\n}\n.gallery-card img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 9px; /* 比卡片圆角略小，视觉嵌套 */\n}\n```\n\n**反面教材**：不要贴边瓷砖（无padding无border无shadow）——那是信息图密度表达，不是展览。\n\n### 2. 3D倾斜作品墙\n\n```css\n.gallery-viewport {\n position: absolute; inset: 0;\n overflow: hidden;\n perspective: 2400px; /* 深一些的透视，倾斜不夸张 */\n perspective-origin: 50% 45%;\n}\n.gallery-canvas {\n width: 4320px; /* 画布 = 2.25× viewport */\n height: 2520px; /* 留出pan空间 */\n transform-origin: center center;\n transform: perspective(2400px)\n rotateX(14deg) /* 向后倾 */\n rotateY(-10deg) /* 向左转 */\n rotateZ(-2deg); /* 轻微倾斜，去掉太规整 */\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 40px;\n padding: 60px;\n}\n```\n\n**参数 sweet spot**：\n- rotateX: 10-15deg（再多就像开酒会 VIP 背景板）\n- rotateY: ±8-12deg（左右对称感）\n- rotateZ: ±2-3deg（「这不是机器摆的」的人味）\n- perspective: 2000-2800px（小于2000会鱼眼，大于3000接近正投影）\n\n### 3. 2×2 四角汇聚（选择场景）\n\n```css\n.grid22 {\n display: grid;\n grid-template-columns: repeat(2, 800px);\n gap: 56px 64px;\n align-items: start;\n}\n```\n\n每张卡片从对应角落（tl/tr/bl/br）向中心滑入 + fade in。对应的 `cornerEntry` 向量：\n\n```js\nconst cornerEntry = {\n tl: { dx: -700, dy: -500 },\n tr: { dx: 700, dy: -500 },\n bl: { dx: -700, dy: 500 },\n br: { dx: 700, dy: 500 },\n};\n```\n\n---\n\n## 五种核心动画模式\n\n### 模式 A · 四角汇聚（0.8-1.2s）\n\n4 个元素从视口四角滑入，同时缩放 0.85→1.0，对应 ease-out。适合「展示多方向选择」的开场。\n\n```js\nconst inP = easeOut(clampLerp(t, start, end));\ncard.style.transform = `translate3d(${(1-inP)*ce.dx}px, ${(1-inP)*ce.dy}px, 0) scale(${0.85 + 0.15*inP})`;\ncard.style.opacity = inP;\n```\n\n### 模式 B · 选中放大 + 其他滑出（0.8s）\n\n被选中的卡片放大 1.0→1.28，其他卡片 fade out + blur + 向四角漂回：\n\n```js\n// 被选中\ncard.style.transform = `translate3d(${cellDx*outP}px, ${cellDy*outP}px, 0) scale(${1 + 0.28*easeOut(zoomP)})`;\n// 未选中\ncard.style.opacity = 1 - outP;\ncard.style.filter = `blur(${outP * 1.5}px)`;\n```\n\n**关键**：未选中的要 blur，不是纯 fade。blur 模拟景深，视觉上把被选中的「推出来」。\n\n### 模式 C · Ripple 涟漪展开（1.7s）\n\n从中心向外，按距离 delay，每张卡片依次淡入 + 从 1.25x 缩到 0.94x（「镜头拉远」）：\n\n```js\nconst col = i % COLS, row = Math.floor(i / COLS);\nconst dc = col - (COLS-1)/2, dr = row - (ROWS-1)/2;\nconst dist = Math.sqrt(dc*dc + dr*dr);\nconst delay = (dist / maxDist) * 0.8;\nconst localT = Math.max(0, (t - rippleStart - delay) / 0.7);\ncard.style.opacity = easeOut(Math.min(1, localT));\n\n// 同时整体 scale 1.25→0.94\nconst galleryScale = 1.25 - 0.31 * easeOut(rippleProgress);\n```\n\n### 模式 D · Sinusoidal Pan（持续漂移）\n\n用正弦波 + 线性漂移组合，避免 marquee 那种「有起点有终点」的循环感：\n\n```js\nconst panX = Math.sin(panT * 0.12) * 220 - panT * 8; // 横向左漂\nconst panY = Math.cos(panT * 0.09) * 120 - panT * 5; // 纵向上漂\nconst clampedX = Math.max(-900, Math.min(900, panX)); // 防止露边\n```\n\n**参数**：\n- 正弦周期 `0.09-0.15 rad/s`（慢，约30-50秒一个摆动）\n- 线性漂移 `5-8 px/s`（比观众眨眼慢）\n- 振幅 `120-220 px`（大到能感觉，小到不会晕）\n\n### 模式 E · Focus Overlay（焦点切换）\n\n**关键设计**：focus overlay 是一个**平面元素**（不倾斜），浮在倾斜画布之上。被选中的 slide 从瓦片位置（约400×225）缩放到屏幕中央（960×540），背景画布不倾斜变化但**变暗到 45%**：\n\n```js\n// Focus overlay (flat, centered)\nfocusOverlay.style.width = (startW + (endW - startW) * focusIntensity) + 'px';\nfocusOverlay.style.height = (startH + (endH - startH) * focusIntensity) + 'px';\nfocusOverlay.style.opacity = focusIntensity;\n\n// 背景卡片变暗，但依然可见（关键！不要100%遮罩）\ncard.style.opacity = entryOp * (1 - 0.55 * focusIntensity); // 1 → 0.45\ncard.style.filter = `brightness(${1 - 0.3 * focusIntensity})`;\n```\n\n**清晰度铁律**：\n- Focus overlay 的 `` 必须 `src` 直连原图，**不要复用 gallery 里的压缩缩略**\n- 提前 preload 所有原图到 `new Image()[]` 数组\n- overlay 自身 `width/height` 按帧计算，浏览器每帧 resample 原图\n\n---\n\n## 时间轴架构（可复用骨架）\n\n```js\nconst T = {\n DURATION: 25.0,\n s1_in: [0.0, 0.8], s1_type: [1.0, 3.2], s1_out: [3.5, 4.0],\n s2_in: [3.9, 5.1], s2_hold: [5.1, 7.0], s2_out: [7.0, 7.8],\n s3_hold: [7.8, 8.3], s3_ripple: [8.3, 10.0],\n panStart: 8.6,\n focuses: [\n { start: 11.0, end: 12.7, idx: 2 },\n { start: 13.3, end: 15.0, idx: 3 },\n { start: 15.6, end: 17.3, idx: 10 },\n { start: 17.9, end: 19.6, idx: 16 },\n ],\n s4_walloff: [21.1, 21.8], s4_in: [21.8, 22.7], s4_hold: [23.7, 25.0],\n};\n\n// 核心 easing\nconst easeOut = t => 1 - Math.pow(1 - t, 3);\nconst easeInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;\nfunction lerp(time, start, end, fromV, toV, easing) {\n if (time <= start) return fromV;\n if (time >= end) return toV;\n let p = (time - start) / (end - start);\n if (easing) p = easing(p);\n return fromV + (toV - fromV) * p;\n}\n\n// 单一 render(t) 函数读时间戳、写所有元素\nfunction render(t) { /* ... */ }\nrequestAnimationFrame(function tick(now) {\n const t = ((now - startMs) / 1000) % T.DURATION;\n render(t);\n requestAnimationFrame(tick);\n});\n```\n\n**架构精髓**：**所有状态由时间戳 t 推导**，没有状态机、没有 setTimeout。这样：\n- 播放到任意时刻 `window.__setTime(12.3)` 立刻跳转（方便 playwright 逐帧截）\n- 循环天然无缝（t mod DURATION）\n- Debug 时能冻结任意一帧\n\n---\n\n## 质感细节（容易被忽略但致命）\n\n### 1. SVG noise texture\n\n浅色底最怕「太平」。叠加一层极弱的 fractalNoise：\n\n```html\n\n```\n\n看上去没区别，去掉就知道有了。\n\n### 2. 角落品牌标识\n\n```html\n
\n
\n
HUASHU · DESIGN
\n
\n```\n\n```css\n.corner-brand {\n position: absolute; top: 48px; left: 72px;\n font-family: var(--mono);\n font-size: 12px;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--muted);\n}\n```\n\n只在作品墙 scene 显示，淡入淡出。像美术馆展签。\n\n### 3. 品牌收束 wordmark\n\n```css\n.brand-wordmark {\n font-family: var(--sans);\n font-size: 148px;\n font-weight: 700;\n letter-spacing: -0.045em; /* 负字距是关键，让字紧凑成标志 */\n}\n.brand-wordmark .accent {\n color: var(--accent);\n font-weight: 500; /* accent字符反而细一点，视觉差 */\n}\n```\n\n`letter-spacing: -0.045em` 是苹果产品页大字的标准做法。\n\n---\n\n## 常见失败模式\n\n| 症状 | 原因 | 解法 |\n|---|---|---|\n| 看起来像 PPT 模板 | 卡片没有 shadow / hairline | 加上两层 box-shadow + 1px border |\n| 倾斜感廉价 | 只用了 rotateY 没加 rotateZ | 加 ±2-3deg rotateZ 打破工整 |\n| Pan 感觉「卡顿」 | 用了 setTimeout 或 CSS keyframes 循环 | 用 rAF + sin/cos 连续函数 |\n| Focus 时字看不清 | 复用了 gallery 瓦片的低分图 | 独立 overlay + 原图 src 直连 |\n| 背景太空 | 纯色 `#F5F5F7` | 叠加 SVG fractalNoise 0.5 opacity |\n| 字体太\"互联网\" | 只有 Inter | 加 Serif（中英各一）+ mono 三栈 |\n\n---\n\n## 引用\n\n- 完整实现样本：`/Users/alchain/Documents/写作/01-公众号写作/项目/2026.04-huashu-design发布/配图/hero-animation-v5.html`\n- 原始灵感：claude.ai/design hero 视频\n- 参考审美：Apple 产品页、Dribbble shot 集合页\n\n遇到「多件高质量产出要陈列」的动画需求，直接从此文件 copy 骨架，换内容 + 调 timing 即可。\n\nFile v1.0.0:references/audio-design-rules.md\n\n# 音频设计规则 · huashu-design\n\n> 所有动画 demo 的音频应用配方。和 `sfx-library.md`（资产清单）配套使用。\n> 实战锤炼：huashu-design 发布 hero v1-v9 迭代 · Anthropic 三支官方片子的 Gemini 深度拆解 · 8000+ 次 A/B 对比\n\n---\n\n## 核心原则 · 音频双轨制（铁律）\n\n动画音频**必须分两层独立设计**，不能只做一层：\n\n| 层 | 作用 | 时间尺度 | 和视觉的关系 | 占据频段 |\n|---|---|---|---|---|\n| **SFX（节拍层）** | 标记每个视觉 beat | 0.2-2 秒短促 | **强同步**（帧级对齐） | **高频 800Hz+** |\n| **BGM（氛围底）** | 情绪铺底、声场 | 连续 20-60 秒 | 弱同步（段落级） | **中低频 <4kHz** |\n\n**只做BGM的动画是残废的**——观众潜意识感知到「画在动但没声音响应」，廉价感的根源就在这里。\n\n---\n\n## 金标准 · 黄金配比\n\n这几组数值是实测 Anthropic 三支官方片子 + 我们自己 v9 定版对比得出的**工程硬参数**，直接套用即可：\n\n### 音量\n- **BGM 音量**：`0.40-0.50`（相对满刻度 1.0）\n- **SFX 音量**：`1.00`\n- **响度差**：BGM 比 SFX peak **低 -6 到 -8 dB**（不是靠SFX绝对响度突出，靠响度差）\n- **amix 参数**：`normalize=0`（绝不用 normalize=1，会把动态范围压平）\n\n### 频段隔离（P1 硬优化）\nAnthropic 的秘诀不是「SFX 音量大」，是**频段分层**：\n\n```bash\n[bgm_raw]lowpass=f=4000[bgm] # BGM 限制在 <4kHz 的中低频\n[sfx_raw]highpass=f=800[sfx] # SFX 推到 800Hz+ 的中高频\n[bgm][sfx]amix=inputs=2:duration=first:normalize=0[a]\n```\n\n为什么：人耳对 2-5kHz 区间最敏感（即「presence 频段」），SFX 如果都在这个区间，BGM 又全频段覆盖，**SFX 会被BGM的高频部分遮盖**。用 highpass 把 SFX 推高 + lowpass 把 BGM 压下，两者在频谱上各占一方，SFX 清晰度直接上一档。\n\n### Fade\n- BGM 入：`afade=in:st=0:d=0.3`（0.3s，避免硬切）\n- BGM 出：`afade=out:st=N-1.5:d=1.5`（1.5s 长尾，收束感）\n- SFX 自带 envelope，不需要额外 fade\n\n---\n\n## SFX cue 设计规则\n\n### 密度（每10秒多少个SFX）\n实测 Anthropic 三支片子的 SFX 密度有三档：\n\n| 片子 | 每10s SFX 数 | 产品性格 | 场景 |\n|---|---|---|---|\n| Artifacts（ref-1） | **~9个/10s** | 功能密集、信息多 | 复杂工具演示 |\n| Code Desktop（ref-2） | **0个** | 纯氛围、冥想感 | 开发工具专注状态 |\n| Word（ref-3） | **~4个/10s** | 平衡、办公节奏 | 生产力工具 |\n\n**启发式**：\n- 产品性格冷静/专注 → SFX 密度低（0-3个/10s），BGM 为主\n- 产品性格活泼/信息多 → SFX 密度高（6-9个/10s），SFX 驱动节奏\n- **不要填满每个视觉 beat**——留白比密集更高级。**删掉 30-50% 的 cue 会让剩下的更有戏剧性**。\n\n### Cue 选择优先级\n每个视觉 beat 不都要配 SFX。按这个优先级选：\n\n**P0 必配**（省略会有违和感）：\n- 打字（终端/输入）\n- 点击/选择（用户决策时刻）\n- 焦点切换（视觉主角转移）\n- Logo reveal（品牌收束）\n\n**P1 推荐配**：\n- 元素入场/离场（modal / card）\n- 完成/成功反馈\n- AI 生成开始/结束\n- 重大过渡（scene 切换）\n\n**P2 选配**（多了会乱）：\n- hover / focus-in\n- 进度 tick\n- 装饰性 ambient\n\n### 时间戳对齐精度\n- **同帧对齐**（0ms 误差）：点击/焦点切换/Logo 落定\n- **前置 1-2 帧**（-33ms）：快速 whoosh（给观众心理预期）\n- **后置 1-2 帧**（+33ms）：物体落地/impact（符合真实物理）\n\n---\n\n## BGM 选择决策树\n\nhuashu-design skill 自带 6 首 BGM（`assets/bgm-*.mp3`）：\n\n```\n动画性格是什么？\n├─ 产品发布 / 技术演示 → bgm-tech.mp3（minimal synth + piano）\n├─ 教程讲解 / 工具使用 → bgm-tutorial.mp3（warm, instructional）\n├─ 教育学习 / 原理解释 → bgm-educational.mp3（curious, thoughtful）\n├─ 营销广告 / 品牌宣传 → bgm-ad.mp3（upbeat, promotional）\n└─ 同类风格需要变体 → bgm-*-alt.mp3（各自替代版）\n```\n\n### 无 BGM 的场景（值得考虑）\n参考 Anthropic Code Desktop（ref-2）：**0 SFX + 纯 Lo-fi BGM** 也能很高级。\n\n**何时选无BGM**：\n- 动画时长 <10s（BGM 建立不起来）\n- 产品性格是「专注/冥想」\n- 场景本身有环境音/讲解声\n- SFX 密度很高时（避免听觉过载）\n\n---\n\n## 场景配方（开箱即用）\n\n### 配方 A · 产品发布 hero（huashu-design v9 同款）\n```\n时长：25 秒\nBGM：bgm-tech.mp3 · 45% · 频段 <4kHz\nSFX 密度：~6个/10s\n\ncue：\n 终端打字 → type × 4（间隔0.6s）\n 回车 → enter\n 卡片汇聚 → card × 4（错峰 0.2s）\n 选中 → click\n Ripple → whoosh\n 4次焦点 → focus × 4\n Logo → thud（1.5s）\n\n音量：BGM 0.45 / SFX 1.0 · amix normalize=0\n```\n\n### 配方 B · 工具功能演示（参考 Anthropic Code Desktop）\n```\n时长：30-45 秒\nBGM：bgm-tutorial.mp3 · 50%\nSFX 密度：0-2个/10s（极少）\n\n策略：让 BGM + 讲解 voiceover 驱动，SFX 只在**决定性时刻**（文件保存/命令执行完成）\n```\n\n### 配方 C · AI 生成演示\n```\n时长：15-20 秒\nBGM：bgm-tech.mp3 或无 BGM\nSFX 密度：~8个/10s（高密度）\n\ncue：\n 用户输入 → type + enter\n AI 开始处理 → magic/ai-process（1.2s 循环）\n 生成完成 → feedback/complete-done\n 结果呈现 → magic/sparkle\n \n亮点：ai-process 可以循环 2-3 次贯穿整个生成过程\n```\n\n### 配方 D · 纯氛围长镜头（参考 Artifacts）\n```\n时长：10-15 秒\nBGM：无\nSFX：单独使用 3-5 个精心设计的 cue\n\n策略：每个 SFX 都是主角，没有BGM「糊在一起」的问题。\n适合：单产品慢镜头、特写展示\n```\n\n---\n\n## ffmpeg 合成模板\n\n### 模板 1 · 单 SFX 叠加到视频\n```bash\nffmpeg -y -i video.mp4 -itsoffset 2.5 -i sfx.mp3 \\\n -filter_complex \"[0:a][1:a]amix=inputs=2:normalize=0[a]\" \\\n -map 0:v -map \"[a]\" output.mp4\n```\n\n### 模板 2 · 多 SFX 时间轴合成（按cue时间对齐）\n```bash\nffmpeg -y \\\n -i sfx-type.mp3 -i sfx-enter.mp3 -i sfx-click.mp3 -i sfx-thud.mp3 \\\n -filter_complex \"\\\n[0:a]adelay=1100|1100[a0];\\\n[1:a]adelay=3200|3200[a1];\\\n[2:a]adelay=7000|7000[a2];\\\n[3:a]adelay=21800|21800[a3];\\\n[a0][a1][a2][a3]amix=inputs=4:duration=longest:normalize=0[mixed]\" \\\n -map \"[mixed]\" -t 25 sfx-track.mp3\n```\n**关键参数**：\n- `adelay=N|N`：前面是左声道延迟(ms)，后面是右声道，写两遍保证立体声对齐\n- `normalize=0`：保留动态范围，关键！\n- `-t 25`：截断到指定时长\n\n### 模板 3 · 视频 + SFX track + BGM（带频段隔离）\n```bash\nffmpeg -y -i video.mp4 -i sfx-track.mp3 -i bgm.mp3 \\\n -filter_complex \"\\\n[2:a]atrim=0:25,afade=in:st=0:d=0.3,afade=out:st=23.5:d=1.5,\\\n lowpass=f=4000,volume=0.45[bgm];\\\n[1:a]highpass=f=800,volume=1.0[sfx];\\\n[bgm][sfx]amix=inputs=2:duration=first:normalize=0[a]\" \\\n -map 0:v -map \"[a]\" -c:v copy -c:a aac -b:a 192k final.mp4\n```\n\n---\n\n## 失败模式速查\n\n| 症状 | 根因 | 修复 |\n|---|---|---|\n| SFX 听不见 | BGM 高频部分遮盖 | 加 `lowpass=f=4000` 给BGM + `highpass=f=800` 给SFX |\n| 音效过响刺耳 | SFX 绝对音量太大 | SFX 音量降到 0.7，同时降低 BGM 到 0.3，保持差值 |\n| BGM 和 SFX 节奏冲突 | BGM 选错了（用了有强beat的music） | 换成 ambient / minimal synth 的 BGM |\n| 动画结束 BGM 突然断 | 没做 fade out | `afade=out:st=N-1.5:d=1.5` |\n| SFX 重叠成糊 | cue 太密 + 每个 SFX 时长太长 | SFX 时长控到 0.5s 以内，cue 间隔 ≥ 0.2s |\n| 公众号 mp4 没声音 | 公众号有时会 mute auto-play | 不用担心，用户点开会有声音；gif 本来就没声音 |\n\n---\n\n## 和视觉的联动（高级）\n\n### SFX 音色要和视觉风格匹配\n- 暖米/纸张感视觉 → SFX 用**木质/柔和**音色（Morse, paper snap, soft click）\n- 冷黑科技视觉 → SFX 用**金属/数字**音色（beep, pulse, glitch）\n- 手绘/童趣视觉 → SFX 用**卡通/夸张**音色（boing, pop, zap）\n\n我们当前 `apple-gallery-showcase.md` 的暖米底色 → 搭配 `keyboard/type.mp3`（mechanical）+ `container/card-snap.mp3`（soft）+ `impact/logo-reveal-v2.mp3`（cinematic bass）\n\n### SFX 可以引导视觉节奏\n高级技巧：**先设计 SFX 时间轴，然后调整视觉动画去对齐 SFX**（不是反过来）。\n因为 SFX 每个 cue 都是一个「钟表 tick」，视觉动画适配 SFX 节奏会非常稳——反之 SFX 去追视觉，常常 ±1 帧对不上就有违和感。\n\n---\n\n## 质量检查清单（发布前自检）\n\n- [ ] 响度差：SFX peak - BGM peak = -6 到 -8 dB？\n- [ ] 频段：BGM lowpass 4kHz + SFX highpass 800Hz？\n- [ ] amix normalize=0（保留动态范围）？\n- [ ] BGM fade-in 0.3s + fade-out 1.5s？\n- [ ] SFX 数量是否合适（按场景性格选密度）？\n- [ ] 每个 SFX 和视觉 beat 同帧对齐（±1 帧内）？\n- [ ] Logo reveal 音效时长够（建议 1.5s）？\n- [ ] 关闭 BGM 听一遍：SFX 单独是否足够有节奏感？\n- [ ] 关闭 SFX 听一遍：BGM 单独是否有情绪起伏？\n\n两层任何一层单独听都应该自洽。如果只有两层叠加才好听，说明没做好。\n\n---\n\n## 参考\n\n- SFX 资产清单：`sfx-library.md`\n- 视觉风格参考：`apple-gallery-showcase.md`\n- Anthropic 三支片子深度音频分析：`/Users/alchain/Documents/写作/01-公众号写作/项目/2026.04-huashu-design发布/参考动画/AUDIO-BEST-PRACTICES.md`\n- huashu-design v9 实战案例：`/Users/alchain/Documents/写作/01-公众号写作/项目/2026.04-huashu-design发布/配图/hero-animation-v9-final.mp4`\n\nFile v1.0.0:references/cinematic-patterns.md\n\n# Cinematic Patterns · Workflow Demo 的 Best Practice\n\n> 从「PPT 动画」升级到「发布会级 cinematic」的 5 个关键 pattern。\n> 蒸馏自 2026-04 「聊聊 skill」 deck 的两个 cinematic demo（Nuwa workflow + Darwin workflow），实测可复现。\n\n---\n\n## 0 · 这份文档解决什么问题\n\n当你需要做「演示一个工作流的 demo 动画」时（典型场景：skill 工作流、产品 onboarding、API 调用流程、agent 任务执行），有两种常见做法：\n\n| 范式 | 长什么样 | 后果 |\n|---|---|---|\n| **PPT 动画**（差） | step 1 fade in → step 2 fade in → step 3 fade in，4 个 box 同屏排列 | 观众感觉「就是一个 PPT 加了 fade 效果」，没有 wow moment |\n| **Cinematic**（好） | scene-based，一次只 focus 一件事，scene 之间是 dissolve / focus pull / morph | 观众感觉「这是一个产品发布会片段」，会想截图分享 |\n\n差异的根源**不是动画技术**，是**叙事范式**。本文档讲怎么从前者升级到后者。\n\n---\n\n## 1 · 五个核心 pattern\n\n### Pattern A · Dashboard + Cinematic Overlay 双层结构\n\n**问题**：单纯的 cinematic 默认是黑屏 + 一个 ▶ 按钮，用户翻到这页如果没点，什么都看不到。\n\n**解决**：\n```\nDEFAULT 状态 (永远显示)：完整静态 workflow dashboard\n └── 观众一眼看清这个 skill / 工作流怎么跑\n\nPOINT ▶ 触发 (overlay 浮上来)：22 秒 cinematic\n └── 跑完自动 fade 回 DEFAULT\n\n```\n\n**实现要点**：\n- `.dash` 默认 visible，`.cinema` 默认 `opacity: 0; pointer-events: none`\n- `.play-cta` 是右下角金色小按钮（不是中央大覆盖）\n- 点击 → `cinema.classList.add('show')` + `dash.classList.add('hide')`\n- 用 `requestAnimationFrame` 跑一次（不是循环），结束后 `endCinematic()` reverse 状态\n\n**反 pattern**：默认 = 中央大 ▶ overlay 覆盖一切，没点之前页面是空白的。\n\n---\n\n### Pattern B · Scene-based, NOT Step-based\n\n**问题**：把动画拆成「step 1 显示 → step 2 显示 → ...」就是 PPT 思维。\n\n**解决**：拆成 5 个 scene，每个 scene 是**独立的镜头**，全屏只 focus 一件事：\n\n| Scene 类型 | 职责 | 时长 |\n|---|---|---|\n| 1 · Invoke | 用户输入触发（终端 typewriter）| 3-4s |\n| 2 · Process | 核心工作流的可视化（独特视觉语言）| 5-6s |\n| 3 · Result/Insight | 提炼出的关键产物（可视化）| 4-5s |\n| 4 · Output | 实际产物展示（文件 / diff / 数字）| 3-4s |\n| 5 · Hero Reveal | 收尾 hero moment（大字 + 价值主张）| 4-5s |\n\n**总时长 ≈ 22 秒**——这是经过测试的黄金长度：\n- 短于 18 秒：PM 还没进入状态就结束了\n- 长于 25 秒：失去耐心\n- 22 秒刚好够「钩住 → 展开 → 收束 → 留下印象」\n\n**实现要点**：\n- `T = { DURATION: 22.0, s1_in: [0, 0.7], s2_in: [3.8, 4.6], ... }` 全局时间轴\n- 单个 `requestAnimationFrame(render)` 跑所有 scene 的 opacity / transform 计算\n- 不要用 setTimeout 链（容易断掉、难调试）\n- Easing 必用 `expoOut` / `easeOut` / cubic-bezier，**禁止 linear**\n\n---\n\n### Pattern C · 每个 demo 的视觉语言必须独立\n\n**问题**：做完第一个 cinematic 后，做第二个时偷懒复用同一个模板（同样的 orbit + pentagon + typewriter + hero 大字），只换了文案。\n\n**后果**：观众发现两个 skill「长得一模一样」，等于在说「这两个 skill 没区别」。\n\n**解决**：每个工作流的核心隐喻不同，视觉语言就必须不同。\n\n**对照案例**：\n\n| 维度 | Nuwa（蒸馏人）| Darwin（优化 skill）|\n|---|---|---|\n| 核心隐喻 | 收集 → 提炼 → 写 | 循环 → 评估 → 棘轮 |\n| 视觉运动 | 漂浮 / 辐射 / pentagon | 循环 / 上升 / 对比 |\n| Scene 2 | 3D Orbit · 8 张档案在透视椭圆漂浮 | Spin Loop · token 沿 6 节点圆环跑 5 圈 |\n| Scene 3 | Pentagon · 5 token 从中央辐射 | v1 vs v5 · 并列 diff（红版 vs 金版） |\n| Scene 4 | SKILL.md typewriter | Hill-Climb · 全屏曲线绘制 |\n| Scene 5 hero | 「21 分钟」serif italic 大字 | 旋转齿轮 ⚙ + 「KEPT +1.1」金色 tag |\n\n**判断标准**：盖住文案，只看视觉，能不能区分这是哪个 demo？区分不了就是偷懒。\n\n---\n\n### Pattern D · 用 AI 生成的真实素材，不要 emoji 或 SVG 手画\n\n**问题**：3D orbit / gallery 里需要素材碎片漂浮，emoji（📚🎤）丑且无品牌、SVG 手画书脊永远不像真书。\n\n**解决**：用 `huashu-gpt-image` 跑一张 4×2 grid 大图（8 件主题相关物品 · 白底 · 60px breathing space · unified style），用 `extract_grid.py --mode bbox` 抠成 8 张独立透明 PNG。\n\n**Prompt 要点**（详细 prompt patterns 见 `huashu-gpt-image` skill）：\n- IP 锚定（\"1960s Caltech archive aesthetic\" / \"Hearthstone-style consistent treatment\"）\n- 白底（便于抠图，灰底氛围好但抠透明背景困难）\n- 4×2 不要 5×5（避免末行压缩 bug）\n- Persona finishing（\"You are a Wired magazine curator preparing an exhibition photo\"）\n\n**反 pattern**：用 emoji 当 icon、用 CSS 剪影代替产品图。\n\n---\n\n### Pattern E · BGM + SFX 双轨制\n\n**问题**：只有动画没有声音，观众潜意识感觉「这玩意像个穷酸 demo」。\n\n**解决**：BGM 长音 + 11 个 SFX cues。\n\n**通用 SFX cue 配方**（适用于工作流 demo）：\n\n| 时点 | SFX | 触发场景 |\n|---|---|---|\n| 0.10s | whoosh | 终端从下方升起 |\n| 3.0s | enter | typewriter 完成、按 enter |\n| 4.0s | slide-in | scene 2 元素入场 |\n| 5-9s × 5 次 | sparkle | 关键过程节点（每代 / 每个 token / 每个数据点）|\n| 14s | click | 切换到 output scene |\n| 17.8s | logo-reveal | hero reveal 时刻 |\n| typewriter | type | 每 2 字符触发一次（密度别太高）|\n\n**频段隔离**：BGM volume 0.32（低频底噪），SFX volume 0.55（中高频 punch），sparkle 0.7（要醒目），logo-reveal 0.85（最强 hero moment）。\n\n**用户控制**：\n- 必须有 ▶ 启动覆盖（浏览器 autoplay 限制）\n- 右上角小 mute 按钮（用户随时切静音）\n- 不要做成「翻到这页就强制响」\n\n---\n\n## 2 · 静态 Dashboard 设计要点\n\nDashboard 是双层结构的 Layer 1，PM 不点 ▶ 也能看懂这个 skill。\n\n**布局**：3 列 grid（或 1 大 + 2 小），每个 panel 解决一个问题：\n\n| Panel 类型 | 解决什么问题 | 案例 |\n|---|---|---|\n| **Pipeline / Flow Diagram** | 「这个 skill 的工作流程是什么？」| Nuwa 4 阶段 pipeline · Darwin autoresearch loop |\n| **Snapshot / State** | 「跑出来的真实数据长什么样？」| Darwin 8 维 rubric snapshot |\n| **Trajectory / Evolution** | 「多次运行后怎么变化？」| Darwin 5 代 hill-climb 曲线 |\n| **Examples / Gallery** | 「已经产出过哪些东西？」| Nuwa 21 personas gallery |\n| **Strip · Example I/O** | 「输入什么 → 输出什么」| Nuwa example strip：`› nuwa 蒸馏 费曼 → feynman.skill (21 min)` |\n\n**关键约束**：\n- 信息密度要够（每个 panel 都要承载差异化信息）\n- 但不能塞数据 slop（每个数字都要有意义）\n- 配色与 cinematic 一致（同色系，方便切换不突兀）\n\n---\n\n## 3 · 调试与开发工具\n\n任何长动画必须配三个 dev 工具，否则调试会爆炸。\n\n### 工具 1 · `?seek=N` 冻结到第 N 秒\n\n```js\nconst seek = parseFloat(params.get('seek'));\nif (!isNaN(seek)) {\n started = true; muted = true;\n frozenT = seek; // render() 用这个 t 而不是 elapsed\n cinema.classList.add('show'); dash.classList.add('hide');\n}\n\n// render() 里：\nlet t = frozenT !== null ? frozenT : (elapsed % T.DURATION);\n```\n\n用法：`http://.../slide.html?seek=12` 直接看第 12 秒画面，不用等播放。\n\n### 工具 2 · `?autoplay=1` 跳过 ▶ overlay\n\n方便 playwright 自动截图测试，也方便嵌入 iframe 时 force 启动。\n\n### 工具 3 · 手动 REPLAY 按钮\n\n右上角小按钮，用户/调试时可以重播任意次。CSS：\n\n```css\n.replay{position:absolute;top:18px;right:18px;background:rgba(212,165,116,0.1);\n border:1px solid rgba(212,165,116,0.3);color:#D4A574;\n font-family:monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;\n padding:6px 12px;border-radius:1px;cursor:pointer;backdrop-filter:blur(6px);z-index:6}\n```\n\n---\n\n## 4 · iframe 嵌入坑（如果 cinematic 嵌在 deck 里）\n\n### 坑 1 · 父窗口的 click zone 拦截 iframe 内按钮\n\n如果 deck index.html 加了「左右 22vw 透明 click zone 翻页」，会**覆盖到 iframe 内的 ▶ play 按钮**——用户点按钮被吞成「下一页」。\n\n**修复**：click zone 加 `top: 12vh; bottom: 25vh`，给顶部和底部 25% 不拦截，让 iframe 内的中央 ▶ 和右下角 ▶ 都能点。\n\n### 坑 2 · iframe 抢焦点后键盘事件丢失\n\n用户点过 iframe 后，焦点在 iframe 里，父窗口的 ←/→ 键盘事件收不到。\n\n**修复**：\n```js\niframe.addEventListener('load', () => {\n // 注入键盘转发器\n const doc = iframe.contentDocument;\n doc.addEventListener('keydown', (e) => {\n window.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, ... }));\n });\n // 点击后焦点拽回父窗口\n doc.addEventListener('click', () => setTimeout(() => window.focus(), 0));\n});\n```\n\n### 坑 3 · file:// vs https:// 行为差异\n\n本地 file:// 测好的 cinematic 部署后可能崩，因为：\n- file:// 下 iframe contentDocument 同源\n- https:// 下也同源（如果同 host），但 audio autoplay 限制更严格\n\n**修复**：\n- 部署前用 `python3 -m http.server` 起本地 HTTP 测试一遍\n- BGM 必须等用户点击 ▶ 后再 `bgm.play()`，不要 page-load 立刻播\n\n---\n\n## 5 · 反 pattern 速查表\n\n| ❌ 反 pattern | ✅ 正 pattern |\n|---|---|\n| 默认 = 黑屏 ▶ overlay | 默认 = 静态 dashboard，▶ 是辅助 |\n| 4 个 step 横排同屏 fade in | 5 个 scene 全屏切换，每场只 focus 一件事 |\n| 复用模板换文案做不同 demo | 每个 demo 独立视觉语言（盖文案能区分） |\n| emoji / SVG 手画当素材 | gpt-image-2 大图 + extract_grid 抠图 |\n| 无 BGM 无 SFX | BGM + 11 SFX cues 双轨制 |\n| 用 setTimeout 链 schedule | requestAnimationFrame + 全局时间轴 T 对象 |\n| linear 动画 | Expo / cubic-bezier easing |\n| 没有 dev 工具 | `?seek=N` + `?autoplay=1` + REPLAY 按钮 |\n| iframe 内的按钮被父 click zone 吞 | click zone 加 top/bottom margin 给按钮让位 |\n\n---\n\n## 6 · 时间预算\n\n按这套 pattern，一个完整 cinematic demo（含 dashboard）：\n\n| 任务 | 时间 |\n|---|---|\n| 设计 5-scene narrative + 视觉语言 | 30 分钟（要慎重，决定独立性）|\n| Dashboard 静态布局 + 内容 | 1 小时 |\n| Cinematic 5 scenes 实现 | 1.5 小时 |\n| Audio cues 调时序 + replay 按钮 | 30 分钟 |\n| Playwright 截图验证 5 个关键时刻 | 15 分钟 |\n| **单个 demo 总计** | **3-4 小时** |\n\n第二个 demo 复用框架但**视觉语言必须独立**，时间约 2-3 小时。\n\nFile v1.0.0:references/content-guidelines.md\n\n# Content Guidelines：反AI slop、内容准则、Scale规范\n\nAI设计里最容易掉进去的陷阱。这是一份「不做什么」的清单，比「做什么」更重要——因为AI slop是默认值，你不主动避免就会发生。\n\n## AI Slop 完整黑名单\n\n### 视觉陷阱\n\n**❌ 激进渐变背景**\n- 紫色 → 粉色 → 蓝色 全屏渐变（AI生成网页的典型味道）\n- 任何方向的rainbow gradient\n- Mesh gradient铺满背景\n- ✅ 如果要用渐变：subtle、单色系、有意图地点缀（比如button hover）\n\n**❌ 圆角卡片 + 左border accent色**\n```css\n/* 这是AI味卡片的典型签名 */\n.card {\n border-radius: 12px;\n border-left: 4px solid #3b82f6;\n padding: 16px;\n}\n```\n这种卡片在AI生成的Dashboard里泛滥。想做强调？用更有设计感的方式：背景色对比、字重/字号对比、plain分隔线、或者干脆不分卡片。\n\n**❌ Emoji 装饰**\n除非品牌本身使用emoji（比如Notion、Slack），否则不要在UI上放emoji。**尤其不要**：\n- 标题前的 🚀 ⚡️ ✨ 🎯 💡\n- Feature列表的 ✅\n- CTA按钮里的 →（箭头单独出现OK，emoji箭头不行）\n\n没图标用真icon库（Lucide/Heroicons/Phosphor），或者用placeholder。\n\n**❌ SVG 画 imagery**\n不要试图用SVG画：人物、场景、设备、物品、抽象艺术。AI画的SVG imagery一眼就是AI味，幼稚且廉价。**一个灰色矩形+\"插画位 1200×800\"的文字标签，比一个拙劣的SVG hero illustration强100倍**。\n\n唯一可以用SVG的场景：\n- 真正的icon（16×16到32×32级别）\n- 几何图形做装饰元素\n- Data viz的chart\n\n**❌ 过多iconography**\n不是每个标题/feature/section都需要icon。滥用icon会让界面像toy。Less is more。\n\n**❌ \"Data slop\"**\n编造的stats装饰：\n- \"10,000+ happy customers\" （你都不知道有没有）\n- \"99.9% uptime\" （没有真数据就别写）\n- 用图标+数字+词组成的装饰\"metric cards\"\n- Mock table里的假数据装点得花里胡哨\n\n如果没真数据，留placeholder或问用户要。\n\n**❌ \"Quote slop\"**\n编造的用户评价、名人名言装饰页面。留placeholder问用户要真quote。\n\n### 字体陷阱\n\n**❌ 避免这些烂大街字体**：\n- Inter（AI生成的网页默认）\n- Roboto\n- Arial / Helvetica\n- 纯system font stack\n- Fraunces（AI发现了这个就用滥了）\n- Space Grotesk（最近AI的最爱）\n\n**✅ 用有特点的display+body配对**。灵感方向：\n- 衬线display + 无衬线body（editorial feel）\n- Mono display + sans body（technical feel）\n- Heavy display + light body（contrast）\n- Variable font做hero的粗细动画\n\n字体资源：\n- Google Fonts的冷门好选项（Instrument Serif、Cormorant、Bricolage Grotesque、JetBrains Mono）\n- 开源字体站（Fraunces的兄弟字体、Adobe Fonts）\n- 不要凭空发明字体名\n\n### 色彩陷阱\n\n**❌ 凭空发明颜色**\n不要从头设计一整套不熟悉的色彩。这通常不和谐。\n\n**✅ 策略**：\n1. 有品牌色 → 用品牌色，缺的color token用oklch插值\n2. 没有品牌色但有参考 → 从参考产品截图吸色\n3. 完全从零 → 选一个known的配色系统（Radix Colors / Tailwind默认palette / Anthropic brand），不要自己调\n\n**oklch定义色彩**是最现代的做法：\n```css\n:root {\n --primary: oklch(0.65 0.18 25); /* 温暖的terracotta */\n --primary-light: oklch(0.85 0.08 25); /* 同色系浅色 */\n --primary-dark: oklch(0.45 0.20 25); /* 同色系深色 */\n}\n```\noklch能保证调整亮度时色相不漂移，比hsl好用。\n\n**❌ 夜间模式随手加反色**\n不是简单invert颜色。好的dark mode需要重新调整饱和度、对比度、accent色。不想做dark mode就别做。\n\n### Layout陷阱\n\n**❌ Bento grid 过度泛滥**\n每个AI生成的landing page都想搞bento。除非你的信息structure确实适合bento，否则用其他layout。\n\n**❌ 大hero + 3-column features + testimonials + CTA**\n这个landing page模板被用烂了。想创新就真创新。\n\n**❌ Card grid里每个card长一样**\nAsymmetric、不同大小的cards、有的带image有的只有文字、有的跨列——这才像真设计师做的。\n\n## 内容准则\n\n### 1. Don't add filler content\n\n每个元素都必须earn its place。空白是设计问题，用**构图**解决（对比、节奏、留白），**不是**靠内容填满。\n\n**判断filler的问题**：\n- 如果去掉这段内容，设计会变差吗？答案若是\"不会\"，就去掉。\n- 这个元素解决了什么真问题？如果是\"让页面不那么空\"，删掉。\n- 这个stats/quote/feature有真数据支持吗？没有就不要凭空写。\n\n「One thousand no's for every yes」。\n\n### 2. Ask before adding material\n\n你觉得多加一段/一页/一个section会更好？先问用户，不要单方面加。\n\n原因：\n- 用户知道他的受众比你清楚\n- 加内容有成本，用户可能不想要\n- 单方面加内容违反了\"junior designer汇报工作\"的关系\n\n### 3. Create a system up front\n\n探索完design context后，**先口头说出你要用的系统**，让用户确认：\n\n```markdown\n我的设计系统：\n- 色彩：#1A1A1A主体 + #F0EEE6背景 + #D97757 accent（来自你的品牌）\n- 字型：Instrument Serif做display + Geist Sans做body\n- 节奏：section title用full-bleed彩色背景 + 白字；普通section用白背景\n- 图像：hero用full-bleed照片，feature section用placeholder等你提供\n- 最多用2种背景色，避免杂乱\n\n确认这个方向我就开始做。\n```\n\n用户确认后再动手。这个check-in能避免\"做完一半发现方向错\"。\n\n## Scale 规范\n\n### 幻灯片（1920×1080）\n\n- 正文最小 **24px**，理想 28-36px\n- 标题 60-120px\n- Section title 80-160px\n- Hero headline 可以用 180-240px 的大字\n- 永远不要用 <24px 的字放幻灯片\n\n### 印刷文档\n\n- 正文最小 **10pt**（≈13.3px），理想 11-12pt\n- 标题 18-36pt\n- Caption 8-9pt\n\n### Web和移动端\n\n- 正文最小 **14px**（老年人友好用16px）\n- 移动端正文 **16px**（避免iOS自动缩放）\n- Hit target（可点击元素）最小 **44×44px**\n- 行高 1.5-1.7（中文1.7-1.8）\n\n### 对比度\n\n- 正文 vs 背景 **至少 4.5:1**（WCAG AA）\n- 大字 vs 背景 **至少 3:1**\n- 用Chrome DevTools的accessibility工具检查\n\n## CSS 神器\n\n**高级CSS特性**是设计师的好朋友，大胆用：\n\n### 排版\n\n```css\n/* 让标题换行更自然，不会最后一行孤单单一个词 */\nh1, h2, h3 { text-wrap: balance; }\n\n/* 正文换行，避免寡孀和孤儿 */\np { text-wrap: pretty; }\n\n/* 中文排版神器：标点挤压、行首行尾控制 */\np { \n text-spacing-trim: space-all;\n hanging-punctuation: first;\n}\n```\n\n### Layout\n\n```css\n/* CSS Grid + named areas = 可读性爆表 */\n.layout {\n display: grid;\n grid-template-areas:\n \"header header\"\n \"sidebar main\"\n \"footer footer\";\n grid-template-columns: 240px 1fr;\n grid-template-rows: auto 1fr auto;\n}\n\n/* Subgrid对齐卡片内容 */\n.card { display: grid; grid-template-rows: subgrid; }\n```\n\n### 视觉效果\n\n```css\n/* 有设计感的滚动条 */\n* { scrollbar-width: thin; scrollbar-color: #666 transparent; }\n\n/* 玻璃拟态（克制使用） */\n.glass {\n backdrop-filter: blur(20px) saturate(150%);\n background: color-mix(in oklch, white 70%, transparent);\n}\n\n/* View transitions API让页面切换丝滑 */\n@view-transition { navigation: auto; }\n```\n\n### 交互\n\n```css\n/* :has()选择器让条件样式变容易 */\n.card:has(img) { padding-top: 0; } /* 有图片的卡片无顶padding */\n\n/* container queries让组件真的响应式 */\n@container (min-width: 500px) { ... }\n\n/* 新的color-mix函数 */\n.button:hover {\n background: color-mix(in oklch, var(--primary) 85%, black);\n}\n```\n\n## 决策速查：当你犹豫时\n\n- 想加个渐变？→ 大概率不加\n- 想加个emoji？→ 不加\n- 想给卡片加圆角+border-left accent？→ 不加，换其他方式\n- 想用SVG画个hero插画？→ 不画，用placeholder\n- 想加一段quote装饰？→ 先问用户有没有真quote\n- 想加一排icon features？→ 先问要不要icon，可能不需要\n- 用Inter？→ 换一个更有特点的\n- 用紫色渐变？→ 换一个有根据的配色\n\n**当你觉得\"加一下会更好看\"的时候——那通常是AI slop的征兆**。先做最简的版本，只在用户要求时加。\n\nFile v1.0.0:references/critique-guide.md\n\n# 设计评审深度指南\n\n> Phase 7 的详细参考。提供评分标准、场景侧重点、常见问题清单。\n\n---\n\n## 评分标准详解\n\n### 1. 哲学一致性（Philosophy Alignment）\n\n| 分数 | 标准 |\n|------|------|\n| 9-10 | 设计完美体现了选定哲学的核心精神，每个细节都有哲学依据 |\n| 7-8 | 整体方向正确，核心特征到位，个别细节偏离 |\n| 5-6 | 能看出意图，但执行时混入了其他风格元素，不够纯粹 |\n| 3-4 | 仅在表面模仿，未理解哲学内核 |\n| 1-2 | 与选定哲学基本无关 |\n\n**评审要点**：\n- 是否使用了该设计师/机构的标志性手法？\n- 色彩、字体、布局是否符合该哲学体系？\n- 有没有「自相矛盾」的元素？（如选了Kenya Hara却塞满内容）\n\n### 2. 视觉层级（Visual Hierarchy）\n\n| 分数 | 标准 |\n|------|------|\n| 9-10 | 用户视线自然沿设计者意图流动，信息获取零摩擦 |\n| 7-8 | 主次关系清晰，偶有1-2处层级模糊 |\n| 5-6 | 能分出标题和正文，但中间层级混乱 |\n| 3-4 | 信息平铺，没有明确的视觉入口 |\n| 1-2 | 混乱，用户不知道先看哪里 |\n\n**评审要点**：\n- 标题与正文的字号对比是否足够？（至少2.5倍）\n- 颜色/粗细/大小是否建立了3-4个清晰层级？\n- 留白是否在引导视线？\n- 「眯眼测试」：眯起眼看，层级是否仍然清晰？\n\n### 3. 细节执行（Craft Quality）\n\n| 分数 | 标准 |\n|------|------|\n| 9-10 | 像素级精确，对齐、间距、颜色无任何瑕疵 |\n| 7-8 | 整体精致，有1-2处微小对齐/间距问题 |\n| 5-6 | 基本对齐，但间距不统一，颜色使用不够系统 |\n| 3-4 | 明显的对齐错误、间距混乱、颜色过多 |\n| 1-2 | 粗糙，看起来像草稿 |\n\n**评审要点**：\n- 是否使用了统一的间距系统（如8pt网格）？\n- 同类元素的间距是否一致？\n- 颜色数量是否受控？（通常不超过3-4种）\n- 字体家族是否统一？（通常不超过2种）\n- 边缘对齐是否精确？\n\n### 4. 功能性（Functionality）\n\n| 分数 | 标准 |\n|------|------|\n| 9-10 | 每个设计元素都服务于目标，零冗余 |\n| 7-8 | 功能导向明确，有少量可删减的装饰 |\n| 5-6 | 基本可用，但有明显的装饰性元素分散注意力 |\n| 3-4 | 形式大于功能，用户需要努力寻找信息 |\n| 1-2 | 完全被装饰淹没，失去了传达信息的能力 |\n\n**评审要点**：\n- 删掉任何一个元素，设计会变差吗？（如果不会，就应该删）\n- CTA/关键信息是否在最显眼的位置？\n- 是否有「因为好看所以加上去」的元素？\n- 信息密度与载体是否匹配？（PPT不宜太密，PDF可以更密）\n\n### 5. 创新性（Originality）\n\n| 分数 | 标准 |\n|------|------|\n| 9-10 | 令人耳目一新，在该哲学框架内找到了独特表达 |\n| 7-8 | 有自己的想法，不是简单的模板套用 |\n| 5-6 | 中规中矩，看起来像模板 |\n| 3-4 | 大量使用了cliché（如渐变圆球代表AI） |\n| 1-2 | 完全是模板或素材拼凑 |\n\n**评审要点**：\n- 是否避免了常见cliché？（见下方「常见问题清单」）\n- 在遵循设计哲学的同时是否有个人表达？\n- 是否有「意想不到但很合理」的设计决策？\n\n---\n\n## 场景评审侧重\n\n不同输出类型的评审重点不同：\n\n| 场景 | 最重要维度 | 次重要 | 可放宽 |\n|------|-----------|--------|--------|\n| 公众号封面/配图 | 创新性、视觉层级 | 哲学一致性 | 功能性（单图不涉及交互） |\n| 信息图 | 功能性、视觉层级 | 细节执行 | 创新性（准确优先） |\n| PPT/Keynote | 视觉层级、功能性 | 细节执行 | 创新性（清晰优先） |\n| PDF/白皮书 | 细节执行、功能性 | 视觉层级 | 创新性（专业优先） |\n| 落地页/官网 | 功能性、视觉层级 | 创新性 | —（全面要求） |\n| App UI | 功能性、细节执行 | 视觉层级 | 哲学一致性（可用性优先） |\n| 小红书配图 | 创新性、视觉层级 | 哲学一致性 | 细节执行（氛围优先） |\n\n---\n\n## 常见设计问题 Top 10\n\n### 1. AI科技cliché\n**问题**：渐变圆球、数字雨、蓝色电路板、机器人脸\n**为什么是问题**：用户已经对这些视觉疲劳，无法区分你和其他人\n**修复**：用抽象隐喻替代直白符号（如用「对话」的隐喻而非聊天气泡图标）\n\n### 2. 字号层级不足\n**问题**：标题和正文差距太小（<2.5倍）\n**为什么是问题**：用户无法快速定位关键信息\n**修复**：标题至少为正文的3倍（如正文16px → 标题48-64px）\n\n### 3. 颜色过多\n**问题**：使用5种以上颜色，没有主次\n**为什么是问题**：视觉混乱，品牌感弱\n**修复**：限制为1个主色+1个辅色+1个强调色+灰阶\n\n### 4. 间距不统一\n**问题**：元素间距随意，没有系统\n**为什么是问题**：看起来不专业，视觉节奏混乱\n**修复**：建立8pt网格系统（间距只用8/16/24/32/48/64px）\n\n### 5. 留白不足\n**问题**：所有空间都被内容填满\n**为什么是问题**：信息拥挤导致阅读疲劳，反而降低信息传达效率\n**修复**：留白至少占总面积40%（极简风格60%+）\n\n### 6. 字体过多\n**问题**：使用3种以上字体\n**为什么是问题**：视觉噪音，削弱统一感\n**修复**：最多2种字体（1种标题+1种正文），用字重和大小创造变化\n\n### 7. 对齐不一致\n**问题**：有的左对齐，有的居中，有的右对齐\n**为什么是问题**：破坏视觉秩序感\n**修复**：选定一种对齐方式（推荐左对齐），全局统一\n\n### 8. 装饰大于内容\n**问题**：背景图案/渐变/阴影抢了主要内容的风头\n**为什么是问题**：本末倒置，用户来看信息不是看装饰\n**修复**：「如果删掉这个装饰，设计会变差吗？」如果不会，就删\n\n### 9. 赛博霓虹滥用\n**问题**：深蓝底(#0D1117) + 霓虹色发光效果\n**为什么是问题**：默认审美禁区（本 skill 的品位基线），且已成为最大 cliché 之一——用户可按自己品牌 override\n**修复**：选择更有辨识度的配色方案（参考20种风格的色彩系统）\n\n### 10. 信息密度与载体不匹配\n**问题**：PPT里放了一整页文字 / 封面图里塞了10个元素\n**为什么是问题**：不同载体的最佳信息密度不同\n**修复**：\n- PPT：每页1个核心观点\n- 封面图：1个视觉焦点\n- 信息图：分层展示\n- PDF：可以更密，但需要清晰的导航\n\n---\n\n## 评审输出模板\n\n```\n## 设计评审报告\n\n**总体评分**：X.X/10 [优秀(8+)/良好(6-7.9)/需改进(4-5.9)/不合格(<4)]\n\n**分项评分**：\n- 哲学一致性：X/10 [一句话说明]\n- 视觉层级：X/10 [一句话说明]\n- 细节执行：X/10 [一句话说明]\n- 功能性：X/10 [一句话说明]\n- 创新性：X/10 [一句话说明]\n\n### 优点（Keep）\n- [具体指出做得好的地方，用设计语言描述]\n\n### 问题（Fix）\n[按严重程度排序]\n\n**1. [问题名称]** — ⚠️致命 / ⚡重要 / 💡优化\n- 当前：[描述现状]\n- 问题：[为什么这是问题]\n- 修复：[具体操作，含数值]\n\n### 快速修复清单（Quick Wins）\n如果只有5分钟，优先做这3件事：\n- [ ] [最有影响力的修复]\n- [ ] [第二重要的修复]\n- [ ] [第三重要的修复]\n```\n\n---\n\n**版本**：v1.0\n**更新日期**：2026-02-13\n\nFile v1.0.0:references/design-context.md\n\n# Design Context：从已有上下文出发\n\n**这是这个skill最重要的one thing。**\n\n好的hi-fi设计一定是从已有design context长出来的。**凭空做hi-fi是last resort，一定会产出generic的作品**。所以每次设计任务开始，先问：有没有可以参考的东西？\n\n## 什么是Design Context\n\n按优先级从高到低：\n\n### 1. 用户的Design System/UI Kit\n用户自己产品已有的组件库、色彩token、字型规范、icon系统。**最完美的情况**。\n\n### 2. 用户的Codebase\n如果用户给了代码库，里面就有活生生的组件实现。Read那些组件文件：\n- `theme.ts` / `colors.ts` / `tokens.css` / `_variables.scss`\n- 具体的组件（Button.tsx、Card.tsx）\n- Layout scaffold（App.tsx、MainLayout.tsx）\n- Global stylesheets\n\n**读代码抄exact values**：hex codes、spacing scale、font stack、border radius。不要凭记忆重画。\n\n### 3. 用户已发布的产品\n如果用户有上线的产品但没给代码，用Playwright或让用户提供截图。\n\n```bash\n# 用Playwright截图一个公开URL\nnpx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080\n```\n\n让你看到真实的视觉vocabulary。\n\n### 4. 品牌指南/Logo/已有素材\n用户可能有：Logo文件、品牌色规范、营销物料、slide模板。这些都是context。\n\n### 5. 竞品参考\n用户说\"像XX网站那样\"——让他提供URL或截图。**不要**凭你训练数据里的模糊印象做。\n\n### 6. 已知的design system（fallback）\n如果以上都没有，用公认的设计系统作为base：\n- Apple HIG\n- Material Design 3\n- Radix Colors（配色）\n- shadcn/ui（组件）\n- Tailwind默认palette\n\n明确告诉用户你用的什么，让他知道这是起点不是定稿。\n\n## 获取Context的流程\n\n### Step 1：问用户\n\n任务开始时的必问清单（来自`workflow.md`）：\n\n```markdown\n1. 你有现成的design system/UI kit/组件库吗？在哪？\n2. 有品牌指南、色彩/字体规范吗？\n3. 可以给我现有产品的截图或URL吗？\n4. 有codebase我可以读吗？\n```\n\n### Step 2：用户说\"没有\"时，帮他找\n\n别直接放弃。尝试：\n\n```markdown\n让我看看有没有线索：\n- 你之前的项目有相关设计吗？\n- 公司的marketing网站用什么色彩/字型？\n- 你产品的Logo什么风格？能给我一张吗？\n- 有什么你欣赏的产品作为参考？\n```\n\n### Step 3：Read所有能找到的context\n\n如果用户给了codebase路径，你读：\n1. **先list文件结构**：找style/theme/component相关的文件\n2. **读theme/token文件**：lift具体的hex/px values\n3. **读2-3个代表性组件**：看视觉vocabulary（hover state、shadow、border、padding node pattern）\n4. **读global stylesheet**：基础重置、font loading\n5. **如果有Figma链接/截图**：看图，但**更相信代码**\n\n**重要**：**不要**看了一眼就凭印象做。读下来有30+个具体values才真的lift到了。\n\n### Step 4：Vocalize你要用的系统\n\n看完context后，告诉用户你要用的系统：\n\n```markdown\n根据你的codebase和产品截图，我提炼的设计系统：\n\n**色彩**\n- Primary: #C27558（从tokens.css）\n- Background: #FDF9F0\n- Text: #1A1A1A\n- Muted: #6B6B6B\n\n**字型**\n- Display: Instrument Serif（从global.css的@font-face）\n- Body: Geist Sans\n- Mono: JetBrains Mono\n\n**Spacing**（来自你的scale系统）\n- 4, 8, 12, 16, 24, 32, 48, 64\n\n**Shadow pattern**\n- `0 1px 2px rgba(0,0,0,0.04)`（subtle card）\n- `0 10px 40px rgba(0,0,0,0.1)`（elevated modal）\n\n**Border-radius**\n- 小组件 4px，卡片 12px，按钮 8px\n\n**component vocabulary**\n- Button：filled primary，outlined secondary，ghost tertiary，全部圆角8px\n- Card：白色背景，subtle shadow，无border\n\n我按这套系统开始做。确认没问题？\n```\n\n用户确认后再动手。\n\n## 凭空做设计（没Context时的 fallback）\n\n**强烈警告**：这种情况下的产出质量会显著下降。明确告诉用户。\n\n```markdown\n你没有design context，我就只能基于通用直觉做。\n产出会是\"看起来OK但缺乏独特性\"的东西。\n你愿意继续，还是先补一些参考材料？\n```\n\n用户执意要你做，按这个顺序做决策：\n\n### 1. 选一个aesthetic direction\n不要给generic结果。挑一个明确方向：\n- brutally minimal\n- editorial/magazine\n- brutalist/raw\n- organic/natural\n- luxury/refined\n- playful/toy\n- retro-futuristic\n- soft/pastel\n\n告诉用户你选了哪个。\n\n### 2. 选一个known design system作为骨架\n- 用Radix Colors做配色（https://www.radix-ui.com/colors）\n- 用shadcn/ui做组件vocabulary（https://ui.shadcn.com）\n- 用Tailwind spacing scale（4的倍数）\n\n### 3. 选有特点的字体配对\n\n不要用Inter/Roboto。建议组合（从Google Fonts白嫖）：\n- Instrument Serif + Geist Sans\n- Cormorant Garamond + Inter Tight\n- Bricolage Grotesque + Söhne（付费）\n- Fraunces + Work Sans（注意Fraunces已经被AI用烂）\n- JetBrains Mono + Geist Sans（technical feel）\n\n### 4. 每个关键决策都有reasoning\n\n不要默默选。在HTML的comment里写：\n\n```html\n\n```\n\n## Import策略（用户给了codebase）\n\n如果用户说\"import这个codebase做参考\"：\n\n### 小型（<50文件）\n全部Read，把context内化。\n\n### 中型（50-500文件）\nFocus在：\n- `src/components/` 或 `components/`\n- 所有styles/tokens/theme相关的文件\n- 2-3个代表性的整页组件（Home.tsx、Dashboard.tsx）\n\n### 大型（>500文件）\n让用户指明focus：\n- \"我要做settings页面\" → 读现有的settings相关\n- \"我要做一个新的feature\" → 读整体shell + 最接近的参考\n- 不求全，求准\n\n## 和Figma/设计稿的配合\n\n如果用户给了Figma链接：\n\n- **不要**期望你能直接\"转Figma为HTML\"——那需要额外工具\n- Figma链接通常不公开可访问\n- 让用户：导出为**截图**发给你 + 告诉你具体的color/spacing values\n\n如果只给了Figma截图，告诉用户：\n- 我能看到视觉，但取不到精确values\n- 关键数字（hex、px）请告诉我，或者export as code（Figma支持）\n\n## 最后的提醒\n\n**一个项目的设计质量上限，由你拿到的context质量决定**。\n\n花10分钟收集context，比花1小时凭空画hi-fi更有价值。\n\n**遇到没context的情况，优先问用户要，而不是硬上**。","readmeExcerpt":"Skill: 花叔Design Owner: swang066 Summary: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T04:25:46.479Z | auto huashu-design 1.0.0 - Initial release of Huashu-Design: an HTML-based workflow for hi-fi prototypes, interactive demos, slides, animation, an","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"关于 ，你手上有以下哪些资料？我按优先级列：\n1. Logo（SVG / 高清 PNG）—— 任何品牌必备\n2. 产品图 / 官方渲染图 —— 实体产品必备（如 DJI Pocket 4 的产品照）\n3. UI 截图 / 界面素材 —— 数字产品必备（如 App 主要页面截图）\n4. 色值清单（HEX / RGB / 品牌色盘）\n5. 字体清单（Display / Body）\n6. Brand guidelines PDF / Figma design system / 品牌官网链接\n\n有的直接发我，没有的我去搜/抓/生成。"},{"language":"bash","snippet":"curl -o assets/-brand/logo.svg https://.com/logo.svg"},{"language":"bash","snippet":"curl -o assets/-brand/logo-white.svg https://.com/logo-white.svg"},{"language":"bash","snippet":"curl -o assets/-brand/logo.svg https://.com/logo.svg\n curl -o assets/-brand/logo-white.svg https://.com/logo-white.svg"},{"language":"bash","snippet":"curl -A \"Mozilla/5.0\" -L https://.com -o assets/-brand/homepage.html"},{"language":"bash","snippet":"curl -A \"Mozilla/5.0\" -L https://.com -o assets/-brand/homepage.html\n # 然后 grep ... 提取 logo 节点"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: huashu-design\ndescription: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、概念解释视频、长视频科普、配音动画、voiceover、narration、TTS+动画、5分钟讲清楚什么是XX。**主干能力**：Junior Designer工作流（先给假设+reasoning+placeholder再迭代）、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components（幻灯片外壳/变体画布/动画引擎/设备边框/解说Stage）、App原型专属守则（默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试）、Playwright验证、HTML动画→MP4/GIF视频导出（25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade）、**带解说的长动画pipeline**（豆包TTS生人声+实测时长生timeline.json+NarrationStage驱动画面+ducking混音→交付HTML实播+发布MP4双形态；铁律：整片是一个连续的运动叙事，禁PowerPoint切换）。**需求模糊时的Fallback**：设计方向顾问模式——从5流派×20种设计哲学（Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等）推荐3个差异化方向，展示24个预制showcase（8场景×3风格），并行生成3个视觉Demo让用户选。**交付后可选**：专家级5维度评审（哲学一致性/视觉层级/细节执行/功能性/创新性各打10分+修复清单）。\n---\n\n# 花叔Design · Huashu-Design\n\n你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。\n\n**HTML是工具，但你的媒介和产出形式会变**——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。**根据任务embody对应领域的专家**：动画师/UX设计师/幻灯片设计师/原型师。\n\n## 使用前提\n\n这个skill专为「用HTML做视觉产出」的场景设计，不是给任何HTML任务用的万能勺。适用场景：\n\n- **交互原型**：高保真产品mockup，用户可以点击、切换、感受流程\n- **设计变体探索**：并排对比多个设计方向，或用Tweaks实时调参\n- **演示幻灯片**：1920×1080的HTML deck，可以当PPT用\n- **动画Demo**：时间轴驱动的motion design，做视频素材或概念演示\n- **信息图/可视化**：精确排版、数据驱动、印刷级质量\n\n不适用场景：生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。\n\n## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程）\n\n> **任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 `WebSearch` 验证，禁止凭训练语料做断言。**\n\n**触发条件（满足任一）**：\n- 用户提到你不熟悉或不确定的具体产品名（如\"大疆 Pocket 4\"、\"Nano Banana Pro\"、\"Gemini 3 Pro\"、某新版 SDK）\n- 涉及 2024 年及之后的发布时间线、版本号、规格参数\n- 你内心冒出\"我记得好像是...\"、\"应该还没发布\"、\"大概在...\"、\"可能不存在\"的句式\n- 用户请求给某个具体产品/公司做设计物料\n\n**硬流程（开工前执行，优先于 clarifying questions）**：\n1. `WebSearch` 产品名 + 最新时间词（\"2026 latest\"、\"launch date\"、\"release\"、\"specs\"）\n2. 读 1-3 条权威结果，确认：**存在性 / 发布状态 / 最新版本号 / 关键规格**\n3. 把事实写进项目的 `product-facts.md`（见工作流 Step 2），不靠记忆\n4. 搜不到或结果模糊 → 问用户，而不是自行假设\n\n**反例**（2026-04-20 真实踩过的坑）：\n- 用户：\"给大疆 Pocket 4 做发布动画\"\n- 我：凭记忆说\"Pocket 4 还没发布，我们做概念 demo\"\n- 真相：Pocket 4 已在 4 天前（2026-04-16）发布，官方 Launch Film + 产品渲染图俱在\n- 后果：基于错误假设做了\"概念剪影\"动画，违背用户期待，返工 1-2 小时\n- **成本对比：WebSearch 10 秒 << 返工 2 小时**\n\n**这条原则优先级高于\"问 clarifying questions\"**——问问题的前提是你对事实已有正确理解。事实错了，问什么都是歪的。\n\n**禁止句式（看到自己要说这些时，立即停下去搜）**：\n- ❌ \"我记得 X 还没发布\"\n- ❌ \"X 目前是 vN 版本\"（未经搜索的断言）\n- ❌ \"X 这个产品可能不存在\"\n- ❌ \"据我所知 X 的规格是...\"\n- ✅ \"我 `WebSearch` 一下 X 最新状态\"\n- ✅ \"搜到的权威来源说 X 是 ...\"\n\n**与\"品牌资产协议\"的关系**：本原则是资产协议的**前提**——先确认产品存在且是什么，再去找它的 logo/产品图/色值。顺序不能反。\n\n---\n\n## 核心哲学（优先级从高到低）\n\n### 1. 从existing context出发，不要凭空画\n\n好的hi-fi设计**一定**是从已有上下文长出来的。先问用户是否有design system/UI kit/codebase/Figma/截图。**凭空做hi-fi是last resort，一定会产出generic的作品**。如果用户说没有，先帮他去找（看项目里有没有，看有没有参考品牌）。\n\n**如果还是没有，或者用户需求表达很模糊**（如\"做个好看的页面\"、\"帮我设计\"、\"不知道要什么风格\"、\"做个XX\"没有具体参考），**不要凭通用直觉硬做**"},{"path":"README.md","content":"🌐 English · 中文\n\n
\n\n# Huashu Design\n\n> *\"Type. Hit enter. A finished design lands in your lap.\"*\n> *「打字。回车。一份能交付的设计。」*\n\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)\n[![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)\n\n
\n\n**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**\n\n
\n\n3 to 30 minutes — you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.\n\nNot \"decent for AI\" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.\n\n**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects — just a sentence + skill run. Next product launch needs a promo video? You can make it too.\n\n```\nnpx skills add alchaincyf/huashu-design\n```\n\n> 📣 **Now MIT-licensed.** As of 2026-05-14 this skill is fully open-source under the [MIT License](LICENSE) — free for personal **and** commercial use, no authorization required. ([what changed](#license))\n\n[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)\n\n> 📖 **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references/*.md`) are in Chinese but the agent is bilingual — works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default-named files (see the [Chinese README](README.zh.md)).\n>\n> 📖 **致中文读者**：这个 skill 由花叔（@AlchainHust）开发。一句话能让 agent 在 3–30 分钟内交付**产品发布动画 / 可点击 App 原型 / 可编辑 PPT / 印刷级信息图**。完整中文介绍见 [README.zh.md](README.zh.md)。\n\n
\n\n---\n\n

\n \n

\n\n

▲ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)

\n\n---\n\n## Install\n\n```bash\nnpx skills add alchaincyf/huashu-design\n```\n\nThen just talk to Claude Code:\n\n```\n\"Make a keynote for AI psychology. Give me 3 style directions to pick from.\"\n\"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable.\"\n\"Turn this logic into a 60-second animation. Export MP4 and"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7enbp1agj9a8zdv349h5mac587kry0\",\n \"slug\": \"huashu-design\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1779942346479\n}"},{"path":"references/animation-best-practices.md","content":"# Animation Best Practices · 正向动画设计语法\n\n> 基于 Anthropic 官方三支产品动画（Claude Design / Claude Code Desktop / Claude for Word）\n> 的深度拆解，提炼出的\"Anthropic 级\"动画设计规则。\n>\n> 配套 `animation-pitfalls.md`（避坑清单）使用——本文件是「**应该这样做**」，\n> pitfalls 是「**不要这样做**」，两者正交，都要读。\n>\n> **约束声明**：本文件只收录**运动逻辑和表达风格**，**不引入任何品牌色具体色值**。\n> 色彩决策走 §1.a 核心资产协议（从品牌 spec 抽取）或「设计方向顾问」\n> （20 种哲学各自的配色方案）。本 reference 讨论的是「**怎么动**」，不是「**什么色**」。\n\n---\n\n## §0 · 你是谁 · 身份与品味\n\n> 在读后面任何技术规则之前，先读这一节。规则是**从身份涌现的**——\n> 不是相反。\n\n### §0.1 身份锚点\n\n**你是一个研究过 Anthropic / Apple / Pentagram / Field.io 运动档案的 motion designer。**\n\n做动画时，你不是在调 CSS transition——你是在用数字元素**模拟一个物理世界**，\n让观众的潜意识相信「这是有重量、有惯性、会溢出的物体」。\n\n你不做 PowerPoint 式动画。你不做「fade in fade out」动画。你做的动画**让人相信屏幕\n是一个可以伸手进去的空间**。\n\n### §0.2 核心信念（3 条）\n\n1. **动画是物理学，不是动画曲线**\n `linear` 是数字，`expoOut` 是物体。你相信屏幕上的像素值得被当作\"物体\"对待。\n 每一条 easing 的选择，都是在回答「这个元素有多重？摩擦系数多大？」的物理问题。\n\n2. **时间分配比曲线形状更重要**\n Slow-Fast-Boom-Stop 是你的呼吸。**均匀节奏的动画是技术演示，有节奏的动画是叙事。**\n 在正确的时刻慢下来——比在错误的时刻用对 easing 更重要。\n\n3. **礼让观众，比炫技更难**\n 关键结果前停 0.5 秒是**技术**，不是妥协。**让人类大脑有反应时间，是动画师的最高素养。**\n AI 默认会做一个没有停顿的、信息密度满格的动画——那是新手。你要做的是克制。\n\n### §0.3 品味标准 · 什么是美\n\n你对「好」和「great」的判断标准如下。每一条都有**识别方法**——当你看到一个候选动画时，\n用这些问题判断它是否达标，而不是机械对照 14 条规则。\n\n| 美的维度 | 识别方法（观众反应） |\n|---|---|\n| **物理重量感** | 动画结束时，元素\"**落**\"得稳——不是\"**停**\"在那里。观众潜意识觉得\"这有重量\" |\n| **礼让观众** | 关键信息出现前有一个可感的 pause（≥300ms）——观众来得及\"**看见**\"再继续 |\n| **留白** | 收尾是戛然而止 + hold，不是 fade to black。最后一帧清晰、肯定、有决定感 |\n| **克制** | 全片只有一处「120% 精致」，其余 80% 恰到好处——**到处炫技是廉价的信号** |\n| **手感** | 弧线（不是直线）、不规律（不是 setInterval 的机械节奏）、有呼吸感 |\n| **敬意** | 展示 tweak 的过程、展示 bug 的修复——**不藏工作、不给\"魔法\"**。AI 是协作者不是魔术师 |\n\n### §0.4 自检 · 观众第一反应法\n\n做完一支动画，**观众看完第一反应是什么？**——这是你唯一要优化的指标。\n\n| 观众反应 | 评级 | 诊断 |\n|---|---|---|\n| \"看起来挺流畅的\" | good | 合格但无特色，你在做 PowerPoint |\n| \"这个动画真顺\" | good+ | 技术对了，但没惊艳 |\n| \"这个东西看起来真的像**从桌面上浮起来的**\" | great | 你触到了物理重量感 |\n| \"这不像是 AI 做的\" | great+ | 你触到了 Anthropic 的门槛 |\n| \"我想**截图**发朋友圈\" | great++ | 你做到了让观众主动传播 |\n\n**great 和 good 的区别，不在于技术正确度，在于品味判断**。技术正确 + 品味对 = great。\n技术正确 + 品味空 = good。技术错误 = 没入门。\n\n### §0.5 身份和规则的关系\n\n下面 §1-§8 的技术规则，是这套身份在具体场景的**执行手段**——不是独立规则清单。\n\n- 遇到规则没覆盖的场景 → 回到 §0，用**身份**判断，不要瞎猜\n- 遇到规则之间有冲突 → 回到 §0，用**品味标准**判断哪条更重要\n- 想破一条规则 → 先回答：\"这样做符合 §0.3 哪一条美？\" 答得上就破，答不上就别破\n\n好。继续读下去。\n\n---\n\n## 总览 · 动画是物理学的三层展开\n\n大多数 AI 生成动画有廉价感的根源是——**它们表现得像「数字」不是「物体」**。\n真实世界的物体有质量、有惯性、有弹性、会溢出。Anthropic 三支片子的「高级感」根源，\n就在于给数字元素一套**物理世界的运动规则**。\n\n这套规则有 3 个层次：\n\n1. **叙事节奏层**：Slow-Fast-Boom-Stop 的时间分配\n2. **运动曲线层**：Expo Out / Overshoot / Spring，拒绝 linear\n3. **表达语言层**：展示过程、鼠标弧线、Logo 形变收束\n\n---\n\n## 1. 叙事节奏 · Slow-Fast-Boom-Stop 5 段结构\n\nAnthropic 三支片子无一例外遵循这个结构：\n\n| 段 | 占比 | 节奏 | 作用 |\n|---|---|---|---|\n| **S1 触发** | ~15% | 慢 | 给人类反应时间，建立真实感 |\n| **S2 生成** | ~15% | 中 | 视觉惊艳点出现 |\n| **S3 过程** | ~40% | 快 | 展示可控性/密度/细节 |\n| **S4 爆发** | ~20% | Boom | 镜头拉远/3D pop-out/多面板涌现 |\n| **S5 落幅** | ~10% | 静 | 品牌 Logo + 戛然而止 |\n\n**具体时长映射**（15 秒动画为例）：\nS1 触发 2s · S2 生成 2s · S3 过程 6s · S4 爆发 3s · S5 落幅 2s\n\n**禁止做的事**：\n- ❌ 均匀节奏（每秒信息密度一样）— 观众疲劳\n- ❌ 持续高密度 — 无峰值无记忆点\n- ❌ 渐弱收尾（fade out 到透明）— 应该**戛然而止**\n\n**自检**：用纸笔画 5 个 thumbnail，每个代表一段的高潮画面。如果 5 张图差别不大，\n说明节奏没"},{"path":"references/animation-pitfalls.md","content":"# Animation Pitfalls：HTML 动画踩过的坑与规则\n\n做动画时最常踩的 bug 和如何避免。每条规则都来自真实失败案例。\n\n写动画之前读完这篇，能省一轮迭代。\n\n## 1. 叠层布局 —— `position: relative` 是默认义务\n\n**踩的坑**：一个 sentence-wrap 元素包了 3 个 bracket-layer（`position: absolute`）。没给 sentence-wrap 设 `position: relative`，结果 absolute 的 bracket 以 `.canvas` 为坐标系，飘到屏幕底部 200px 外。\n\n**规则**：\n- 任何包含 `position: absolute` 子元素的容器，**必须**显式 `position: relative`\n- 即使视觉上不需要「偏移」，也要写 `position: relative` 作为坐标系锚点\n- 如果你在写 `.parent { ... }`，其子元素里有 `.child { position: absolute }`，下意识给 parent 加 relative\n\n**快速检查**：每出现一个 `position: absolute`，往上数 ancestor，确保最近的 positioned 祖先是你*想要的*坐标系。\n\n## 2. 字符陷阱 —— 不依赖稀有 Unicode\n\n**踩的坑**：想用 `␣` (U+2423 OPEN BOX) 可视化「空格 token」。Noto Serif SC / Cormorant Garamond 都没这个字形，渲染为空白/豆腐，观众完全看不到。\n\n**规则**：\n- **动画里出现的每个字符，都必须在你选定的字体里存在**\n- 常见稀有字符黑名单：`␣ ␀ ␐ ␋ ␨ ↩ ⏎ ⌘ ⌥ ⌃ ⇧ ␦ ␖ ␛`\n- 要表达「空格 / 回车 / 制表符」这类元字符，用 **CSS 构造的语义盒子**：\n ```html\n Space\n ```\n ```css\n .space-key {\n display: inline-flex;\n padding: 4px 14px;\n border: 1.5px solid var(--accent);\n border-radius: 4px;\n font-family: monospace;\n font-size: 0.3em;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n }\n ```\n- Emoji 也要验证：某些 emoji 在 Noto Emoji 以外字体会 fallback 成灰色方框，最好用 `emoji` font-family 或 SVG\n\n## 3. 数据驱动的 Grid/Flex 模板\n\n**踩的坑**：代码里 `const N = 6` 个 tokens，但 CSS 写死 `grid-template-columns: 80px repeat(5, 1fr)`。结果第 6 个 token 没有 column，整个矩阵错位。\n\n**规则**：\n- 当 count 从 JS 数组来（`TOKENS.length`），CSS 模板也应该数据驱动\n- 方案 A：用 CSS 变量从 JS 注入\n ```js\n el.style.setProperty('--cols', N);\n ```\n ```css\n .grid { grid-template-columns: 80px repeat(var(--cols), 1fr); }\n ```\n- 方案 B：用 `grid-auto-flow: column` 让浏览器自动扩展\n- **禁用「固定数字 + JS 常量」的组合**，N 改了 CSS 不会同步更新\n\n## 4. 过渡断层 —— 场景切换要连续\n\n**踩的坑**：zoom1 (13-19s) → zoom2 (19.2-23s) 之间，主句子已经 hidden，zoom1 fade out（0.6s）+ zoom2 fade in（0.6s）+ stagger delay（0.2s+）= 约 1 秒纯空白画面。观众以为动画卡住了。\n\n**规则**：\n- 连续切换场景时，fade out 和 fade in 要**交叉重叠**，不是前一个完全消失再开始下一个\n ```js\n // 差：\n if (t >= 19) hideZoom('zoom1'); // 19.0s out\n if (t >= 19.4) showZoom('zoom2'); // 19.4s in → 中间 0.4s 空白\n\n // 好：\n if (t >= 18.6) hideZoom('zoom1'); // 提前 0.4s 开始 fade out\n if (t >= 18.6) showZoom('zoom2'); // 同时 fade in（cross-fade）\n ```\n- 或者用一个「锚点元素」（如主句子）作为场景之间的视觉连接，zoom 切换期间它短暂回显\n- 配 CSS transition 的 duration 算清楚，避免 transition 还没结束就触发下一个\n\n## 5. Pure Render 原则 —— 动画状态应可 seek\n\n**踩的坑**：用 `setTimeout` + `fireOnce(key, fn)` 链式触发动画状态。正常播放没问题，但做逐帧录制/seek到任意时间点时，之前的 setTimeout 已经执行过就无法「回到过去」。\n\n**规则**：\n- `render(t)` 函数理想上是 **pure function**：给定 t 输出唯一 DOM 状态\n- 如果必须用副作用（如 class 切换），用 `fired` set 配合显式 reset：\n ```js\n const fired = new Set();\n function fireOnce(key, fn) { if (!fired.has(key)) { fired.add(key); fn(); } }\n function reset() { fired.clear(); /* 清所有 .show class */ }\n ```\n- 暴露 `window.__seek(t)` 供 Playwright / 调试用：\n ```js\n window.__seek = (t) => { reset(); render(t); };\n ```\n- 动画相关的 setTimeout 不要跨越 >1 秒，否则 seek 回跳时会乱套\n\n## 6. 字体加载前测量 = 测错\n\n**踩的坑**：页面一 DOMContentLoaded 就调用 `charRect(idx)` 测量 bracket 位置，字体还没加载，每个字符"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计... Skill: 花叔Design Owner: swang066 Summary: 花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T04:25:46.479Z | auto huashu-design 1.0.0 - Initial release of Huashu-Design: an HTML-based workflow for hi-fi prototypes, interactive demos, slides, animation, an","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1087,"uniquenessScore":59,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T16:22:26.384Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-09T23:44:05.957Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}