{"id":"ff984c54-31f7-4feb-99a6-2c749202c347","entityType":"agent","slug":"clawhub-peixl-ifq-design-skills","name":"IFQ Design Skills","canonicalUrl":"https://www.xpersona.co/agent/clawhub-peixl-ifq-design-skills","canonicalPath":"/agent/clawhub-peixl-ifq-design-skills","generatedAt":"2026-10-11T07:42:59.271Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T04:24:29.091Z","emptyReason":null},"description":"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Skill: IFQ Design Skills Owner: peixl Summary: Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Tags: latest:2.4.3 Version history: v2.4.3 | 2026-04-29T06:34:36.807Z | user Version 2.4.3 - Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.2K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s173rnxmp48r4bf80p56924bth85ade3:ifq-design-skills","sourceUrl":"https://clawhub.ai/peixl/ifq-design-skills","homepage":"https://clawhub.ai/peixl/skills/ifq-design-skills","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/peixl/ifq-design-skills","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/peixl/skills/ifq-design-skills","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T04:24:29.091Z","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-11T04:24:29.091Z","emptyReason":null},"stars":null,"forks":null,"downloads":1161,"packageName":null,"latestVersion":"2.4.3","tractionLabel":"1.2K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T04:24:29.007Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T04:24:29.091Z","lastCrawledAt":"2026-10-11T04:24:29.007Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T04:24:29.007Z","lastVerifiedAt":null,"highlights":[{"version":"2.4.3","createdAt":"2026-04-29T06:34:36.807Z","changelog":"Version 2.4.3 - Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-essay.html, social-multi.html, and anti-slop-preflight.mjs. - Expanded supported platforms to include Windows in addition to macOS and Linux. - Updated triggers and quick commands to cover new templates such as onboarding, portfolio, brand diagnosis, changelog, and social deliverables. - Introduced an \"anti-slop preflight\" validation script to enhance artifact quality checks. - Improved routing and decision tree for faster, clearer template selection based on user prompts. - Made minor metadata and compatibility updates for better security scan coverage and broader host support.","fileCount":132,"zipByteSize":571822},{"version":"2.4.1","createdAt":"2026-04-29T02:23:24.767Z","changelog":"**Changelog for ifq-design-skills v2.4.1** - Added `evals/evals.schema.json` to the repository. - Updated version metadata and references in SKILL.md to 2.4.1. - No other functional or breaking changes.","fileCount":125,"zipByteSize":536867},{"version":"2.4.0","createdAt":"2026-04-28T02:55:35.501Z","changelog":"Version 2.4.0 - Added license, contribution, changelog, notice, and security markdown files. - Introduced evaluation suite and scripts for validation and artifact checking. - Updated metadata for granular OS/binary requirements, permissions, and quick commands. - Expanded templates schema and clarified modeRoutes/template routing. - Enhanced instructions for draft handling and export boundaries in SKILL.md. - License updated to MIT.","fileCount":124,"zipByteSize":531796},{"version":"2.3.9","createdAt":"2026-04-27T10:59:46.595Z","changelog":"ifq-design-skills 2.3.9 - Updated the SKILL.md for clarity and conciseness, focusing on HTML-first visual deliverables. - Expanded and reworded when-to-use and when-not-to-use guidance. - Streamlined onboarding steps; moved detailed instruction into referenced docs for shorter skill load time. - Updated trigger keywords, metadata, and compatibility fields for better OpenClaw/ClawHub discovery. - Expanded export planning to explicitly mention motion (MP4/GIF) and document (PDF/PPTX/SVG) deliverables. - Restated the security and routing contracts to reflect zero dependencies and workspace-scoped permissions.","fileCount":114,"zipByteSize":507934},{"version":"2.3.7","createdAt":"2026-04-27T06:43:14.012Z","changelog":"- Added scripts/script-safety-rules.json to the project. - Incremented version to 2.3.7.","fileCount":114,"zipByteSize":528978},{"version":"2.3.6","createdAt":"2026-04-27T06:08:48.515Z","changelog":"**Expanded documentation and reference quality.** - Added in-depth reference docs: anti-AI-slop guidelines, font loading strategies, and ecosystem quality standards. - Introduced test-prompts.json to improve prompt/trigger coverage. - Clarified description and network handling in SKILL.md. - Updated required/optional plugin settings for stricter permission boundaries.","fileCount":113,"zipByteSize":528332},{"version":"2.3.1","createdAt":"2026-04-25T11:03:56.414Z","changelog":"- Version bump from 2.3.0 to 2.3.1. - No file or functional changes—metadata updated for release tracking. - All functionality and usage remain unchanged from previous version.","fileCount":109,"zipByteSize":506970},{"version":"2.3.0","createdAt":"2026-04-25T10:46:46.545Z","changelog":"**Expanded agent compatibility and documentation.** - Added AGENTS.md, references/asset-protocol.md, and references/ios-prototype.md for broader platform guidance. - Added assets/showcases/website-homepage/homepage-ifq-apple.html as a new showcase. - Introduced universal agent onboard instructions for OpenClaw, Hermes, Codex, CodeBuddy, Cursor, and others. - Extended frontmatter with mappings and info for CodeBuddy, Codex CLI, and related runtimes. - Updated documentation for agent-agnostic commands, tool crosswalks, and installation references.","fileCount":109,"zipByteSize":507103}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s173rnxmp48r4bf80p56924bth85ade3:ifq-design-skills","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","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-peixl-ifq-design-skills/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/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-11T07:42:59.267Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/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-11T04:24:29.091Z","emptyReason":null},"readme":"Skill: IFQ Design Skills\n\nOwner: peixl\n\nSummary: Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin...\n\nTags: latest:2.4.3\n\nVersion history:\n\nv2.4.3 | 2026-04-29T06:34:36.807Z | user\n\nVersion 2.4.3\n\n- Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-essay.html, social-multi.html, and anti-slop-preflight.mjs.\n- Expanded supported platforms to include Windows in addition to macOS and Linux.\n- Updated triggers and quick commands to cover new templates such as onboarding, portfolio, brand diagnosis, changelog, and social deliverables.\n- Introduced an \"anti-slop preflight\" validation script to enhance artifact quality checks.\n- Improved routing and decision tree for faster, clearer template selection based on user prompts.\n- Made minor metadata and compatibility updates for better security scan coverage and broader host support.\n\nv2.4.1 | 2026-04-29T02:23:24.767Z | user\n\n**Changelog for ifq-design-skills v2.4.1**\n\n- Added `evals/evals.schema.json` to the repository.\n- Updated version metadata and references in SKILL.md to 2.4.1.\n- No other functional or breaking changes.\n\nv2.4.0 | 2026-04-28T02:55:35.501Z | user\n\nVersion 2.4.0\n\n- Added license, contribution, changelog, notice, and security markdown files.\n- Introduced evaluation suite and scripts for validation and artifact checking.\n- Updated metadata for granular OS/binary requirements, permissions, and quick commands.\n- Expanded templates schema and clarified modeRoutes/template routing.\n- Enhanced instructions for draft handling and export boundaries in SKILL.md.\n- License updated to MIT.\n\nv2.3.9 | 2026-04-27T10:59:46.595Z | user\n\nifq-design-skills 2.3.9\n\n- Updated the SKILL.md for clarity and conciseness, focusing on HTML-first visual deliverables.\n- Expanded and reworded when-to-use and when-not-to-use guidance.\n- Streamlined onboarding steps; moved detailed instruction into referenced docs for shorter skill load time.\n- Updated trigger keywords, metadata, and compatibility fields for better OpenClaw/ClawHub discovery.\n- Expanded export planning to explicitly mention motion (MP4/GIF) and document (PDF/PPTX/SVG) deliverables.\n- Restated the security and routing contracts to reflect zero dependencies and workspace-scoped permissions.\n\nv2.3.7 | 2026-04-27T06:43:14.012Z | user\n\n- Added scripts/script-safety-rules.json to the project.\n- Incremented version to 2.3.7.\n\nv2.3.6 | 2026-04-27T06:08:48.515Z | user\n\n**Expanded documentation and reference quality.**\n\n- Added in-depth reference docs: anti-AI-slop guidelines, font loading strategies, and ecosystem quality standards.\n- Introduced test-prompts.json to improve prompt/trigger coverage.\n- Clarified description and network handling in SKILL.md.\n- Updated required/optional plugin settings for stricter permission boundaries.\n\nv2.3.1 | 2026-04-25T11:03:56.414Z | user\n\n- Version bump from 2.3.0 to 2.3.1.\n- No file or functional changes—metadata updated for release tracking.\n- All functionality and usage remain unchanged from previous version.\n\nv2.3.0 | 2026-04-25T10:46:46.545Z | user\n\n**Expanded agent compatibility and documentation.**\n\n- Added AGENTS.md, references/asset-protocol.md, and references/ios-prototype.md for broader platform guidance.\n- Added assets/showcases/website-homepage/homepage-ifq-apple.html as a new showcase.\n- Introduced universal agent onboard instructions for OpenClaw, Hermes, Codex, CodeBuddy, Cursor, and others.\n- Extended frontmatter with mappings and info for CodeBuddy, Codex CLI, and related runtimes.\n- Updated documentation for agent-agnostic commands, tool crosswalks, and installation references.\n\nv2.2.1 | 2026-04-23T11:56:31.899Z | user\n\nifq-design-skills v2.2.1\n\n- Major cleanup: removed 206 legacy and intermediate files, keeping only ClawHub-safe templates, references, and front-end assets.\n- Added explicit OpenClaw manifest, permissions, and agent tool mapping to SKILL.md frontmatter for first-class OpenClaw support.\n- New entrypoint, homepage, and repository metadata fields for better agent and platform integration.\n- Added `.clawignore` and `clawhub.json` to support ClawHub compliance and cleaner bundling.\n- Updated documentation for agent-agnostic workflows and OpenClaw onboarding; kept Quickstart and operating procedure concise.\n\nv2.2.0 | 2026-04-23T11:34:47.670Z | user\n\nInitial public release of the \"ifq-design-skills\" bundle for ClawHub.\n\n- Added 178 files including all core assets, templates, references, and brand system components.\n- Included templates for interactive HTML-first deliverables (prototypes, slides, infographics, dashboards, landing pages, changelogs, business cards, social covers, brand systems, etc.).\n- Provided mode routing logic and quickstart documentation for agents.\n- Embedded IFQ ambient brand system assets and guidelines.\n- Excluded advanced local verification and export helpers (available in full GitHub repo).\n\nv1.0.1 | 2026-04-22T10:37:11.096Z | user\n\n**This update removes local automation scripts and dependency files for a ClawHub-safe bundle.**\n\n- Removed 12 files relating to local scripting and metadata, including all shell scripts, Python and Node helpers, test runner, and dependency manifests.\n- The bundle now ships templates, references, and front-end design assets only; advanced Playwright, export, and verification tools are available separately via the GitHub repository.\n- Updated documentation to clarify that local automation features (PDF/PPTX/video export, smoke test, verification) are no longer bundled in this edition.\n- For HTML-first deliverables, design direction, and reusable front-end systems, no workflow changes—core design features and protocols remain in place.\n\nv1.0.0 | 2026-04-22T10:07:02.291Z | user\n\nInitial public release — a professional design skills toolkit for producing branded HTML-based visual deliverables.\n\n- Generates interactive prototypes, slide decks, animations, infographics, dashboards, business cards, social covers, and more from a single HTML source, with optional MP4, GIF, PPTX, PDF, or SVG exports.\n- Includes design critique, multi-variant exploration, and 3-direction advisory based on 20+ master styles and the IFQ Native recipe.\n- Seamlessly weaves the IFQ ambient brand system (signal spark, rust ledger, mono field note, quiet URL, editorial contrast) into every layout for a signature look.\n- Agent-agnostic: works across major agent platforms (Claude Code, Codex CLI, OpenClaw, Hermes, Cursor).\n- Not for production web apps, backend systems, or pure copy editing; focused on high-fidelity visual deliverables with style and authored feel.\n\nArchive index:\n\nArchive v2.4.3: 132 files, 571822 bytes\n\nFiles: AGENTS.md (5284b), assets/android_frame.jsx (4506b), assets/animations.jsx (10079b), assets/banner.svg (9503b), assets/browser_window.jsx (3975b), assets/deck_index.html (8145b), assets/deck_stage.js (11678b), assets/design_canvas.jsx (5195b), assets/ifq-brand/BRAND-DNA.md (3245b), assets/ifq-brand/icons/hand-drawn-icons.svg (7404b), assets/ifq-brand/ifq_authored_year.js (5697b), assets/ifq-brand/ifq_brand.jsx (9448b), assets/ifq-brand/ifq-tokens.css (4512b), assets/ifq-brand/logo-white.svg (818b), assets/ifq-brand/logo.svg (1261b), assets/ifq-brand/mark.svg (732b), assets/ios_frame.jsx (4753b), assets/macos_window.jsx (2536b), assets/personal-asset-index.example.json (1924b), assets/showcases/cover/cover-build.html (6216b), assets/showcases/cover/cover-pentagram.html (5022b), assets/showcases/cover/cover-takram.html (12409b), assets/showcases/INDEX.md (5958b), assets/showcases/infographic/infographic-build.html (12248b), assets/showcases/infographic/infographic-pentagram.html (14019b), assets/showcases/infographic/infographic-takram.html (22990b), assets/showcases/ppt/ppt-build.html (9635b), assets/showcases/ppt/ppt-pentagram.html (12063b), assets/showcases/ppt/ppt-takram.html (16246b), assets/showcases/website-ai-nav/ainav-build.html (10130b), assets/showcases/website-ai-nav/ainav-pentagram.html (11104b), assets/showcases/website-ai-nav/ainav-takram.html (13294b), assets/showcases/website-ai-writing/aiwriting-build.html (14625b), assets/showcases/website-ai-writing/aiwriting-pentagram.html (14823b), assets/showcases/website-ai-writing/aiwriting-takram.html (18596b), assets/showcases/website-devdocs/devdocs-build.html (10407b), assets/showcases/website-devdocs/devdocs-pentagram.html (13318b), assets/showcases/website-devdocs/devdocs-takram.html (13619b), assets/showcases/website-homepage/homepage-build.html (8873b), assets/showcases/website-homepage/homepage-pentagram.html (9088b), assets/showcases/website-homepage/homepage-takram.html (11132b), assets/showcases/website-saas/saas-build.html (13470b), assets/showcases/website-saas/saas-pentagram.html (15661b), assets/showcases/website-saas/saas-takram.html (18816b), assets/templates/brand-diagnosis.html (14191b), assets/templates/business-card.html (5075b), assets/templates/changelog-timeline.html (6117b), assets/templates/compare-vs.html (6753b), assets/templates/dashboard-command-center.html (13055b), assets/templates/GALLERY.html (20155b), assets/templates/hero-landing.html (8155b), assets/templates/INDEX.json (9923b), assets/templates/infographic-vertical.html (5673b), assets/templates/onboarding-flow.html (16741b), assets/templates/portfolio-essay.html (12044b), assets/templates/slide-title.html (4373b), assets/templates/social-multi.html (12203b), assets/templates/social-x-card.html (3895b), assets/templates/templates.schema.json (2563b), CHANGELOG.md (6956b), clawhub.ignore.txt (1036b), clawhub.json (10077b), CONTRIBUTING.md (1306b), demos/c1-ios-prototype-en.html (35636b), demos/c1-ios-prototype.html (35622b), demos/c2-slides-pptx-en.html (33375b), demos/c2-slides-pptx.html (33444b), demos/c3-motion-design-en.html (37512b), demos/c3-motion-design.html (37529b), demos/c4-tweaks-en.html (31575b), demos/c4-tweaks.html (31623b), demos/c5-infographic-en.html (25410b), demos/c5-infographic.html (25292b), demos/c6-expert-review-en.html (26855b), demos/c6-expert-review.html (27295b), demos/hero-animation-v10-en.html (49178b), demos/w1-brand-protocol-en.html (21045b), demos/w1-brand-protocol.html (21378b), demos/w2-junior-designer-en.html (31778b), demos/w2-junior-designer.html (32237b)\n\nFile v2.4.3:SKILL.md\n\n---\nname: ifq-design-skills\ndescription: \"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landing page, whitepaper, changelog, business card, social cover, brand system, design critique, multi-variant exploration, or export planning for MP4, GIF, PPTX, PDF, or SVG. Do not use for production web apps, SEO sites, backend systems, pure copy edits, or isolated CSS bug fixes.\"\nversion: 2.4.3\nlicense: \"MIT\"\nplatforms: [macos, linux, windows]\nentrypoint: SKILL.md\nhomepage: \"https://github.com/peixl/ifq-design-skills\"\nrepository: \"https://github.com/peixl/ifq-design-skills\"\nmetadata: {\"author\":\"ifq.ai\",\"version\":\"2.4.3\",\"category\":\"creative\",\"tags\":[\"design\",\"html\",\"prototype\",\"slides\",\"motion\",\"infographic\",\"dashboard\",\"brand\",\"pptx\",\"pdf\",\"svg\",\"mp4\",\"gif\",\"ifq\"],\"openclaw\":{\"skillKey\":\"ifq-design-skills\",\"category\":\"creative\",\"summary\":\"HTML-first design engine for prototypes, decks, dashboards, motion, and brand systems. Fork a template, weave the IFQ ambient layer, verify the artifact.\",\"entrypoint\":\"SKILL.md\",\"homepage\":\"https://github.com/peixl/ifq-design-skills\",\"os\":[\"darwin\",\"linux\",\"win32\"],\"requires\":{\"bins\":[\"node\"],\"env\":[],\"config\":[]},\"required_plugins\":[\"filesystem\",\"shell\"],\"optional_plugins\":[\"browser\",\"memory\"],\"permissions\":{\"filesystem\":\"read+write workspace only\",\"shell\":\"workspace Node scripts only\",\"browser\":\"optional outbound HTTPS read\",\"network\":\"optional outbound HTTPS only; no inbound server\"},\"tool_map\":{\"read_file\":\"filesystem/read\",\"write_file\":\"filesystem/write\",\"list_dir\":\"filesystem/list\",\"run_command\":\"shell/exec\",\"web_search\":\"browser/search\",\"web_fetch\":\"browser/fetch\",\"screenshot\":\"browser/screenshot-or-host-tool\"},\"triggers\":[\"prototype\",\"interactive prototype\",\"hi-fi mockup\",\"slide deck\",\"ppt\",\"pptx\",\"dashboard\",\"landing page\",\"whitepaper\",\"infographic\",\"business card\",\"social cover\",\"brand system\",\"design critique\",\"design variants\",\"motion demo\",\"mp4 export plan\",\"gif export plan\",\"原型\",\"幻灯片\",\"信息图\",\"名片\",\"小红书\",\"品牌诊断\",\"3 方向\",\"portfolio\",\"onboarding\",\"brand-diagnosis\",\"changelog\"],\"quick_commands\":[{\"label\":\"Validate skill health\",\"command\":\"npm run validate\"},{\"label\":\"Validate eval suite\",\"command\":\"npm run evals:validate\"},{\"label\":\"Static HTML check\",\"command\":\"npm run verify:lite -- \"},{\"label\":\"Build ClawHub bundle\",\"command\":\"npm run pack\"},{\"label\":\"Anti-slop preflight\",\"command\":\"npm run anti-slop -- \"}]},\"clawhub\":{\"category\":\"creative\",\"safe\":true,\"network\":\"optional\",\"filesystem\":\"workspace\",\"requires\":{\"bins\":[\"node\"],\"env\":[]},\"capability_signals\":{\"crypto\":false,\"can_make_purchases\":false,\"requires_sensitive_credentials\":false},\"audit\":\"scanner-clean preflight via npm run validate\",\"security_scan\":{\"posture\":\"scanner-clean\",\"deny_list_rules\":18,\"secret_patterns\":5,\"bundle_integrity\":\"deterministic tarball via node:zlib\"}},\"hermes\":{\"category\":\"creative\",\"tags\":[\"design\",\"html\",\"prototype\",\"slides\",\"motion\",\"infographic\",\"dashboard\",\"brand\",\"ifq\"]},\"capabilities\":{\"read_files\":true,\"write_files\":true,\"run_shell\":\"workspace-node-scripts-only\",\"network\":\"optional_fact_checks_and_assets_only\",\"dynamic_eval\":false,\"silent_install\":false,\"persistent_background\":false},\"security\":{\"dynamic_eval\":false,\"script_network\":false,\"child_process\":false,\"secrets_in_repo\":false,\"zero_dependencies\":true,\"zero_install_hooks\":true,\"deny_list_rules\":18,\"secret_patterns\":5},\"entrypoints\":[\"SKILL.md\",\"references/modes.md\",\"assets/templates/INDEX.json\"],\"compatibility\":[\"openclaw\",\"clawhub\",\"hermes\",\"claude_code\",\"codex_cli\",\"codebuddy\",\"cursor\",\"generic\"]}\n---\n\n# IFQ Design Skills\n\nOne prompt in, a shippable HTML-first visual artifact out. This skill exists to make AI higher leverage: humans speak in goals, agents get a deterministic route, and the final artifact carries proof instead of decoration. This ClawHub-safe root file is intentionally short: it routes the task, states the security contract, and points the agent to deeper references only when needed.\n\n## 30-Second Load Path\n\n1. Confirm the request is a visual deliverable built from HTML. If not, exit this skill.\n2. Pick the mode from [references/modes.md](references/modes.md), then read `modeRoutes` and `templates` in [assets/templates/INDEX.json](assets/templates/INDEX.json).\n3. Fork the routed template into the user's workspace. Never start from a blank HTML file when a listed template can be adapted.\n4. If information is missing but a reversible draft is possible, write labeled assumptions/placeholders and continue. Ask only for facts, assets, permissions, or format decisions that would materially change the output.\n5. Inline [assets/ifq-brand/ifq-tokens.css](assets/ifq-brand/ifq-tokens.css) and weave at least 3 IFQ ambient marks from [references/ifq-brand-spec.md](references/ifq-brand-spec.md).\n6. Verify with the host browser/screenshot tools when available. After editing this skill package, run `npm run validate`.\n\n## Quick Decision Tree\n\nRoute in under 3 seconds. Match the user prompt to the nearest trigger:\n\n```\nUser prompt contains:\n├─ \"prototype\" / \"app\" / \"onboarding\" / \"flow\" → M-06 (T-onboarding)\n├─ \"dashboard\" / \"KPI\" / \"monitor\" / \"command center\" → M-04 (T-dashboard)\n├─ \"slides\" / \"deck\" / \"keynote\" / \"PPT\" → M-08 (T-slide-title)\n├─ \"portfolio\" / \"personal site\" / \"about me\" → M-02 (T-portfolio)\n├─ \"changelog\" / \"release notes\" / \"版本记录\" → M-07 (T-changelog)\n├─ \"whitepaper\" / \"report\" / \"PDF\" / \"年报\" → M-03 (T-infographic-vertical)\n├─ \"compare\" / \"vs\" / \"benchmark\" / \"横评\" → M-05 (T-compare-vs)\n├─ \"social\" / \"小红书\" / \"cover\" / \"社媒\" → M-09 (T-social-multi)\n├─ \"card\" / \"名片\" / \"invite\" / \"VIP\" → M-10 (T-business-card)\n├─ \"brand audit\" / \"diagnosis\" / \"体检\" / \"升级\" → M-11 (T-diagnosis)\n├─ \"brand from scratch\" / \"全栈品牌\" / \"新品牌\" → M-12 (T-hero-landing)\n├─ \"launch\" / \"animation\" / \"motion\" / \"film\" → M-01 (T-hero-landing)\n└─ vague / multiple matches / \"做设计\" → propose 3 directions first\n```\n\nWhen in doubt, pick the narrowest route. If the prompt spans two modes, choose the primary deliverable and mention the secondary in caveats.\n\n## Human + Agent Contract\n\n| Audience | Promise |\n|---|---|\n| Human user | Say the goal in ordinary language; receive a concrete HTML-first artifact, the assumptions that shaped it, and the verification evidence. |\n| AI agent | Follow a narrow route: classify mode, fork template, fill with real context, run anti-slop checks, verify, then report caveats without self-congratulation. |\n| Maintainer | Keep the ClawHub bundle zero-install, auditable, and small; keep heavy export automation opt-in in the full GitHub repo. |\n\n## First-Run Success Path\n\nAfter install, make the first interaction produce a visible artifact in one turn:\n\n1. Accept a natural-language prompt such as \"Make a command center dashboard for our internal AI operations.\"\n2. Route it to one mode and one template; name both in the final evidence.\n3. Write the HTML file into the user's workspace with a short assumptions comment for unresolved facts.\n4. Run `npm run verify:lite -- ` when shell is available, and preview or screenshot with the host browser when available.\n5. Report the file path, route, template, assumptions, verification result, and only the caveats that affect use.\n\nDo not turn first run into setup work. No account login, global install, export dependency, or broad environment change belongs in the ClawHub-safe path.\n\n## AI Leverage Loop\n\nThis skill should make both sides more effective: humans should not learn prompt engineering before receiving a useful artifact, and agents should not improvise a design system from a blank page.\n\n1. **Human gives intent** — ordinary language, partial facts, or a rough visual preference is enough to begin.\n2. **Agent chooses the narrowest route** — one mode, one primary template, required references only.\n3. **Artifact appears early** — a local HTML source is more valuable than an extended planning conversation.\n4. **Assumptions stay visible** — unresolved facts, missing assets, and export limits are labeled in the output and final evidence.\n5. **Proof closes the loop** — the final answer includes the file, mode, template, verification, and caveats, so the next iteration starts from real work.\n\n## Output Boundary\n\n- ClawHub-safe core outputs verified local HTML, SVG/static companion files, and export-ready source structure.\n- MP4/GIF/PDF/PPTX automation is not bundled in the ClawHub-safe package. For those requests, prepare the HTML source and export plan here, then use the full GitHub repo only when the user explicitly wants local automation.\n- Never claim that an export file exists until the corresponding export command has actually run and the file has been inspected.\n\n## Use When\n\n- Interactive prototype, hi-fi mockup, clickable app flow, dashboard, landing page, whitepaper, report, infographic, slide deck, changelog, card, invitation, social cover, or brand system.\n- Motion demo or launch animation, especially when the user also wants export planning for MP4/GIF.\n- Design critique, brand diagnosis, or 3 differentiated style directions before implementation.\n- PDF/PPTX/SVG export is requested from an HTML-first source; the ClawHub bundle prepares export-ready source, while heavy export helpers live in the full GitHub repo.\n\n## Do Not Use When\n\n- The real task is production frontend engineering, backend work, SEO-critical site implementation, or a CSS bug inside an existing app.\n- The user only wants copy editing with no visual artifact.\n- The deliverable must round-trip through Word, Google Docs, or a locked corporate template.\n\n## OpenClaw And ClawHub Contract\n\n- Install/publish through ClawHub: `openclaw skills install ifq-design-skills`; packed bundles are built with `npm run pack`.\n- Discovery metadata is duplicated in this frontmatter and [clawhub.json](clawhub.json) so OpenClaw can read triggers, permissions, `requires`, `os`, and neutral-verb tool mapping without parsing the full manual.\n- Minimum runtime: Node >= 18.17. `metadata.openclaw.requires.bins` declares `node`; required env/config gates are intentionally empty. The ClawHub bundle has zero dependencies, zero install hooks, and no script-side outbound network calls.\n- Permissions are workspace-scoped: filesystem read/write inside the active workspace, shell only for bundled Node scripts, browser only for optional outbound HTTPS reads of facts, fonts, or legal image assets.\n- If browser/network is unavailable, keep the artifact local-first: system fonts, honest placeholders, and no factual claims that require fresh web verification.\n\n## Core Rule 0 · Facts Before Assumptions\n\nFor any concrete product, company, technology, release date, version, person, or spec, fact-check before designing or asserting. Search official or authoritative sources when network is available; if network is blocked, ask the user for sources and mark the fact unresolved. Then follow [references/asset-protocol.md](references/asset-protocol.md) for logo, product image, UI screenshot, color, and typography assets.\n\n## Routing Contract\n\n- Clear visual request: route through [references/modes.md](references/modes.md) and `modeRoutes` in [assets/templates/INDEX.json](assets/templates/INDEX.json).\n- Vague request or no style/context: propose 3 directions using [references/design-styles.md](references/design-styles.md), [references/ifq-native-recipes.md](references/ifq-native-recipes.md), and [references/design-context.md](references/design-context.md).\n- Real brand/product: run [references/asset-protocol.md](references/asset-protocol.md) before color, layout, or hero imagery decisions.\n- App prototype: use [references/ios-prototype.md](references/ios-prototype.md) and the frame assets.\n- Slides/decks: load [references/slide-decks.md](references/slide-decks.md) before writing; use [references/editable-pptx.md](references/editable-pptx.md) only when editable export is requested.\n- Motion/video: load [references/animation-pitfalls.md](references/animation-pitfalls.md), [references/animation-best-practices.md](references/animation-best-practices.md), [references/animations.md](references/animations.md), and [references/video-export.md](references/video-export.md).\n\n## IFQ Ambient Layer\n\n- The user's brand is the subject. IFQ is the authored layer: layout rhythm, warm paper, rust ledger, mono field notes, signal spark, quiet URL, and editorial contrast.\n- Every deliverable uses at least 3 IFQ marks. Do not paste a loud generic watermark unless the task is IFQ-owned or an animation export explicitly calls for a closing credit.\n- Built-in templates use China-safe font loading; see [references/font-loading.md](references/font-loading.md).\n- Avoid visible internal taxonomy labels such as `Signal Spark` or `Rust Ledger` in user-facing designs. Write real content instead.\n\n## Safety Contract\n\n- Root instructions stay scoped to HTML-first visual delivery. Do not ask for unrelated secrets, host config, persistent agents, or background services.\n- Scripts are local-first: no dynamic eval, no child_process, no runtime network calls, no hidden installs, and no writes outside the user's workspace.\n- Required environment variables are intentionally empty. Optional export automation is not bundled here; use the full GitHub repo only after explicit user intent.\n- ClawHub/VirusTotal posture and package hygiene are tracked in [references/clawhub-publishing.md](references/clawhub-publishing.md) and [references/smoke-test.md](references/smoke-test.md).\n\n## Anti-Slop Preflight (Hard Gate)\n\nBefore delivery, run the 7-point checklist from [references/anti-ai-slop.md](references/anti-ai-slop.md). Every item is a hard gate — skip one and the output looks like default AI:\n\n1. No side border-left > 1px as card emphasis. Use full borders, background blocks, or icon leads.\n2. No gradient text (`background-clip: text`). Use solid color + weight/size for hierarchy.\n3. No default glassmorphism. Use only when real spatial depth exists.\n4. No hero-metric template (big number + small label + gradient row). SaaS cliché since 2018.\n5. No same-size icon card grid. Vary rhythm — irregular sizes, mixed layouts.\n6. No purple gradient on white. AI \"premium\" cliché.\n7. Display font is not Inter/Roboto/Arial/system default. Use Newsreader, Noto Serif SC, or the user's brand font.\n\nRun `npm run anti-slop -- ` when shell is available, or scan manually. Fix violations before delivery.\n\n## Verification Before Delivery\n\n1. Open or preview the generated HTML with the host agent's browser tooling when available.\n2. For app prototypes, click at least one primary path, one tab/screen switch, and one detail or annotation action.\n3. For decks, verify slide count, aspect ratio, and format requirements before any PDF/PPTX handoff; in ClawHub-safe mode, report the export plan rather than pretending the helper ran.\n4. For motion exports, verify timing, audio policy, promotion mark, and final file presence only when the full GitHub repo helper has actually produced the file.\n5. After editing this skill package, run `npm run validate`; before publishing, also run `npm run pack`.\n\n## Reference Map\n\n| Need | Load |\n|---|---|\n| OpenClaw, ClawHub, agent install, tool mapping | [references/agent-compatibility.md](references/agent-compatibility.md), [references/clawhub-publishing.md](references/clawhub-publishing.md), [references/smoke-test.md](references/smoke-test.md) |\n| Marketplace lessons and quality bar | [references/skill-ecosystem-quality.md](references/skill-ecosystem-quality.md) |\n| Mode routing and execution workflow | [references/modes.md](references/modes.md), [references/workflow.md](references/workflow.md), [references/verification.md](references/verification.md) |\n| Facts, brand assets, design context, critique | [references/asset-protocol.md](references/asset-protocol.md), [references/design-context.md](references/design-context.md), [references/critique-guide.md](references/critique-guide.md) |\n| Style direction and anti-slop | [references/design-styles.md](references/design-styles.md), [references/ifq-native-recipes.md](references/ifq-native-recipes.md), [references/content-guidelines.md](references/content-guidelines.md), [references/anti-ai-slop.md](references/anti-ai-slop.md) |\n| React/Babel single-file output and fonts | [references/react-setup.md](references/react-setup.md), [references/font-loading.md](references/font-loading.md) |\n| IFQ identity assets | [references/ifq-brand-spec.md](references/ifq-brand-spec.md), [assets/ifq-brand/BRAND-DNA.md](assets/ifq-brand/BRAND-DNA.md) |\n| App prototypes | [references/ios-prototype.md](references/ios-prototype.md) |\n| Slides and editable PPTX | [references/slide-decks.md](references/slide-decks.md), [references/editable-pptx.md](references/editable-pptx.md) |\n| Motion, video, and audio | [references/animations.md](references/animations.md), [references/animation-best-practices.md](references/animation-best-practices.md), [references/animation-pitfalls.md](references/animation-pitfalls.md), [references/video-export.md](references/video-export.md), [references/audio-design-rules.md](references/audio-design-rules.md), [references/sfx-library.md](references/sfx-library.md) |\n| Scenes, live tweaking, and showcase patterns | [references/scene-templates.md](references/scene-templates.md), [references/tweaks-system.md](references/tweaks-system.md), [references/apple-gallery-showcase.md](references/apple-gallery-showcase.md), [references/hero-animation-case-study.md](references/hero-animation-case-study.md), [references/revolution-gap.md](references/revolution-gap.md) |\n\n## Completion Rule\n\nDeliver the smallest verified artifact that satisfies the request. Report the output file, verification performed, and any caveats. Do not claim export, screenshots, or marketplace safety unless the relevant check actually passed.\n\nFile v2.4.3:README.md\n\n🌐 English · 中文 · ifq.ai / <authored year>\n\n
\n\n\n \n \"ifq.ai\"\n\n\n# IFQ Design Skills\n\n> ClawHub-safe 版本：这里保留模板、references 和前端资产。\n> Playwright 验证、MP4/GIF/PDF/PPTX 导出等本地自动化能力，请使用完整仓库：https://github.com/peixl/ifq-design-skills\nIntelligence, framed quietly.\n\n
\n\n 一句话进。  一份能发出去的页面出来。  做工像 ifq.ai 亲手做的。 \n\n

\n\n[![License](https://img.shields.io/badge/license-MIT-D4532B?style=flat-square&labelColor=111111)](LICENSE.md)\n[![ifq.ai native](https://img.shields.io/badge/ifq.ai-native-111111?style=flat-square)](assets/ifq-brand/BRAND-DNA.md)\n[![ambient brand](https://img.shields.io/badge/ambient_brand-embedded-A83518?style=flat-square&labelColor=111111)](references/ifq-brand-spec.md)\n[![proof first](https://img.shields.io/badge/proof--first-on-111111?style=flat-square)](references/verification.md)\n[![modes](https://img.shields.io/badge/modes-12-D4532B?style=flat-square&labelColor=111111)](references/modes.md)\n[![templates](https://img.shields.io/badge/templates-12-A83518?style=flat-square&labelColor=111111)](assets/templates/GALLERY.html)\n[![anti-slop](https://img.shields.io/badge/anti--slop-preflight-D4532B?style=flat-square&labelColor=111111)](references/anti-ai-slop.md)\n\n
\n\n立场  ·  安装  ·  说给它听  ·  一页的解剖  ·  五个标记  ·  12 种模式  ·  12 个模板  ·  六层骨架  ·  验证  ·  许可\n\n
\n\n---\n\n## 立场\n\n大多数 agent 被要求\"做设计\"时，会交出两样东西：**一张过度装饰的 Figma Community 模板**，或者 **一份被 AI 格式化过的 Notion 页面**。都不能发出去。\n\n这个 skill 解决的就是这一件事。它不是配色文件，也不是一张 logo 贴纸。\n\n它是一种 **做工**：把网页当编辑部版面排、把动画当预告片剪、把 PPT 当发布会母版做、把名片当印前 PDF 对齐出血位。\n\nifq.ai 的标识被埋在这份做工里。看第一眼是内容，**第二眼才意识到：这是 ifq.ai 的手感**。\n\n## 给人和 Agent 的承诺\n\n| 对象 | 得到什么 |\n|------|----------|\n| **人类用户** | 只要说目标，不必先写完整 PRD；skill 会把假设、缺口、输出文件和验证证据讲清楚。 |\n| **AI Agent** | 不从空白页乱猜：先路由模式，读 `modeRoutes`，fork 模板，填内容，跑 anti-slop 和验证。 |\n| **维护者** | ClawHub 包保持零依赖、零安装钩子、可审计；重型 MP4/GIF/PDF/PPTX 自动化留在完整 GitHub 仓库。 |\n\n理念很简单：**让 AI 发挥更大效能**。人类负责判断方向和事实，Agent 负责把流程走完整、把证据收齐。\n\n---\n\n## 安装\n\n```bash\n# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n```\n\n> ClawHub 是推荐安装通道。需要本地开发请克隆完整仓库：；ClawHub 打包仓库是 。\n\n装完直接对 agent 说话。skill 自己判断任务、自己路由模式、自己挑模板、自己跑验证。\n\n### 首次运行应该得到什么\n\n第一轮不要变成环境配置。直接说一句设计目标，例如：\n\n```text\n给我们的内部 AI 运营做一个 command center。信息密度高，冷静，不要 BI 套壳。\n```\n\n合格的首次运行会返回 6 个证据：输出 HTML 文件路径、使用的 mode、使用的 template、写入的假设、执行过的验证（`verify:lite` 或浏览器预览）、以及影响使用的 caveat。它不应该要求登录账户、全局安装导出依赖，或改动 OpenClaw 之外的环境。\n\n### 为什么它适合冲 ClawHub Top 10\n\nClawHub 上真正会被反复安装的 skill 通常不是\"什么都能做\"，而是**一个场景讲得很清楚、第一次使用马上有结果、安全边界让人放心**。IFQ Design Skills 把这个增长飞轮写进了包里：\n\n| 转化信号 | 这里怎么做到 |\n|---|---|\n| 一眼知道用途 | 只承诺 HTML-first 视觉产物，不抢生产前端 / 后端 / SEO 工作 |\n| 第一次就有成品 | 自然语言 prompt → mode route → fork template → local HTML → evidence packet |\n| Agent 不乱跑 | `modeRoutes`、evals、`verify:lite`、`validate` 共同约束执行路径 |\n| 平台放心收录 | 零依赖、零安装钩子、无必需凭据、无持久后台、ClawHub-clean 打包 |\n| 人类愿意分享 | 输出有 ifq.ai 的手感，但不抢客户品牌的主体位置 |\n\n### 🦞 OpenClaw 首选通道（一行装好即用）\n\n```bash\n# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n\n# 验证并查看能力元数据\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills\n```\n\n**OpenClaw 为什么上手最快**：本 skill 在 frontmatter 的 `metadata.openclaw` 里直接声明了 triggers、permissions、tool_map 和 quick_commands——OpenClaw 装上就知道什么 prompt 该进来、需要哪些插件、每个中性动词对应哪个 OpenClaw 工具。完整映射与排障见 [references/agent-compatibility.md](references/agent-compatibility.md#3--openclaw--clawhub)。\n\n需要的最小权限（OpenClaw 会自动请求）：\n\n- `filesystem`：仅在当前 workspace 读写\n- `shell`：仅运行工作区内的 Node 脚本（`npm run validate` / `npm run pack`）；Playwright / Python 导出辅助在完整 GitHub 仓库中按需使用\n- `browser`：出站 HTTPS 拉 Google Fonts / 图片 CDN（只读，**可降级**）\n\n> **🇨🇳 CN-friendly**：所有产出 HTML 走 [references/font-loading.md](references/font-loading.md) Tier B 非阻塞协议——Google Fonts 被墙 / 离线 / 内网时，自动回退到 `Noto Serif SC / Songti SC / PingFang SC` 等系统字体栈，**首屏不空白、不豆腐块**。需要完全离线可走 Tier A（删掉 Google Fonts link）；需要像素级匹配可走 Tier C（自托管 woff2 子集）。\n\n**其他 agent 一键安装**：\n\n```bash\n# Hermes（Nous Research）\nhermes skills install github:peixl/ifq-design-skills\n\n# Claude Code（personal）\ngit clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Codex CLI（OpenAI）—— 自动识别仓库根的 AGENTS.md\ngit clone https://github.com/peixl/ifq-design-skills ~/.codex/skills/ifq-design-skills\n\n# CodeBuddy（Tencent）\ngit clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills\n\n# 共享给所有 agent（推荐）\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills\n```\n\n### 给 skill 维护者：打包上架 ClawHub\n\n```bash\nnpm run validate # 一分钟体检：模板 · 品牌资产 · ClawHub 清洁度\nnpm run pack # 生成 ../ifq-design-clawhub-YYYY-MM-DD.tar.gz（自动排除 .git/ 等内部文件）\n```\n\n---\n\n## 说给它听\n\n下面是真实的对话。左边是你随口一句，右边是 skill 真正去做的事。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
你说它做
\n\n> 「明天沙龙讲 AI agent 20 分钟，给我一份 deck，不要像 SaaS keynote，要有书卷气。」\n\n\n\nM-08 Keynote · editorial dark · Newsreader 大标题 · rust ledger 竖线分章 · 每页 mono 序号 01 / 20 · 结尾 colophon · ClawHub 交付 HTML deck + 导出计划，完整仓库再出 PPTX/PDF\n\n
\n\n> 「这周 4 个更新，做成纵向 changelog，要像活页笔记，别像公告栏。」\n\n\n\nM-07 Changelog · warm paper · 单根 rust 左轴 · 每条 entry 带 mono 时间戳 · 顶部 release ledger / vol.12 · 全程手绘图标代替 emoji\n\n
\n\n> 「朋友独立咖啡店名片，黑白双面，不要花，要有手工感。」\n\n\n\nM-10 名片 · 85×55mm + 3mm 出血 · 正面一行业务陈述 + spark 小点 · 反面 mono 信息条 · 第三方物料 · 显式 wordmark 关闭 · IFQ 只保留版面节奏 · 输出 SVG/HTML 出血稿，完整仓库再出 PDF\n\n
\n\n> 「24 秒硬件发布片头，冷静，像 Teenage Engineering，不要发布会预热。」\n\n\n\nM-01 Launch Film · 先 3 方向 (matter-of-fact / editorial / kinetic-type) · Stage+Sprite 时间轴 · key shot + spec mono 叠印 + 2s quiet URL 定版 · ClawHub 交付 HTML motion source + keyposter，完整仓库再出 MP4/GIF\n\n
\n\n> 「个人站一页，但不要像找工作。」\n\n\n\nM-02 Portfolio · 先 5 方向 (archive / studio / essay / atlas / ledger) · 选 1 做主，2 做变体画布 · 首屏不放头像，放 currently / writing / building 三栏 · 底部 mono colophon\n\n
\n\n> 「内部 AI 做一个 command center，像 Bloomberg 终端，不要 BI 套壳。」\n\n\n\nM-04 Dashboard · graphite 底 · 12 列 ledger 栅格 · mono 数字 + 极细 rust underline 表趋势 · 顶栏 session / latency / build 三段 · 禁用渐变按钮和卡通色饼图\n\n
\n\n> 「路演要一张 A vs B，我们对三家友商，一眼看出为什么选我们，不许吹。」\n\n\n\nM-05 Compare · 矩阵而非雷达 · 四列等宽 · 每项 ✓ / ● / — 三态 + 小字来源 · 底部 compiled from public docs · ifq.ai · 事实先 WebSearch\n\n
\n\n> 「2026 AI agent 白皮书，50 页内，直接印。」\n\n\n\nM-03 白皮书 · A4 可打印 HTML · 扉页 / 摘要 / 目录 / 章节 / 参考 / colophon 全套 · 每章起首 mono 序号 + 半页留白 · 页脚 ifq.ai / <authored year> · ClawHub 交付 print-ready HTML，完整仓库再出 PDF + 书签\n\n
\n\n> 「视觉有点乱，先别改，先告诉我问题在哪。」\n\n\n\nM-11 品牌诊断 · 不动手 · 一页报告 · 色彩 / 字体 / 节奏 / 母题 / 完成度五维评分 · 每维 before / suggested after 小样 · 三个升级方向，不给结论\n\n
\n\n> 「小红书 6 张封面，新栏目『每周一张图』，克制，但一眼能被认出来。」\n\n\n\nM-09 社媒套件 · 1242×1660 · 左上 mono 栏目章 weekly / 01→06 · 编辑部排版而非大字 emoji · 右下 quiet URL · 6 张封面 + 1 张 OG 横版\n\n
\n\n> 不用记模式编号。说人话，skill 自己路由。\n\n---\n\n## 一页的解剖\n\n一张 hero landing。它看起来很安静。它同时在做 7 件事：\n\n```text\n ┌────────────────────────────────────────────────────────────────────┐\n │ ◇ ifq.ai / live system [01 / 12] │ ← mono field note + 栏位序号\n │ │\n │ │\n │ Intelligence, framed │ ← Newsreader display\n │ quietly. │ italic 判断点\n │ │\n │ A design engine that understands the difference │ ← body serif\n │ between a slide deck and a launch film. │\n │ │\n │ ┃ · ledger │ ← rust ledger 竖线\n │ ┃ │ 承担版面秩序\n │ ┃ 01 mode-aware pipeline │ ← mono 编号行\n │ ┃ 02 ambient brand, not loud branding │\n │ ┃ 03 proof-first export loop │\n │ │\n │ │\n │ ✦ │ ← signal spark\n │ │ 安静点一下\n │ │\n │ compiled by ifq.ai · ifq.ai / 2026 │ ← quiet URL + colophon\n └────────────────────────────────────────────────────────────────────┘\n```\n\n拆开看：\n\n1. **Editorial contrast** — Newsreader serif 配 JetBrains Mono，不是随机字体组合。\n2. **Rust ledger** — 左侧那根竖线就是 ifq.ai 的\"脊\"。比大 logo 更 IFQ。\n3. **Mono field note** — 顶部和底部那行 `ifq.ai / live system`、`ifq.ai / 2026`。\n4. **Quiet URL** — 没有 CTA 咆哮。域名只出现一次，在右下。\n5. **Signal spark** — 右下一颗小火花。整页唯一的图形重音。\n6. **Warm paper** — 背景 `#FAF7F2`，不是 `#FFFFFF`。冷白让版面没有温度。\n7. **Ledger rhythm** — 所有间距走 `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` 这条轴。不凭感觉。\n\n用户不会去数这 7 件事。用户只会说\"这页看起来比较高级\"。\n\n**高级 = 同一只手 = ifq.ai 的 Ambient Brand**。\n\n---\n\n## 五个标记\n\nAmbient Brand 由五个环境级标记组成。每份交付物默认至少融合其中 3 个。\n\n| 标记 | 是什么 | 出现在哪 |\n|------|--------|----------|\n| **Signal Spark** | 8-point 火花。intelligence 被点亮的一瞬 | hero 右上 · 动画开场一帧 · 印章中心 |\n| **Rust Ledger** | 赤陶色竖线、分隔、编号、轴线 | hero · slides · infographic · dashboard |\n| **Mono Field Note** | JetBrains Mono 写的 `ifq.ai / ` 小字 | footer · closing · 角落 |\n| **Quiet URL** | 域名以极低姿态出现一次 | footer · meta · end card |\n| **Editorial Contrast** | Newsreader italic + JetBrains Mono + 暖纸白 | 整体排版骨架 |\n\n这不是装饰元素，是版面语法。\n\n---\n\n## 共品牌\n\n| 场景 | IFQ 在哪里 |\n|------|------------|\n| **IFQ 自有物料**（ifq.ai 及子产品） | 全员到齐：wordmark · spark · field note · quiet URL 都可上台 |\n| **第三方 / 客户物料** | 主品牌在前。IFQ 退到 authored layer：版面节奏、色温、colophon、手绘图标、导出完成度 |\n| **客户要求 white-label** | 去掉显式 wordmark 和 field note。保留 editorial contrast、ledger 节奏、proof-first 做工 |\n\n**IFQ 可以隐身，不能不在场**。做工本身就是标识。\n\n---\n\n## 12 种模式\n\n| # | 模式 | 典型触发 | 交付 |\n|---|------|----------|------|\n| M-01 | Launch Film | 发布动画 · 产品宣传片 | 25–40s 动画 + keyposter + 社媒套件 |\n| M-02 | Portfolio | portfolio · 个人站 · about | 单页站 + 5 方向变体 |\n| M-03 | 白皮书 | 白皮书 · 年报 · 研究 PDF | A4 可打印 HTML；PDF 为完整仓库增强 |\n| M-04 | Dashboard | 数据看板 · KPI · 监控台 | 高密度 dashboard |\n| M-05 | Compare | A vs B · 横评 · benchmark | 对比矩阵 + 事实来源 |\n| M-06 | Onboarding | 新手引导 · flow demo | 3–5 屏交互流 |\n| M-07 | Changelog | release notes · 发布日记 | 纵向时间线 |\n| M-08 | Keynote | 演讲 PPT · 母版 | HTML deck；PPTX/PDF 为完整仓库增强 |\n| M-09 | Social Kit | 小红书 · 朋友圈 · OG 卡 | 多尺寸静态物料 |\n| M-10 | 名片 / 邀请函 | 名片 · VIP 卡 · 请柬 | SVG/HTML 出血稿；PDF 为完整仓库增强 |\n| M-11 | 品牌诊断 | 体检 · 升级建议 | 诊断报告 + 3 方向 |\n| M-12 | 全栈品牌 | brand from scratch | logo + 色板 + 字体 + 6 应用 |\n\n路由：**模式触发 → 设计方向顾问 fallback → Junior Designer 主干**。\n\n完整协议：[references/modes.md](references/modes.md)。\n\n---\n\n## 六层骨架\n\n这个 skill 像 IFQ，不是因为颜色，而是因为下面 6 层同时工作：\n\n| 层 | 做什么 | 关键文件 |\n|----|--------|----------|\n| **01 · Context Engine** | 从上下文长设计，不从白纸瞎猜 | [design-context.md](references/design-context.md) |\n| **02 · Asset Protocol** | 动视觉前先抓事实 / logo / 产品图 / UI | [asset-protocol.md](references/asset-protocol.md) · [workflow.md](references/workflow.md) |\n| **03 · House Marks** | 把 5 个 ambient 标记写进版面 | [ifq-brand-spec.md](references/ifq-brand-spec.md) · [assets/ifq-brand/](assets/ifq-brand/) |\n| **04 · Style Recipes** | 风格靠配方和 scene template 组织 | [design-styles.md](references/design-styles.md) · [ifq-native-recipes.md](references/ifq-native-recipes.md) |\n| **05 · Output Compiler** | ClawHub 版保留 HTML-first 核心；MP4 / GIF / PPTX / PDF 导出在完整 GitHub 仓库中 opt-in | [scripts/](scripts/) |\n| **06 · Proof Loop** | validate + pack + 宿主浏览器截图；深度导出核对在完整 GitHub 仓库中完成 | [verification.md](references/verification.md) · [smoke-test.mjs](scripts/smoke-test.mjs) |\n\n```text\nifq-design-skills/\n├── SKILL.md # 短路由器：触发边界 · 安全契约 · reference map\n├── assets/\n│ ├── ifq-brand/ # logo · sparkle · tokens · BRAND-DNA\n│ └── templates/ # 已内嵌 ambient marks 的可 fork 模板\n├── references/ # 方法论 · 模式手册 · 验证 · 风格配方 · 宪章\n├── scripts/ # ClawHub-safe smoke / pack（深度导出在完整 GitHub 仓库）\n└── demos/ # 示例产物\n```\n\n---\n\n## 12 个模板\n\nv3.0 把模板从 8 个扩展到 12 个，每个模式都有专属模板。不再需要 fallback 到通用模板：\n\n| 模板 | 模式 | 做什么 |\n|------|------|--------|\n| T-hero-landing | M-01, M-02, M-06, M-12 | 编辑部风格 hero 落地页 |\n| T-slide-title | M-08 | 演讲 title slide |\n| T-dashboard | M-04 | Bloomberg 密度的 command center |\n| T-infographic-vertical | M-03, M-07 | 长图信息图 / 白皮书 |\n| T-social-x | M-09 | X/Twitter 分享卡 |\n| T-compare-vs | M-05, M-11 | A vs B 对比矩阵 |\n| T-changelog | M-07 | 纵向时间线 |\n| T-business-card | M-10 | 印刷名片 (90x54mm + 3mm 出血) |\n| **T-portfolio** | M-02 | 文章式个人站，5 种风格变体可切换 |\n| **T-onboarding** | M-06 | 5 屏横向 flow 原型，带设备框和用户心智标注 |\n| **T-diagnosis** | M-11 | 品牌诊断报告，6 维雷达图 + 3 方向 |\n| **T-social-multi** | M-09 | 多平台社媒套件 (X / 小红书 / IG / 微信) |\n\n完整预览：[assets/templates/GALLERY.html](assets/templates/GALLERY.html)。\n\n## 验证\n\n```bash\nnpm run validate\nnpm run evals:validate\nnpm run anti-slop -- path/to/artifact.html\nnpm run verify:lite -- path/to/artifact.html\nnpm run pack\n```\n\n一分钟内给出 skill 体检：模板索引 · IFQ brand toolkit · references 路由 · 12 模式 evals · ClawHub manifest · package 安全 · 脚本安全 · secret hygiene · 字体加载 · 默认模板远程 runtime · anti-slop preflight。\n\n单件作品优先走宿主浏览器截图 + 可点击验证；完整仓库环境再跑 Playwright 和导出格式核对。详见 [references/verification.md](references/verification.md)。\n\n---\n\n## 许可\n\nMIT 开源许可见 [LICENSE.md](LICENSE.md)。IFQ 名称、logo 与项目标识使用边界见 [NOTICE.md](NOTICE.md)。\n\n---\n\n
\n\ncompiled by ifq.ai  ·  field note  ·  2026\n\n\n
\n\nFile v2.4.3:_meta.json\n\n{\n \"ownerId\": \"kn773bqttn3cqgx01s874fcty1826nxe\",\n \"slug\": \"ifq-design-skills\",\n \"version\": \"2.4.3\",\n \"publishedAt\": 1777444476807\n}\n\nFile v2.4.3:references/agent-compatibility.md\n\n# Agent Compatibility Matrix\n\n> How to mount and run `ifq-design-skills` across every major agent runtime. The skill follows the **Anthropic Agent Skills** convention and adds Hermes and ClawHub metadata blocks without breaking any runtime. ClawHub is the recommended install channel; GitHub installs are for local development and non-OpenClaw runtimes.\n\nThe skill itself uses neutral verbs (`read file`, `write file`, `run command`, `web search`, `take screenshot`). This file maps those verbs to each runtime's actual tool surface and documents install paths and slash commands.\n\n## Universal prerequisites — ClawHub-safe default is zero-install\n\n```\nTier 0 · ClawHub-safe core\n Node ≥ 18.17 # npm run validate / npm run pack\n filesystem + shell # workspace-scoped only\n\nTier 1 · Optional browser context\n browser/web_fetch # facts, assets, screenshots in host agent\n\nTier 2 · Full GitHub repo only\n Python / Playwright / ffmpeg / pptxgenjs / pdf-lib / sharp\n # used for deep screenshots, MP4/GIF, PDF, and PPTX automation\n```\n\nThe ClawHub-safe bundle intentionally ships with no dependency tree and no install hooks. Use the full GitHub repo only when a task explicitly needs local export automation.\n\n## Recommended install path — ClawHub first\n\n```bash\nopenclaw skills install ifq-design-skills\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills\n```\n\n## Shared local development path\n\nHermes documents `~/.agents/skills/` as the cross-tool shared external directory. Install there once and every agent below can point at the same copy.\n\n```bash\nmkdir -p ~/.agents/skills\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills\n```\n\nEach agent's section below shows how to register that shared path or install an independent copy.\n\n---\n\n## 1 · Claude Code (Anthropic)\n\nClaude Code honors the Anthropic Agent Skills spec natively. Mount at either path:\n\n```bash\n# Personal (visible only to you)\nln -s ~/.agents/skills/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Project-scoped (checked into the repo)\nln -s ~/.agents/skills/ifq-design-skills .claude/skills/ifq-design-skills\n```\n\n**Discovery** is automatic. Claude Code scans `~/.claude/skills/` and `.claude/skills/`, loads the frontmatter (`name`, `description`) into the system prompt, and reads `SKILL.md` only when the description matches the user request.\n\n| Neutral verb | Claude Code tool |\n|---|---|\n| read file | `Read` |\n| write file | `Write`, `Edit` |\n| run command | `Bash` |\n| web search | `WebSearch`, `WebFetch` |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\nNo config changes required.\n\n---\n\n## 2 · Hermes (Nous Research)\n\nHermes is the most feature-rich runtime. It understands the extended frontmatter (`platforms`, `metadata.hermes`, `fallback_for_toolsets`, `required_environment_variables`, `config`) and ships a fully integrated skills hub.\n\n### Install — three equivalent routes\n\n```bash\n# Route A — direct GitHub install via the Hermes skills hub\nhermes skills install github:peixl/ifq-design-skills\n\n# Route B — via ClawHub marketplace\nhermes skills install clawhub:peixl/ifq-design-skills\n\n# Route C — point Hermes at the shared external dir\n# edit ~/.hermes/config.yaml:\n# skills:\n# external_dirs:\n# - ~/.agents/skills\n```\n\n### Slash commands (CLI and every messaging surface)\n\n```\n/ifq-design-skills make a 12-slide editorial keynote about AI agents\n/ifq-design-skills design a dashboard for the quarterly launch review\n/ifq-design-skills critique this landing page and propose 3 directions\n/ifq-design-skills # loads the skill, asks what you need\n```\n\n### Progressive disclosure (native)\n\nHermes loads this skill in three levels, following the Anthropic Agent Skills progressive-disclosure convention:\n\n- **Level 0** — `skills_list()` returns `{name, description, category}` (~3 k tokens total)\n- **Level 1** — `skill_view(\"ifq-design-skills\")` returns the full `SKILL.md`\n- **Level 2** — `skill_view(\"ifq-design-skills\", \"references/modes.md\")` pulls one reference on demand\n\n### Tool mapping\n\n| Neutral verb | Hermes tool |\n|---|---|\n| read file | `file.read`, `skill_view` |\n| write file | `file.write` |\n| run command | `terminal.run`, `execute_code` |\n| web search | `web.search`, `web.fetch` (or `duckduckgo_search` fallback) |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\n### Conditional activation\n\nThis skill does not declare `fallback_for_toolsets` because design output is its primary job, not a fallback. If browser, `ffmpeg`, or Chromium are unavailable, the ClawHub-safe bundle stays in HTML-only mode; export automation belongs to the full GitHub repo.\n\n### Agent-managed patches\n\nWhen the Hermes agent discovers a non-trivial workflow while using this skill, it can patch the skill via the `skill_manage` tool:\n\n```\nskill_manage action=patch name=ifq-design-skills \\\n old_string=\"...\" new_string=\"...\"\n```\n\nPrefer `patch` over `edit` for small fixes — it is more token-efficient.\n\n### Reset after manual edits\n\nIf you hand-edit the installed copy and later want to restore the pristine version:\n\n```bash\nhermes skills reset ifq-design-skills --restore\n```\n\n---\n\n## 3 · OpenClaw + ClawHub\n\nOpenClaw (2026.4+) has a first-class plugin system; [ClawHub](https://clawhub.ai) is its marketplace. Hermes also integrates ClawHub as a source.\n\nThis skill ships a dedicated `metadata.openclaw` block in `SKILL.md` frontmatter plus a root-level [`clawhub.json`](../clawhub.json) manifest, so OpenClaw gets triggers, permissions, and the neutral-verb → tool crosswalk automatically.\n\n### Install\n\n```bash\n# Route A — via ClawHub marketplace (recommended)\nopenclaw skills install ifq-design-skills\n\n# Route B — symlink the shared agents dir\nln -s ~/.agents/skills/ifq-design-skills ~/.openclaw/skills/ifq-design-skills\n\n# Route C — install a locally-built bundle\nopenclaw skills install /path/to/ifq-design-clawhub-YYYY-MM-DD.tar.gz\n```\n\nVerify:\n\n```bash\nopenclaw skills list # should show ifq-design-skills as ready\nopenclaw skills info ifq-design-skills # dumps frontmatter + openclaw metadata\nopenclaw skills check ifq-design-skills # reports missing plugins/permissions\n```\n\n### Config — `~/.openclaw/openclaw.json`\n\n```json\n{\n \"plugins\": {\n \"allow\": [\"filesystem\", \"shell\", \"browser\", \"ifq-design-skills\"],\n \"entries\": {\n \"filesystem\": { \"enabled\": true },\n \"shell\": { \"enabled\": true },\n \"browser\": { \"enabled\": true },\n \"ifq-design-skills\": {\n \"enabled\": true,\n \"path\": \"~/.openclaw/skills/ifq-design-skills\",\n \"entrypoint\": \"SKILL.md\",\n \"manifest\": \"clawhub.json\"\n }\n }\n },\n \"gateway\": { \"mode\": \"local\" }\n}\n```\n\nThen reload and confirm:\n\n```bash\nopenclaw config reload\nopenclaw gateway restart\nopenclaw gateway status # expect: ok, mode=local\nopenclaw skills check ifq-design-skills\n```\n\n### Tool mapping\n\nDeclared in `metadata.openclaw.tool_map` (frontmatter) and `clawhub.json`. Repeated here for humans:\n\n| Neutral verb | OpenClaw tool | Notes |\n|---|---|---|\n| `read_file` | `filesystem/read` | workspace-scoped |\n| `write_file` | `filesystem/write` | workspace-scoped |\n| `list_dir` | `filesystem/list` | — |\n| `run_command` | `shell/exec` | used for `npm run validate`, `npm run pack` |\n| `web_search` | `browser/search` | optional — used when fetching references |\n| `web_fetch` | `browser/fetch` | optional — Google Fonts / image CDNs |\n| `screenshot` | browser/screenshot-or-host-tool | full repo can additionally run `python scripts/verify.py` |\n\n### Minimum permissions\n\n- `filesystem` — read + write, **workspace only** (never touches `~/` or `/etc`).\n- `shell` — execute bundled Node scripts inside the workspace (`npm run validate`, `npm run pack`). No system installs; Python / Playwright helpers are full-repo opt-ins only.\n- `browser` *(optional)* — outbound HTTPS to Google Fonts + image CDNs (read-only). No inbound servers.\n- `memory` *(optional)* — looks up `personal-asset-index.json` for user brand assets.\n\n### Known issues and fixes\n\n- `openclaw skills check` reports `missing gateway.mode` → set `gateway.mode: \"local\"` and restart.\n- A tool returns `unavailable` → add its plugin id to `plugins.allow` and set `entries..enabled: true`.\n- `openclaw skills install` fails with `non-text files: kilo, ORIG_HEAD, config` → install from the packed `.tar.gz` instead of the raw folder, or ensure `clawhub.ignore.txt` excludes `.git/`. Build via `npm run pack`.\n- ClawHub web publish flags `.clawignore` itself as `non-text files` → remove the legacy dotfile and keep `clawhub.ignore.txt` instead.\n- `EACCES` on global npm install → follow the OpenClaw install guide at https://github.com/peixl/ifq-design-skills (uses user-level `npm_config_cache` / `--prefix`).\n\n### Publishing to ClawHub\n\n```bash\n# 1. Validate\nnpm run validate\n\n# 2. Produce a clean, OpenClaw-verified bundle\nnpm run pack\n# → ../ifq-design-clawhub-YYYY-MM-DD.tar.gz\n\n# 3. Install locally to test\nopenclaw skills install ../ifq-design-clawhub-*.tar.gz\n\n# 4. Publish via Hermes bridge or the ClawHub web publisher\nhermes skills publish ~/.agents/skills/ifq-design-skills --to clawhub\n# or https://clawhub.ai/publish/skill\n```\n\nSee also [`clawhub-publishing.md`](clawhub-publishing.md) for the publish checklist.\n\n---\n\n## 4 · Codex CLI (OpenAI)\n\nCodex has no native skill concept but honors `AGENTS.md` plus any markdown the user points it at.\n\n```bash\nln -s ~/.agents/skills/ifq-design-skills ~/.codex/skills/ifq-design-skills\n```\n\nAdd to your project or global `AGENTS.md`:\n\n```markdown\n## Skills\n\nWhen the user asks for a visual design deliverable (prototype, deck, motion,\ninfographic, dashboard, whitepaper, changelog, card, social cover, or brand\nsystem) or wants export planning (mp4/gif/pptx/pdf/svg), read\n`~/.codex/skills/ifq-design-skills/SKILL.md` first and follow its routing.\n```\n\n| Neutral verb | Codex CLI tool |\n|---|---|\n| read file | `apply_patch` read / `shell` → `cat` |\n| write file | `apply_patch` |\n| run command | `shell` |\n| web search | not native — user supplies URLs |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\nOptional env hint so Codex finds the skill quickly:\n\n```bash\nexport CODEX_SKILLS_PATH=\"$HOME/.codex/skills\"\n```\n\n---\n\n## 5 · CodeBuddy (Tencent)\n\nCodeBuddy follows an AGENTS.md-style discovery model with a `file.*` / `shell.*` / `web.*` tool surface. The skill's frontmatter includes a `metadata.codebuddy` block so CodeBuddy gets the tool crosswalk for free.\n\n### Install\n\n```bash\n# Route A — shared agents dir\nln -s ~/.agents/skills/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills\n\n# Route B — independent clone\ngit clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills\n```\n\n### Discovery\n\nCodeBuddy scans `~/.codebuddy/skills/` and the workspace's `AGENTS.md`. Add to your project or global `AGENTS.md`:\n\n```markdown\n## Skills\n\nWhen the user asks for a visual design deliverable (prototype, deck, motion,\ninfographic, dashboard, whitepaper, changelog, card, social cover, or brand\nsystem), read `~/.codebuddy/skills/ifq-design-skills/SKILL.md` first and follow\nits routing.\n```\n\nThe repo also ships a root [`AGENTS.md`](../AGENTS.md) so any AGENTS.md-aware runtime (CodeBuddy, Codex, Continue, Aider) picks the skill up without extra config.\n\n### Tool mapping\n\n| Neutral verb | CodeBuddy tool |\n|---|---|\n| read file | `file.read` |\n| write file | `file.write` |\n| list dir | `file.list` |\n| run command | `shell.run` |\n| web search | `web.search` |\n| web fetch | `web.fetch` |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\nNo config changes required beyond adding the skill folder to CodeBuddy's `skills_paths` (default already includes `~/.codebuddy/skills/`).\n\n---\n\n## 6 · Cursor\n\nCursor does not load skills automatically but honors `@file` pins in chat.\n\n```bash\ngit clone https://github.com/peixl/ifq-design-skills\n# or one-line via ClawHub\nopenclaw skills install ifq-design-skills\n```\n\nIn Cursor chat, pin the skill at the start of the conversation:\n\n```\n@ifq-design-skills/SKILL.md\n\nI need a 12-slide editorial keynote for tomorrow's AI agents talk.\n```\n\n| Neutral verb | Cursor tool |\n|---|---|\n| read file | `@file` pins, `Read` |\n| write file | composer `Apply`, `Edit` |\n| run command | integrated terminal |\n| web search | paste URL or Composer \"web\" |\n\n---\n\n## 7 · Generic fallback — any agent with filesystem + shell\n\nMinimum steps for any runtime with file read/write and shell:\n\n1. Clone the repo (or symlink `~/.agents/skills/ifq-design-skills`).\n2. Point the agent at `SKILL.md` as its entry doc.\n3. Ensure the agent can run `node` in the cloned directory.\n4. Run `npm run validate` — a passing smoke means the ClawHub-safe bundle is wired correctly.\n5. Use the full GitHub repo only when the user explicitly needs Playwright / ffmpeg / PDF / PPTX helpers.\n\nCovers Continue, Aider, GitHub Copilot Chat with `@workspace`, Sweep, and any MCP-capable client.\n\n---\n\n## Frontmatter extension reference\n\nThis skill's frontmatter is strictly additive: runtimes that do not understand an extra key ignore it.\n\n| Key | Required by | Status |\n|---|---|---|\n| `name` | Anthropic, Hermes, ClawHub | **required** |\n| `description` | same (≤ 1024 chars, third-person, what + when) | **required** |\n| `version` | Hermes, ClawHub | recommended |\n| `license` | ClawHub publish | recommended |\n| `platforms: [macos, linux, windows]` | Hermes | recommended |\n| `metadata.hermes.category` | Hermes | recommended |\n| `metadata.hermes.tags` | Hermes | recommended |\n| `metadata.clawhub.*` | ClawHub | recommended |\n| `required_environment_variables` | Hermes private runtime values | not used by this skill |\n| `fallback_for_toolsets`, `requires_toolsets` | Hermes | optional |\n\nThis skill declares none of the private runtime-value fields because it runs on local files and requires no external account setup.\n\n---\n\n## Smoke test — same everywhere\n\n```bash\ncd \nnpm run validate\n```\n\nExpected output is a sequence of green checks ending with:\n\n```\n✓ smoke test passed\n```\n\nSee [`smoke-test.md`](smoke-test.md) for remediation.\n\n---\n\n## Do not hard-code tool names\n\nInside `SKILL.md` and every `references/*.md`, always use neutral verbs:\n\n- ✅ `read the template file`\n- ✅ `run the verify script`\n- ✅ `search the web for the product's launch date`\n- ❌ `use Read to open the template` (Claude-specific)\n- ❌ `use apply_patch to edit` (Codex-specific)\n- ❌ `use browser/fetch` (OpenClaw-specific)\n- ❌ `call skill_view` (Hermes-specific)\n\nNeutral verbs are how one skill runs unmodified in every agent runtime, regardless of which tool names it exposes.\n\nFile v2.4.3:references/animation-best-practices.md\n\n# Animation Best Practices · 正向动画设计语法\n\n> 基于当代顶级产品动画（Apple Keynote / Anthropic 产品发布动画 / Field.io 运动诗学）\n> 的深度拆解，提炼出的「电影级产品动画」设计规则，由 ifq.ai 设计团队沉淀。\n>\n> 配套 `animation-pitfalls.md`（避坑清单）使用——本文件是「**应该这样做**」，\n> pitfalls 是「**不要这样做**」，两者正交，都要读。\n>\n> **约束声明**：本文件只收录**运动逻辑和表达风格**，**不引入任何品牌色具体色值**。\n> 色彩决策走 [`asset-protocol.md`](asset-protocol.md)（从品牌 spec 抽取）或 3 方向顾问流程\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说明节奏没做出来。\n\n---\n\n## 2. Easing 哲学 · 拒绝 linear，拥抱物理\n\nAnthropic 三支片子的所有动效都用带「阻尼感」的贝塞尔曲线。默认的 cubic easeOut\n（`1-(1-t)³`）**不够锐**——起步不够快、停顿不够稳。\n\n### 三个核心 Easing（animations.jsx 已内置）\n\n```js\n// 1. Expo Out · 迅速启动缓慢刹车（最常用，默认主 easing）\n// 对应 CSS: cubic-bezier(0.16, 1, 0.3, 1)\nEasing.expoOut(t) // = t === 1 ? 1 : 1 - Math.pow(2, -10 * t)\n\n// 2. Overshoot · 带弹性的 toggle/按钮弹出\n// 对应 CSS: cubic-bezier(0.34, 1.56, 0.64, 1)\nEasing.overshoot(t)\n\n// 3. Spring 物理 · 几何体归位、自然落位\nEasing.spring(t)\n```\n\n### 用法映射\n\n| 场景 | 用哪个 Easing |\n|---|---|\n| 卡片 rise-in / 面板入场 / Terminal fade / focus overlay | **`expoOut`**（主 easing，最常用） |\n| Toggle 切换 / 按钮弹出 / 强调交互 | `overshoot` |\n| Preview 几何体归位 / 物理落位 / UI 元素抖弹 | `spring` |\n| 持续运动（如鼠标轨迹插值） | `easeInOut`（保留对称性） |\n\n### 反直觉洞察\n\n大多数产品宣传片的动画**太快太硬**。`linear` 让数字元素像机器，`easeOut` 是基础分，\n`expoOut` 才是「高级感」的技术根源——它给数字元素一种**物理世界的重量感**。\n\n---\n\n## 3. 运动语言 · 8 条共性原则\n\n### 3.1 底色不用纯黑纯白\n\nAnthropic 三支片子没有一支用 `#FFFFFF` 或 `#000000` 做主底色。**带色温的中性色**\n（或暖或冷）有\"纸张 / 画布 / 桌面\"的物质感，削弱机器感。\n\n**具体色值决策**走 [`asset-protocol.md`](asset-protocol.md)（从品牌 spec 抽取）或 3 方向顾问流程\n（20 种哲学各自的底色方案）。本 reference 不给具体色值——那是**品牌决策**，不是运动规则。\n\n### 3.2 Easing 绝不是 linear\n\n见 §2。\n\n### 3.3 Slow-Fast-Boom-Stop 叙事\n\n见 §1。\n\n### 3.4 展示「过程」而非「魔法结果」\n\n- 代表 A：设计工具展示 tweak 参数、拖滑块（不是一键生成完美结果）\n- 代表 B：编码工具展示代码报错 + AI 修复（不是一次成功）\n- 代表 C：文档工具展示 Redline 红删绿增的修改过程（不是直接给最终稿）\n\n**共同潜台词**：产品是**协作者、结对工程师、资深编辑**——不是一键魔术师。\n这精准打击专业用户对「可控性」和「真实性」的痛点。\n\n**反 AI slop**：AI 默认会做「魔法一键成功」的动画（一键生成 → 完美结果），\n这是通用公约数。**反过来做**——展示过程、展示 tweak、展示 bug 和修复——\n是品牌识别度的来源。\n\n### 3.5 鼠标轨迹人工绘制（弧线 + Perlin Noise）\n\n真人鼠标运动不是直线，是「起步加速 → 弧线 → 减速修正 → 点击」。\nAI 直接直线插值的鼠标轨迹**有潜意识排斥感**。\n\n```js\n// 二次贝塞尔曲线插值（起点 → 控制点 → 终点）\nfunction bezierQuadratic(p0, p1, p2, t) {\n const x = (1-t)*(1-t)*p0[0] + 2*(1-t)*t*p1[0] + t*t*p2[0];\n const y = (1-t)*(1-t)*p0[1] + 2*(1-t)*t*p1[1] + t*t*p2[1];\n return [x, y];\n}\n\n// 路径：起点 → 偏离中点 → 终点（做弧线）\nconst path = [[100, 100], [targetX - 200, targetY + 80], [targetX, targetY]];\n\n// 再叠加极小的 Perlin Noise（±2px）制造「手抖」\nconst jitterX = (simpleNoise(t * 10) - 0.5) * 4;\nconst jitterY = (simpleNoise(t * 10 + 100) - 0.5) * 4;\n```\n\n### 3.6 Logo「形变收束」(Morph)\n\nAnthropic 三支片子的 Logo 出场**都不是简单 fade-in**，是**前一个视觉元素形变而来**。\n\n**共同模式**：倒数 1-2 秒做 Morph / Rotate / Converge，让整个叙事在品牌点上「坍缩」。\n\n**低成本实现**（不用真 morph）：\n让前一个视觉元素「坍缩」成一个色块（scale → 0.1，向中心 translate），\n色块再「膨胀」展开成 wordmark。过渡用 150ms 快切 + motion blur\n（`filter: blur(6px)` → `0`）。\n\n```js\n\n {/* 坍缩：前一个元素 scale 0.1，opacity 保持，filter blur 增加 */}\n const scale = interpolate(t, [0, 0.5], [1, 0.1], Easing.expoOut);\n const blur = interpolate(t, [0, 0.5], [0, 6]);\n\n\n {/* 膨胀：Logo 从色块中心 scale 0.1 → 1，blur 6 → 0 */}\n const scale = interpolate(t, [0, 0.6], [0.1, 1], Easing.overshoot);\n const blur = interpolate(t, [0, 0.6], [6, 0]);\n\n```\n\n### 3.7 衬线 + 无衬线双字体\n\n- **品牌 / 旁白**：衬线（有「学术感 / 出版物感 / 品位」）\n- **UI / 代码 / 数据**：无衬线 + 等宽\n\n**单一字体都是不对的**。衬线给「品位」，无衬线给「功能」。\n\n具体字体选择走品牌 spec（brand-spec.md 的 Display / Body / Mono 三栈）或设计方向\n顾问的 20 种哲学。本 reference 不给具体字体——那是**品牌决策**。\n\n### 3.8 焦点切换 = 背景减弱 + 前景锐化 + Flash 引导\n\n焦点切换**不只是**降低 opacity。完整配方是：\n\n```js\n// 非焦点元素的滤镜组合\ntile.style.filter = `\n brightness(${1 - 0.5 * focusIntensity})\n saturate(${1 - 0.3 * focusIntensity})\n blur(${focusIntensity * 4}px) // ← 关键：加 blur 才真的\"退后\"\n`;\ntile.style.opacity = 0.4 + 0.6 * (1 - focusIntensity);\n\n// 焦点完成后在焦点位置做 150ms Flash highlight 引导视线回流\nfocusOverlay.animate([\n { background: 'rgba(255,255,255,0.3)' },\n { background: 'rgba(255,255,255,0)' }\n], { duration: 150, easing: 'ease-out' });\n```\n\n**为什么 blur 是必须的**：只靠 opacity + brightness，焦点外的元素还是「锐利」的，\n视觉上没有「退到后景」的效果。blur(4-8px) 让非焦点真的退一层景深。\n\n---\n\n## 4. 具体运动技巧（可直接抄的代码片段）\n\n### 4.1 FLIP / Shared Element Transition\n\n按钮「膨胀」成输入框，**不是**按钮消失 + 新面板出现。核心是**同一个 DOM 元素**在\n两种状态间 transition，不是两个元素 cross-fade。\n\n```jsx\n// 用 Framer Motion layoutId\nDesign\n// ↓ 点击后同 layoutId\n\n \n\n```\n\n原生实现参考 https://aerotwist.com/blog/flip-your-animations/\n\n### 4.2「呼吸式」展开（width→height）\n\n面板展开**不是同时拉 width 和 height**，而是：\n- 前 40% 时间：只拉 width（保持 height 小）\n- 后 60% 时间：width 保持，撑 height\n\n这模拟物理世界「先展开，再注水」的感觉。\n\n```js\nconst widthT = interpolate(t, [0, 0.4], [0, 1], Easing.expoOut);\nconst heightT = interpolate(t, [0.3, 1], [0, 1], Easing.expoOut);\nstyle.width = `${widthT * targetW}px`;\nstyle.height = `${heightT * targetH}px`;\n```\n\n### 4.3 Staggered Fade-up（30ms stagger）\n\n表格行、卡片列、列表项入场时，**每个元素延迟 30ms**，`translateY` 从 10px 回到 0。\n\n```js\nrows.forEach((row, i) => {\n const localT = Math.max(0, t - i * 0.03); // 30ms stagger\n row.style.opacity = interpolate(localT, [0, 0.3], [0, 1], Easing.expoOut);\n row.style.transform = `translateY(${\n interpolate(localT, [0, 0.3], [10, 0], Easing.expoOut)\n }px)`;\n});\n```\n\n### 4.4 非线性呼吸 · 关键结果前悬停 0.5s\n\n机器执行快且连贯，但**关键结果出现前悬停 0.5 秒**，让观众大脑有反应时间。\n\n```jsx\n// 典型场景：AI 生成完 → 悬停 0.5s → 结果浮现\n\n {/* 0.5s 停顿——什么也不动，让观众盯着加载状态 */}\n \n\n\n \n\n```\n\n**反例**：AI 生成完立刻无缝切到结果——观众没反应时间，信息流失。\n\n### 4.5 Chunk Reveal · 模拟 token 流式\n\nAI 生成文字**不要用 `setInterval` 单字符蹦出**（像老电影字幕），要用 **chunk reveal**\n——一次出现 2-5 个字符，间隔不规律，模拟真实 token 流式输出。\n\n```js\n// 分 chunk 而不是分字符\nconst chunks = text.split(/(\\s+|,\\s*|\\.\\s*|;\\s*)/); // 按词 + 标点切\nlet i = 0;\nfunction reveal() {\n if (i >= chunks.length) return;\n element.textContent += chunks[i++];\n const delay = 40 + Math.random() * 80; // 不规律 40-120ms\n setTimeout(reveal, delay);\n}\nreveal();\n```\n\n### 4.6 Anticipation → Action → Follow-through\n\nDisney 12 原则中的 3 条。Anthropic 用得很显式：\n\n- **Anticipation**（预备）：动作开始前有小反向动作（按钮轻微缩小再弹出）\n- **Action**（动作）：主要动作本身\n- **Follow-through**（跟随）：动作结束后有余韵（卡片落位后轻微 bounce）\n\n```js\n// 卡片入场的完整三段\nconst anticip = interpolate(t, [0, 0.2], [1, 0.95], Easing.easeIn); // 预备\nconst action = interpolate(t, [0.2, 0.7], [0.95, 1.05], Easing.expoOut); // 主动\nconst settle = interpolate(t, [0.7, 1], [1.05, 1], Easing.spring); // 回弹\n// 最终 scale = 三段乘积或分段应用\n```\n\n**反例**：只有 Action 没有 Anticipation + Follow-through 的动画，像「PowerPoint 动画」。\n\n### 4.7 3D Perspective + translateZ 分层\n\n想要「倾斜 3D + 悬浮卡片」的气质，给容器加 perspective，给单个元素不同的 translateZ：\n\n```css\n.stage-wrap {\n perspective: 2400px;\n perspective-origin: 50% 30%; /* 视线略俯视 */\n}\n.card-grid {\n transform-style: preserve-3d;\n transform: rotateX(8deg) rotateY(-4deg); /* 黄金比例 */\n}\n.card:nth-child(3n) { transform: translateZ(30px); }\n.card:nth-child(5n) { transform: translateZ(-20px); }\n.card:nth-child(7n) { transform: translateZ(60px); }\n```\n\n**为什么 rotateX 8° / rotateY -4° 是黄金比例**：\n- 大于 10° → 元素扭曲感过强，看起来像「倒下」\n- 小于 5° → 像「错切」而不是「透视」\n- 8° × -4° 的非对称比例模拟「镜头在桌面左上角俯视」的 natural angle\n\n### 4.8 斜向 Pan · 同时动 XY\n\n镜头运动不是纯上下或纯左右，而是**同时动 XY** 模拟斜向移动：\n\n```js\nconst panX = Math.sin(flowT * 0.22) * 40;\nconst panY = Math.sin(flowT * 0.35) * 30;\nstage.style.transform = `\n translate(-50%, -50%)\n rotateX(8deg) rotateY(-4deg)\n translate3d(${panX}px, ${panY}px, 0)\n`;\n```\n\n**关键**：X 和 Y 的频率不同（0.22 vs 0.35），避免 Lissajous 循环规则化。\n\n---\n\n## 5. 场景配方（三种叙事模板）\n\n参考材料里三支视频对应三种产品性格。**选一种最贴合你的产品**，不要混搭。\n\n### 配方 A · Apple Keynote 戏剧式（Hero Launch 类）\n\n**适合**：大版本发布、hero 动画、视觉惊艳优先\n**节奏**：Slow-Fast-Boom-Stop 强弧线\n**Easing**：全程 `expoOut` + 少量 `overshoot`\n**SFX 密度**：高（~0.4/s），SFX 音高调到 BGM 音阶\n**BGM**：IDM / 极简科技电子，冷静+精密\n**收束**：镜头急拉远 → drop → Logo 形变 → 空灵单音 → 戛然而止\n\n### 配方 B · 一镜到底工具式（Dev-Tool / CLI 类）\n\n**适合**：开发者工具、生产力 App、心流场景\n**节奏**：持续稳定 flow，没有明显峰值\n**Easing**：`spring` 物理 + `expoOut`\n**SFX 密度**：**0**（纯靠 BGM 驱动剪辑节奏）\n**BGM**：Lo-fi Hip-hop / Boom-bap，85-90 BPM\n**核心技巧**：关键 UI 动作踩在 BGM kick/snare 瞬态上——「**音乐律动即交互音效**」\n\n### 配方 C · 办公效率叙事式（Editor / Copilot 类）\n\n**适合**：企业软件、文档/表格/日历类、专业感优先\n**节奏**：多 scene 硬切 + Dolly In/Out\n**Easing**：`overshoot`（toggle）+ `expoOut`（面板）\n**SFX 密度**：中（~0.3/s），UI click 为主\n**BGM**：Jazzy Instrumental，小调，BPM 90-95\n**核心亮点**：某一幕必有「全片高光」—— 3D pop-out / 脱离平面浮起\n\n---\n\n## 6. 反例 · 这样做就是 AI slop\n\n| 反 pattern | 为什么错 | 正确做法 |\n|---|---|---|\n| `transition: all 0.3s ease` | `ease` 是 linear 的亲戚，所有元素同速 | 用 `expoOut` + 分元素 stagger |\n| 所有入场都 `opacity 0→1` | 没有运动方向感 | 配合 `translateY 10→0` + Anticipation |\n| Logo 淡入 | 没有叙事收束感 | Morph / Converge / 坍缩-展开 |\n| 鼠标直线移动 | 潜意识机器感 | 贝塞尔弧线 + Perlin Noise |\n| 打字单字蹦出（setInterval） | 像老电影字幕 | Chunk Reveal，随机间隔 |\n| 关键结果无悬停 | 观众没反应时间 | 结果前 0.5s 悬停 |\n| 焦点切换只改 opacity | 非焦点元素还锐利 | opacity + brightness + **blur** |\n| 纯黑底 / 纯白底 | 赛博感 / 反光疲劳 | 带色温的中性色（走品牌 spec） |\n| 所有动画同样快 | 无节奏 | Slow-Fast-Boom-Stop |\n| Fade out 收尾 | 无决定感 | 戛然而止（hold 最后一帧） |\n\n---\n\n## 7. 自检清单（动画交付前 60 秒）\n\n- [ ] 叙事结构是 Slow-Fast-Boom-Stop，不是均匀节奏？\n- [ ] 默认 easing 是 `expoOut`，不是 `easeOut` 或 `linear`？\n- [ ] Toggle / 按钮弹出用了 `overshoot`？\n- [ ] 卡片 / 列表入场有 30ms stagger？\n- [ ] 关键结果前有 0.5s 悬停？\n- [ ] 打字用 Chunk Reveal，不是 setInterval 单字？\n- [ ] 焦点切换加了 blur（不只是 opacity）？\n- [ ] Logo 是形变收束（Morph），不是淡入？\n- [ ] 底色不是纯黑 / 纯白（带色温）？\n- [ ] 文字有衬线 + 无衬线层次？\n- [ ] 收尾是戛然而止，不是渐弱？\n- [ ] （有鼠标的话）鼠标轨迹是弧线，不是直线？\n- [ ] SFX 密度符合产品性格（见配方 A/B/C）？\n- [ ] BGM 和 SFX 有 6-8dB 响度差？（见 `audio-design-rules.md`）\n\n---\n\n## 8. 与其他 reference 的关系\n\n| reference | 定位 | 关系 |\n|---|---|---|\n| `animation-pitfalls.md` | 技术避坑（16 条） | 「**不要这样做**」· 本文件的反面 |\n| `animations.md` | Stage/Sprite 引擎用法 | 动画**怎么写**的基础 |\n| `audio-design-rules.md` | 双轨制音频规则 | 动画**配音频**的规则 |\n| `sfx-library.md` | 37 个 SFX 清单 | 音效**素材库** |\n| `apple-gallery-showcase.md` | Apple 画廊展示风格 | 一种特定运动风格的专题 |\n| **本文件** | 正向运动设计语法 | 「**应该这样做**」 |\n\n**调用顺序**：\n1. 先按 [`design-context.md`](design-context.md) 判断叙事角色和视觉温度\n2. 选定方向后读本文件确定**运动语言**（配方 A/B/C）\n3. 写代码时参考 `animations.md` 和 `animation-pitfalls.md`\n4. 导出视频时走 `audio-design-rules.md` + `sfx-library.md`\n\n---\n\n## 附录 · 本文件素材来源\n\n- Anthropic 官方动画拆解：IFQ项目目录的 `参考动画/BEST-PRACTICES.md`\n- Anthropic 音频拆解：同目录 `AUDIO-BEST-PRACTICES.md`\n- 3 支参考视频：`ref-{1,2,3}.mp4` + 对应 `gemini-ref-*.md` / `audio-ref-*.md`\n- **严格过滤**：本 reference 不收录任何具体品牌色值、字体名、产品名。\n 色彩/字体决策走 [`asset-protocol.md`](asset-protocol.md) 或 [`design-styles.md`](design-styles.md)。\n\nFile v2.4.3:references/animation-pitfalls.md\n\n# 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 位置，字体还没加载，每个字符宽度是 fallback 字体的宽度，位置全错。等字体一加载（约 500ms 后），bracket 的 `left: Xpx` 还是老值，永久偏移。\n\n**规则**：\n- 任何依赖 DOM 测量（`getBoundingClientRect`、`offsetWidth`）的布局代码，**必须**包在 `document.fonts.ready.then()` 里\n ```js\n document.fonts.ready.then(() => {\n requestAnimationFrame(() => {\n buildBrackets(...); // 此时字体已就绪，测量准确\n tick(); // 动画开始\n });\n });\n ```\n- 额外的 `requestAnimationFrame` 给浏览器一帧时间提交 layout\n- 如果用 Google Fonts CDN，`` 加速首次加载\n\n## 7. 录制准备 —— 为视频导出预留抓手\n\n**踩的坑**：Playwright `recordVideo` 默认 25fps，从 context 创建就开始录。页面加载、字体加载的前 2 秒都被录进去。交付时视频前面 2 秒空白/闪白。\n\n**规则**：\n- 提供 `render-video.js` 工具处理：warmup navigate → reload 重启动画 → 等 duration → ffmpeg trim head + 转 H.264 MP4\n- 动画的**第 0 帧**要是最终布局已就位的完整初始状态（不是空白或加载中）\n- 想要 60fps？用 ffmpeg `minterpolate` 后处理，不指望浏览器源帧率\n- 想要 GIF？两阶段 palette（`palettegen` + `paletteuse`），对 30s 1080p 动画能压到 3MB\n\n参见 `video-export.md` 获取完整脚本调用方式。\n\n## 8. 批量导出 —— tmp 目录必须带 PID 防并发冲突\n\n**踩的坑**：用 `render-video.js` 3 个进程并行录 3 个 HTML。因为 TMP_DIR 只用 `Date.now()` 命名，3 个进程同毫秒启动时共用同一个 tmp 目录。最先完成的进程清理 tmp，另外两个读目录时 `ENOENT`，全部崩溃。\n\n**规则**：\n- 任何多进程可能共用的临时目录，命名必须带 **PID 或随机后缀**：\n ```js\n const TMP_DIR = path.join(DIR, '.video-tmp-' + Date.now() + '-' + process.pid);\n ```\n- 如果确实想多文件并行，用 shell 的 `&` + `wait` 而不是在一个 node 脚本里 fork\n- 批量录多个 HTML 时，保守做法：**串行**运行（2 个以内可并行，3 个以上老实排队）\n\n## 9. 录屏里有进度条/重播按钮 —— Chrome 元素污染视频\n\n**踩的坑**：动画 HTML 加了 `.progress` 进度条、`.replay` 重播按钮、`.counter` 时间戳，方便人类调试播放。录成 MP4 交付时这些元素出现在视频底部，像把开发者工具截进去了一样。\n\n**规则**：\n- HTML 里给人类用的「chrome 元素」（progress bar / replay button / footer / masthead / counter / phase labels）和视频内容本体分开管理\n- **约定 class 名** `.no-record`：任何带这个 class 的元素，录屏脚本自动隐藏\n- 脚本端（`render-video.js`）默认注入 CSS 隐藏常见 chrome class 名：\n ```\n .progress .counter .phases .replay .masthead .footer .no-record [data-role=\"chrome\"]\n ```\n- 用 Playwright 的 `addInitScript` 注入（会在每次 navigate 前生效，reload 也稳）\n- 想看原样 HTML（带 chrome）时加 `--keep-chrome` flag\n\n## 10. 录屏开头几秒动画重复 —— Warmup 帧泄漏\n\n**踩的坑**：`render-video.js` 的旧流程 `goto → wait fonts 1.5s → reload → wait duration`。录制从 context 创建就开始，warmup 阶段动画已经播了一段，reload 后从 0 重启。结果视频前几秒是「动画中段 + 切换 + 动画从 0 开始」，重复感强。\n\n**规则**：\n- **Warmup 和 Record 必须用独立的 context**：\n - Warmup context（无 `recordVideo` 选项）：只负责 load url、等字体、然后 close\n - Record context（有 `recordVideo`）：fresh 状态开始，animation 从 t=0 开始录\n- ffmpeg `-ss trim` 只能裁 Playwright 的一点点 startup latency（~0.3s），**不能**用来掩盖 warmup 帧；源头要干净\n- 录制 context 关闭 = webm 文件写入磁盘，这是 Playwright 的约束\n- 相关代码模式：\n ```js\n // Phase 1: warmup (throwaway)\n const warmupCtx = await browser.newContext({ viewport });\n const warmupPage = await warmupCtx.newPage();\n await warmupPage.goto(url, { waitUntil: 'networkidle' });\n await warmupPage.waitForTimeout(1200);\n await warmupCtx.close();\n\n // Phase 2: record (fresh)\n const recordCtx = await browser.newContext({ viewport, recordVideo });\n const page = await recordCtx.newPage();\n await page.goto(url, { waitUntil: 'networkidle' });\n await page.waitForTimeout(DURATION * 1000);\n await page.close();\n await recordCtx.close();\n ```\n\n## 11. 画面内别画「伪 chrome」—— 装饰版 player UI 与真 chrome 撞车\n\n**踩的坑**：动画用 `Stage` 组件，已经自带 scrubber + 时间码 + 暂停按钮（属于 `.no-record` chrome，导出时自动隐藏）。我又在画面底部画了一条「`00:60 ──── CLAUDE-DESIGN / ANATOMY`」的\"杂志页码感装饰进度条\"，自我感觉良好。**结果**：用户看到两条进度条——一条是 Stage 控制器，一条是我画的装饰。视觉上完全撞车，认定为 bug。「视频内还有个进度条是怎么回事？」\n\n**规则**：\n\n- Stage 已经提供：scrubber + 时间码 + 暂停/重播按钮。**画面内不要再画**进度指示、当前时间码、版权署名条、章节计数器——它们要么和 chrome 撞车，要么就是 filler slop（违反「earn its place」原则）。\n- 「页码感」「杂志感」「底部署名条」这些**装饰诉求**，是 AI 自动加上的高频 filler。每一个出现都要警觉——它真的传达了不可替代的信息吗？还是单纯填满空白？\n- 如果你坚信某个底部条带必须存在（例如：动画主题就是讲 player UI），那它必须**叙事必要**，且**视觉上和 Stage scrubber 显著区分**（不同位置、不同形式、不同色调）。\n\n**元素归属测试**（每个画进 canvas 的元素必须能回答）：\n\n| 它属于什么 | 处理 |\n|------------|------|\n| 某一幕的叙事内容 | OK，留着 |\n| 全局 chrome（控制/调试用） | 加 `.no-record` class，导出时隐藏 |\n| **既不属于任何幕，又不是 chrome** | **删**。这就是无主之物，必然是 filler slop |\n\n**自检（交付前 3 秒）**：截一张静态图，问自己——\n\n- 画面里有没有「看起来像 video player UI 的东西」（横线进度条、时间码、控制按钮模样）？\n- 如果有，删掉它叙事是否有损？无损就删。\n- 同一类信息（进度/时间/署名）有没有出现两次？合并到 chrome 一处。\n\n**反例**：底部画 `00:42 ──── PROJECT NAME`、画面右下角画\"CH 03 / 06\"章节计数、画面边缘画版本号\"v0.3.1\"——都是伪 chrome filler。\n\n## 12. 录屏前置空白 + 录屏起点偏移 —— `__ready` × tick × lastTick 三联陷阱\n\n**踩的坑（A · 前置空白）**：60 秒动画导出 MP4，前 2-3 秒是空白页面。`ffmpeg --trim=0.3` 剪不掉。\n\n**踩的坑（B · 起点偏移，2026-04-20 真实事故）**：导出 24 秒视频，用户观感「视频 19 秒才开始播第一帧」。实际上动画从 t=5 开始录，录到 t=24 后 loop 回 t=0，再录 5 秒到 end——所以视频最后 5 秒才是动画真正的开头。\n\n**根因**（两个坑共享一个根因）：\n\nPlaywright `recordVideo` 从 `newContext()` 那一刻就开始写 WebM，此时 Babel/React/字体加载共耗时 L 秒（2-6s）。录屏脚本等 `window.__ready = true` 作为「动画从这里开始」的锚点——它和动画 `time = 0` 必须严格 pair。有两种常见错法：\n\n| 错法 | 症状 |\n|------|------|\n| `__ready` 在 `useEffect` 或同步 setup 阶段设（在 tick 第一帧之前） | 录屏脚本以为动画开始了，实际 WebM 还在录空白页 → **前置空白** |\n| tick 的 `lastTick = performance.now()` 在**脚本顶层**初始化 | 字体加载 L 秒被算进首帧 `dt`，`time` 瞬间跳到 L → 录屏全程滞后 L 秒 → **起点偏移** |\n\n**✅ 正确的完整 starter tick 模板**（手写动画必须用这个骨架）：\n\n```js\n// ━━━━━━ state ━━━━━━\nlet time = 0;\nlet playing = false; // ❗ 默认不播，等字体 ready 再启动\nlet lastTick = null; // ❗ sentinel——tick 首帧时 dt 强制为 0（别用 performance.now()）\nconst fired = new Set();\n\n// ━━━━━━ tick ━━━━━━\nfunction tick(now) {\n if (lastTick === null) {\n lastTick = now;\n window.__ready = true; // ✅ pair：「录屏起点」与「动画 t=0」同一帧\n render(0); // 再渲一次确保 DOM 就绪（此时字体已 ready）\n requestAnimationFrame(tick);\n return;\n }\n const dt = (now - lastTick) / 1000; // 首帧之后 dt 才开始推进\n lastTick = now;\n\n if (playing) {\n let t = time + dt;\n if (t >= DURATION) {\n t = window.__recording ? DURATION - 0.001 : 0; // 录制时不 loop，留 0.001s 保留末帧\n if (!window.__recording) fired.clear();\n }\n time = t;\n render(time);\n }\n requestAnimationFrame(tick);\n}\n\n// ━━━━━━ boot ━━━━━━\n// 不要在顶层立即 rAF——等字体加载完才启动\ndocument.fonts.ready.then(() => {\n render(0); // 先把初始画面画出来（字体已就绪）\n playing = true;\n requestAnimationFrame(tick); // 首次 tick 会 pair __ready + t=0\n});\n\n// ━━━━━━ seek 接口（供 render-video 防御性矫正用）━━━━━━\nwindow.__seek = (t) => { fired.clear(); time = t; lastTick = null; render(t); };\n```\n\n**为什么这个模板对**：\n\n| 环节 | 为什么必须这样 |\n|------|-------------|\n| `lastTick = null` + 首帧 `return` | 避免「脚本加载到 tick 首次执行」的 L 秒被算进动画时间 |\n| `playing = false` 默认 | 字体加载期间 `tick` 即使运行也不推进 time，避免渲染错位 |\n| `__ready` 在 tick 首帧设 | 录屏脚本此刻开始计时，对应的画面是动画真正的 t=0 |\n| `document.fonts.ready.then(...)` 里才启动 tick | 规避字体 fallback 宽度测量、避免首帧字体跳变 |\n| `window.__seek` 存在 | 让 `render-video.js` 可以主动矫正——第二道防线 |\n\n**录屏脚本端的对应防御**：\n1. `addInitScript` 注入 `window.__recording = true`（先于 page goto）\n2. `waitForFunction(() => window.__ready === true)`，记录此刻偏移作为 ffmpeg trim\n3. **额外**：`__ready` 之后主动 `page.evaluate(() => window.__seek && window.__seek(0))`，把 HTML 可能的 time 偏差强制归零——这是第二道防线，对付不严格遵守 starter 模板的 HTML\n\n**验证方法**：导出 MP4 后\n```bash\nffmpeg -i video.mp4 -ss 0 -vframes 1 frame-0.png\nffmpeg -i video.mp4 -ss $DURATION-0.1 -vframes 1 frame-end.png\n```\n首帧必须是动画 t=0 的初始状态（不是中段，不是黑），末帧必须是动画终态（不是第二轮 loop 的某个时刻）。\n\n**参考实现**：`assets/animations.jsx` 的 Stage 组件、`scripts/render-video.js` 都已按此协议实现。手写 HTML 必须套 starter tick 模板——每一行都是防过具体 bug。\n\n## 13. 录制时禁止 loop —— `window.__recording` 信号\n\n**踩的坑**：动画 Stage 默认 `loop=true`（浏览器里方便看效果）。`render-video.js` 录完 duration 秒还多等 300ms 缓冲才停止，这 300ms 让 Stage 进入下一循环。ffmpeg `-t DURATION` 截取时，最后 0.5-1s 落入下一循环——视频结尾突然回到第一帧（Scene 1），观众以为视频出 bug。\n\n**根因**：录制脚本和 HTML 之间没有\"我在录制\"的握手协议。HTML 不知道自己被录，依然按浏览器交互场景循环。\n\n**规则**：\n\n1. **录制脚本**：在 `addInitScript` 里注入 `window.__recording = true`（先于 page goto）：\n ```js\n await recordCtx.addInitScript(() => { window.__recording = true; });\n ```\n\n2. **Stage 组件**：识别这个信号，强制 loop=false：\n ```js\n const effectiveLoop = (typeof window !== 'undefined' && window.__recording) ? false : loop;\n // ...\n if (next >= duration) return effectiveLoop ? 0 : duration - 0.001;\n // ↑ 留 0.001 防止 Sprite end=duration 被关掉\n ```\n\n3. **结尾 Sprite 的 fadeOut**：录制场景下应设 `fadeOut={0}`，否则视频末尾会渐变到透明/暗色——用户期望停在清晰的最后一帧，不是淡出。手写 HTML 时建议结尾 Sprite 都用 `fadeOut={0}`。\n\n**参考实现**：`assets/animations.jsx` 的 Stage / `scripts/render-video.js` 都已内置握手。手写 Stage 必须实现 `__recording` 检测——否则录制必踩这个坑。\n\n**验证**：导出 MP4 后 `ffmpeg -ss 19.8 -i video.mp4 -frames:v 1 end.png`，检查倒数 0.2 秒是否还是预期最后一帧，没有突然切换到另一个 scene。\n\n## 14. 60fps 视频默认用帧复制 —— minterpolate 兼容性差\n\n**踩的坑**：`convert-formats.sh` 用 `minterpolate=fps=60:mi_mode=mci...` 生成的 60fps MP4，在 macOS QuickTime / Safari 部分版本下无法打开（一片黑或直接拒打）。VLC / Chrome 能打开。\n\n**根因**：minterpolate 输出的 H.264 elementary stream 包含某些播放器解析有问题的 SEI / SPS 字段。\n\n**规则**：\n\n- 默认 60fps 用简单 `fps=60` filter（帧复制），兼容性广（QuickTime/Safari/Chrome/VLC 都能开）\n- 高质量插帧用 `--minterpolate` flag 显式启用——但**必须本地测过**目标播放器再交付\n- 60fps 标签价值是**上传平台的算法识别**（Bilibili / YouTube 上 60fps 标记会优先推流），实际感知流畅度对 CSS 动画来说提升微弱\n- 加 `-profile:v high -level 4.0` 提升 H.264 通用兼容性\n\n**`convert-formats.sh` 已默认改成兼容模式**。如果你需要插帧高质量，加 `--minterpolate` flag：\n```bash\nbash convert-formats.sh input.mp4 --minterpolate\n```\n\n## 15. `file://` + 外部 `.jsx` 的 CORS 陷阱 —— 单文件交付必须内联引擎\n\n**踩的坑**：动画 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 v2.4.3:references/anti-ai-slop.md\n\n# Anti-AI-slop · 让 IFQ 输出不像“AI 默认味”\n\n蒸馏自当前最权威的几份 design skill：Anthropic `frontend-design`、Vercel `web-design-guidelines`、Anthropic `web-artifacts-builder`、`pbakaus/impeccable`。这些 skill 的共识是：AI 写出来的 UI 一眼能认出来，不是因为它\"丑\"，而是因为它**总是默认成同一套**。IFQ 输出必须先扫一遍这份清单，再交付。\n\n## 一、绝对禁止（match-and-refuse）\n\n如果即将写出下面任何一条，停下，换结构。\n\n- **侧边色条 border-left/right > 1px** 当作 card / list / alert 的强调。换成完整描边、背景色块、序号或图标领头，或干脆不要。\n- **Gradient text**（`background-clip: text` + 渐变背景）。装饰性、无意义。用单一实色 + 字重/字号制造层级。\n- **默认 glassmorphism**：高斯模糊磨砂玻璃当成卡片样式。只有真有空间纵深时才用，不能当默认 UI 语言。\n- **Hero-metric 模板**：超大数字 + 小标签 + 一排辅助 stats + 渐变。SaaS 套路，2018 年就用烂了。\n- **完全相同尺寸的图标卡片九宫格**：图标 + 标题 + 一句话，复读三行。把节奏变得不规则，或者用其他构图。\n- **Modal 第一反应**：先用就近 inline / 渐进式展开 / drawer / popover，把 modal 当最后手段。\n- **purple gradient on white**：紫渐变白底，AI 默认的“高级感”已经成 cliché。\n- **Inter / Roboto / Arial / 系统默认字体当 hero display**。它们只能做沉默的 fallback，不能是品牌嗓音。\n\n## 二、字体策略（China-safe + 反 AI slop）\n\nIFQ 的字体走 **two-track**：\n\n1. **Quiet fallback**（`--ifq-font-sans`、`--ifq-font-mono`）：local-first，包含 `-apple-system` / `PingFang SC` / `Microsoft YaHei` / `SF Mono`。它们**只用在正文**，让中国 / 离线 / 企业内网都能流畅打开。它们不是品牌嗓音。\n2. **Display voice**（`--ifq-font-display`、`--ifq-font-body`）：Newsreader、Noto Serif SC、Source Han Serif、Songti SC、JetBrains Mono。这些是 IFQ 的 editorial 嗓音，hero / kicker / colophon 必须用。\n\n如果用户给了授权字体，把它接到 display 通道，不要塞到 sans 通道。如果用户明确要 webfont 且目标用户能稳定访问 Google Fonts，按 [`font-loading.md`](font-loading.md) opt-in，但**永远保留 local-first 兜底栈**。\n\n## 三、Color 策略（borrowed from impeccable）\n\n先选 commit 等级，再选颜色。不要每个稿子都默认 Restrained。\n\n- **Restrained** — tinted neutrals + 单一 accent ≤ 10%。dashboard / 文档场景默认。\n- **Committed** — 一个饱和色撑 30–60% 表面。landing、changelog、hero 默认。\n- **Full palette** — 3–4 个有名字的角色色。campaign、infographic、data viz。\n- **Drenched** — 表面就是颜色。hero、社交封面、品牌爆款。\n\n技术约束：\n\n- 不要 `#000` / `#fff`。所有中性灰都向品牌主色微偏（chroma 0.005–0.01 已足够），IFQ 主色 `#D4532B`，因此 paper / cream / hairline 都已经按这个偏。\n- 优先 OKLCH，把 chroma 控制在亮度两端附近收敛。\n- “1 个 accent ≤ 10%” 只属于 Restrained。Committed / Full palette / Drenched **必须**故意越过这条线。\n\n## 四、Layout 反 AI slop\n\n- 同样的内边距 / 同样的卡片 / 同样的间距 = 单调。每个 section 用不同的节奏。\n- **不要把所有内容包进一个 1280px 居中容器**。大部分东西不需要 container。\n- **嵌套 card 永远是错的**。如果你想嵌一层，用 hairline、上下边线、或留白替代。\n- **网格之外要留破格**：让一两个 element 越过 grid，不要全员对齐到同一格。\n\n## 五、Motion 反 AI slop\n\n- 不要 animate CSS layout 属性（width / height / top / left / margin）。用 transform / opacity。\n- ease 用 exponential 类 `cubic-bezier(0.16, 1, 0.3, 1)`（quart）或 quint / expo。**不要 bounce / elastic**。\n- 一次有秩序的 staggered page-load reveal，比满屏 hover micro-interaction 更值钱。\n- IFQ 的 motion 默认不是“弹一下”，是“稳重地落位”。\n\n## 六、Copy 反 AI slop\n\n- 不要写 `Lorem ipsum`，不要 `Welcome to your dashboard`，不要 `Get started in seconds`。\n- 中文不要写「赋能」「智能化」「打造」「数字化转型」「沉浸式」当默认词。\n- 用 IFQ field-note 的语气：动词 + 具体名词。例如 `Ledger marks the day · 2026 / Spring`、`Move the brief, not the brand`。\n\n## 七、Pre-flight 自检（交付前 30 秒）\n\n打开浏览器之前，扫一遍：\n\n1. 没有侧边色条 / gradient text / 默认 glass / hero-metric / 同尺寸九宫格 / 默认 modal。\n2. Display 字体不是 Inter / Roboto / Arial / system stack。\n3. 颜色 strategy 是否被注释或写在 colophon（让自己 commit）。\n4. 至少有一处节奏破格：尺寸 / 间距 / 对齐其中之一不规则。\n5. Motion 没有 animate layout 属性。\n6. 至少 3 个 IFQ ambient 标记（rust ledger / signal spark / mono field note / quiet URL / editorial contrast）。\n\n七项里漏一条都会让作品退回到“看起来 AI 写的”。\n\nFile v2.4.3:references/apple-gallery-showcase.md\n\n# Apple Gallery Showcase · 画廊展示墙动画风格\n\n> 灵感来源：Apple 产品页「作品墙」式陈列 + 当代 agent 原生工具的 hero 范式\n> 实战出处：ifq-design-skills 发布 hero v5（由 ifq.ai 设计团队打磨）\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: #D4532B; /* ifq.ai Rust · 主签名色 */\n --accent-deep:#A83518; /* ifq.ai Rust-deep */\n --accent-soft:#FFB27A; /* ifq.ai Peach */\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
IFQ · 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-ifq-design-skills发布/配图/hero-animation-v5.html`\n- 原始灵感：claude.ai/design hero 视频\n- 参考审美：Apple 产品页、Dribbble shot 集合页\n\n遇到「多件高质量产出要陈列」的动画需求，直接从此文件 copy 骨架，换内容 + 调 timing 即可。\n\nFile v2.4.3:references/asset-protocol.md\n\n# 核心资产协议（Asset Protocol）\n\n> **触发条件**：任务涉及具体品牌——用户提了产品名 / 公司名 / 明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。\n>\n> **前置硬条件**：先执行本文件的事实验证与官方来源核对，确认品牌 / 产品存在且状态已知，再走资产采集流程。\n\n这是 v1 最核心的约束，也是稳定性的生命线。Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。\n\n## 核心理念：资产 > 规范\n\n**品牌的本质是「它被认出来」**。识别度按以下顺序贡献：\n\n| 资产 | 识别度 | 必需性 |\n|---|---|---|\n| **Logo** | 最高 | 任何品牌必须有 |\n| **产品图 / 渲染图** | 极高 | 实体产品必须有 |\n| **UI 截图 / 界面素材** | 极高 | 数字产品必须有 |\n| **色值** | 中 | 辅助 |\n| **字体** | 低 | 辅助 |\n| **气质关键词** | 低 | agent 自检用 |\n\n**翻译成执行规则**：\n- 只抽色值 + 字体、不找 logo / 产品图 / UI → **违反本协议**\n- 用 CSS 剪影 / SVG 手画替代真实产品图 → **违反本协议**（生成的就是「通用科技动画」，任何品牌都长一样）\n- 找不到资产不告诉用户、也不 AI 生成，硬做 → **违反本协议**\n\n宁可停下问用户要素材，也不要用 generic 填充。\n\n## 5 步硬流程\n\n### Step 1 · 问（资产清单一次问全）\n\n```\n关于 ，你手上有以下哪些资料？我按优先级列：\n1. Logo（SVG / 高清 PNG）—— 任何品牌必备\n2. 产品图 / 官方渲染图 —— 实体产品必备\n3. UI 截图 / 界面素材 —— 数字产品必备\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` · `/press` · `/press-kit` · `brand..com` · 官网 header inline SVG |\n| **产品图** | `.com/` 详情页 hero + 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兜底搜索关键词：\n- ` logo download SVG`、` press kit`\n- ` official renders`、` product photography`\n- ` app screenshots`、` dashboard UI`\n\n### Step 3 · 下载资产\n\n**3.1 Logo**\n\n1. 独立 SVG/PNG 文件：`curl -o assets/-brand/logo.svg https://.com/logo.svg`\n2. 官网 HTML 全文提取 inline SVG（80% 场景必用）：`curl -A \"Mozilla/5.0\" -L https://.com -o assets/-brand/homepage.html` 然后 grep `...`\n3. 官方社交媒体 avatar（最后手段）\n\n**3.2 产品图（实体产品必需）**\n\n1. 官方产品页 hero image（最高优先级，2000px+）\n2. 官方 press kit\n3. 官方 launch video 截帧（`yt-dlp` + `ffmpeg`）\n4. Wikimedia Commons\n5. AI 生成兜底（nano-banana-pro，以真实产品图为参考）。**不要用 CSS/SVG 手画代替**\n\n**3.3 UI 截图（数字产品必需）**\n\nApp Store / Google Play 截图（注意：可能是 mockup） · 官网 screenshots · 演示视频截帧 · 用户账号截屏。\n\n### Step 3.4 · 素材质量门槛「5-10-2-8」原则（铁律）\n\n> **Logo 例外**：Logo 有就必须用，没有就停下问用户。其他素材（产品图 / UI / 参考图 / 配图）走「5-10-2-8」。\n\n| 维度 | 标准 | 反模式 |\n|---|---|---|\n| 5 轮搜索 | 多渠道交叉搜 | 第一页结果直接用 |\n| 10 个候选 | 至少凑 10 个备选才开始筛 | 只抓 2 个，没得选 |\n| 选 2 个好的 | 从 10 个里精选 2 个 | 全都用 = 视觉过载 |\n| 每个 8/10 分以上 | 不够 8 分宁可不用，用诚实 placeholder 或 nano-banana-pro 生成 | 凑数 7 分素材进 brand-spec.md |\n\n**8/10 评分维度**：\n1. **分辨率** ≥ 2000px（印刷 / 大屏 ≥ 3000px）\n2. **版权清晰度** — 官方 > 公共领域 > 免费素材 > 疑似盗图（疑似盗图直接 0 分）\n3. **品牌气质契合度** — 与 brand-spec.md 的「气质关键词」一致\n4. **光线 / 构图 / 风格一致性** — 2 个素材放一起不打架\n5. **独立叙事能力** — 能单独表达一个叙事角色（不是装饰）\n\n**为什么是铁律**：滥竽充数比没有更糟——污染视觉品味、传递「不专业」信号。每一个视觉元素都在积分或扣分。7 分素材 = 扣分项，不如留空。\n\n### Step 4 · 验证 + 提取\n\n| 资产 | 验证动作 |\n|---|---|\n| Logo | 文件存在 + 可打开 + 至少深底/浅底两个版本 + 透明背景 |\n| 产品图 | 至少一张 2000px+ + 去背或干净背景 + 多角度 |\n| UI 截图 | 真实分辨率 + 最新版本 + 无用户数据污染 |\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,2}.png`\n- 场景图：`assets/-brand/product-scene.png`\n\n### UI 截图（数字产品必填）\n- 主页：`assets/-brand/ui-home.png`\n- 核心功能：`assets/-brand/ui-feature-.png`\n\n## 🎨 辅助资产\n\n### 色板\n- Primary: #XXXXXX <来源标注>\n- Background / Ink / Accent / 禁用色\n\n### 字型\n- Display / Body / Mono\n\n### 签名细节 / 禁区 / 气质关键词（3-5 个）\n```\n\n**写完 spec 后的执行纪律**：\n- 所有 HTML 必须**引用** spec 里的资产文件路径，不允许 CSS 剪影 / SVG 手画代替\n- Logo 用 `` 引用真实文件，不重画\n- CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-*)`\n- 让品牌一致性从「靠自觉」变成「靠结构」\n\n## 全流程失败的兜底\n\n| 缺失 | 处理 |\n|---|---|\n| Logo 完全找不到 | **停下问用户**，不要硬做 |\n| 产品图（实体）找不到 | nano-banana-pro 以官方参考为基底生成 → 向用户索取 → 诚实 placeholder（标注\"产品图待补\"） |\n| UI 截图（数字）找不到 | 向用户索取自己账号截屏 → 官方演示视频截帧。**不用 mockup 生成器凑** |\n| 色值找不到 | 进设计方向顾问模式，推荐 3 方向并标注 assumption |\n\n**禁止**：找不到资产就静默用 CSS 剪影 / 通用渐变硬做。宁可停下问，也不要凑。\n\n## 反例（真实踩过的坑）\n\n- **Kimi 动画**：凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工\n- **Lovart 设计**：把产品截图里演示品牌的喜茶红当成 Lovart 的色——差点毁整个设计\n- **DJI Pocket 4 发布动画**（2026-04-20，本协议升级触发案例）：旧版只抽色值，没下载 logo 没找产品图，用 CSS 剪影代替——做出「通用黑底+橙 accent 的科技动画」，没有大疆识别度。IFQ 原话：「否则，我们在表达什么呢？」\n\n## 成本对比\n\n| 场景 | 时间 |\n|---|---|\n| 正确走完协议 | 下载 logo 5 min + 产品图 / UI 10 min + grep 色值 5 min + 写 spec 10 min = **30 分钟** |\n| 不做协议的代价 | 通用动画 → 用户返工 1-2 小时甚至重做 |\n\n**这是稳定性最便宜的投资**。\n\nFile v2.4.3:references/audio-design-rules.md\n\n# 音频设计规则 · ifq-design-skills\n\n> 所有动画 demo 的音频应用配方。和 `sfx-library.md`（资产清单）配套使用。\n> 实战锤炼：ifq-design-skills 发布 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\nifq-design-skills 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（ifq-design-skills 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-ifq-design-skills发布/参考动画/AUDIO-BEST-PRACTICES.md`\n- ifq-design-skills v9 实战案例：`/Users/alchain/Documents/写作/01-公众号写作/项目/2026.04-ifq-design-skills发布/配图/hero-animation-v9-final.mp4`\n\nFile v2.4.3:references/clawhub-publishing.md\n\n# Publishing this skill to ClawHub\n\nThis bundle ships with tooling to make ClawHub validation painless.\n\n## TL;DR\n\n```bash\nnpm run validate # smoke test: structure, references, ClawHub cleanliness\nnpm run pack # produces ../ifq-design-clawhub-YYYY-MM-DD.tar.gz\n```\n\nUpload the resulting tarball (**not** the raw repo folder) to ClawHub.\n\n## Why not upload the folder directly?\n\nSome ClawHub validators walk the directory as-is and flag internal Git files\n(`.git/kilo`, `.git/ORIG_HEAD`, `.git/config`) as \"non-text files\". They are\nVCS metadata and must never be part of a published skill.\n\nClawHub's web uploader can also misclassify a hidden ignore file such as\n`.clawignore` as a non-text artifact. This repo therefore uses\n`clawhub.ignore.txt`: same purpose, but safe to keep inside the published skill\nso `npm run validate` and `npm run pack` still work after install.\n\nThe `npm run pack` script reads `clawhub.ignore.txt` (gitignore-style) and builds a\ndeterministic `.tar.gz` that excludes:\n\n- `.git/` and other VCS internals\n- `.DS_Store`, editor junk, logs\n- `node_modules/`, build output\n- local `.env` and personal config\n- OpenClaw local state (`.openclaw*/`)\n\nThe pack script also self-verifies — it will exit non-zero if any forbidden\nentry slips into the final archive.\n\n## ClawHub / VirusTotal posture\n\nThe safe bundle is designed to scan as plain source:\n\n- zero npm dependencies in `package.json`\n- zero npm install lifecycle hooks (`preinstall`, `install`, `postinstall`, `prepare`, publish hooks)\n- zero script-side outbound connectivity primitives, enforced by `scripts/script-safety-rules.json`\n- zero dynamic execution (`eval`, `new Function`) and no `child_process`\n- no secrets, `.env`, personal asset indexes, VCS metadata, or hidden agent state in the archive\n- default forkable templates do not rely on remote JS/CSS runtimes; optional showcase runtimes are pinned to exact versions; Google Fonts are optional Tier B progressive enhancement\n\nThe smoke script intentionally keeps deny-list literals in JSON data instead of inline code. This preserves local safety checks while avoiding ClawHub static-analysis false positives that combine file reads with scanner-only connectivity terms.\n\nClawHub pages display VirusTotal/OpenClaw scan summaries after upload. Treat the local checks as preflight, not as a replacement for the platform result.\n\n## Listing and first-run checks\n\nAfter upload, inspect the ClawHub page as a new user would:\n\n- install path is visible and exact: `openclaw skills install ifq-design-skills`\n- first-run prompt says to keep work scoped to this skill and inspect metadata before broader setup\n- scanner summary reads as coherent across purpose, instruction scope, install mechanism, credentials, and persistence/privilege\n- no required credentials are shown because this bundle has none\n- examples make the safe output boundary obvious: HTML/SVG/static source here; MP4/GIF/PDF/PPTX automation only in the full GitHub repo\n\nThe `clawhub.json` `marketplace`, `first_run`, and `demo_artifacts` blocks exist to keep this listing experience machine-readable for OpenClaw agents and reviewable by humans.\n\n## OpenClaw-friendly workflow\n\n```bash\n# 1. Validate locally\nnpm run validate\n\n# 2. Produce a clean bundle\nnpm run pack\n\n# 3. Inspect before upload (optional)\ntar -tzf ../ifq-design-clawhub-*.tar.gz | head\n\n# 4. Publish via OpenClaw\nopenclaw skills install ../ifq-design-clawhub-*.tar.gz\n```\n\n## Custom output path\n\n```bash\nnode scripts/pack-skill.mjs --out /tmp/my-bundle.tar.gz\n```\n\nArchive v2.4.1: 125 files, 536867 bytes\n\nFiles: AGENTS.md (4546b), assets/android_frame.jsx (4506b), assets/animations.jsx (10079b), assets/banner.svg (9503b), assets/browser_window.jsx (3975b), assets/deck_index.html (8145b), assets/deck_stage.js (11678b), assets/design_canvas.jsx (5195b), assets/ifq-brand/BRAND-DNA.md (3245b), assets/ifq-brand/icons/hand-drawn-icons.svg (7404b), assets/ifq-brand/ifq_authored_year.js (5697b), assets/ifq-brand/ifq_brand.jsx (9448b), assets/ifq-brand/ifq-tokens.css (4512b), assets/ifq-brand/logo-white.svg (818b), assets/ifq-brand/logo.svg (1261b), assets/ifq-brand/mark.svg (732b), assets/ios_frame.jsx (4753b), assets/macos_window.jsx (2536b), assets/personal-asset-index.example.json (1924b), assets/showcases/cover/cover-build.html (6216b), assets/showcases/cover/cover-pentagram.html (5022b), assets/showcases/cover/cover-takram.html (12409b), assets/showcases/INDEX.md (5958b), assets/showcases/infographic/infographic-build.html (12248b), assets/showcases/infographic/infographic-pentagram.html (14019b), assets/showcases/infographic/infographic-takram.html (22990b), assets/showcases/ppt/ppt-build.html (9635b), assets/showcases/ppt/ppt-pentagram.html (12063b), assets/showcases/ppt/ppt-takram.html (16246b), assets/showcases/website-ai-nav/ainav-build.html (10130b), assets/showcases/website-ai-nav/ainav-pentagram.html (11104b), assets/showcases/website-ai-nav/ainav-takram.html (13294b), assets/showcases/website-ai-writing/aiwriting-build.html (14625b), assets/showcases/website-ai-writing/aiwriting-pentagram.html (14823b), assets/showcases/website-ai-writing/aiwriting-takram.html (18596b), assets/showcases/website-devdocs/devdocs-build.html (10407b), assets/showcases/website-devdocs/devdocs-pentagram.html (13318b), assets/showcases/website-devdocs/devdocs-takram.html (13619b), assets/showcases/website-homepage/homepage-build.html (8873b), assets/showcases/website-homepage/homepage-pentagram.html (9088b), assets/showcases/website-homepage/homepage-takram.html (11132b), assets/showcases/website-saas/saas-build.html (13470b), assets/showcases/website-saas/saas-pentagram.html (15661b), assets/showcases/website-saas/saas-takram.html (18816b), assets/templates/business-card.html (5075b), assets/templates/changelog-timeline.html (6117b), assets/templates/compare-vs.html (6753b), assets/templates/dashboard-command-center.html (13055b), assets/templates/hero-landing.html (8155b), assets/templates/INDEX.json (7852b), assets/templates/infographic-vertical.html (5673b), assets/templates/slide-title.html (4373b), assets/templates/social-x-card.html (3895b), assets/templates/templates.schema.json (2563b), CHANGELOG.md (2295b), clawhub.ignore.txt (1036b), clawhub.json (6850b), CONTRIBUTING.md (1306b), demos/c1-ios-prototype-en.html (35636b), demos/c1-ios-prototype.html (35622b), demos/c2-slides-pptx-en.html (33375b), demos/c2-slides-pptx.html (33444b), demos/c3-motion-design-en.html (37512b), demos/c3-motion-design.html (37529b), demos/c4-tweaks-en.html (31575b), demos/c4-tweaks.html (31623b), demos/c5-infographic-en.html (25410b), demos/c5-infographic.html (25292b), demos/c6-expert-review-en.html (26855b), demos/c6-expert-review.html (27295b), demos/hero-animation-v10-en.html (49178b), demos/w1-brand-protocol-en.html (21045b), demos/w1-brand-protocol.html (21378b), demos/w2-junior-designer-en.html (31778b), demos/w2-junior-designer.html (32237b), demos/w3-fallback-advisor-en.html (24217b), demos/w3-fallback-advisor.html (26754b), evals/evals.json (15613b), evals/evals.schema.json (2741b), LICENSE.md (1062b)\n\nFile v2.4.1:SKILL.md\n\n---\nname: ifq-design-skills\ndescription: \"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landing page, whitepaper, changelog, business card, social cover, brand system, design critique, multi-variant exploration, or export planning for MP4, GIF, PPTX, PDF, or SVG. Do not use for production web apps, SEO sites, backend systems, pure copy edits, or isolated CSS bug fixes.\"\nversion: 2.4.1\nlicense: \"MIT\"\nplatforms: [macos, linux]\nentrypoint: SKILL.md\nhomepage: \"https://github.com/peixl/ifq-design-skills\"\nrepository: \"https://github.com/peixl/ifq-design-skills\"\nmetadata: {\"author\":\"ifq.ai\",\"version\":\"2.4.1\",\"category\":\"creative\",\"tags\":[\"design\",\"html\",\"prototype\",\"slides\",\"motion\",\"infographic\",\"dashboard\",\"brand\",\"pptx\",\"pdf\",\"svg\",\"mp4\",\"gif\",\"ifq\"],\"openclaw\":{\"category\":\"creative\",\"summary\":\"HTML-first design engine for prototypes, decks, dashboards, motion, and brand systems. Fork a template, weave the IFQ ambient layer, verify the artifact.\",\"entrypoint\":\"SKILL.md\",\"homepage\":\"https://github.com/peixl/ifq-design-skills\",\"os\":[\"darwin\",\"linux\"],\"requires\":{\"bins\":[\"node\"],\"env\":[],\"config\":[]},\"required_plugins\":[\"filesystem\",\"shell\"],\"optional_plugins\":[\"browser\",\"memory\"],\"permissions\":{\"filesystem\":\"read+write workspace only\",\"shell\":\"workspace Node scripts only\",\"browser\":\"optional outbound HTTPS read\",\"network\":\"optional outbound HTTPS only; no inbound server\"},\"tool_map\":{\"read_file\":\"filesystem/read\",\"write_file\":\"filesystem/write\",\"list_dir\":\"filesystem/list\",\"run_command\":\"shell/exec\",\"web_search\":\"browser/search\",\"web_fetch\":\"browser/fetch\",\"screenshot\":\"browser/screenshot-or-host-tool\"},\"triggers\":[\"prototype\",\"interactive prototype\",\"hi-fi mockup\",\"slide deck\",\"ppt\",\"pptx\",\"dashboard\",\"landing page\",\"whitepaper\",\"infographic\",\"business card\",\"social cover\",\"brand system\",\"design critique\",\"design variants\",\"motion demo\",\"mp4 export plan\",\"gif export plan\",\"原型\",\"幻灯片\",\"信息图\",\"名片\",\"小红书\",\"品牌诊断\",\"3 方向\"],\"quick_commands\":[{\"label\":\"Validate skill health\",\"command\":\"npm run validate\"},{\"label\":\"Validate eval suite\",\"command\":\"npm run evals:validate\"},{\"label\":\"Static HTML check\",\"command\":\"npm run verify:lite -- \"},{\"label\":\"Build ClawHub bundle\",\"command\":\"npm run pack\"}]},\"clawhub\":{\"category\":\"creative\",\"safe\":true,\"network\":\"optional\",\"filesystem\":\"workspace\",\"requires\":{\"bins\":[\"node\"],\"env\":[]},\"capability_signals\":{\"crypto\":false,\"can_make_purchases\":false,\"requires_sensitive_credentials\":false},\"audit\":\"scanner-clean preflight via npm run validate\"},\"hermes\":{\"category\":\"creative\",\"tags\":[\"design\",\"html\",\"prototype\",\"slides\",\"motion\",\"infographic\",\"dashboard\",\"brand\",\"ifq\"]},\"capabilities\":{\"read_files\":true,\"write_files\":true,\"run_shell\":\"workspace-node-scripts-only\",\"network\":\"optional_fact_checks_and_assets_only\",\"dynamic_eval\":false,\"silent_install\":false,\"persistent_background\":false},\"security\":{\"dynamic_eval\":false,\"script_network\":false,\"child_process\":false,\"secrets_in_repo\":false,\"zero_dependencies\":true,\"zero_install_hooks\":true},\"entrypoints\":[\"SKILL.md\",\"references/modes.md\",\"assets/templates/INDEX.json\"],\"compatibility\":[\"openclaw\",\"clawhub\",\"hermes\",\"claude_code\",\"codex_cli\",\"codebuddy\",\"cursor\",\"generic\"]}\n---\n\n# IFQ Design Skills\n\nOne prompt in, a shippable HTML-first visual artifact out. This skill exists to make AI higher leverage: humans speak in goals, agents get a deterministic route, and the final artifact carries proof instead of decoration. This ClawHub-safe root file is intentionally short: it routes the task, states the security contract, and points the agent to deeper references only when needed.\n\n## 30-Second Load Path\n\n1. Confirm the request is a visual deliverable built from HTML. If not, exit this skill.\n2. Pick the mode from [references/modes.md](references/modes.md), then read `modeRoutes` and `templates` in [assets/templates/INDEX.json](assets/templates/INDEX.json).\n3. Fork the routed template into the user's workspace. Never start from a blank HTML file when a listed template can be adapted.\n4. If information is missing but a reversible draft is possible, write labeled assumptions/placeholders and continue. Ask only for facts, assets, permissions, or format decisions that would materially change the output.\n5. Inline [assets/ifq-brand/ifq-tokens.css](assets/ifq-brand/ifq-tokens.css) and weave at least 3 IFQ ambient marks from [references/ifq-brand-spec.md](references/ifq-brand-spec.md).\n6. Verify with the host browser/screenshot tools when available. After editing this skill package, run `npm run validate`.\n\n## Human + Agent Contract\n\n| Audience | Promise |\n|---|---|\n| Human user | Say the goal in ordinary language; receive a concrete HTML-first artifact, the assumptions that shaped it, and the verification evidence. |\n| AI agent | Follow a narrow route: classify mode, fork template, fill with real context, run anti-slop checks, verify, then report caveats without self-congratulation. |\n| Maintainer | Keep the ClawHub bundle zero-install, auditable, and small; keep heavy export automation opt-in in the full GitHub repo. |\n\n## First-Run Success Path\n\nAfter install, make the first interaction produce a visible artifact in one turn:\n\n1. Accept a natural-language prompt such as \"Make a command center dashboard for our internal AI operations.\"\n2. Route it to one mode and one template; name both in the final evidence.\n3. Write the HTML file into the user's workspace with a short assumptions comment for unresolved facts.\n4. Run `npm run verify:lite -- ` when shell is available, and preview or screenshot with the host browser when available.\n5. Report the file path, route, template, verification result, and only the caveats that affect use.\n\nDo not turn first run into setup work. No account login, global install, export dependency, or broad environment change belongs in the ClawHub-safe path.\n\n## Output Boundary\n\n- ClawHub-safe core outputs verified local HTML, SVG/static companion files, and export-ready source structure.\n- MP4/GIF/PDF/PPTX automation is not bundled in the ClawHub-safe package. For those requests, prepare the HTML source and export plan here, then use the full GitHub repo only when the user explicitly wants local automation.\n- Never claim that an export file exists until the corresponding export command has actually run and the file has been inspected.\n\n## Use When\n\n- Interactive prototype, hi-fi mockup, clickable app flow, dashboard, landing page, whitepaper, report, infographic, slide deck, changelog, card, invitation, social cover, or brand system.\n- Motion demo or launch animation, especially when the user also wants export planning for MP4/GIF.\n- Design critique, brand diagnosis, or 3 differentiated style directions before implementation.\n- PDF/PPTX/SVG export is requested from an HTML-first source; the ClawHub bundle prepares export-ready source, while heavy export helpers live in the full GitHub repo.\n\n## Do Not Use When\n\n- The real task is production frontend engineering, backend work, SEO-critical site implementation, or a CSS bug inside an existing app.\n- The user only wants copy editing with no visual artifact.\n- The deliverable must round-trip through Word, Google Docs, or a locked corporate template.\n\n## OpenClaw And ClawHub Contract\n\n- Install/publish through ClawHub: `openclaw skills install ifq-design-skills`; packed bundles are built with `npm run pack`.\n- Discovery metadata is duplicated in this frontmatter and [clawhub.json](clawhub.json) so OpenClaw can read triggers, permissions, `requires`, `os`, and neutral-verb tool mapping without parsing the full manual.\n- Minimum runtime: Node >= 18.17. `metadata.openclaw.requires.bins` declares `node`; required env/config gates are intentionally empty. The ClawHub bundle has zero dependencies, zero install hooks, and no script-side outbound network calls.\n- Permissions are workspace-scoped: filesystem read/write inside the active workspace, shell only for bundled Node scripts, browser only for optional outbound HTTPS reads of facts, fonts, or legal image assets.\n- If browser/network is unavailable, keep the artifact local-first: system fonts, honest placeholders, and no factual claims that require fresh web verification.\n\n## Core Rule 0 · Facts Before Assumptions\n\nFor any concrete product, company, technology, release date, version, person, or spec, fact-check before designing or asserting. Search official or authoritative sources when network is available; if network is blocked, ask the user for sources and mark the fact unresolved. Then follow [references/asset-protocol.md](references/asset-protocol.md) for logo, product image, UI screenshot, color, and typography assets.\n\n## Routing Contract\n\n- Clear visual request: route through [references/modes.md](references/modes.md) and `modeRoutes` in [assets/templates/INDEX.json](assets/templates/INDEX.json).\n- Vague request or no style/context: propose 3 directions using [references/design-styles.md](references/design-styles.md), [references/ifq-native-recipes.md](references/ifq-native-recipes.md), and [references/design-context.md](references/design-context.md).\n- Real brand/product: run [references/asset-protocol.md](references/asset-protocol.md) before color, layout, or hero imagery decisions.\n- App prototype: use [references/ios-prototype.md](references/ios-prototype.md) and the frame assets.\n- Slides/decks: load [references/slide-decks.md](references/slide-decks.md) before writing; use [references/editable-pptx.md](references/editable-pptx.md) only when editable export is requested.\n- Motion/video: load [references/animation-pitfalls.md](references/animation-pitfalls.md), [references/animation-best-practices.md](references/animation-best-practices.md), [references/animations.md](references/animations.md), and [references/video-export.md](references/video-export.md).\n\n## IFQ Ambient Layer\n\n- The user's brand is the subject. IFQ is the authored layer: layout rhythm, warm paper, rust ledger, mono field notes, signal spark, quiet URL, and editorial contrast.\n- Every deliverable uses at least 3 IFQ marks. Do not paste a loud generic watermark unless the task is IFQ-owned or an animation export explicitly calls for a closing credit.\n- Built-in templates use China-safe font loading; see [references/font-loading.md](references/font-loading.md).\n- Avoid visible internal taxonomy labels such as `Signal Spark` or `Rust Ledger` in user-facing designs. Write real content instead.\n\n## Safety Contract\n\n- Root instructions stay scoped to HTML-first visual delivery. Do not ask for unrelated secrets, host config, persistent agents, or background services.\n- Scripts are local-first: no dynamic eval, no child_process, no runtime network calls, no hidden installs, and no writes outside the user's workspace.\n- Required environment variables are intentionally empty. Optional export automation is not bundled here; use the full GitHub repo only after explicit user intent.\n- ClawHub/VirusTotal posture and package hygiene are tracked in [references/clawhub-publishing.md](references/clawhub-publishing.md) and [references/smoke-test.md](references/smoke-test.md).\n\n## Verification Before Delivery\n\n1. Open or preview the generated HTML with the host agent's browser tooling when available.\n2. For app prototypes, click at least one primary path, one tab/screen switch, and one detail or annotation action.\n3. For decks, verify slide count, aspect ratio, and format requirements before any PDF/PPTX handoff; in ClawHub-safe mode, report the export plan rather than pretending the helper ran.\n4. For motion exports, verify timing, audio policy, promotion mark, and final file presence only when the full GitHub repo helper has actually produced the file.\n5. After editing this skill package, run `npm run validate`; before publishing, also run `npm run pack`.\n\n## Reference Map\n\n| Need | Load |\n|---|---|\n| OpenClaw, ClawHub, agent install, tool mapping | [references/agent-compatibility.md](references/agent-compatibility.md), [references/clawhub-publishing.md](references/clawhub-publishing.md), [references/smoke-test.md](references/smoke-test.md) |\n| Marketplace lessons and quality bar | [references/skill-ecosystem-quality.md](references/skill-ecosystem-quality.md) |\n| Mode routing and execution workflow | [references/modes.md](references/modes.md), [references/workflow.md](references/workflow.md), [references/verification.md](references/verification.md) |\n| Facts, brand assets, design context, critique | [references/asset-protocol.md](references/asset-protocol.md), [references/design-context.md](references/design-context.md), [references/critique-guide.md](references/critique-guide.md) |\n| Style direction and anti-slop | [references/design-styles.md](references/design-styles.md), [references/ifq-native-recipes.md](references/ifq-native-recipes.md), [references/content-guidelines.md](references/content-guidelines.md), [references/anti-ai-slop.md](references/anti-ai-slop.md) |\n| React/Babel single-file output and fonts | [references/react-setup.md](references/react-setup.md), [references/font-loading.md](references/font-loading.md) |\n| IFQ identity assets | [references/ifq-brand-spec.md](references/ifq-brand-spec.md), [assets/ifq-brand/BRAND-DNA.md](assets/ifq-brand/BRAND-DNA.md) |\n| App prototypes | [references/ios-prototype.md](references/ios-prototype.md) |\n| Slides and editable PPTX | [references/slide-decks.md](references/slide-decks.md), [references/editable-pptx.md](references/editable-pptx.md) |\n| Motion, video, and audio | [references/animations.md](references/animations.md), [references/animation-best-practices.md](references/animation-best-practices.md), [references/animation-pitfalls.md](references/animation-pitfalls.md), [references/video-export.md](references/video-export.md), [references/audio-design-rules.md](references/audio-design-rules.md), [references/sfx-library.md](references/sfx-library.md) |\n| Scenes, live tweaking, and showcase patterns | [references/scene-templates.md](references/scene-templates.md), [references/tweaks-system.md](references/tweaks-system.md), [references/apple-gallery-showcase.md](references/apple-gallery-showcase.md), [references/hero-animation-case-study.md](references/hero-animation-case-study.md), [references/revolution-gap.md](references/revolution-gap.md) |\n\n## Completion Rule\n\nDeliver the smallest verified artifact that satisfies the request. Report the output file, verification performed, and any caveats. Do not claim export, screenshots, or marketplace safety unless the relevant check actually passed.\n\nFile v2.4.1:README.md\n\n🌐 English · 中文 · ifq.ai / <authored year>\n\n
\n\n\n \n \"ifq.ai\"\n\n\n# IFQ Design Skills\n\n> ClawHub-safe 版本：这里保留模板、references 和前端资产。\n> Playwright 验证、MP4/GIF/PDF/PPTX 导出等本地自动化能力，请使用完整仓库：https://github.com/peixl/ifq-design-skills\nIntelligence, framed quietly.\n\n
\n\n 一句话进。  一份能发出去的页面出来。  做工像 ifq.ai 亲手做的。 \n\n

\n\n[![License](https://img.shields.io/badge/license-MIT-D4532B?style=flat-square&labelColor=111111)](LICENSE.md)\n[![ifq.ai native](https://img.shields.io/badge/ifq.ai-native-111111?style=flat-square)](assets/ifq-brand/BRAND-DNA.md)\n[![ambient brand](https://img.shields.io/badge/ambient_brand-embedded-A83518?style=flat-square&labelColor=111111)](references/ifq-brand-spec.md)\n[![proof first](https://img.shields.io/badge/proof--first-on-111111?style=flat-square)](references/verification.md)\n[![modes](https://img.shields.io/badge/modes-12-D4532B?style=flat-square&labelColor=111111)](references/modes.md)\n\n
\n\n立场  ·  安装  ·  说给它听  ·  一页的解剖  ·  五个标记  ·  12 种模式  ·  六层骨架  ·  验证  ·  许可\n\n
\n\n---\n\n## 立场\n\n大多数 agent 被要求\"做设计\"时，会交出两样东西：**一张过度装饰的 Figma Community 模板**，或者 **一份被 AI 格式化过的 Notion 页面**。都不能发出去。\n\n这个 skill 解决的就是这一件事。它不是配色文件，也不是一张 logo 贴纸。\n\n它是一种 **做工**：把网页当编辑部版面排、把动画当预告片剪、把 PPT 当发布会母版做、把名片当印前 PDF 对齐出血位。\n\nifq.ai 的标识被埋在这份做工里。看第一眼是内容，**第二眼才意识到：这是 ifq.ai 的手感**。\n\n## 给人和 Agent 的承诺\n\n| 对象 | 得到什么 |\n|------|----------|\n| **人类用户** | 只要说目标，不必先写完整 PRD；skill 会把假设、缺口、输出文件和验证证据讲清楚。 |\n| **AI Agent** | 不从空白页乱猜：先路由模式，读 `modeRoutes`，fork 模板，填内容，跑 anti-slop 和验证。 |\n| **维护者** | ClawHub 包保持零依赖、零安装钩子、可审计；重型 MP4/GIF/PDF/PPTX 自动化留在完整 GitHub 仓库。 |\n\n理念很简单：**让 AI 发挥更大效能**。人类负责判断方向和事实，Agent 负责把流程走完整、把证据收齐。\n\n---\n\n## 安装\n\n```bash\n# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n```\n\n> ClawHub 是推荐安装通道。需要本地开发请克隆完整仓库：；ClawHub 打包仓库是 。\n\n装完直接对 agent 说话。skill 自己判断任务、自己路由模式、自己挑模板、自己跑验证。\n\n### 首次运行应该得到什么\n\n第一轮不要变成环境配置。直接说一句设计目标，例如：\n\n```text\n给我们的内部 AI 运营做一个 command center。信息密度高，冷静，不要 BI 套壳。\n```\n\n合格的首次运行会返回 5 个证据：输出 HTML 文件路径、使用的 mode、使用的 template、执行过的验证（`verify:lite` 或浏览器预览）、以及影响使用的 caveat。它不应该要求登录账户、全局安装导出依赖，或改动 OpenClaw 之外的环境。\n\n### 🦞 OpenClaw 首选通道（一行装好即用）\n\n```bash\n# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n\n# 验证并查看能力元数据\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills\n```\n\n**OpenClaw 为什么上手最快**：本 skill 在 frontmatter 的 `metadata.openclaw` 里直接声明了 triggers、permissions、tool_map 和 quick_commands——OpenClaw 装上就知道什么 prompt 该进来、需要哪些插件、每个中性动词对应哪个 OpenClaw 工具。完整映射与排障见 [references/agent-compatibility.md](references/agent-compatibility.md#3--openclaw--clawhub)。\n\n需要的最小权限（OpenClaw 会自动请求）：\n\n- `filesystem`：仅在当前 workspace 读写\n- `shell`：仅运行工作区内的 Node 脚本（`npm run validate` / `npm run pack`）；Playwright / Python 导出辅助在完整 GitHub 仓库中按需使用\n- `browser`：出站 HTTPS 拉 Google Fonts / 图片 CDN（只读，**可降级**）\n\n> **🇨🇳 CN-friendly**：所有产出 HTML 走 [references/font-loading.md](references/font-loading.md) Tier B 非阻塞协议——Google Fonts 被墙 / 离线 / 内网时，自动回退到 `Noto Serif SC / Songti SC / PingFang SC` 等系统字体栈，**首屏不空白、不豆腐块**。需要完全离线可走 Tier A（删掉 Google Fonts link）；需要像素级匹配可走 Tier C（自托管 woff2 子集）。\n\n**其他 agent 一键安装**：\n\n```bash\n# Hermes（Nous Research）\nhermes skills install github:peixl/ifq-design-skills\n\n# Claude Code（personal）\ngit clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Codex CLI（OpenAI）—— 自动识别仓库根的 AGENTS.md\ngit clone https://github.com/peixl/ifq-design-skills ~/.codex/skills/ifq-design-skills\n\n# CodeBuddy（Tencent）\ngit clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills\n\n# 共享给所有 agent（推荐）\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills\n```\n\n### 给 skill 维护者：打包上架 ClawHub\n\n```bash\nnpm run validate # 一分钟体检：模板 · 品牌资产 · ClawHub 清洁度\nnpm run pack # 生成 ../ifq-design-clawhub-YYYY-MM-DD.tar.gz（自动排除 .git/ 等内部文件）\n```\n\n---\n\n## 说给它听\n\n下面是真实的对话。左边是你随口一句，右边是 skill 真正去做的事。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
你说它做
\n\n> 「明天沙龙讲 AI agent 20 分钟，给我一份 deck，不要像 SaaS keynote，要有书卷气。」\n\n\n\nM-08 Keynote · editorial dark · Newsreader 大标题 · rust ledger 竖线分章 · 每页 mono 序号 01 / 20 · 结尾 colophon · ClawHub 交付 HTML deck + 导出计划，完整仓库再出 PPTX/PDF\n\n
\n\n> 「这周 4 个更新，做成纵向 changelog，要像活页笔记，别像公告栏。」\n\n\n\nM-07 Changelog · warm paper · 单根 rust 左轴 · 每条 entry 带 mono 时间戳 · 顶部 release ledger / vol.12 · 全程手绘图标代替 emoji\n\n
\n\n> 「朋友独立咖啡店名片，黑白双面，不要花，要有手工感。」\n\n\n\nM-10 名片 · 85×55mm + 3mm 出血 · 正面一行业务陈述 + spark 小点 · 反面 mono 信息条 · 第三方物料 · 显式 wordmark 关闭 · IFQ 只保留版面节奏 · 输出 SVG/HTML 出血稿，完整仓库再出 PDF\n\n
\n\n> 「24 秒硬件发布片头，冷静，像 Teenage Engineering，不要发布会预热。」\n\n\n\nM-01 Launch Film · 先 3 方向 (matter-of-fact / editorial / kinetic-type) · Stage+Sprite 时间轴 · key shot + spec mono 叠印 + 2s quiet URL 定版 · ClawHub 交付 HTML motion source + keyposter，完整仓库再出 MP4/GIF\n\n
\n\n> 「个人站一页，但不要像找工作。」\n\n\n\nM-02 Portfolio · 先 5 方向 (archive / studio / essay / atlas / ledger) · 选 1 做主，2 做变体画布 · 首屏不放头像，放 currently / writing / building 三栏 · 底部 mono colophon\n\n
\n\n> 「内部 AI 做一个 command center，像 Bloomberg 终端，不要 BI 套壳。」\n\n\n\nM-04 Dashboard · graphite 底 · 12 列 ledger 栅格 · mono 数字 + 极细 rust underline 表趋势 · 顶栏 session / latency / build 三段 · 禁用渐变按钮和卡通色饼图\n\n
\n\n> 「路演要一张 A vs B，我们对三家友商，一眼看出为什么选我们，不许吹。」\n\n\n\nM-05 Compare · 矩阵而非雷达 · 四列等宽 · 每项 ✓ / ● / — 三态 + 小字来源 · 底部 compiled from public docs · ifq.ai · 事实先 WebSearch\n\n
\n\n> 「2026 AI agent 白皮书，50 页内，直接印。」\n\n\n\nM-03 白皮书 · A4 可打印 HTML · 扉页 / 摘要 / 目录 / 章节 / 参考 / colophon 全套 · 每章起首 mono 序号 + 半页留白 · 页脚 ifq.ai / <authored year> · ClawHub 交付 print-ready HTML，完整仓库再出 PDF + 书签\n\n
\n\n> 「视觉有点乱，先别改，先告诉我问题在哪。」\n\n\n\nM-11 品牌诊断 · 不动手 · 一页报告 · 色彩 / 字体 / 节奏 / 母题 / 完成度五维评分 · 每维 before / suggested after 小样 · 三个升级方向，不给结论\n\n
\n\n> 「小红书 6 张封面，新栏目『每周一张图』，克制，但一眼能被认出来。」\n\n\n\nM-09 社媒套件 · 1242×1660 · 左上 mono 栏目章 weekly / 01→06 · 编辑部排版而非大字 emoji · 右下 quiet URL · 6 张封面 + 1 张 OG 横版\n\n
\n\n> 不用记模式编号。说人话，skill 自己路由。\n\n---\n\n## 一页的解剖\n\n一张 hero landing。它看起来很安静。它同时在做 7 件事：\n\n```text\n ┌────────────────────────────────────────────────────────────────────┐\n │ ◇ ifq.ai / live system [01 / 12] │ ← mono field note + 栏位序号\n │ │\n │ │\n │ Intelligence, framed │ ← Newsreader display\n │ quietly. │ italic 判断点\n │ │\n │ A design engine that understands the difference │ ← body serif\n │ between a slide deck and a launch film. │\n │ │\n │ ┃ · ledger │ ← rust ledger 竖线\n │ ┃ │ 承担版面秩序\n │ ┃ 01 mode-aware pipeline │ ← mono 编号行\n │ ┃ 02 ambient brand, not loud branding │\n │ ┃ 03 proof-first export loop │\n │ │\n │ │\n │ ✦ │ ← signal spark\n │ │ 安静点一下\n │ │\n │ compiled by ifq.ai · ifq.ai / 2026 │ ← quiet URL + colophon\n └────────────────────────────────────────────────────────────────────┘\n```\n\n拆开看：\n\n1. **Editorial contrast** — Newsreader serif 配 JetBrains Mono，不是随机字体组合。\n2. **Rust ledger** — 左侧那根竖线就是 ifq.ai 的\"脊\"。比大 logo 更 IFQ。\n3. **Mono field note** — 顶部和底部那行 `ifq.ai / live system`、`ifq.ai / 2026`。\n4. **Quiet URL** — 没有 CTA 咆哮。域名只出现一次，在右下。\n5. **Signal spark** — 右下一颗小火花。整页唯一的图形重音。\n6. **Warm paper** — 背景 `#FAF7F2`，不是 `#FFFFFF`。冷白让版面没有温度。\n7. **Ledger rhythm** — 所有间距走 `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` 这条轴。不凭感觉。\n\n用户不会去数这 7 件事。用户只会说\"这页看起来比较高级\"。\n\n**高级 = 同一只手 = ifq.ai 的 Ambient Brand**。\n\n---\n\n## 五个标记\n\nAmbient Brand 由五个环境级标记组成。每份交付物默认至少融合其中 3 个。\n\n| 标记 | 是什么 | 出现在哪 |\n|------|--------|----------|\n| **Signal Spark** | 8-point 火花。intelligence 被点亮的一瞬 | hero 右上 · 动画开场一帧 · 印章中心 |\n| **Rust Ledger** | 赤陶色竖线、分隔、编号、轴线 | hero · slides · infographic · dashboard |\n| **Mono Field Note** | JetBrains Mono 写的 `ifq.ai / ` 小字 | footer · closing · 角落 |\n| **Quiet URL** | 域名以极低姿态出现一次 | footer · meta · end card |\n| **Editorial Contrast** | Newsreader italic + JetBrains Mono + 暖纸白 | 整体排版骨架 |\n\n这不是装饰元素，是版面语法。\n\n---\n\n## 共品牌\n\n| 场景 | IFQ 在哪里 |\n|------|------------|\n| **IFQ 自有物料**（ifq.ai 及子产品） | 全员到齐：wordmark · spark · field note · quiet URL 都可上台 |\n| **第三方 / 客户物料** | 主品牌在前。IFQ 退到 authored layer：版面节奏、色温、colophon、手绘图标、导出完成度 |\n| **客户要求 white-label** | 去掉显式 wordmark 和 field note。保留 editorial contrast、ledger 节奏、proof-first 做工 |\n\n**IFQ 可以隐身，不能不在场**。做工本身就是标识。\n\n---\n\n## 12 种模式\n\n| # | 模式 | 典型触发 | 交付 |\n|---|------|----------|------|\n| M-01 | Launch Film | 发布动画 · 产品宣传片 | 25–40s 动画 + keyposter + 社媒套件 |\n| M-02 | Portfolio | portfolio · 个人站 · about | 单页站 + 5 方向变体 |\n| M-03 | 白皮书 | 白皮书 · 年报 · 研究 PDF | A4 可打印 HTML；PDF 为完整仓库增强 |\n| M-04 | Dashboard | 数据看板 · KPI · 监控台 | 高密度 dashboard |\n| M-05 | Compare | A vs B · 横评 · benchmark | 对比矩阵 + 事实来源 |\n| M-06 | Onboarding | 新手引导 · flow demo | 3–5 屏交互流 |\n| M-07 | Changelog | release notes · 发布日记 | 纵向时间线 |\n| M-08 | Keynote | 演讲 PPT · 母版 | HTML deck；PPTX/PDF 为完整仓库增强 |\n| M-09 | Social Kit | 小红书 · 朋友圈 · OG 卡 | 多尺寸静态物料 |\n| M-10 | 名片 / 邀请函 | 名片 · VIP 卡 · 请柬 | SVG/HTML 出血稿；PDF 为完整仓库增强 |\n| M-11 | 品牌诊断 | 体检 · 升级建议 | 诊断报告 + 3 方向 |\n| M-12 | 全栈品牌 | brand from scratch | logo + 色板 + 字体 + 6 应用 |\n\n路由：**模式触发 → 设计方向顾问 fallback → Junior Designer 主干**。\n\n完整协议：[references/modes.md](references/modes.md)。\n\n---\n\n## 六层骨架\n\n这个 skill 像 IFQ，不是因为颜色，而是因为下面 6 层同时工作：\n\n| 层 | 做什么 | 关键文件 |\n|----|--------|----------|\n| **01 · Context Engine** | 从上下文长设计，不从白纸瞎猜 | [design-context.md](references/design-context.md) |\n| **02 · Asset Protocol** | 动视觉前先抓事实 / logo / 产品图 / UI | [asset-protocol.md](references/asset-protocol.md) · [workflow.md](references/workflow.md) |\n| **03 · House Marks** | 把 5 个 ambient 标记写进版面 | [ifq-brand-spec.md](references/ifq-brand-spec.md) · [assets/ifq-brand/](assets/ifq-brand/) |\n| **04 · Style Recipes** | 风格靠配方和 scene template 组织 | [design-styles.md](references/design-styles.md) · [ifq-native-recipes.md](references/ifq-native-recipes.md) |\n| **05 · Output Compiler** | ClawHub 版保留 HTML-first 核心；MP4 / GIF / PPTX / PDF 导出在完整 GitHub 仓库中 opt-in | [scripts/](scripts/) |\n| **06 · Proof Loop** | validate + pack + 宿主浏览器截图；深度导出核对在完整 GitHub 仓库中完成 | [verification.md](references/verification.md) · [smoke-test.mjs](scripts/smoke-test.mjs) |\n\n```text\nifq-design-skills/\n├── SKILL.md # 短路由器：触发边界 · 安全契约 · reference map\n├── assets/\n│ ├── ifq-brand/ # logo · sparkle · tokens · BRAND-DNA\n│ └── templates/ # 已内嵌 ambient marks 的可 fork 模板\n├── references/ # 方法论 · 模式手册 · 验证 · 风格配方 · 宪章\n├── scripts/ # ClawHub-safe smoke / pack（深度导出在完整 GitHub 仓库）\n└── demos/ # 示例产物\n```\n\n---\n\n## 验证\n\n```bash\nnpm run validate\nnpm run evals:validate\nnpm run verify:lite -- path/to/artifact.html\nnpm run pack\n```\n\n一分钟内给出 skill 体检：模板索引 · IFQ brand toolkit · references 路由 · 12 模式 evals · ClawHub manifest · package 安全 · 脚本安全 · secret hygiene · 字体加载 · 默认模板远程 runtime。\n\n单件作品优先走宿主浏览器截图 + 可点击验证；完整仓库环境再跑 Playwright 和导出格式核对。详见 [references/verification.md](references/verification.md)。\n\n---\n\n## 许可\n\nMIT 开源许可见 [LICENSE.md](LICENSE.md)。IFQ 名称、logo 与项目标识使用边界见 [NOTICE.md](NOTICE.md)。\n\n---\n\n
\n\ncompiled by ifq.ai  ·  field note  ·  2026\n\n\n
\n\nFile v2.4.1:_meta.json\n\n{\n \"ownerId\": \"kn773bqttn3cqgx01s874fcty1826nxe\",\n \"slug\": \"ifq-design-skills\",\n \"version\": \"2.4.1\",\n \"publishedAt\": 1777429404767\n}\n\nFile v2.4.1:references/agent-compatibility.md\n\n# Agent Compatibility Matrix\n\n> How to mount and run `ifq-design-skills` across every major agent runtime. The skill follows the **Anthropic Agent Skills** convention and adds Hermes and ClawHub metadata blocks without breaking any runtime. ClawHub is the recommended install channel; GitHub installs are for local development and non-OpenClaw runtimes.\n\nThe skill itself uses neutral verbs (`read file`, `write file`, `run command`, `web search`, `take screenshot`). This file maps those verbs to each runtime's actual tool surface and documents install paths and slash commands.\n\n## Universal prerequisites — ClawHub-safe default is zero-install\n\n```\nTier 0 · ClawHub-safe core\n Node ≥ 18.17 # npm run validate / npm run pack\n filesystem + shell # workspace-scoped only\n\nTier 1 · Optional browser context\n browser/web_fetch # facts, assets, screenshots in host agent\n\nTier 2 · Full GitHub repo only\n Python / Playwright / ffmpeg / pptxgenjs / pdf-lib / sharp\n # used for deep screenshots, MP4/GIF, PDF, and PPTX automation\n```\n\nThe ClawHub-safe bundle intentionally ships with no dependency tree and no install hooks. Use the full GitHub repo only when a task explicitly needs local export automation.\n\n## Recommended install path — ClawHub first\n\n```bash\nopenclaw skills install ifq-design-skills\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills\n```\n\n## Shared local development path\n\nHermes documents `~/.agents/skills/` as the cross-tool shared external directory. Install there once and every agent below can point at the same copy.\n\n```bash\nmkdir -p ~/.agents/skills\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills\n```\n\nEach agent's section below shows how to register that shared path or install an independent copy.\n\n---\n\n## 1 · Claude Code (Anthropic)\n\nClaude Code honors the Anthropic Agent Skills spec natively. Mount at either path:\n\n```bash\n# Personal (visible only to you)\nln -s ~/.agents/skills/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Project-scoped (checked into the repo)\nln -s ~/.agents/skills/ifq-design-skills .claude/skills/ifq-design-skills\n```\n\n**Discovery** is automatic. Claude Code scans `~/.claude/skills/` and `.claude/skills/`, loads the frontmatter (`name`, `description`) into the system prompt, and reads `SKILL.md` only when the description matches the user request.\n\n| Neutral verb | Claude Code tool |\n|---|---|\n| read file | `Read` |\n| write file | `Write`, `Edit` |\n| run command | `Bash` |\n| web search | `WebSearch`, `WebFetch` |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\nNo config changes required.\n\n---\n\n## 2 · Hermes (Nous Research)\n\nHermes is the most feature-rich runtime. It understands the extended frontmatter (`platforms`, `metadata.hermes`, `fallback_for_toolsets`, `required_environment_variables`, `config`) and ships a fully integrated skills hub.\n\n### Install — three equivalent routes\n\n```bash\n# Route A — direct GitHub install via the Hermes skills hub\nhermes skills install github:peixl/ifq-design-skills\n\n# Route B — via ClawHub marketplace\nhermes skills install clawhub:peixl/ifq-design-skills\n\n# Route C — point Hermes at the shared external dir\n# edit ~/.hermes/config.yaml:\n# skills:\n# external_dirs:\n# - ~/.agents/skills\n```\n\n### Slash commands (CLI and every messaging surface)\n\n```\n/ifq-design-skills make a 12-slide editorial keynote about AI agents\n/ifq-design-skills design a dashboard for the quarterly launch review\n/ifq-design-skills critique this landing page and propose 3 directions\n/ifq-design-skills # loads the skill, asks what you need\n```\n\n### Progressive disclosure (native)\n\nHermes loads this skill in three levels, following the Anthropic Agent Skills progressive-disclosure convention:\n\n- **Level 0** — `skills_list()` returns `{name, description, category}` (~3 k tokens total)\n- **Level 1** — `skill_view(\"ifq-design-skills\")` returns the full `SKILL.md`\n- **Level 2** — `skill_view(\"ifq-design-skills\", \"references/modes.md\")` pulls one reference on demand\n\n### Tool mapping\n\n| Neutral verb | Hermes tool |\n|---|---|\n| read file | `file.read`, `skill_view` |\n| write file | `file.write` |\n| run command | `terminal.run`, `execute_code` |\n| web search | `web.search`, `web.fetch` (or `duckduckgo_search` fallback) |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\n### Conditional activation\n\nThis skill does not declare `fallback_for_toolsets` because design output is its primary job, not a fallback. If browser, `ffmpeg`, or Chromium are unavailable, the ClawHub-safe bundle stays in HTML-only mode; export automation belongs to the full GitHub repo.\n\n### Agent-managed patches\n\nWhen the Hermes agent discovers a non-trivial workflow while using this skill, it can patch the skill via the `skill_manage` tool:\n\n```\nskill_manage action=patch name=ifq-design-skills \\\n old_string=\"...\" new_string=\"...\"\n```\n\nPrefer `patch` over `edit` for small fixes — it is more token-efficient.\n\n### Reset after manual edits\n\nIf you hand-edit the installed copy and later want to restore the pristine version:\n\n```bash\nhermes skills reset ifq-design-skills --restore\n```\n\n---\n\n## 3 · OpenClaw + ClawHub\n\nOpenClaw (2026.4+) has a first-class plugin system; [ClawHub](https://clawhub.ai) is its marketplace. Hermes also integrates ClawHub as a source.\n\nThis skill ships a dedicated `metadata.openclaw` block in `SKILL.md` frontmatter plus a root-level [`clawhub.json`](../clawhub.json) manifest, so OpenClaw gets triggers, permissions, and the neutral-verb → tool crosswalk automatically.\n\n### Install\n\n```bash\n# Route A — via ClawHub marketplace (recommended)\nopenclaw skills install ifq-design-skills\n\n# Route B — symlink the shared agents dir\nln -s ~/.agents/skills/ifq-design-skills ~/.opencl\n\nArchive v2.4.0: 124 files, 531796 bytes\n\nFiles: AGENTS.md (4546b), assets/android_frame.jsx (4506b), assets/animations.jsx (10079b), assets/banner.svg (9503b), assets/browser_window.jsx (3975b), assets/deck_index.html (8145b), assets/deck_stage.js (11678b), assets/design_canvas.jsx (5195b), assets/ifq-brand/BRAND-DNA.md (3245b), assets/ifq-brand/icons/hand-drawn-icons.svg (7404b), assets/ifq-brand/ifq_authored_year.js (5697b), assets/ifq-brand/ifq_brand.jsx (9448b), assets/ifq-brand/ifq-tokens.css (4512b), assets/ifq-brand/logo-white.svg (818b), assets/ifq-brand/logo.svg (1261b), assets/ifq-brand/mark.svg (732b), assets/ios_frame.jsx (4753b), assets/macos_window.jsx (2536b), assets/personal-asset-index.example.json (1924b), assets/showcases/cover/cover-build.html (6216b), assets/showcases/cover/cover-pentagram.html (5022b), assets/showcases/cover/cover-takram.html (12409b), assets/showcases/INDEX.md (5958b), assets/showcases/infographic/infographic-build.html (12248b), assets/showcases/infographic/infographic-pentagram.html (14019b), assets/showcases/infographic/infographic-takram.html (22990b), assets/showcases/ppt/ppt-build.html (9635b), assets/showcases/ppt/ppt-pentagram.html (12063b), assets/showcases/ppt/ppt-takram.html (16246b), assets/showcases/website-ai-nav/ainav-build.html (10130b), assets/showcases/website-ai-nav/ainav-pentagram.html (11104b), assets/showcases/website-ai-nav/ainav-takram.html (13294b), assets/showcases/website-ai-writing/aiwriting-build.html (14625b), assets/showcases/website-ai-writing/aiwriting-pentagram.html (14823b), assets/showcases/website-ai-writing/aiwriting-takram.html (18596b), assets/showcases/website-devdocs/devdocs-build.html (10407b), assets/showcases/website-devdocs/devdocs-pentagram.html (13318b), assets/showcases/website-devdocs/devdocs-takram.html (13619b), assets/showcases/website-homepage/homepage-build.html (8873b), assets/showcases/website-homepage/homepage-pentagram.html (9088b), assets/showcases/website-homepage/homepage-takram.html (11132b), assets/showcases/website-saas/saas-build.html (13470b), assets/showcases/website-saas/saas-pentagram.html (15661b), assets/showcases/website-saas/saas-takram.html (18816b), assets/templates/business-card.html (5075b), assets/templates/changelog-timeline.html (6117b), assets/templates/compare-vs.html (6753b), assets/templates/dashboard-command-center.html (13055b), assets/templates/hero-landing.html (8155b), assets/templates/INDEX.json (7828b), assets/templates/infographic-vertical.html (5673b), assets/templates/slide-title.html (4373b), assets/templates/social-x-card.html (3895b), assets/templates/templates.schema.json (2563b), CHANGELOG.md (1586b), clawhub.ignore.txt (1036b), clawhub.json (4449b), CONTRIBUTING.md (1306b), demos/c1-ios-prototype-en.html (35636b), demos/c1-ios-prototype.html (35622b), demos/c2-slides-pptx-en.html (33375b), demos/c2-slides-pptx.html (33444b), demos/c3-motion-design-en.html (37512b), demos/c3-motion-design.html (37529b), demos/c4-tweaks-en.html (31575b), demos/c4-tweaks.html (31623b), demos/c5-infographic-en.html (25410b), demos/c5-infographic.html (25292b), demos/c6-expert-review-en.html (26855b), demos/c6-expert-review.html (27295b), demos/hero-animation-v10-en.html (49178b), demos/w1-brand-protocol-en.html (21045b), demos/w1-brand-protocol.html (21378b), demos/w2-junior-designer-en.html (31778b), demos/w2-junior-designer.html (32237b), demos/w3-fallback-advisor-en.html (24217b), demos/w3-fallback-advisor.html (26754b), evals/evals.json (15100b), LICENSE.md (1062b), NOTICE.md (459b)\n\nArchive v2.3.9: 114 files, 507934 bytes\n\nFiles: AGENTS.md (4350b), assets/android_frame.jsx (4506b), assets/animations.jsx (10079b), assets/banner.svg (9503b), assets/browser_window.jsx (3975b), assets/deck_index.html (8145b), assets/deck_stage.js (11678b), assets/design_canvas.jsx (5195b), assets/ifq-brand/BRAND-DNA.md (3245b), assets/ifq-brand/icons/hand-drawn-icons.svg (7404b), assets/ifq-brand/ifq_authored_year.js (5697b), assets/ifq-brand/ifq_brand.jsx (9448b), assets/ifq-brand/ifq-tokens.css (4512b), assets/ifq-brand/logo-white.svg (818b), assets/ifq-brand/logo.svg (1261b), assets/ifq-brand/mark.svg (732b), assets/ios_frame.jsx (4753b), assets/macos_window.jsx (2536b), assets/personal-asset-index.example.json (1924b), assets/showcases/cover/cover-build.html (6216b), assets/showcases/cover/cover-pentagram.html (5022b), assets/showcases/cover/cover-takram.html (12409b), assets/showcases/INDEX.md (5764b), assets/showcases/infographic/infographic-build.html (12248b), assets/showcases/infographic/infographic-pentagram.html (14019b), assets/showcases/infographic/infographic-takram.html (22990b), assets/showcases/ppt/ppt-build.html (9635b), assets/showcases/ppt/ppt-pentagram.html (12063b), assets/showcases/ppt/ppt-takram.html (16246b), assets/showcases/website-ai-nav/ainav-build.html (10130b), assets/showcases/website-ai-nav/ainav-pentagram.html (11104b), assets/showcases/website-ai-nav/ainav-takram.html (13294b), assets/showcases/website-ai-writing/aiwriting-build.html (14625b), assets/showcases/website-ai-writing/aiwriting-pentagram.html (14823b), assets/showcases/website-ai-writing/aiwriting-takram.html (18596b), assets/showcases/website-devdocs/devdocs-build.html (10407b), assets/showcases/website-devdocs/devdocs-pentagram.html (13318b), assets/showcases/website-devdocs/devdocs-t...","readmeExcerpt":"Skill: IFQ Design Skills Owner: peixl Summary: Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Tags: latest:2.4.3 Version history: v2.4.3 | 2026-04-29T06:34:36.807Z | user Version 2.4.3 - Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"User prompt contains:\n├─ \"prototype\" / \"app\" / \"onboarding\" / \"flow\" → M-06 (T-onboarding)\n├─ \"dashboard\" / \"KPI\" / \"monitor\" / \"command center\" → M-04 (T-dashboard)\n├─ \"slides\" / \"deck\" / \"keynote\" / \"PPT\" → M-08 (T-slide-title)\n├─ \"portfolio\" / \"personal site\" / \"about me\" → M-02 (T-portfolio)\n├─ \"changelog\" / \"release notes\" / \"版本记录\" → M-07 (T-changelog)\n├─ \"whitepaper\" / \"report\" / \"PDF\" / \"年报\" → M-03 (T-infographic-vertical)\n├─ \"compare\" / \"vs\" / \"benchmark\" / \"横评\" → M-05 (T-compare-vs)\n├─ \"social\" / \"小红书\" / \"cover\" / \"社媒\" → M-09 (T-social-multi)\n├─ \"card\" / \"名片\" / \"invite\" / \"VIP\" → M-10 (T-business-card)\n├─ \"brand audit\" / \"diagnosis\" / \"体检\" / \"升级\" → M-11 (T-diagnosis)\n├─ \"brand from scratch\" / \"全栈品牌\" / \"新品牌\" → M-12 (T-hero-landing)\n├─ \"launch\" / \"animation\" / \"motion\" / \"film\" → M-01 (T-hero-landing)\n└─ vague / multiple matches / \"做设计\" → propose 3 directions first"},{"language":"bash","snippet":"# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills"},{"language":"text","snippet":"给我们的内部 AI 运营做一个 command center。信息密度高，冷静，不要 BI 套壳。"},{"language":"bash","snippet":"# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n\n# 验证并查看能力元数据\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills"},{"language":"bash","snippet":"# Hermes（Nous Research）\nhermes skills install github:peixl/ifq-design-skills\n\n# Claude Code（personal）\ngit clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Codex CLI（OpenAI）—— 自动识别仓库根的 AGENTS.md\ngit clone https://github.com/peixl/ifq-design-skills ~/.codex/skills/ifq-design-skills\n\n# CodeBuddy（Tencent）\ngit clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills\n\n# 共享给所有 agent（推荐）\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills"},{"language":"bash","snippet":"npm run validate # 一分钟体检：模板 · 品牌资产 · ClawHub 清洁度\nnpm run pack # 生成 ../ifq-design-clawhub-YYYY-MM-DD.tar.gz（自动排除 .git/ 等内部文件）"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: ifq-design-skills\ndescription: \"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landing page, whitepaper, changelog, business card, social cover, brand system, design critique, multi-variant exploration, or export planning for MP4, GIF, PPTX, PDF, or SVG. Do not use for production web apps, SEO sites, backend systems, pure copy edits, or isolated CSS bug fixes.\"\nversion: 2.4.3\nlicense: \"MIT\"\nplatforms: [macos, linux, windows]\nentrypoint: SKILL.md\nhomepage: \"https://github.com/peixl/ifq-design-skills\"\nrepository: \"https://github.com/peixl/ifq-design-skills\"\nmetadata: {\"author\":\"ifq.ai\",\"version\":\"2.4.3\",\"category\":\"creative\",\"tags\":[\"design\",\"html\",\"prototype\",\"slides\",\"motion\",\"infographic\",\"dashboard\",\"brand\",\"pptx\",\"pdf\",\"svg\",\"mp4\",\"gif\",\"ifq\"],\"openclaw\":{\"skillKey\":\"ifq-design-skills\",\"category\":\"creative\",\"summary\":\"HTML-first design engine for prototypes, decks, dashboards, motion, and brand systems. Fork a template, weave the IFQ ambient layer, verify the artifact.\",\"entrypoint\":\"SKILL.md\",\"homepage\":\"https://github.com/peixl/ifq-design-skills\",\"os\":[\"darwin\",\"linux\",\"win32\"],\"requires\":{\"bins\":[\"node\"],\"env\":[],\"config\":[]},\"required_plugins\":[\"filesystem\",\"shell\"],\"optional_plugins\":[\"browser\",\"memory\"],\"permissions\":{\"filesystem\":\"read+write workspace only\",\"shell\":\"workspace Node scripts only\",\"browser\":\"optional outbound HTTPS read\",\"network\":\"optional outbound HTTPS only; no inbound server\"},\"tool_map\":{\"read_file\":\"filesystem/read\",\"write_file\":\"filesystem/write\",\"list_dir\":\"filesystem/list\",\"run_command\":\"shell/exec\",\"web_search\":\"browser/search\",\"web_fetch\":\"browser/fetch\",\"screenshot\":\"browser/screenshot-or-host-tool\"},\"triggers\":[\"prototype\",\"interactive prototype\",\"hi-fi mockup\",\"slide deck\",\"ppt\",\"pptx\",\"dashboard\",\"landing page\",\"whitepaper\",\"infographic\",\"business card\",\"social cover\",\"brand system\",\"design critique\",\"design variants\",\"motion demo\",\"mp4 export plan\",\"gif export plan\",\"原型\",\"幻灯片\",\"信息图\",\"名片\",\"小红书\",\"品牌诊断\",\"3 方向\",\"portfolio\",\"onboarding\",\"brand-diagnosis\",\"changelog\"],\"quick_commands\":[{\"label\":\"Validate skill health\",\"command\":\"npm run validate\"},{\"label\":\"Validate eval suite\",\"command\":\"npm run evals:validate\"},{\"label\":\"Static HTML check\",\"command\":\"npm run verify:lite -- \"},{\"label\":\"Build ClawHub bundle\",\"command\":\"npm run pack\"},{\"label\":\"Anti-slop preflight\",\"command\":\"npm run anti-slop -- \"}]},\"clawhub\":{\"category\":\"creative\",\"safe\":true,\"network\":\"optional\",\"filesystem\":\"workspace\",\"requires\":{\"bins\":[\"node\"],\"env\":[]},\"capability_signals\":{\"crypto\":false,\"can_make_purchases\":false,\"requires_sensitive_credentials\":false},\"audit\":\"scanner-clean preflight via npm run validate\",\"security_scan\":{\"posture\":\"scanner-clean\",\"deny_list_rules\":18,\"secret_patterns\":5,\"bundle_integrity\":\"deterministic tarball via node:zlib\"}},\"hermes\":{\"category\":\"creative\",\"tags\":[\"design\",\"html\","},{"path":"README.md","content":"🌐 English · 中文 · ifq.ai / <authored year>\n\n
\n\n\n \n \"ifq.ai\"\n\n\n# IFQ Design Skills\n\n> ClawHub-safe 版本：这里保留模板、references 和前端资产。\n> Playwright 验证、MP4/GIF/PDF/PPTX 导出等本地自动化能力，请使用完整仓库：https://github.com/peixl/ifq-design-skills\nIntelligence, framed quietly.\n\n
\n\n 一句话进。  一份能发出去的页面出来。  做工像 ifq.ai 亲手做的。 \n\n

\n\n[![License](https://img.shields.io/badge/license-MIT-D4532B?style=flat-square&labelColor=111111)](LICENSE.md)\n[![ifq.ai native](https://img.shields.io/badge/ifq.ai-native-111111?style=flat-square)](assets/ifq-brand/BRAND-DNA.md)\n[![ambient brand](https://img.shields.io/badge/ambient_brand-embedded-A83518?style=flat-square&labelColor=111111)](references/ifq-brand-spec.md)\n[![proof first](https://img.shields.io/badge/proof--first-on-111111?style=flat-square)](references/verification.md)\n[![modes](https://img.shields.io/badge/modes-12-D4532B?style=flat-square&labelColor=111111)](references/modes.md)\n[![templates](https://img.shields.io/badge/templates-12-A83518?style=flat-square&labelColor=111111)](assets/templates/GALLERY.html)\n[![anti-slop](https://img.shields.io/badge/anti--slop-preflight-D4532B?style=flat-square&labelColor=111111)](references/anti-ai-slop.md)\n\n
\n\n立场  ·  安装  ·  说给它听  ·  一页的解剖  ·  五个标记  ·  12 种模式  ·  12 个模板  ·  六层骨架  ·  验证  ·  许可\n\n
\n\n---\n\n## 立场\n\n大多数 agent 被要求\"做设计\"时，会交出两样东西：**一张过度装饰的 Figma Community 模板**，或者 **一份被 AI 格式化过的 Notion 页面**。都不能发出去。\n\n这个 skill 解决的就是这一件事。它不是配色文件，也不是一张 logo 贴纸。\n\n它是一种 **做工**：把网页当编辑部版面排、把动画当预告片剪、把 PPT 当发布会母版做、把名片当印前 PDF 对齐出血位。\n\nifq.ai 的标识被埋在这份做工里。看第一眼是内容，**第二眼才意识到：这是 ifq.ai 的手感**。\n\n## 给人和 Agent 的承诺\n\n| 对象 | 得到什么 |\n|------|----------|\n| **人类用户** | 只要说目标，不必先写完整 PRD；skill 会把假设、缺口、输出文件和验证证据讲清楚。 |\n| **AI Agent** | 不从空白页乱猜：先路由模式，读 `modeRoutes`，fork 模板，填内容，跑 anti-slop 和验证。 |\n| **维护者** | ClawHub 包保持零依赖、零安装钩子、可审计；重型 MP4/GIF/PDF/PPTX 自动化留在完整 GitHub 仓库。 |\n\n理念很简单：**让 AI 发挥更大效能**。人类负责判断方向和事实，Agent 负责把流程走完整、把证据收齐。\n\n---\n\n## 安装\n\n```bash\n# 从 ClawHub 安装（推荐）\nopenclaw skills install ifq-design-skills\n```\n\n> ClawHub 是推荐安装通道。需要本地开发请克隆完整仓库：；ClawHub 打包仓库是 。\n\n装完直接对 agent 说话。skill 自己判断任务、自己路由模式、自己挑模板、自己跑验证。\n\n### 首次运行应该得到什么\n\n第一轮不要变成环境配置。直接说一句设计目标，例如：\n\n```text\n给我们的内部 AI 运营做一个 command center。信息密度高，冷静，不要 BI 套壳。\n```\n\n合格的首次运行会返回 6 个证据：输出 HTML 文件路径、使用的 mode、使用的 template、写入的假设、执行过的验证（`verify:lite` 或浏览器预览）、以及影响使用的 caveat。它不应该要求登录账户、全局安装导出依赖，或改动 OpenClaw 之外的环境。\n\n### 为什么它适合冲 ClawHub Top 10\n\nClawHub 上真正会被反复安装的 skill 通常不是\"什么都能做\"，而是**一个场景讲得很清楚、第一次使用马上有结果、安全边界让人放心**。IFQ Design Skills 把这个增长飞轮写进了包里：\n\n| 转化信号 | 这里怎么做到 |\n|---|---|\n| 一眼知道用途 | 只承诺 HTML-first 视觉产物"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn773bqttn3cqgx01s874fcty1826nxe\",\n \"slug\": \"ifq-design-skills\",\n \"version\": \"2.4.3\",\n \"publishedAt\": 1777444476807\n}"},{"path":"references/agent-compatibility.md","content":"# Agent Compatibility Matrix\n\n> How to mount and run `ifq-design-skills` across every major agent runtime. The skill follows the **Anthropic Agent Skills** convention and adds Hermes and ClawHub metadata blocks without breaking any runtime. ClawHub is the recommended install channel; GitHub installs are for local development and non-OpenClaw runtimes.\n\nThe skill itself uses neutral verbs (`read file`, `write file`, `run command`, `web search`, `take screenshot`). This file maps those verbs to each runtime's actual tool surface and documents install paths and slash commands.\n\n## Universal prerequisites — ClawHub-safe default is zero-install\n\n```\nTier 0 · ClawHub-safe core\n Node ≥ 18.17 # npm run validate / npm run pack\n filesystem + shell # workspace-scoped only\n\nTier 1 · Optional browser context\n browser/web_fetch # facts, assets, screenshots in host agent\n\nTier 2 · Full GitHub repo only\n Python / Playwright / ffmpeg / pptxgenjs / pdf-lib / sharp\n # used for deep screenshots, MP4/GIF, PDF, and PPTX automation\n```\n\nThe ClawHub-safe bundle intentionally ships with no dependency tree and no install hooks. Use the full GitHub repo only when a task explicitly needs local export automation.\n\n## Recommended install path — ClawHub first\n\n```bash\nopenclaw skills install ifq-design-skills\nopenclaw skills info ifq-design-skills\nopenclaw skills check ifq-design-skills\n```\n\n## Shared local development path\n\nHermes documents `~/.agents/skills/` as the cross-tool shared external directory. Install there once and every agent below can point at the same copy.\n\n```bash\nmkdir -p ~/.agents/skills\ngit clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills\n```\n\nEach agent's section below shows how to register that shared path or install an independent copy.\n\n---\n\n## 1 · Claude Code (Anthropic)\n\nClaude Code honors the Anthropic Agent Skills spec natively. Mount at either path:\n\n```bash\n# Personal (visible only to you)\nln -s ~/.agents/skills/ifq-design-skills ~/.claude/skills/ifq-design-skills\n\n# Project-scoped (checked into the repo)\nln -s ~/.agents/skills/ifq-design-skills .claude/skills/ifq-design-skills\n```\n\n**Discovery** is automatic. Claude Code scans `~/.claude/skills/` and `.claude/skills/`, loads the frontmatter (`name`, `description`) into the system prompt, and reads `SKILL.md` only when the description matches the user request.\n\n| Neutral verb | Claude Code tool |\n|---|---|\n| read file | `Read` |\n| write file | `Write`, `Edit` |\n| run command | `Bash` |\n| web search | `WebSearch`, `WebFetch` |\n| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |\n\nNo config changes required.\n\n---\n\n## 2 · Hermes (Nous Research)\n\nHermes is the most feature-rich runtime. It understands the extended frontmatter (`platforms`, `metadata.hermes`, `fallback_for_toolsets`, `required_environment_variables`, `config`) and ships a fully integrated skills hub.\n\n#"},{"path":"references/animation-best-practices.md","content":"# Animation Best Practices · 正向动画设计语法\n\n> 基于当代顶级产品动画（Apple Keynote / Anthropic 产品发布动画 / Field.io 运动诗学）\n> 的深度拆解，提炼出的「电影级产品动画」设计规则，由 ifq.ai 设计团队沉淀。\n>\n> 配套 `animation-pitfalls.md`（避坑清单）使用——本文件是「**应该这样做**」，\n> pitfalls 是「**不要这样做**」，两者正交，都要读。\n>\n> **约束声明**：本文件只收录**运动逻辑和表达风格**，**不引入任何品牌色具体色值**。\n> 色彩决策走 [`asset-protocol.md`](asset-protocol.md)（从品牌 spec 抽取）或 3 方向顾问流程\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，每个代表一段"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Skill: IFQ Design Skills Owner: peixl Summary: Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Tags: latest:2.4.3 Version history: v2.4.3 | 2026-04-29T06:34:36.807Z | user Version 2.4.3 - Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1782,"uniquenessScore":45,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T04:24:29.091Z","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-11T04:24:29.091Z","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-11T07:42:59.271Z","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"}]}}}