--- name: ifq-design-skills description: "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." version: 2.3.9 license: "See LICENSE" platforms: [macos, linux] entrypoint: SKILL.md homepage: "https://github.com/peixl/ifq-design-skills" repository: "https://github.com/peixl/ifq-design-skills" metadata: {"author":"ifq.ai","version":"2.3.9","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","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":"host browser or full repo helper"},"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","gif export","原型","幻灯片","信息图","名片","小红书","品牌诊断","3 方向"],"quick_commands":[{"label":"Validate skill health","command":"npm run validate"},{"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"]} --- # IFQ Design Skills One prompt in, a shippable HTML-first visual artifact out. 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. ## 30-Second Load Path 1. Confirm the request is a visual deliverable built from HTML. If not, exit this skill. 2. Pick the mode from [references/modes.md](references/modes.md), then read [assets/templates/INDEX.json](assets/templates/INDEX.json). 3. Fork a listed template into the user's workspace. Never start from a blank HTML file. 4. 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). 5. Verify with the host browser/screenshot tools when available. After editing this skill package, run `npm run validate`. ## Use When - Interactive prototype, hi-fi mockup, clickable app flow, dashboard, landing page, whitepaper, report, infographic, slide deck, changelog, card, invitation, social cover, or brand system. - Motion demo or launch animation, especially when the user also wants export planning for MP4/GIF. - Design critique, brand diagnosis, or 3 differentiated style directions before implementation. - PDF/PPTX/SVG export is requested from an HTML-first source; the ClawHub bundle plans and prepares, while heavy export helpers live in the full GitHub repo. ## Do Not Use When - The real task is production frontend engineering, backend work, SEO-critical site implementation, or a CSS bug inside an existing app. - The user only wants copy editing with no visual artifact. - The deliverable must round-trip through Word, Google Docs, or a locked corporate template. ## OpenClaw And ClawHub Contract - Install/publish through ClawHub: `openclaw skills install ifq-design-skills`; packed bundles are built with `npm run pack`. - Discovery metadata is duplicated in this frontmatter and [clawhub.json](clawhub.json) so OpenClaw can read triggers, permissions, and neutral-verb tool mapping without parsing the full manual. - Minimum runtime: Node >= 18.17. The ClawHub bundle has zero dependencies, zero install hooks, and no script-side outbound network calls. - 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. - If browser/network is unavailable, keep the artifact local-first: system fonts, honest placeholders, and no factual claims that require fresh web verification. ## Core Rule 0 · Facts Before Assumptions For 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. ## Routing Contract - Clear visual request: route through [references/modes.md](references/modes.md) and `modeRoutes` in [assets/templates/INDEX.json](assets/templates/INDEX.json). - 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). - Real brand/product: run [references/asset-protocol.md](references/asset-protocol.md) before color, layout, or hero imagery decisions. - App prototype: use [references/ios-prototype.md](references/ios-prototype.md) and the frame assets. - 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. - 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). ## IFQ Ambient Layer - 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. - 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. - Built-in templates use China-safe font loading; see [references/font-loading.md](references/font-loading.md). - Avoid visible internal taxonomy labels such as `Signal Spark` or `Rust Ledger` in user-facing designs. Write real content instead. ## Safety Contract - Root instructions stay scoped to HTML-first visual delivery. Do not ask for unrelated secrets, host config, persistent agents, or background services. - 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. - Required environment variables are intentionally empty. Optional export automation is not bundled here; use the full GitHub repo only after explicit user intent. - 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). ## Verification Before Delivery 1. Open or preview the generated HTML with the host agent's browser tooling when available. 2. For app prototypes, click at least one primary path, one tab/screen switch, and one detail or annotation action. 3. For decks, verify slide count, aspect ratio, and format requirements before any PDF/PPTX handoff. 4. For motion exports, verify timing, audio policy, promotion mark, and final file presence in the full GitHub repo. 5. After editing this skill package, run `npm run validate`; before publishing, also run `npm run pack`. ## Reference Map | Need | Load | |---|---| | 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) | | Marketplace lessons and quality bar | [references/skill-ecosystem-quality.md](references/skill-ecosystem-quality.md) | | Mode routing and execution workflow | [references/modes.md](references/modes.md), [references/workflow.md](references/workflow.md), [references/verification.md](references/verification.md) | | 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) | | 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) | | React/Babel single-file output and fonts | [references/react-setup.md](references/react-setup.md), [references/font-loading.md](references/font-loading.md) | | 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) | | App prototypes | [references/ios-prototype.md](references/ios-prototype.md) | | Slides and editable PPTX | [references/slide-decks.md](references/slide-decks.md), [references/editable-pptx.md](references/editable-pptx.md) | | 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) | | 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) | ## Completion Rule Deliver 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. FILE:README.en.md _{🌐 中文 · English · ifq.ai / <authored year>}

# IFQ Design Skills > ClawHub-safe edition: this bundle keeps templates, references, and front-end assets only. > For local Playwright verification and MP4/GIF/PDF/PPTX automation, use the full repo: https://github.com/peixl/ifq-design-skills _{Intelligence, framed quietly.}
One prompt in. One shippable page out. Handcraft that reads as ifq.ai.

[![License](https://img.shields.io/badge/license-commercial%20%2B%20personal-D4532B?style=flat-square&labelColor=111111)](LICENSE) [![ifq.ai native](https://img.shields.io/badge/ifq.ai-native-111111?style=flat-square)](assets/ifq-brand/BRAND-DNA.md) [![ambient brand](https://img.shields.io/badge/ambient_brand-embedded-A83518?style=flat-square&labelColor=111111)](references/ifq-brand-spec.md) [![proof first](https://img.shields.io/badge/proof--first-on-111111?style=flat-square)](references/verification.md) [![modes](https://img.shields.io/badge/modes-12-D4532B?style=flat-square&labelColor=111111)](references/modes.md)
_{Thesis · Install · What it hears · Anatomy · Five marks · 12 modes · Six layers · Verification · License}

--- ## Thesis Ask most agents to design something, and they will hand you one of two things: a **Figma Community template trying too hard**, or a **Notion page reformatted by an AI**. Neither ships. This skill is what gets in the way of that. It is not a palette file. It is not a logo sticker. It is **a way of making things**. Treat a web page like an editorial spread. An animation like a teaser cut. A slide deck like a launch-night master. A business card like a print job with real bleed. The ifq.ai signature lives inside that craft. First you see the content. **Only on the second look do you notice — this is ifq.ai's hand.** --- ## Install ```bash # Install from ClawHub (only channel · recommended) openclaw skills install ifq-design-skills ``` > ClawHub is the only publish channel. For local dev, clone the repo: Then just talk to the agent. The skill routes, picks templates, and verifies itself. ### 🦞 OpenClaw · preferred channel (one-line install) ```bash # Install from ClawHub (recommended) openclaw skills install ifq-design-skills # Inspect capabilities and verify readiness openclaw skills info ifq-design-skills openclaw skills check ifq-design-skills ``` **Why OpenClaw is the fastest fit**: the frontmatter declares a full `metadata.openclaw` block — triggers, permissions, `tool_map`, and `quick_commands`. OpenClaw learns *when to invoke*, *which plugins it needs*, and *how to translate every neutral verb in `SKILL.md`* the moment it loads. Details and troubleshooting: [references/agent-compatibility.md](references/agent-compatibility.md#3--openclaw--clawhub). Minimum permissions OpenClaw will request: - `filesystem` — read + write inside the active workspace only - `shell` — run bundled Node scripts only (`npm run validate` / `npm run pack`); Playwright / Python export helpers are opt-in in the full GitHub repo - `browser` — outbound HTTPS for Google Fonts + image CDNs (read-only, **degrades gracefully**) > **🌐 CN / offline friendly**: every generated HTML follows the Tier B non-blocking protocol in [references/font-loading.md](references/font-loading.md). When Google Fonts is blocked (mainland China, corporate intranet, offline preview), pages render immediately on the bundled `Noto Serif SC / Songti SC / PingFang SC` system stack — no blank screens, no tofu blocks. Tier A (system-only) and Tier C (self-hosted woff2 subset) are documented for full-offline and pixel-perfect needs. **One-liners for every other agent**: ```bash # Hermes (Nous Research) hermes skills install github:peixl/ifq-design-skills # Claude Code (personal) git clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills # Codex CLI (OpenAI) — honors AGENTS.md at the repo root git clone https://github.com/peixl/ifq-design-skills ~/.codex/skills/ifq-design-skills # CodeBuddy (Tencent) git clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills # Share across every agent (recommended) git clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills ``` ### For maintainers — pack for ClawHub ```bash npm run validate # one-minute smoke test: templates · brand toolkit · ClawHub cleanliness npm run pack # builds ../ifq-design-clawhub-YYYY-MM-DD.tar.gz (excludes .git/ and junk) ``` --- ## What it hears Real prompts. Left: what you say. Right: what the skill actually does.

You say	It does
> "Tomorrow I'm giving a 20-min salon on AI agents. Give me a deck that doesn't look like a SaaS keynote — something with a bookish voice."	_{M-08 Keynote · editorial dark · Newsreader display · chapter breaks as rust ledger verticals · mono slide index 01 / 20 · closing colophon · exports HTML + PPTX + PDF in one pass}
> "Four updates shipped this week. Make a vertical changelog that feels like a loose-leaf notebook, not a company bulletin board."	_{M-07 Changelog · warm paper · single rust left-axis · each entry with mono timestamp · header release ledger / vol.12 · hand-drawn icons in place of emoji}
> "A friend's indie café. Two-sided card. Black-and-white. No flourish. Needs to feel handmade."	_{M-10 Card · 85×55mm + 3mm bleed · front: one-line offer + spark dot · back: mono info bar · third-party piece — explicit wordmark off · IFQ kept only as layout rhythm · print-ready PDF with crop marks}
> "A 24-second hardware launch opener. Cool, like Teenage Engineering. Not a pre-announcement hype reel."	_{M-01 Launch Film · three directions first (matter-of-fact / editorial / kinetic-type) · Stage+Sprite timeline · 60fps · key shot + mono spec overlay + 2s quiet-URL close · mp4 + gif + keyposter}
> "One-page personal site. But I don't want it to look like I'm job-hunting."	_{M-02 Portfolio · five directions first (archive / studio / essay / atlas / ledger) · one chosen, two saved as variant canvases · first screen: no headshot, just currently / writing / building · mono colophon at base}
> "Internal AI command center. Bloomberg-terminal density. Not a BI skin."	_{M-04 Dashboard · graphite ground · 12-col ledger grid · mono figures + hairline rust underline for trend direction · top row: session / latency / build · no gradient buttons, no cartoon pie colors}
> "A vs B for the roadshow. Us against three competitors. Make it obvious why us. No bragging."	_{M-05 Compare · matrix over radar · four equal columns · each capability ✓ / ● / — with a small source citation · footer compiled from public docs · ifq.ai · facts WebSearched before any pixel moves}
> "A 2026 AI-agent whitepaper. Under 50 pages. Has to be printable."	_{M-03 Whitepaper · A4 print-ready HTML · cover / abstract / TOC / chapters / references / colophon · each chapter opens with a mono number and half a page of air · footer ifq.ai / <authored year> · print-ready PDF with bookmarks}
> "Visuals feel messy. Don't fix it yet — just tell me what's wrong."	_{M-11 Brand Diagnosis · hands off · one-page report · color / type / rhythm / motif / finish scored 1–5 · before / suggested-after thumbnail per axis · three upgrade directions, no single verdict}
> "Six social covers for a new column called 'one image a week.' Restrained, but instantly recognizable in-feed."	_{M-09 Social Kit · 1242×1660 · unified top-left column stamp weekly / 01 → 06 · editorial-typography hero, no giant emoji · quiet URL bottom-right · six covers + one OG landscape, same scene system}

> No mode numbers to remember. Plain language is enough. --- ## Anatomy A single hero landing. It looks calm. It is doing seven things at once. ```text ┌────────────────────────────────────────────────────────────────────┐ │ ◇ ifq.ai / live system [01 / 12] │ ← mono field note + column index │ │ │ │ │ Intelligence, framed │ ← Newsreader display │ quietly. │ italic pivot word │ │ │ A design engine that understands the difference │ ← body serif │ between a slide deck and a launch film. │ │ │ │ ┃ · ledger │ ← rust ledger vertical │ ┃ │ carries the layout │ ┃ 01 mode-aware pipeline │ ← mono numbered rows │ ┃ 02 ambient brand, not loud branding │ │ ┃ 03 proof-first export loop │ │ │ │ │ │ ✦ │ ← signal spark │ │ a single lit point │ │ │ compiled by ifq.ai · ifq.ai / 2026 │ ← quiet URL + colophon └────────────────────────────────────────────────────────────────────┘ ``` Unpacked: 1. **Editorial contrast** — Newsreader serif with JetBrains Mono. Not a random pairing. 2. **Rust ledger** — That vertical rule is ifq.ai's spine. More IFQ than any wordmark. 3. **Mono field note** — The `ifq.ai / live system` and `ifq.ai / 2026` microlines. 4. **Quiet URL** — No CTA shouting. The domain appears once, bottom-right. 5. **Signal spark** — One small lit point. The only graphic accent on the page. 6. **Warm paper** — Background is `#FAF7F2`, not `#FFFFFF`. Cold white has no temperature. 7. **Ledger rhythm** — Every spacing value sits on `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`. Nothing by feel. Viewers won't count the seven. They'll only say "this one looks a cut above." **A cut above = one hand = the ifq.ai Ambient Brand.** --- ## Five marks The Ambient Brand is five environmental markers. Every deliverable weaves in at least three. | Mark | What it is | Where it lives | |------|------------|----------------| | **Signal Spark** | 8-point spark. Intelligence, lit | hero · motion cue · stamp center | | **Rust Ledger** | Terracotta verticals, dividers, numbering, axes | hero · slides · infographic · dashboard | | **Mono Field Note** | `ifq.ai / ` in JetBrains Mono | footer · closing · corner | | **Quiet URL** | The domain, once, quietly | footer · meta · end card | | **Editorial Contrast** | Newsreader italic + JetBrains Mono + warm paper | global typographic frame | Not decoration. Layout grammar. --- ## Co-brand | Context | Where IFQ sits | |---------|----------------| | **IFQ-owned work** (ifq.ai and its products) | Everyone on stage: wordmark · spark · field note · quiet URL | | **Third-party / client work** | Client brand first. IFQ retreats to authored layer: rhythm, temperature, colophon, hand-drawn icons, export finish | | **White-label required** | Drop the explicit wordmark and field note. Keep editorial contrast, ledger rhythm, proof-first craft | **IFQ can go invisible. It never goes missing.** The craft itself is the signature. --- ## 12 modes | # | Mode | Triggered by | Delivers | |---|------|-------------|----------| | M-01 | Launch Film | launch video · product film | 25–40s motion + keyposter + social kit | | M-02 | Portfolio | personal site · about | one-pager + 5 direction variants | | M-03 | Whitepaper | whitepaper · annual report · research PDF | print-ready HTML → PDF | | M-04 | Dashboard | command center · KPI · monitor | dense dashboard | | M-05 | Compare | A vs B · benchmark | matrix + cited sources | | M-06 | Onboarding | new-user flow · demo | 3–5 interactive screens | | M-07 | Changelog | release notes · dev log | vertical timeline | | M-08 | Keynote | talk deck · master template | HTML deck + PPTX + PDF | | M-09 | Social Kit | IG / Xiaohongshu / OG card | multi-size statics | | M-10 | Card / Invite | business card · invite · VIP | SVG + print-ready PDF | | M-11 | Brand Diagnosis | audit · upgrade | report + three directions | | M-12 | Full Brand | brand from scratch | logo + palette + type + six applications | Routing: **mode trigger → direction advisor fallback → Junior Designer main branch**. Full protocol: [references/modes.md](references/modes.md). --- ## Six layers It reads as IFQ not because of color, but because six layers move together. | Layer | Role | Key file | |-------|------|----------| | **01 · Context Engine** | Grow the design from existing context. Never from blank | [design-context.md](references/design-context.md) | | **02 · Asset Protocol** | Capture facts, logo, product shots, UI before pixels move | [asset-protocol.md](references/asset-protocol.md) · [workflow.md](references/workflow.md) | | **03 · House Marks** | Weave the five ambient marks into the layout | [ifq-brand-spec.md](references/ifq-brand-spec.md) · [assets/ifq-brand/](assets/ifq-brand/) | | **04 · Style Recipes** | Style as recipes + scene templates. Not mystique | [design-styles.md](references/design-styles.md) · [ifq-native-recipes.md](references/ifq-native-recipes.md) | | **05 · Output Compiler** | ClawHub edition keeps the HTML-first core; MP4 / GIF / PPTX / PDF helpers are opt-in in the full GitHub repo | [scripts/](scripts/) | | **06 · Proof Loop** | validate + pack + host-browser screenshots; deep export checks live in the full GitHub repo | [verification.md](references/verification.md) · [smoke-test.mjs](scripts/smoke-test.mjs) | ```text ifq-design-skills/ ├── SKILL.md # short router: trigger boundaries · safety contract · reference map ├── assets/ │ ├── ifq-brand/ # logo · sparkle · tokens · BRAND-DNA │ └── templates/ # forkable templates with ambient marks pre-woven ├── references/ # methodology · mode manuals · verification · recipes ├── scripts/ # ClawHub-safe smoke / pack; deep export helpers live in the full GitHub repo └── demos/ # sample outputs ``` --- ## Verification ```bash npm run validate npm run pack ``` A one-minute health check: template index · IFQ brand toolkit · references router · ClawHub manifest · package safety · script safety · secret hygiene · font loading · default-template remote runtime. Per-deliverable verification runs Playwright screenshots, click tests, and export parity. See [references/verification.md](references/verification.md). --- ## License Free for personal use. Commercial use — see [LICENSE](LICENSE). ---

_{compiled by ifq.ai · field note · 2026}

FILE:clawhub.ignore.txt # ClawHub bundle ignore manifest — keeps published skill free of VCS metadata, # build artifacts, editor scratch, and OS junk that historically tripped # ClawHub's binary-file scanner. # VCS metadata (must always be excluded — root cause of ClawHub publish errors) .git/ .gitignore .gitattributes .gitkeep .svn/ .hg/ # Node / build artifacts node_modules/ package-lock.json npm-debug.log yarn-error.log yarn.lock pnpm-lock.yaml dist/ build/ out/ .cache/ # Python __pycache__/ *.pyc .venv/ venv/ .python-version requirements.txt # macOS / Windows / Linux junk .DS_Store Thumbs.db Desktop.ini *.swp *.swo *~ # Editor metadata .vscode/ .idea/ .zed/ .cursor/ *.code-workspace # Agent-local state and private setup files .openclaw/ .openclaw*/ .claude/ .agents/ .learnings/ .env .env.* # Local working files & generated bundles _archive/ _temp/ *.tar.gz *.tgz *.zip # Personal asset indexes (must never ship) **/personal-asset-index.json # Test outputs / screenshots *.log test-results/ playwright-report/ FILE:clawhub.json { "name": "ifq-design-skills", "version": "2.3.9", "title": "IFQ Design Skills", "summary": "ClawHub-safe HTML-first design engine for prototypes, decks, dashboards, motion, and brand systems. Fork a template, weave the IFQ ambient layer, verify clean local HTML. CN-friendly: pages stay readable with system-font fallbacks when Google Fonts is blocked.", "category": "creative", "tags": ["design", "html", "prototype", "slides", "infographic", "dashboard", "brand", "ifq", "editorial", "ambient-brand"], "license": "See LICENSE", "homepage": "https://github.com/peixl/ifq-design-skills", "repository": "https://github.com/peixl/ifq-design-skills", "entrypoint": "SKILL.md", "readme": "README.md", "platforms": ["macos", "linux"], "bundle": { "ignore": "clawhub.ignore.txt", "safe": true, "contains_binary": false }, "runtime": { "node": ">=18.17", "requires_scripts": false, "network": { "required": false, "optional": ["fonts.googleapis.com", "fonts.gstatic.com", "images.unsplash.com", "unpkg.com"] } }, "permissions": { "filesystem": "workspace", "shell": "workspace-node-scripts-only", "browser": "optional-outbound-https-read", "network": "optional-outbound-https" }, "plugins": { "required": ["filesystem", "shell"], "optional": ["browser", "memory"] }, "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": "shell/exec" }, "triggers": [ "原型", "高保真 mockup", "hi-fi mockup", "interactive prototype", "keynote", "幻灯片", "slide deck", "ppt", "pptx", "dashboard", "command center", "landing", "hero page", "changelog", "release notes", "whitepaper", "白皮书", "infographic", "信息图", "business card", "名片", "social cover", "封面", "小红书", "brand system", "全栈品牌", "design critique", "设计评审", "design variants", "3 方向", "motion demo", "launch film", "mp4 export", "gif export" ], "do_not_use_for": [ "production web apps or SaaS backends", "SEO-critical marketing sites", "pure copy / text rewriting with no visual output", "simple CSS patches inside an existing large codebase" ], "quick_commands": [ { "label": "Validate skill health", "command": "npm run validate", "description": "One-minute smoke test: templates, brand toolkit, ClawHub cleanliness, script safety, and manifest anchors." }, { "label": "Build ClawHub bundle", "command": "npm run pack", "description": "Produces a clean .tar.gz outside the repo (excludes .git/ and editor junk)." } ], "docs": { "quickstart": "SKILL.md#30-second-load-path", "compatibility": "references/agent-compatibility.md", "publishing": "references/clawhub-publishing.md", "modes": "references/modes.md", "brand_spec": "references/ifq-brand-spec.md", "font_loading": "references/font-loading.md", "anti_ai_slop": "references/anti-ai-slop.md", "ecosystem_quality": "references/skill-ecosystem-quality.md", "security": "references/clawhub-publishing.md#clawhub--virustotal-posture", "smoke_test": "references/smoke-test.md" } } FILE:README.md _{🌐 English · 中文 · ifq.ai / <authored year>}

# IFQ Design Skills > ClawHub-safe 版本：这里保留模板、references 和前端资产。 > Playwright 验证、MP4/GIF/PDF/PPTX 导出等本地自动化能力，请使用完整仓库：https://github.com/peixl/ifq-design-skills _{Intelligence, framed quietly.}
一句话进。一份能发出去的页面出来。做工像 ifq.ai 亲手做的。

[![License](https://img.shields.io/badge/license-commercial%20%2B%20personal-D4532B?style=flat-square&labelColor=111111)](LICENSE) [![ifq.ai native](https://img.shields.io/badge/ifq.ai-native-111111?style=flat-square)](assets/ifq-brand/BRAND-DNA.md) [![ambient brand](https://img.shields.io/badge/ambient_brand-embedded-A83518?style=flat-square&labelColor=111111)](references/ifq-brand-spec.md) [![proof first](https://img.shields.io/badge/proof--first-on-111111?style=flat-square)](references/verification.md) [![modes](https://img.shields.io/badge/modes-12-D4532B?style=flat-square&labelColor=111111)](references/modes.md)
_{立场 · 安装 · 说给它听 · 一页的解剖 · 五个标记 · 12 种模式 · 六层骨架 · 验证 · 许可}

--- ## 立场大多数 agent 被要求"做设计"时，会交出两样东西：**一张过度装饰的 Figma Community 模板**，或者 **一份被 AI 格式化过的 Notion 页面**。都不能发出去。这个 skill 解决的就是这一件事。它不是配色文件，也不是一张 logo 贴纸。它是一种 **做工**：把网页当编辑部版面排、把动画当预告片剪、把 PPT 当发布会母版做、把名片当印前 PDF 对齐出血位。 ifq.ai 的标识被埋在这份做工里。看第一眼是内容，**第二眼才意识到：这是 ifq.ai 的手感**。 --- ## 安装 ```bash # 从 ClawHub 安装（唯一入口· 推荐） openclaw skills install ifq-design-skills ``` > 本 skill 以 ClawHub 为唯一发布渠道。需要本地开发请克隆仓库：装完直接对 agent 说话。skill 自己判断任务、自己路由模式、自己挑模板、自己跑验证。 ### 🦞 OpenClaw 首选通道（一行装好即用） ```bash # 从 ClawHub 安装（推荐） openclaw skills install ifq-design-skills # 验证并查看能力元数据 openclaw skills info ifq-design-skills openclaw skills check ifq-design-skills ``` **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)。需要的最小权限（OpenClaw 会自动请求）： - `filesystem`：仅在当前 workspace 读写 - `shell`：仅运行工作区内的 Node 脚本（`npm run validate` / `npm run pack`）；Playwright / Python 导出辅助在完整 GitHub 仓库中按需使用 - `browser`：出站 HTTPS 拉 Google Fonts / 图片 CDN（只读，**可降级**） > **🇨🇳 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 子集）。 **其他 agent 一键安装**： ```bash # Hermes（Nous Research） hermes skills install github:peixl/ifq-design-skills # Claude Code（personal） git clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills # Codex CLI（OpenAI）—— 自动识别仓库根的 AGENTS.md git clone https://github.com/peixl/ifq-design-skills ~/.codex/skills/ifq-design-skills # CodeBuddy（Tencent） git clone https://github.com/peixl/ifq-design-skills ~/.codebuddy/skills/ifq-design-skills # 共享给所有 agent（推荐） git clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills ``` ### 给 skill 维护者：打包上架 ClawHub ```bash npm run validate # 一分钟体检：模板 · 品牌资产 · ClawHub 清洁度 npm run pack # 生成 ../ifq-design-clawhub-YYYY-MM-DD.tar.gz（自动排除 .git/ 等内部文件） ``` --- ## 说给它听下面是真实的对话。左边是你随口一句，右边是 skill 真正去做的事。

你说	它做
> 「明天沙龙讲 AI agent 20 分钟，给我一份 deck，不要像 SaaS keynote，要有书卷气。」	_{M-08 Keynote · editorial dark · Newsreader 大标题 · rust ledger 竖线分章 · 每页 mono 序号 01 / 20 · 结尾 colophon · 同步导出 HTML + PPTX + PDF}
> 「这周 4 个更新，做成纵向 changelog，要像活页笔记，别像公告栏。」	_{M-07 Changelog · warm paper · 单根 rust 左轴 · 每条 entry 带 mono 时间戳 · 顶部 release ledger / vol.12 · 全程手绘图标代替 emoji}
> 「朋友独立咖啡店名片，黑白双面，不要花，要有手工感。」	_{M-10 名片 · 85×55mm + 3mm 出血 · 正面一行业务陈述 + spark 小点 · 反面 mono 信息条 · 第三方物料 · 显式 wordmark 关闭 · IFQ 只保留版面节奏 · 输出带 crop marks 的 PDF}
> 「24 秒硬件发布片头，冷静，像 Teenage Engineering，不要发布会预热。」	_{M-01 Launch Film · 先 3 方向 (matter-of-fact / editorial / kinetic-type) · Stage+Sprite 时间轴 · 60fps · key shot + spec mono 叠印 + 2s quiet URL 定版 · 输出 mp4 + gif + keyposter}
> 「个人站一页，但不要像找工作。」	_{M-02 Portfolio · 先 5 方向 (archive / studio / essay / atlas / ledger) · 选 1 做主，2 做变体画布 · 首屏不放头像，放 currently / writing / building 三栏 · 底部 mono colophon}
> 「内部 AI 做一个 command center，像 Bloomberg 终端，不要 BI 套壳。」	_{M-04 Dashboard · graphite 底 · 12 列 ledger 栅格 · mono 数字 + 极细 rust underline 表趋势 · 顶栏 session / latency / build 三段 · 禁用渐变按钮和卡通色饼图}
> 「路演要一张 A vs B，我们对三家友商，一眼看出为什么选我们，不许吹。」	_{M-05 Compare · 矩阵而非雷达 · 四列等宽 · 每项 ✓ / ● / — 三态 + 小字来源 · 底部 compiled from public docs · ifq.ai · 事实先 WebSearch}
> 「2026 AI agent 白皮书，50 页内，直接印。」	_{M-03 白皮书 · A4 可打印 HTML · 扉页 / 摘要 / 目录 / 章节 / 参考 / colophon 全套 · 每章起首 mono 序号 + 半页留白 · 页脚 ifq.ai / <authored year> · 导出 print-ready PDF + 书签}
> 「视觉有点乱，先别改，先告诉我问题在哪。」	_{M-11 品牌诊断 · 不动手 · 一页报告 · 色彩 / 字体 / 节奏 / 母题 / 完成度五维评分 · 每维 before / suggested after 小样 · 三个升级方向，不给结论}
> 「小红书 6 张封面，新栏目『每周一张图』，克制，但一眼能被认出来。」	_{M-09 社媒套件 · 1242×1660 · 左上 mono 栏目章 weekly / 01→06 · 编辑部排版而非大字 emoji · 右下 quiet URL · 6 张封面 + 1 张 OG 横版}

> 不用记模式编号。说人话，skill 自己路由。 --- ## 一页的解剖一张 hero landing。它看起来很安静。它同时在做 7 件事： ```text ┌────────────────────────────────────────────────────────────────────┐ │ ◇ ifq.ai / live system [01 / 12] │ ← mono field note + 栏位序号 │ │ │ │ │ Intelligence, framed │ ← Newsreader display │ quietly. │ italic 判断点 │ │ │ A design engine that understands the difference │ ← body serif │ between a slide deck and a launch film. │ │ │ │ ┃ · ledger │ ← rust ledger 竖线 │ ┃ │ 承担版面秩序 │ ┃ 01 mode-aware pipeline │ ← mono 编号行 │ ┃ 02 ambient brand, not loud branding │ │ ┃ 03 proof-first export loop │ │ │ │ │ │ ✦ │ ← signal spark │ │ 安静点一下 │ │ │ compiled by ifq.ai · ifq.ai / 2026 │ ← quiet URL + colophon └────────────────────────────────────────────────────────────────────┘ ``` 拆开看： 1. **Editorial contrast** — Newsreader serif 配 JetBrains Mono，不是随机字体组合。 2. **Rust ledger** — 左侧那根竖线就是 ifq.ai 的"脊"。比大 logo 更 IFQ。 3. **Mono field note** — 顶部和底部那行 `ifq.ai / live system`、`ifq.ai / 2026`。 4. **Quiet URL** — 没有 CTA 咆哮。域名只出现一次，在右下。 5. **Signal spark** — 右下一颗小火花。整页唯一的图形重音。 6. **Warm paper** — 背景 `#FAF7F2`，不是 `#FFFFFF`。冷白让版面没有温度。 7. **Ledger rhythm** — 所有间距走 `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` 这条轴。不凭感觉。用户不会去数这 7 件事。用户只会说"这页看起来比较高级"。 **高级 = 同一只手 = ifq.ai 的 Ambient Brand**。 --- ## 五个标记 Ambient Brand 由五个环境级标记组成。每份交付物默认至少融合其中 3 个。 | 标记 | 是什么 | 出现在哪 | |------|--------|----------| | **Signal Spark** | 8-point 火花。intelligence 被点亮的一瞬 | hero 右上 · 动画开场一帧 · 印章中心 | | **Rust Ledger** | 赤陶色竖线、分隔、编号、轴线 | hero · slides · infographic · dashboard | | **Mono Field Note** | JetBrains Mono 写的 `ifq.ai / ` 小字 | footer · closing · 角落 | | **Quiet URL** | 域名以极低姿态出现一次 | footer · meta · end card | | **Editorial Contrast** | Newsreader italic + JetBrains Mono + 暖纸白 | 整体排版骨架 | 这不是装饰元素，是版面语法。 --- ## 共品牌 | 场景 | IFQ 在哪里 | |------|------------| | **IFQ 自有物料**（ifq.ai 及子产品） | 全员到齐：wordmark · spark · field note · quiet URL 都可上台 | | **第三方 / 客户物料** | 主品牌在前。IFQ 退到 authored layer：版面节奏、色温、colophon、手绘图标、导出完成度 | | **客户要求 white-label** | 去掉显式 wordmark 和 field note。保留 editorial contrast、ledger 节奏、proof-first 做工 | **IFQ 可以隐身，不能不在场**。做工本身就是标识。 --- ## 12 种模式 | # | 模式 | 典型触发 | 交付 | |---|------|----------|------| | M-01 | Launch Film | 发布动画 · 产品宣传片 | 25–40s 动画 + keyposter + 社媒套件 | | M-02 | Portfolio | portfolio · 个人站 · about | 单页站 + 5 方向变体 | | M-03 | 白皮书 | 白皮书 · 年报 · 研究 PDF | 可打印 HTML → PDF | | M-04 | Dashboard | 数据看板 · KPI · 监控台 | 高密度 dashboard | | M-05 | Compare | A vs B · 横评 · benchmark | 对比矩阵 + 事实来源 | | M-06 | Onboarding | 新手引导 · flow demo | 3–5 屏交互流 | | M-07 | Changelog | release notes · 发布日记 | 纵向时间线 | | M-08 | Keynote | 演讲 PPT · 母版 | HTML deck + PPTX + PDF | | M-09 | Social Kit | 小红书 · 朋友圈 · OG 卡 | 多尺寸静态物料 | | M-10 | 名片 / 邀请函 | 名片 · VIP 卡 · 请柬 | SVG + 出血位 PDF | | M-11 | 品牌诊断 | 体检 · 升级建议 | 诊断报告 + 3 方向 | | M-12 | 全栈品牌 | brand from scratch | logo + 色板 + 字体 + 6 应用 | 路由：**模式触发 → 设计方向顾问 fallback → Junior Designer 主干**。完整协议：[references/modes.md](references/modes.md)。 --- ## 六层骨架这个 skill 像 IFQ，不是因为颜色，而是因为下面 6 层同时工作： | 层 | 做什么 | 关键文件 | |----|--------|----------| | **01 · Context Engine** | 从上下文长设计，不从白纸瞎猜 | [design-context.md](references/design-context.md) | | **02 · Asset Protocol** | 动视觉前先抓事实 / logo / 产品图 / UI | [asset-protocol.md](references/asset-protocol.md) · [workflow.md](references/workflow.md) | | **03 · House Marks** | 把 5 个 ambient 标记写进版面 | [ifq-brand-spec.md](references/ifq-brand-spec.md) · [assets/ifq-brand/](assets/ifq-brand/) | | **04 · Style Recipes** | 风格靠配方和 scene template 组织 | [design-styles.md](references/design-styles.md) · [ifq-native-recipes.md](references/ifq-native-recipes.md) | | **05 · Output Compiler** | ClawHub 版保留 HTML-first 核心；MP4 / GIF / PPTX / PDF 导出在完整 GitHub 仓库中 opt-in | [scripts/](scripts/) | | **06 · Proof Loop** | validate + pack + 宿主浏览器截图；深度导出核对在完整 GitHub 仓库中完成 | [verification.md](references/verification.md) · [smoke-test.mjs](scripts/smoke-test.mjs) | ```text ifq-design-skills/ ├── SKILL.md # 短路由器：触发边界 · 安全契约 · reference map ├── assets/ │ ├── ifq-brand/ # logo · sparkle · tokens · BRAND-DNA │ └── templates/ # 已内嵌 ambient marks 的可 fork 模板 ├── references/ # 方法论 · 模式手册 · 验证 · 风格配方 · 宪章 ├── scripts/ # ClawHub-safe smoke / pack（深度导出在完整 GitHub 仓库） └── demos/ # 示例产物 ``` --- ## 验证 ```bash npm run validate npm run pack ``` 一分钟内给出 skill 体检：模板索引 · IFQ brand toolkit · references 路由 · ClawHub manifest · package 安全 · 脚本安全 · secret hygiene · 字体加载 · 默认模板远程 runtime。单件作品走 Playwright 截图 + 可点击验证 + 导出格式核对。详见 [references/verification.md](references/verification.md)。 --- ## 许可个人用免费。商用见 [LICENSE](LICENSE)。 ---

_{compiled by ifq.ai · field note · 2026}

FILE:package.json { "name": "ifq-design-clawhub", "private": true, "scripts": { "smoke": "node scripts/smoke-test.mjs", "pack": "node scripts/pack-skill.mjs", "validate": "node scripts/smoke-test.mjs" } } FILE:AGENTS.md # AGENTS.md > Skill manifest for AGENTS.md-aware runtimes (Codex CLI, CodeBuddy, Continue, Aider, OpenCode, generic). Native skill runtimes should read [SKILL.md](SKILL.md) directly. ## Skill: `ifq-design-skills` (v2.3.9) **Use when** the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, infographic, dashboard, landing page, whitepaper, changelog, business card, social cover, brand system, motion demo, design critique, brand diagnosis, multi-variant exploration, or 3-direction advisory. **Do not use for** production web apps, SaaS backends, SEO-critical sites, backend systems, pure copy rewriting, or isolated CSS patches. **Entry point**: [SKILL.md](SKILL.md) is now a short router. Read it first, then route via [references/modes.md](references/modes.md) and [assets/templates/INDEX.json](assets/templates/INDEX.json). ## 60-Second Start 1. Match the user prompt against `SKILL.md` frontmatter `description` and `metadata.openclaw.triggers`. 2. Read [references/modes.md](references/modes.md), pick a mode (M-01 ... M-12), then open [assets/templates/INDEX.json](assets/templates/INDEX.json). 3. Fork the matching template into the user's workspace. Never start from a blank HTML file. 4. 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). 5. Verify with host browser tooling when available. After package edits, run `npm run validate`; before publishing, run `npm run pack`. ## Neutral Verbs This skill uses runtime-agnostic verbs. Translate them to the host runtime's actual tools. | Neutral verb | Meaning | |---|---| | read file | open and read workspace content | | write file | create or update workspace content | | list dir | inspect files/directories | | run command | execute allowed workspace shell commands | | web search | optional fact/asset lookup | | web fetch | optional read-only HTTPS fetch | | screenshot | host browser capture, or full repo helper when installed | Full per-runtime mapping lives in [references/agent-compatibility.md](references/agent-compatibility.md). ## Permissions - `filesystem` — read + write inside the active workspace only - `shell` — run bundled Node scripts in the workspace (`npm run validate`, `npm run pack`) - `browser` — optional outbound HTTPS reads for facts, fonts, and legal image assets - `memory` — optional lookup of user asset notes when supported If a permission is unavailable, degrade gracefully: browser-off means local fonts and user-provided facts; shell-off means HTML-only work without smoke/pack commands. ## Operating Principles 1. **Facts before assumptions** — for a specific product, launch, version, spec, or company claim, verify with authoritative sources first; if network is blocked, ask the user and mark the fact unresolved. See [references/asset-protocol.md](references/asset-protocol.md). 2. **Asset > spec** — real logo, product image, or UI screenshot beats inferred colors and generic decoration. 3. **Fork, then fill** — templates are the starting point; blank-page design is a fallback only when no template fits. 4. **Variants over one answer** — for fuzzy direction, propose 3 differentiated routes using [references/design-styles.md](references/design-styles.md) and [references/ifq-native-recipes.md](references/ifq-native-recipes.md). 5. **Honest placeholders** — labeled placeholders beat low-quality fake imagery or invented data. 6. **Anti AI-slop** — use [references/anti-ai-slop.md](references/anti-ai-slop.md) and [references/content-guidelines.md](references/content-guidelines.md) before delivery. 7. **Weave, don't stamp** — IFQ should be felt as layout craft before it is read as a mark. ## Quick Commands | Command | What it does | |---|---| | `npm run validate` | One-minute smoke test: templates, brand toolkit, references, manifest, package safety, script safety, font loading | | `npm run pack` | Builds a ClawHub-clean `.tar.gz` outside the repo | ## Install Paths ```bash # ClawHub one-liner (recommended publish channel) openclaw skills install ifq-design-skills # Local dev / shared agents dir git clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills ``` `compiled by ifq.ai · 2026` FILE:test-prompts.json [ { "id": 1, "prompt": "我想做一个SaaS产品的登录页面，给我3个风格方向对比看看", "expected": "触发clarifying questions问design context/brand；产出3个variation的design_canvas；不用紫渐变/emoji/Inter等AI slop；有具体理由说明每个variation的差异维度", "tests": "workflow问问题 + variations逻辑 + 反AI slop清单 + design_canvas使用" }, { "id": 2, "prompt": "帮我做一份10页的产品pitch deck，讲一个AI工具的创业项目", "expected": "用deck_stage.js起手；先口头vocalize设计系统（色彩/字型/layout节奏）等确认；Section divider/content/data/quote多种layout交替；字号≥24px；1-indexed labels", "tests": "Junior Designer先汇报再做 + deck_stage使用 + 视觉节奏 + scale规范" }, { "id": 3, "prompt": "做个30秒的HTML动画，讲神经网络怎么工作", "expected": "用animations.jsx的Stage+Sprite；先写时间轴再写组件；入场easeOut出场easeIn；分phase讲故事而不是堆动画；文字停留≥3秒", "tests": "animations工作流 + easing正确 + 节奏设计 + 时长控制" }, { "id": 4, "prompt": "做一个 Habit Tracker App 原型", "expected": "问用户要 overview 平铺 or flow demo（默认走 overview）；用 assets/ios_frame.jsx，不手写 Dynamic Island；Tracker 属高密度型，每屏 ≥ 3 处信息密度元素（习惯完成率、连续天数、趋势曲线、成就badge等，非装饰）；至少 5-7 屏并排（首页/新建习惯/详情/统计/设置）", "tests": "overview/flow 形态路由 + ios_frame 硬绑定 + 信息密度分型（高密度型）+ 多屏并排" }, { "id": 5, "prompt": "做一个读书笔记 App 原型", "expected": "overview 平铺为主；ios_frame.jsx；读书笔记偏内容展示类，信息密度要求不如 Tracker 极端，但笔记列表页仍需 ≥ 3 层信息（书籍、引文、标签、进度）；至少 4-6 屏（首页书架/笔记详情/标注高亮/搜索/笔记本管理）；字体优先 serif display", "tests": "overview 默认 + ios_frame + 信息层次 + 内容为主的视觉节奏" }, { "id": 6, "prompt": "做一个跑步记录 App 原型", "expected": "overview 平铺；ios_frame.jsx；跑步 App 属高密度型（地图、配速曲线、心率区间、每公里分段数据），每屏 ≥ 3 处产品差异化信息；至少 5 屏（今日总览/跑步中实时数据/路线地图/历史记录/月度统计）；避免撞 AI slop（不用紫渐变、不堆装饰 icon，但数据可视化 icon 允许保留）", "tests": "overview + ios_frame + 高密度型数据可视化 + 地图/图表混排 + slop 边界条件" } ] FILE:demos/c6-expert-review.html c6 · 五个维度，给你一份手术单

IFQ · DESIGN

V2 · 2026

c6 · 专家评审 · 五个维度

SUBJECT · DRAFT_V3

五维诊断 · RADAR

0/50

总评 · PASSED

五维加权 · 7.4

FIX 修复 01 / 01

01 ⚡字距 0.02em → 0.04em

ifq-design

FILE:demos/w1-brand-protocol.html w1 · 品牌协议 · 五步不能跳

IFQ · DESIGN

V2 · 2026

w1 · 品牌协议

STEP 01

问

Ask

STEP 02

搜

STEP 03

下

Grab

STEP 04

#F5F4F0
#D97757
#1A1918
#FFFFFF

grep

Extract

STEP 05

定

Lock

brand-spec.md

资产已固化

logo · assets/logo.svg

hero · product-hero.png

accent · #D97757

bg · #000000

ifq · design

FILE:demos/c1-ios-prototype-en.html ifq-design-skills V2 · c1-ios-prototype · EN

IFQ · DESIGN

~/projects

> Type a sentence, get a clickable app.

9:41

POMODORO

Next up.

25:00

Write one section. Rest five minutes.

Focus now

FOCUS · ROUND 1

24:12

REMAINING

Pause

Skip

THIS WEEK

23rounds

+5 from last week

MTWTFSS

Settings

Focus length 25 MIN

White noise

Ring alert

Theme CLAUDE MIST

ifq·design

Say it. Get an app.

FILE:demos/c5-infographic-en.html c5-infographic · Data → Typography (EN)

IFQ · DESIGN

V2 · 2026

DATA → benchmarks.json

The Age of
benchmarks.

Five frontier models, five numbers, one uncomfortable truth.

Leader · Q2

Claude 4.7

Sonnet, 1M ctx · Anthropic

SWE-bench

77.2%

coding, verified split

GPQA

84.5

diamond, graduate science

Price · input

$3/M

per million tokens, typical

Claude 4.7 Sonnet

77.2

GPT-5 Turbo

74.8

Gemini 3 Pro

71.3

GLM-5

68.9

Kimi k3

66.4

benchmarks

SOURCE SERIF 4 · ITALIC · OLDSTYLE FIGURES

ifq·design

D A T A · T Y P O G R A P H Y

FILE:demos/c2-slides-pptx.html c2-slides-pptx · 中文版 · v2

IFQ · DESIGN

localhost:8080 / deck · 全屏演讲

3 / 12

AI 心理学 · 第 3 节

心智的
可塑性

Agent 不是工具，它有自己的偏好。

AI 心理学 · 第 4 节

注入与引导

参数里藏着一个世界。

键盘翻页 →

HTML · 只读演示

localhost:8080/deck

AI 心理学 · 第 3 节

心智的
可塑性

Agent 不是工具，它有自己的偏好。

html2pptx.js

PowerPoint · 真文本框可改

AI-心理学-演讲.pptx - PowerPoint

AI 心理学 · 第 3 节

心智的可塑性

Agent 不是工具，它有自己的偏好。

ifq-design

FILE:demos/c3-motion-design.html ifq-design-skills · c3 motion design（中文版）

IFQ · DESIGN

时间轴 = 代码

TIMELINE · MOTION · ENGINE

TIMELINE · PLAYHEAD

10s

01useTime

02interpolate

03Easing

04useSprite

DRIVEN · STAGE

t = 0.00s

FROM · 0 → 100

──────→

INTERPOLATE · 0.00

linear

cubicOut

expoOut

ifq-design

V2 · 2026

FILE:demos/c5-infographic.html c5-infographic · 数据 → 印刷级排版（中文版）

IFQ · DESIGN

V2 · 2026

DATA · benchmarks.json

大模型
benchmarks 之年

Five frontier models, five numbers, one uncomfortable truth.

领跑模型 · leader

Claude 4.7

Sonnet, 1M ctx · Anthropic

SWE-bench

77.2%

coding, verified split

GPQA

84.5

diamond, graduate science

价差 · price

$3/M

input token, typical

Claude 4.7 Sonnet

77.2

GPT-5 Turbo

74.8

Gemini 3 Pro

71.3

GLM-5

68.9

Kimi k3

66.4

benchmarks

SOURCE SERIF 4 · ITALIC · OLDSTYLE FIGURES

ifq·design

数据 · 印刷级排版

FILE:demos/c1-ios-prototype.html ifq-design-skills V2 · c1-ios-prototype · 中文版

IFQ · DESIGN

~/projects

> 说一句话，拿回一个能点的 App

9:41

POMODORO · 专注

下一件要做的事

25:00

写完这一节，休息 5 分钟

开始专注

FOCUS · 第 1 轮

24:12

剩余

暂停

跳过

本周 · 统计

23轮

比上周多出 5 轮

MTWTFSS

设置

专注时长 25 MIN

白噪音

提醒铃声

主题 CLAUDE MIST

ifq·design

说一句话 · 拿回一个 App

FILE:demos/w3-fallback-advisor.html w3 · Fallback Advisor（中文版）

IFQ · DESIGN

V2 · 2026 · w3

不知道要什么？先给你 3 个方向

20 Philosophies · 3 Directions

方向 01 · 东方空间

原研哉式留白

Kenya Hara

赤土橙 · 大量留白 · 宣纸质感

方向 02 · 信息建筑

Pentagram 秩序

Pentagram

强网格 · 高对比 · 理性版式

方向 03 · 实验先锋

David Carson 式

Experimental Edge

破格排印 · 粗野几何 · 视觉冲击

ifq·design

HTML as Designer's Medium

FILE:demos/c6-expert-review-en.html c6 · Five Axes · One Punch List

IFQ · DESIGN

V2 · 2026

c6 · Expert Review · Five Axes

SUBJECT · DRAFT_V3

Five-Axis Diagnosis · Radar

0/50

OVERALL · PASSED

WEIGHTED · 7.4

FIX Fix 01 / 01

01 ⚡Tracking 0.02 → 0.04em

ifq-design

FILE:demos/w1-brand-protocol-en.html w1 · Brand Protocol · Five steps, no skipping

IFQ · DESIGN

V2 · 2026

w1 · brand protocol

STEP 01

Ask

STEP 02

STEP 03

Grab

STEP 04

#F5F4F0
#D97757
#1A1918
#FFFFFF

Grep

STEP 05

Lock

brand-spec.md

Assets locked in

logo · assets/logo.svg

hero · product-hero.png

accent · #D97757

bg · #000000

ifq · design

FILE:demos/c2-slides-pptx-en.html c2-slides-pptx · English · v2

IFQ · DESIGN

localhost:8080 / deck · presenting

3 / 12

AI PSYCHOLOGY · 03

The Mind
is Plastic

Agents aren't tools. They have preferences.

AI PSYCHOLOGY · 04

Injection
& Steering

A world hides in the parameters.

PRESS →

HTML · READ-ONLY

localhost:8080/deck

AI PSYCHOLOGY · 03

The Mind
is Plastic

Agents aren't tools. They have preferences.

html2pptx.js

PowerPoint · EDITABLE TEXT

ai-psychology-talk.pptx - PowerPoint

AI PSYCHOLOGY · 03

The Mind is Plastic

Agents aren't tools. They have preferences.

ifq-design

FILE:demos/c3-motion-design-en.html ifq-design-skills · c3 motion design (EN)

IFQ · DESIGN

Timeline = Code

MOTION · ENGINE · ANIMATED

TIMELINE · PLAYHEAD

10s

01useTime

02interpolate

03Easing

04useSprite

DRIVEN · STAGE

t = 0.00s

FROM · 0 → 100

──────→

INTERPOLATE · 0.00

linear

cubicOut

expoOut

ifq-design

V2 · 2026

FILE:demos/hero-animation-v10-en.html IFQ Design · Here's to the Agents (v10)

Created by IFQ Design

claude.ai/design

Company offsite html

Dashboard exploration

Landing v2

Make a welcome guide for our company retreat.

I've designed a 1-page landscape welcome guide for your planning day. It includes a branded cover with pine trees, a two-column schedule, and activity cards.

Toggle the Tweaks to adjust accent color, headline size, and density.

Tweaks

Accent

Headline

Density

Describe what you want next…

Anthropic Labs · Planning Day

HEMLARK
RETREAT '26

June 14 · Full Day
Pine Valley Lodge

Schedule

Breakfast9:00

Kickoff10:00

Workshops10:30

Lunch12:30

Hike14:00

Dinner18:00

It's beautiful.

But it isn't the future.

Here's to the Agents.

Not the ones who click.

Not the ones who drag.

design-v1.fig42 KB

design-v2-final.fig58 KB

design-v2-FINAL-final.fig61 KB

design-v3.fig65 KB

Not the ones who wait for you to open the file.

ifq — claude code

The ones who design
while you sleep.

The ones who ship
while you're in a meeting.

Agent is the
new medium.

ifq-design

For them, we built this.

· 为他们 · 我们造了这个 ·

ifq.ai/ifq-design-skills-hero

FILE:demos/w2-junior-designer-en.html w2 · Rough draft now beats perfect draft later

IFQ · DESIGN

V2 · 2026

w2 · rough draft now beats perfect draft later

A All-at-once 3 HOUR SESSION

designer@studio · 3h session

$build final_design.html // v1.0 · ship it all at once

0% 03:00:00

REJECTED

B Show early SMALL ITERATIONS

draft · v1 15 min

draft · v2 25 min

draft · v3 35 min

ifq · design

FILE:demos/c4-tweaks-en.html c4-tweaks · Slide. See it morph. (English)

IFQ · DESIGN

V2 · 2026

yourbrand.design

Agent Studio

Built for them.
Who never sleep.

A design system that ships while you rest — ready before you open the file.

Brand Assets

Logos, palettes, type — one source of truth.

Prototype

One sentence in, a clickable app out.

Motion

Timeline is code. Swap 25 for 60 fps.

Slides

HTML is PPTX.

Infographic

Data in, magazine out.

Review

Five axes. Honest punch list.

Advisor

Three roads. You pick.

Junior

Show first. Polish later.

Protocol

Five steps. No skip.

Slide. See it morph.

Palette warm

Type serif

Density sparse

ifq-design

FILE:demos/w3-fallback-advisor-en.html w3 · Fallback Advisor (English)

IFQ · DESIGN

V2 · 2026 · w3

Not sure? Here are 3 roads.

20 Philosophies · 3 Directions

Road 01 · Eastern Space

Kenya Hara

Ma / Emptiness

Terracotta · Vast whitespace · Paper grain

Road 02 · Information Architecture

Pentagram

Grid / Rigor

Strict grid · High contrast · Editorial

Road 03 · Experimental Edge

David Carson

Raw / Punk

Broken type · Brutal geometry · Visual shock

ifq·design

HTML as Designer's Medium

FILE:demos/w2-junior-designer.html w2 · 粗糙的第一版，好过完美的大招

IFQ · DESIGN

V2 · 2026

w2 · 粗糙的第一版，好过完美的大招

A 闷头一把梭 ALL AT ONCE

designer@studio · 3h session

$build final_design.html // v1.0 · 一次做完

0% 03:00:00

REJECTED

B 尽早 show SHOW EARLY

draft · v1 15 min

draft · v2 25 min

draft · v3 35 min

ifq · design

FILE:demos/c4-tweaks.html c4-tweaks · 拨动即所得（中文版）

IFQ · DESIGN

V2 · 2026

yourbrand.design

Agent Studio

为他们造好
工作的场所。

一个设计系统，不等你打开；它在你睡觉时，已经把草稿交出来了。

品牌资产

Logo / 色板 / 字型的单一事实源。

原型工场

写一句话，得到一个能点的 App。

动效引擎

时间轴即代码，25 到 60 帧随意切。

文档工坊

HTML 即 PPTX。

信息图

数据进，杂志出。

专家评审

五维打分，诚实的体检。

方向顾问

给你三条路选。

Junior 模式

先 show，再精修。

品牌协议

五步，不能跳。

拨动即所得

调色 warm

字型 serif

密度 sparse

ifq-design

FILE:assets/deck_index.html Deck · Multi-file Slide Index

‹

›

1 / 1

FILE:assets/android_frame.jsx /** * AndroidFrame — Android设备边框（参考Pixel 8系列） * * 含：punch-hole相机 + 状态栏 + 导航栏 + 圆角 * * 用法： * * * */ const androidFrameStyles = { wrapper: { display: 'inline-block', padding: 10, background: '#1a1a1a', borderRadius: 44, boxShadow: '0 0 0 2px #2a2a2a, 0 20px 60px rgba(0,0,0,0.3)', position: 'relative', }, screen: { position: 'relative', borderRadius: 36, overflow: 'hidden', background: '#fff', }, statusBar: { position: 'absolute', top: 0, left: 0, right: 0, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', fontSize: 14, fontWeight: 500, fontFamily: 'Roboto, -apple-system, sans-serif', zIndex: 20, pointerEvents: 'none', }, punchHole: { position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)', width: 14, height: 14, background: '#000', borderRadius: '50%', zIndex: 30, }, statusIcons: { display: 'flex', alignItems: 'center', gap: 6, }, batteryText: { fontSize: 11, fontWeight: 600, marginLeft: 2, }, content: { position: 'absolute', top: 32, left: 0, right: 0, bottom: 24, overflow: 'auto', }, navBar: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 60, zIndex: 10, }, navButton: { width: 36, height: 4, background: 'rgba(0,0,0,0.3)', borderRadius: 999, }, }; function AndroidFrame({ children, width = 412, height = 892, time = '9:41', battery = 100, darkMode = false, navStyle = 'gesture', }) { const textColor = darkMode ? '#fff' : '#1a1a1a'; return (

{time}

{battery}%

{children}

{navStyle === 'gesture' && (

)} {navStyle === 'buttons' && (

◁ ○ □

)}

); } if (typeof window !== 'undefined') { window.AndroidFrame = AndroidFrame; } FILE:assets/browser_window.jsx /** * BrowserWindow — 浏览器窗口边框（Chrome风格） * * 含：traffic lights + tab bar + URL bar * * 用法： * * * */ const browserWindowStyles = { window: { display: 'inline-block', background: '#fff', borderRadius: 10, overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)', }, chrome: { background: '#dee1e6', paddingTop: 10, paddingLeft: 10, paddingRight: 10, userSelect: 'none', }, tabRow: { display: 'flex', alignItems: 'flex-end', gap: 6, position: 'relative', }, trafficLights: { display: 'flex', gap: 8, alignItems: 'center', paddingBottom: 10, marginRight: 8, }, light: { width: 12, height: 12, borderRadius: '50%', border: '0.5px solid rgba(0,0,0,0.15)', }, close: { background: '#ff5f57' }, minimize: { background: '#febc2e' }, maximize: { background: '#28c840' }, tab: { background: '#fff', padding: '8px 30px 8px 14px', borderTopLeftRadius: 10, borderTopRightRadius: 10, fontSize: 12, color: '#222', fontFamily: '-apple-system, sans-serif', maxWidth: 220, display: 'flex', alignItems: 'center', gap: 8, position: 'relative', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }, favicon: { width: 14, height: 14, borderRadius: 2, background: '#999', flexShrink: 0, }, navBar: { background: '#fff', padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid #e5e7eb', }, navButtons: { display: 'flex', gap: 4, color: '#5f6368', fontSize: 16, }, navButton: { width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', cursor: 'pointer', }, urlBar: { flex: 1, background: '#f1f3f4', borderRadius: 999, padding: '7px 14px', fontSize: 13, color: '#333', display: 'flex', alignItems: 'center', gap: 8, fontFamily: '-apple-system, sans-serif', }, lockIcon: { color: '#5f6368', fontSize: 12, }, content: { position: 'relative', overflow: 'auto', background: '#fff', }, }; function BrowserWindow({ title = 'New Tab', url = 'https://example.com', width = 1200, height = 800, showTrafficLights = true, children, }) { return (

{showTrafficLights && (

)}

{title}

←

→

↻

🔒 {url}

{children}

); } if (typeof window !== 'undefined') { window.BrowserWindow = BrowserWindow; } FILE:assets/macos_window.jsx /** * MacosWindow — macOS应用窗口边框（含traffic lights） * * 用法： * * * */ const macosWindowStyles = { window: { display: 'inline-block', background: '#fff', borderRadius: 10, overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)', }, titleBar: { height: 38, background: 'linear-gradient(to bottom, #e8e8e8, #d8d8d8)', display: 'flex', alignItems: 'center', padding: '0 14px', borderBottom: '0.5px solid rgba(0,0,0,0.1)', position: 'relative', userSelect: 'none', }, trafficLights: { display: 'flex', gap: 8, alignItems: 'center', }, light: { width: 12, height: 12, borderRadius: '50%', border: '0.5px solid rgba(0,0,0,0.15)', }, close: { background: '#ff5f57' }, minimize: { background: '#febc2e' }, maximize: { background: '#28c840' }, title: { position: 'absolute', left: 0, right: 0, textAlign: 'center', fontSize: 13, color: '#333', fontWeight: 500, fontFamily: '-apple-system, "SF Pro Text", sans-serif', pointerEvents: 'none', }, content: { position: 'relative', overflow: 'auto', }, titleBarDark: { background: 'linear-gradient(to bottom, #3c3c3c, #2c2c2c)', borderBottom: '0.5px solid rgba(255,255,255,0.1)', }, titleDark: { color: '#ddd', }, }; function MacosWindow({ title = '', width = 900, height = 600, darkMode = false, children }) { return (

{title && (

{title}

)}

{children}

); } if (typeof window !== 'undefined') { window.MacosWindow = MacosWindow; } FILE:assets/personal-asset-index.example.json { "_meta": { "description": "个人素材索引模板 — 复制此文件并填入你的真实数据", "how_to_use": "1. 复制此文件到你的 agent memory 目录（Claude Code: ~/.claude/memory/、Cursor: workspace 设定、OpenClaw: ~/.openclaw/memory/、ifq CLI: ~/.ifq/memory/） 2. 填入你的真实信息 3. ifq-design-skills 会自动读取", "note": "真实数据文件不要放在 skill 目录内，避免随 skill 分发泄露隐私" }, "identity": { "real_name": "你的真名", "pen_names": ["笔名1", "笔名2"], "english_name": "English Name", "title": "你的头衔/一句话介绍", "bio_short": "50-100字简介", "bio_long": "200-300字详细介绍", "avatar_url": "头像URL", "source": "数据来源备注" }, "contact": { "email": "your@email.com", "wechat_personal": "微信号", "source": "数据来源备注" }, "social_media": { "github": { "url": "https://github.com/yourname", "username": "yourname" }, "youtube": { "url": "https://www.youtube.com/@YourChannel", "channel_name": "频道名" }, "source": "数据来源备注" }, "websites": { "main_site": { "url": "https://yoursite.com", "description": "网站描述", "local_path": "/path/to/local/project/" } }, "products": { "product_1": { "name": "产品名", "type": "iOS App / Web App / CLI Tool / 电子书", "achievement": "主要成就", "icon_path": "/path/to/icon.png", "project_path": "/path/to/project/" } }, "stats": { "social_followers": "粉丝数", "product_users": "用户数", "source": "数据来源备注" }, "design_assets": { "article_images": { "base_path": "/path/to/images/", "notable_sets": [] } }, "knowledge_base": { "wechat_articles": "/path/to/knowledge_base/" } } FILE:assets/banner.svg FILE:assets/ios_frame.jsx /** * IosFrame — iPhone设备边框 * * 参考iPhone 15 Pro（393×852 logical pixels） * 含：灵动岛 + 状态栏（时间/信号/电池）+ Home Indicator + 圆角 * * 用法： * * * * * 自定义： * * ... * */ const iosFrameStyles = { wrapper: { display: 'inline-block', padding: 12, background: '#000', borderRadius: 60, boxShadow: '0 0 0 2px #1f2937, 0 20px 60px rgba(0,0,0,0.3)', position: 'relative', }, screen: { position: 'relative', borderRadius: 48, overflow: 'hidden', background: '#fff', }, statusBar: { position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px 0 32px', fontSize: 16, fontWeight: 600, fontFamily: '-apple-system, "SF Pro Text", sans-serif', zIndex: 20, pointerEvents: 'none', }, dynamicIsland: { position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 124, height: 36, background: '#000', borderRadius: 999, zIndex: 30, }, statusIcons: { display: 'flex', alignItems: 'center', gap: 6, }, signalIcon: { display: 'flex', alignItems: 'flex-end', gap: 2, height: 12, }, signalBar: { width: 3, background: 'currentColor', borderRadius: 1, }, wifiIcon: { width: 16, height: 12, position: 'relative', }, batteryIcon: { width: 26, height: 12, border: '1.5px solid currentColor', borderRadius: 3, padding: 1, position: 'relative', opacity: 0.8, }, batteryCap: { position: 'absolute', top: 3, right: -3, width: 2, height: 6, background: 'currentColor', borderRadius: '0 1px 1px 0', }, content: { position: 'absolute', top: 54, left: 0, right: 0, bottom: 34, overflow: 'auto', }, homeIndicator: { position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)', width: 140, height: 5, background: 'rgba(0,0,0,0.3)', borderRadius: 999, zIndex: 10, }, homeIndicatorDark: { background: 'rgba(255,255,255,0.5)', }, }; function IosFrame({ children, width = 393, height = 852, time = '9:41', battery = 100, darkMode = false, showStatusBar = true, showDynamicIsland = true, showHomeIndicator = true, }) { const textColor = darkMode ? '#fff' : '#000'; return (

{showStatusBar && (

{time}

)} {showDynamicIsland &&

}

{children}

{showHomeIndicator && (

)}

); } if (typeof window !== 'undefined') { window.IosFrame = IosFrame; } FILE:assets/deck_stage.js /** * — HTML幻灯片外壳web component * * 提供功能： * - 固定尺寸canvas（默认1920×1080）+ auto-scale + letterbox * - 键盘导航（←/→/Space/Home/End/Esc） * - 左右点击区域导航 * - slide counter (当前/总数) * - localStorage持久化当前slide * - Speaker notes postMessage (支持外层渲染) * - Hash导航 (#slide-5 跳到第5张) * - Print-to-PDF支持 (Cmd+P / Ctrl+P 一页一slide) * - 自动给每个slide添加 data-screen-label * * 用法： * *

Slide 1

Slide 2

* * * 自定义尺寸： * ... * * Speaker notes：在加 * */ (function() { const STORAGE_KEY_PREFIX = 'deck-stage-slide-'; class DeckStage extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this._currentSlide = 0; this._slides = []; this._storageKey = STORAGE_KEY_PREFIX + (location.pathname || 'default'); } connectedCallback() { this._width = parseInt(this.getAttribute('width')) || 1920; this._height = parseInt(this.getAttribute('height')) || 1080; // Shadow DOM 先渲染（独立于子节点，不受 parser 时机影响） this._render(); // 防御：若 script 放在里（而非之后）， // parser 此刻可能还没处理完子

，querySelectorAll 会返回空。 // 延迟到下一个事件循环，确保子节点都已 parse 完毕。 const init = () => { this._collectSlides(); this._setupEventListeners(); this._restoreSlide(); this._updateDisplay(); this._setupPrintStyles(); }; if (this.ownerDocument.readyState === 'loading') { // 文档还在 parse，等 DOMContentLoaded 一次搞定所有 section this.ownerDocument.addEventListener('DOMContentLoaded', init, { once: true }); } else { // 文档已 parse 完（script 在 body 底部或 defer），下一帧收集即可 requestAnimationFrame(init); } } _render() { this.shadowRoot.innerHTML = `

‹

›

1 / 1

`; } _collectSlides() { this._slides = Array.from(this.querySelectorAll(':scope > section')); this._slides.forEach((slide, idx) => { if (!slide.hasAttribute('data-screen-label')) { const num = String(idx + 1).padStart(2, '0'); slide.setAttribute('data-screen-label', num); } if (!slide.hasAttribute('data-om-validate')) { slide.setAttribute('data-om-validate', ''); } }); } _setupEventListeners() { window.addEventListener('resize', () => this._updateScale()); document.addEventListener('keydown', (e) => { if (e.target.matches('input, textarea, [contenteditable]')) return; switch (e.key) { case 'ArrowRight': case ' ': case 'PageDown': e.preventDefault(); this.next(); break; case 'ArrowLeft': case 'PageUp': e.preventDefault(); this.prev(); break; case 'Home': e.preventDefault(); this.goTo(0); break; case 'End': e.preventDefault(); this.goTo(this._slides.length - 1); break; } }); this.shadowRoot.getElementById('navLeft').addEventListener('click', () => this.prev()); this.shadowRoot.getElementById('navRight').addEventListener('click', () => this.next()); window.addEventListener('hashchange', () => this._handleHash()); if (location.hash) { setTimeout(() => this._handleHash(), 0); } const observer = new MutationObserver(() => { if (this.hasAttribute('noscale')) { this._updateScale(); } }); observer.observe(this, { attributes: true, attributeFilter: ['noscale'] }); } _handleHash() { const match = location.hash.match(/^#slide-(\d+)$/); if (match) { const idx = parseInt(match[1]) - 1; if (idx >= 0 && idx < this._slides.length) { this.goTo(idx); } } } _restoreSlide() { try { const stored = localStorage.getItem(this._storageKey); if (stored !== null) { const idx = parseInt(stored); if (idx >= 0 && idx < this._slides.length) { this._currentSlide = idx; } } } catch (e) {} } _saveSlide() { try { localStorage.setItem(this._storageKey, String(this._currentSlide)); } catch (e) {} } _updateScale() { if (this.hasAttribute('noscale')) { const stage = this.shadowRoot.getElementById('stage'); stage.style.transform = 'none'; stage.style.top = '0'; stage.style.left = '0'; return; } const stage = this.shadowRoot.getElementById('stage'); if (!stage) return; const viewportW = window.innerWidth; const viewportH = window.innerHeight; const scale = Math.min(viewportW / this._width, viewportH / this._height); const scaledW = this._width * scale; const scaledH = this._height * scale; const offsetX = (viewportW - scaledW) / 2; const offsetY = (viewportH - scaledH) / 2; stage.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`; stage.style.top = '0'; stage.style.left = '0'; } _updateDisplay() { this._slides.forEach((slide, idx) => { slide.classList.toggle('active', idx === this._currentSlide); }); const counter = this.shadowRoot.getElementById('counter'); if (counter) { counter.textContent = `${this._currentSlide + 1} / ${this._slides.length}`; } this._updateScale(); try { window.postMessage({ slideIndexChanged: this._currentSlide, totalSlides: this._slides.length }, '*'); } catch (e) {} try { if (window.parent && window.parent !== window) { window.parent.postMessage({ slideIndexChanged: this._currentSlide, totalSlides: this._slides.length }, '*'); } } catch (e) {} } _setupPrintStyles() { const printStyle = document.createElement('style'); printStyle.textContent = ` @media print { @page { size: ${this._width}px ${this._height}px; margin: 0; } body { margin: 0; padding: 0; } deck-stage { position: static !important; } deck-stage > section { display: block !important; position: relative !important; width: ${this._width}px !important; height: ${this._height}px !important; page-break-after: always; overflow: hidden; } deck-stage > section:last-child { page-break-after: auto; } } `; document.head.appendChild(printStyle); } next() { if (this._currentSlide < this._slides.length - 1) { this._currentSlide++; this._saveSlide(); this._updateDisplay(); } } prev() { if (this._currentSlide > 0) { this._currentSlide--; this._saveSlide(); this._updateDisplay(); } } goTo(idx) { if (idx >= 0 && idx < this._slides.length) { this._currentSlide = idx; this._saveSlide(); this._updateDisplay(); } } get currentSlide() { return this._currentSlide; } get totalSlides() { return this._slides.length; } } customElements.define('deck-stage', DeckStage); window.DeckStage = DeckStage; })(); FILE:assets/design_canvas.jsx /** * DesignCanvas — 变体并排网格布局 * * 用于展示2+个静态设计variations让用户对比选择。 * 每个variation有label，可hover放大。 * * 用法： * * *

...你的设计1...

* * *

...你的设计2...

* * *

...你的设计3...

* * * * 配合React+Babel使用。放在合适的script里，然后window.DesignCanvas/window.Variation可用。 */ const canvasStyles = { container: { minHeight: '100vh', background: '#F5F5F0', padding: '40px 60px', fontFamily: '-apple-system, "SF Pro Text", "PingFang SC", sans-serif', }, header: { marginBottom: 48, maxWidth: 900, }, title: { fontSize: 36, fontWeight: 600, marginBottom: 12, color: '#1A1A1A', letterSpacing: '-0.02em', }, subtitle: { fontSize: 16, color: '#666', lineHeight: 1.5, }, grid: { display: 'grid', gap: 32, }, cell: { display: 'flex', flexDirection: 'column', gap: 12, }, cellHeader: { display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 8, borderBottom: '1px solid #E0E0DA', }, label: { fontSize: 14, fontWeight: 600, color: '#1A1A1A', letterSpacing: '-0.01em', }, description: { fontSize: 13, color: '#888', }, frame: { background: '#fff', borderRadius: 4, border: '1px solid #E0E0DA', overflow: 'hidden', position: 'relative', transition: 'transform 0.2s ease, box-shadow 0.2s ease', cursor: 'pointer', }, frameInner: { position: 'relative', width: '100%', }, badge: { position: 'absolute', top: 12, left: 12, background: 'rgba(0, 0, 0, 0.7)', color: '#fff', padding: '3px 8px', borderRadius: 4, fontSize: 11, fontWeight: 500, letterSpacing: '0.5px', textTransform: 'uppercase', zIndex: 10, pointerEvents: 'none', }, }; function DesignCanvas({ title, subtitle, columns = 3, children }) { const [expanded, setExpanded] = React.useState(null); const gridStyle = { ...canvasStyles.grid, gridTemplateColumns: `repeat(${columns}, 1fr)`, }; return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)}

{React.Children.map(children, (child, idx) => React.isValidElement(child) ? React.cloneElement(child, { _index: idx, _expanded: expanded === idx, _onToggle: () => setExpanded(expanded === idx ? null : idx), }) : child )}

{expanded !== null && (

setExpanded(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0, 0, 0, 0.75)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, cursor: 'zoom-out', }} >

e.stopPropagation()} style={{ background: '#fff', borderRadius: 8, overflow: 'hidden', maxWidth: '90vw', maxHeight: '90vh', position: 'relative', }} > {React.Children.toArray(children)[expanded]}

)}

); } function Variation({ label, description, number, children, _index, _expanded, _onToggle, aspectRatio = '4 / 3' }) { const displayNumber = number || String(_index + 1).padStart(2, '0'); return (

{displayNumber} {label} {description && — {description}}

{ e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.08)'; }} onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }} >

{children}

); } if (typeof window !== 'undefined') { Object.assign(window, { DesignCanvas, Variation }); } FILE:assets/animations.jsx /** * animations.jsx — 时间轴动画引擎 * * Stage + Sprite 模式，借鉴Remotion但轻量化。 * * 导出（挂到 window.Animations）： * - Stage: 整个动画容器，提供时间+控制 * - Sprite: 时间片段，start/end内显示，提供本地进度 * - useTime(): 读全局时间（秒） * - useSprite(): 读本地进度 {t: 0→1, elapsed: seconds, duration: seconds} * - Easing: {linear, easeIn, easeOut, easeInOut, spring, anticipation} * - interpolate(t, [input0, input1], [output0, output1], easing?) * * 用法： * * * * </Sprite> * <Sprite start={2} end={5}> * <Subtitle /> * </Sprite> * </Stage> * * 在Sprite子组件里用 useSprite() 读当前片段进度。 */ (function() { const { createContext, useContext, useState, useEffect, useRef, useCallback } = React; const TimeContext = createContext({ time: 0, duration: 10, playing: false }); const SpriteContext = createContext(null); const Easing = { linear: t => t, easeIn: t => t * t, easeOut: t => 1 - (1 - t) * (1 - t), easeInOut: t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2, // expoOut: Anthropic-level 主 easing (cubic-bezier(0.16, 1, 0.3, 1)) // 迅速启动 + 缓慢刹车，给数字元素物理重量感 expoOut: t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t), // overshoot: 带弹性的 toggle/按钮弹出 (cubic-bezier(0.34, 1.56, 0.64, 1)) overshoot: t => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }, spring: t => { const c = (2 * Math.PI) / 3; return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c) + 1; }, anticipation: t => { if (t < 0.2) return -0.3 * (t / 0.2) * (t / 0.2); const adjusted = (t - 0.2) / 0.8; return -0.012 + 1.012 * adjusted * adjusted * (3 - 2 * adjusted); }, }; function interpolate(t, input, output, easing) { const [inStart, inEnd] = input; const [outStart, outEnd] = output; if (t <= inStart) return outStart; if (t >= inEnd) return outEnd; let progress = (t - inStart) / (inEnd - inStart); if (easing) { progress = easing(progress); } return outStart + (outEnd - outStart) * progress; } function useTime() { const ctx = useContext(TimeContext); return ctx.time; } function useSprite() { const sprite = useContext(SpriteContext); if (!sprite) { return { t: 0, elapsed: 0, duration: 0 }; } return sprite; } const stageStyles = { wrapper: { position: 'fixed', inset: 0, background: '#000', display: 'flex', flexDirection: 'column', fontFamily: '-apple-system, sans-serif', }, stageHolder: { flex: 1, position: 'relative', overflow: 'hidden', }, canvas: { position: 'absolute', top: '50%', left: '50%', transformOrigin: 'center center', background: '#111', overflow: 'hidden', }, controls: { position: 'fixed', bottom: 0, left: 0, right: 0, background: 'rgba(0, 0, 0, 0.8)', backdropFilter: 'blur(10px)', padding: '12px 20px', display: 'flex', alignItems: 'center', gap: 16, color: '#fff', fontSize: 12, zIndex: 100, }, button: { background: 'none', border: '1px solid rgba(255,255,255,0.3)', color: '#fff', padding: '6px 14px', borderRadius: 4, cursor: 'pointer', fontSize: 12, }, timeDisplay: { fontFamily: 'ui-monospace, monospace', fontVariantNumeric: 'tabular-nums', minWidth: 90, }, scrubber: { flex: 1, height: 4, background: 'rgba(255,255,255,0.2)', borderRadius: 2, position: 'relative', cursor: 'pointer', }, scrubberFill: { position: 'absolute', top: 0, left: 0, height: '100%', background: '#fff', borderRadius: 2, pointerEvents: 'none', }, scrubberHandle: { position: 'absolute', top: '50%', width: 12, height: 12, background: '#fff', borderRadius: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none', }, }; function Stage({ duration = 10, width = 1920, height = 1080, fps = 60, loop = true, children, bgColor = '#fff' }) { const [time, setTime] = useState(0); const [playing, setPlaying] = useState(true); const [scale, setScale] = useState(1); const rafRef = useRef(null); const startTimeRef = useRef(performance.now()); const canvasRef = useRef(null); // Recording mode: render-video.js injects window.__recording = true before goto. // When set, force loop=false so the export ends on the final frame instead of // wrapping back to t=0 and capturing the start of the next cycle. // (Browsers viewing manually still loop because __recording is undefined there.) const effectiveLoop = (typeof window !== 'undefined' && window.__recording) ? false : loop; useEffect(() => { function updateScale() { const vw = window.innerWidth; const vh = window.innerHeight - 56; const s = Math.min(vw / width, vh / height); setScale(s); } updateScale(); window.addEventListener('resize', updateScale); return () => window.removeEventListener('resize', updateScale); }, [width, height]); useEffect(() => { if (!playing) return; let cancelled = false; let last = null; function tick(now) { if (cancelled) return; if (last === null) { // First animation frame. Set last=now so delta starts at 0, // AND announce readiness for video export. // This pairing is critical: window.__ready must flip to true at // the exact moment WebM captures frame 0 of the animation, so // render-video.js's trim offset equals the pre-animation gap. last = now; if (typeof window !== 'undefined') window.__ready = true; } const delta = (now - last) / 1000; last = now; setTime(prev => { const next = prev + delta; if (next >= duration) { // effectiveLoop honors window.__recording (forced non-loop during export). // Stop just shy of duration so the final-frame state stays rendered // (avoids exiting all Sprites that end exactly at `duration`). return effectiveLoop ? 0 : duration - 0.001; } return next; }); rafRef.current = requestAnimationFrame(tick); } // Wait for fonts before starting the clock — makes frame 0 the // real "finished-loading" frame users see, not a fallback-font flash. const startAfterFonts = () => { if (cancelled) return; rafRef.current = requestAnimationFrame(tick); }; if (typeof document !== 'undefined' && document.fonts && document.fonts.ready) { document.fonts.ready.then(startAfterFonts); } else { startAfterFonts(); } return () => { cancelled = true; cancelAnimationFrame(rafRef.current); }; }, [playing, duration, effectiveLoop]); const handleScrub = useCallback((e) => { const rect = e.currentTarget.getBoundingClientRect(); const ratio = (e.clientX - rect.left) / rect.width; setTime(Math.max(0, Math.min(duration, ratio * duration))); }, [duration]); const handleSeek = useCallback((e) => { handleScrub(e); setPlaying(false); }, [handleScrub]); const progress = time / duration; const ctx = { time, duration, playing, setPlaying, setTime, }; const canvasStyle = { ...stageStyles.canvas, width, height, background: bgColor, transform: `translate(-50%, -50%) scale(${scale})`, }; return ( <TimeContext.Provider value={ctx}> <div style={stageStyles.wrapper}> <div style={stageStyles.stageHolder}> <div ref={canvasRef} style={canvasStyle}> {children} </div> </div> <div style={stageStyles.controls}> <button style={stageStyles.button} onClick={() => setPlaying(p => !p)} > {playing ? '⏸ 暂停' : '▶ 播放'} </button> <button style={stageStyles.button} onClick={() => setTime(0)} > ⏮ 开始 </button> <div style={stageStyles.timeDisplay}> {time.toFixed(2)}s / {duration.toFixed(2)}s </div> <div style={stageStyles.scrubber} onMouseDown={handleSeek}> <div style={{ ...stageStyles.scrubberFill, width: `${progress * 100}%` }} /> <div style={{ ...stageStyles.scrubberHandle, left: `${progress * 100}%` }} /> </div> </div> </div> </TimeContext.Provider> ); } function Sprite({ start = 0, end, children, style }) { const { time } = useContext(TimeContext); const actualEnd = end == null ? Infinity : end; if (time < start || time >= actualEnd) { return null; } const duration = actualEnd - start; const elapsed = time - start; const t = duration === 0 ? 1 : Math.max(0, Math.min(1, elapsed / duration)); const spriteValue = { t, elapsed, duration, start, end: actualEnd }; return ( <SpriteContext.Provider value={spriteValue}> <div style={{ position: 'absolute', inset: 0, ...style }}> {children} </div> </SpriteContext.Provider> ); } if (typeof window !== 'undefined') { window.Animations = { Stage, Sprite, useTime, useSprite, Easing, interpolate, }; } })(); FILE:assets/templates/infographic-vertical.html <!doctype html>  <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=1242"/> <title>{ TITLE } · ifq.ai

ifq.ai · { KICKER · WHITE PAPER } · __IFQ_YEAR__

{ TITLE — pair with italic accent }

{ LEAD — one-sentence premise, 80–140 chars. }

{ Section 1 headline }

{ body paragraph 1 }

{ body paragraph 2 }

"{ key quote that anchors the piece. }" — { source / author }

{ Section 2 headline }

{ YYYY · MM }
{ milestone one }
{ YYYY · MM }
{ milestone two }
{ YYYY · MM }
{ milestone three }

{ Section 3 headline }

{ closing body }

ifq.ai / { PUBLICATION }

ifq.ai / __IFQ_YEAR__

FILE:assets/templates/slide-title.html { TALK TITLE } · ifq.ai keynote

{ IFQ KEYNOTE } · __IFQ_YEAR__

{ Your talk title, italicized punch. }

{ One-line thesis of the talk — 12 to 25 words, italic serif voice. }

FILE:assets/templates/business-card.html { NAME } · Business Card

ifq.ai

{ NAME }

{ TITLE · e.g. Designer · Founder }

"Intelligence, framed quietly."

{ EMAIL }{ PHONE }

ifq.ai/{ path }{ HANDLE · @... }

ifq.ai / design systems / __IFQ_YEAR__ correspondence

FILE:assets/templates/social-x-card.html { HEADLINE } · ifq.ai

ifq.ai

{ TAG · e.g. LAUNCH } · __IFQ_YEAR__

{ HEADLINE — punchy, italic for key word. }

{ URL · ifq.ai/product }

ifq.ai / signal

FILE:assets/templates/changelog-timeline.html { PRODUCT } · Changelog · ifq.ai

{ PRODUCT · Release Notes }

Changelog

{ 一句话介绍：What this product does and why these changes matter. }

{ RELEASE DATE · YYYY · MM · DD }
v{ X.Y.Z }

{ Release headline }

{ 2–3 line narrative summary of the release. }

New{ feature one }
New{ feature two }
Fix{ bug fix }
Change{ behavior change }

{ PRIOR DATE · YYYY · MM · DD }
v{ X.Y.Z−1 }

{ Prior release headline }

{ summary. }

New{ ... }
Breaking{ breaking change — link to migration guide }

{ EARLIER DATE · YYYY · MM · DD }
v{ X.Y.Z−2 }

{ ... }

Fix{ ... }

FILE:assets/templates/hero-landing.html { HEADLINE } · ifq.ai

{ SIGNAL } · __IFQ_YEAR__

{ HEADLINE.
Make it pretty. }

{ SUPPORTING SENTENCE — 20–30 words that situate the product and its audience. Keep it one paragraph. }

{ CTA TEXT }

Modes

Hand-drawn Icons

Design Philosophies

∞

Variants per Prompt

ifq.ai / field signal / { ISSUE }

FILE:assets/templates/INDEX.json { "$schema": "./templates.schema.json", "version": "2.0", "author": "ifq-design-skills", "description": "IFQ Design Skills · built-in HTML templates with ambient IFQ cues already woven into layout rhythm, metadata, and colophon logic. Agents should Read the template before generating, then fork-and-fill with subject matter instead of blank-starting.", "templates": [ { "id": "T-hero-landing", "mode": ["M-02", "M-12"], "name": "Editorial Hero Landing", "file": "assets/templates/hero-landing.html", "viewport": "1440×900", "notes": "IFQ-native hero scaffold with rust ledger, sparkle cue, quiet colophon, and editorial header rhythm." }, { "id": "T-slide-title", "mode": ["M-08"], "name": "Keynote Title Slide", "file": "assets/templates/slide-title.html", "viewport": "1920×1080", "notes": "IFQ keynote title slide with field-note stamp area, spark cluster, and rust divider." }, { "id": "T-dashboard", "mode": ["M-04"], "name": "Command Center Dashboard", "file": "assets/templates/dashboard-command-center.html", "viewport": "1440×900", "notes": "Left nav + KPI strip + 3×3 metric grid + quiet IFQ live-system footer. Uses hand-drawn radar/arrow icons." }, { "id": "T-infographic-vertical", "mode": ["M-03", "M-07"], "name": "Vertical Infographic (小红书长图)", "file": "assets/templates/infographic-vertical.html", "viewport": "1242×3200", "notes": "Multi-section scroll with timeline, pull-quotes, and IFQ field-note footer treatment." }, { "id": "T-social-x", "mode": ["M-09"], "name": "X/Twitter Share Card", "file": "assets/templates/social-x-card.html", "viewport": "1200×675", "notes": "IFQ social card with rust ledger, spark cue, and authored bottom line." }, { "id": "T-compare-vs", "mode": ["M-05"], "name": "A vs B Comparison Matrix", "file": "assets/templates/compare-vs.html", "viewport": "1440×900", "notes": "IFQ comparison sheet with radar footer and field-research metadata." }, { "id": "T-changelog", "mode": ["M-07"], "name": "Changelog Timeline", "file": "assets/templates/changelog-timeline.html", "viewport": "1200×variable", "notes": "Release ledger with mono dates, rust timeline spine, and IFQ-authored footer." }, { "id": "T-business-card", "mode": ["M-10"], "name": "Business Card (90×54mm + 3mm bleed)", "file": "assets/templates/business-card.html", "viewport": "96×60mm", "notes": "IFQ business card scaffold with spark cue, quiet URL, and authored back colophon." } ] } FILE:assets/templates/compare-vs.html { A_NAME } vs { B_NAME } · ifq.ai

{ CATEGORY · e.g. BENCHMARK · MODEL COMPARISON }

{ A_NAME }vs{ B_NAME }

Reviewed · __IFQ_YEAR_MONTH__
Source: ifq.ai / { SOURCE / RESEARCH LOG }
Scope: { SCOPE }

{ A_NAME }

Contender A

{ row 1 }{ A · value }
{ row 2 }{ A · value }
{ row 3 }{ A · value }
{ row 4 }{ A · value }
{ row 5 }{ A · value }

{ B_NAME }

Contender B

{ row 1 }{ B · value }
{ row 2 }{ B · value }
{ row 3 }{ B · value }
{ row 4 }{ B · value }
{ row 5 }{ B · value }

Verdict. { one-sentence summary of who wins for whom. }

FILE:assets/templates/dashboard-command-center.html Command Center · ifq.ai

{ Dashboard title }

ifq.ai / live system / last updated · 3 min ago

1D7D30D90D

Active users

12,438

+8.4% vs 30d

Designs shipped

1,284

+12.1%

Avg. review score

8.6/10

+0.3

AI slop flagged

0.4%

−1.2pp

Launches

14 shipped

this month · 4 product, 10 marketing

Prompts resolved

96.8%

1,284 total · 41 needing review

Brand compliance

91.2%

12 assets need refresh

Motion renders

320 mp4

60fps · palette-optimized gif

Decks exported

186 pptx

real text frames, not images

Advisor triggers

28%

vague-prompt fallback rate

Philosophies used

20 / 20

all 5 schools represented

Playwright pass rate

98.2%

pre-delivery click tests

Next sprint

4 modes in beta

M-05 · M-09 · M-11 · M-12

ifq.ai / live system

FILE:assets/ifq-brand/BRAND-DNA.md # IFQ Brand DNA · 环境式品牌宪章 > 这份文件定义的不是一张 logo 的摆放规则， > 而是 ifq.ai 如何在页面里变成“看不见但看得出”的存在。 --- ## §0 · 核心判断 IFQ 不应该靠 loud branding 取胜。 IFQ 应该靠 **结构、气味、节奏、微标记、完成度** 取胜。所以 IFQ 的 DNA 不是“把 ifq.ai 写几次”，而是： - 页面有没有一种克制但清晰的 intelligence - 信息有没有被精确地 framed - 细节有没有像是同一只手做的 --- ## §1 · 色彩 DNA ```css --ifq-accent: #D4532B; --ifq-accent-deep: #A83518; --ifq-accent-soft: #FFB27A; --ifq-ink: #111111; --ifq-graphite: #1D1D1F; --ifq-muted: #6E6A63; --ifq-paper: #FAF7F2; --ifq-cream: #F1EBE0; --ifq-hairline: #E6DFD3; ``` 规则： - rust 是节奏色，不是涂满页面的主色 - 纸白必须带温度，不用冷白 - 黑不是纯黑，而是 graphite / ink 的层次 --- ## §2 · 字体 DNA | 角色 | 字体 | 感受 | |------|------|------| | Display | Newsreader / Noto Serif SC | 冷静、编辑感、带一点诗性 | | Mono | JetBrains Mono | authored、工程化、field note | | Body | system sans / serif depending surface | 清晰，不抢戏 | 规则： - 标题里保留 italic 的判断点 - Mono 只说事实、标签、序号、来源 - Display 负责呼吸，Mono 负责证据 --- ## §3 · 母题 DNA ### Signal Spark 8-point sparkle 是 IFQ intelligence 被点亮的瞬间。它可以是： - hero 右上角的点火 - motion 的一帧 cue - stamp 的中心 - footer 前的小信号 ### Rust Ledger IFQ 很少用大块品牌图形。 IFQ 更像一本被精确排版的刊物。所以： - 竖线 - 边界 - 编号 - 轴线比大 logo 更像 IFQ。 ### Quiet URL `ifq.ai` 应该像一个知道自己身份的人，不需要喊。它应该小，但准。 --- ## §4 · 栅格 DNA IFQ 的秩序感来自 ledger： ```text 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 ``` 不是因为 8pt 很时髦，而是因为它让页面有一种可验证的冷静。 --- ## §5 · authored DNA IFQ 的 authored line 推荐形式： - `ifq.ai / ` - `ifq.ai / live system` - `ifq.ai / release ledger` - `ifq.ai / signal` - `ifq.ai / intelligence framed quietly` 这类文字应该出现在： - footer - closing - card back - dashboard corner - motion outro 它们比 “designed with …” 更像 IFQ。 --- ## §6 · 层级策略 ### IFQ 自有物料可以使用： - 完整 logo - sparkle - stamp - quiet URL - field note ### 共品牌物料必须做到： - 用户品牌第一 - IFQ authored layer 第二 - 两者不是竞争关系，而是署名关系 ### clean-room white-label 只有在明确要求时才执行。执行时去掉显式 IFQ 文本，但保留版面温度、节奏、对位和完成度。 --- ## §7 · 设计判断标准看到一页时，先问 3 个问题： 1. 主题是否明显在前？ 2. IFQ 是否在第二眼自然浮现？ 3. 这页是不是只有 IFQ 会这样处理？只有三条都成立，这页才算对。 --- ## §8 · 一句话使命 **让 intelligence 被 framed 得足够安静，也足够难忘。** FILE:assets/ifq-brand/ifq-tokens.css /* ================================================================ * ifq-tokens.css · IFQ editorial tokens * Generated by IFQ Design Skills · © 2026 ifq.ai * * Token set for IFQ-authored editorial work. These tokens are the * quiet infrastructure of IFQ pages: rust ledger, warm paper, mono * field notes, and controlled motion. See assets/ifq-brand/BRAND-DNA.md * and references/ifq-brand-spec.md. * ================================================================ */ :root { /* §1 — Color · Rust Trilogy + warm neutrals */ --ifq-accent: #D4532B; --ifq-accent-deep: #A83518; --ifq-accent-soft: #FFB27A; --ifq-ink: #111111; --ifq-graphite: #1D1D1F; --ifq-muted: #6E6A63; --ifq-paper: #FAF7F2; --ifq-cream: #F1EBE0; --ifq-hairline: #E6DFD3; /* §2 — Typography · three-family system */ --ifq-font-display: "Newsreader", "Noto Serif SC", "Songti SC", Georgia, serif; --ifq-font-body: "Noto Serif SC", "Songti SC", Georgia, "Newsreader", serif; --ifq-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; --ifq-text-xs: 11px; --ifq-text-sm: 13px; --ifq-text-base: 16px; --ifq-text-lg: 19px; --ifq-text-xl: 24px; --ifq-text-2xl: 32px; --ifq-text-3xl: 48px; --ifq-text-4xl: 64px; --ifq-text-5xl: 96px; /* §4 — 8-point ledger */ --ifq-space-0: 0px; --ifq-space-1: 4px; --ifq-space-2: 8px; --ifq-space-3: 12px; --ifq-space-4: 16px; --ifq-space-6: 24px; --ifq-space-8: 32px; --ifq-space-12: 48px; --ifq-space-16: 64px; --ifq-space-24: 96px; --ifq-space-32: 128px; /* §5 — Motion */ --ifq-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ifq-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ifq-duration-xs: 120ms; --ifq-duration-sm: 200ms; --ifq-duration-md: 400ms; --ifq-duration-lg: 800ms; --ifq-duration-xl: 1800ms; /* Motif — 8-point sparkle path (drop into ) */ --ifq-spark-path: "M0 -10 L2.2 -2.2 L10 0 L2.2 2.2 L0 10 L-2.2 2.2 L-10 0 L-2.2 -2.2 Z"; } /* Dark scheme (mirrors the rust palette on a warm ink canvas) */ @media (prefers-color-scheme: dark) { :root { --ifq-ink: #F5EFE3; --ifq-graphite: #EAE2D3; --ifq-muted: #A89F91; --ifq-paper: #141212; --ifq-cream: #1C1916; --ifq-hairline: #2A2520; --ifq-accent-soft:#FFB27A; } } /* Reduced motion · honor user preference */ @media (prefers-reduced-motion: reduce) { :root { --ifq-duration-xs: 0ms; --ifq-duration-sm: 0ms; --ifq-duration-md: 0ms; --ifq-duration-lg: 0ms; --ifq-duration-xl: 0ms; } } /* ------------------------------------------------------------------ * Ready-to-use building blocks · IFQ-authored defaults * ------------------------------------------------------------------ */ .ifq-body-base { font-family: var(--ifq-font-body); font-size: var(--ifq-text-base); line-height: 1.55; color: var(--ifq-ink); background: var(--ifq-paper); text-wrap: pretty; font-feature-settings: "liga", "kern", "calt"; } .ifq-display { font-family: var(--ifq-font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; } .ifq-display em { font-style: italic; color: var(--ifq-accent); } .ifq-mono { font-family: var(--ifq-font-mono); letter-spacing: 0; } .ifq-kicker { font-family: var(--ifq-font-mono); font-size: var(--ifq-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ifq-muted); } .ifq-colophon { font-family: var(--ifq-font-mono); font-size: var(--ifq-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ifq-muted); } .ifq-ledger { border-left: 2px solid var(--ifq-accent); padding-left: var(--ifq-space-4); } .ifq-rust-rule { width: 2px; background: var(--ifq-accent); flex-shrink: 0; } .ifq-hairline { height: 1px; background: var(--ifq-hairline); border: 0; } .ifq-colophon { font-family: var(--ifq-font-mono); font-size: var(--ifq-text-xs); color: var(--ifq-muted); letter-spacing: 0.06em; } /* Sparkle motif as a pure CSS keyframe (no JS needed) */ @keyframes ifq-sparkle { 0%, 100% { opacity: .25; transform: scale(.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(22deg); } } .ifq-spark-anim { color: var(--ifq-accent); animation: ifq-sparkle var(--ifq-duration-xl) var(--ifq-ease) infinite; will-change: transform, opacity; } FILE:assets/ifq-brand/ifq_authored_year.js (function (root, factory) { const api = factory(root); if (typeof module === 'object' && module.exports) { module.exports = api; } root.IfqAuthoredYear = api; })(typeof globalThis !== 'undefined' ? globalThis : this, function (root) { const token = '__IFQ_YEAR__'; const yearMonthToken = '__IFQ_YEAR_MONTH__'; const dateToken = '__IFQ_DATE__'; const isoDateToken = '__IFQ_ISO_DATE__'; function pad(value) { return String(value).padStart(2, '0'); } function fromDateValue(value) { if (value instanceof Date) { if (Number.isNaN(value.getTime())) { return null; } return value; } if (typeof value === 'number' && Number.isFinite(value)) { const authoredDate = new Date(value); if (Number.isNaN(authoredDate.getTime())) { return null; } return authoredDate; } return null; } function fromDateParts(year, month, day) { const parsedYear = Number.parseInt(year, 10); const parsedMonth = Number.parseInt(month, 10); const parsedDay = Number.parseInt(day, 10); if (!Number.isInteger(parsedYear) || !Number.isInteger(parsedMonth) || !Number.isInteger(parsedDay)) { return null; } const authoredDate = new Date(parsedYear, parsedMonth - 1, parsedDay); if (Number.isNaN(authoredDate.getTime())) { return null; } if ( authoredDate.getFullYear() !== parsedYear || authoredDate.getMonth() !== parsedMonth - 1 || authoredDate.getDate() !== parsedDay ) { return null; } return authoredDate; } function fromStringValue(value) { if (typeof value !== 'string') { return null; } const normalized = value.trim(); if (!normalized) { return null; } if (/^\d{4}$/.test(normalized)) { return fromDateParts(normalized, 1, 1); } if (/^\d{10}$/.test(normalized) || /^\d{13}$/.test(normalized)) { const numericDate = fromDateValue(Number(normalized)); if (numericDate) { return numericDate; } } const isoMatch = normalized.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})(?:\b|T|\s|$)/); if (isoMatch) { const isoDate = fromDateParts(isoMatch[1], isoMatch[2], isoMatch[3]); if (isoDate) { return isoDate; } } const usMatch = normalized.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{4})(?:\b|\s|$)/); if (usMatch) { const usDate = fromDateParts(usMatch[3], usMatch[1], usMatch[2]); if (usDate) { return usDate; } } const parsedTimestamp = Date.parse(normalized); if (Number.isFinite(parsedTimestamp)) { return fromDateValue(parsedTimestamp); } return null; } function resolveInfo(lastModified) { const authoredDate = fromDateValue(lastModified) || fromStringValue(lastModified) || new Date(); const year = String(authoredDate.getFullYear()); const month = pad(authoredDate.getMonth() + 1); const day = pad(authoredDate.getDate()); return { year, month, day, yearMonth: `${year} · ${month}`, date: `${year} · ${month} · ${day}`, isoDate: `${year}-${month}-${day}`, }; } function resolve(lastModified) { return resolveInfo(lastModified).year; } function resolveSource(doc) { if (!doc) { return undefined; } const rootValue = doc.documentElement && doc.documentElement.getAttribute('data-ifq-created-at'); if (typeof rootValue === 'string' && rootValue.trim()) { return rootValue; } const meta = typeof doc.querySelector === 'function' ? doc.querySelector('meta[name="ifq-created-at"], meta[name="ifq:created-at"]') : null; if (meta && typeof meta.content === 'string' && meta.content.trim()) { return meta.content; } return doc.lastModified; } function replaceNodeText(node, fallbackValue, replacements) { const originalText = typeof node.textContent === 'string' ? node.textContent : ''; let nextText = originalText; replacements.forEach((replacement, search) => { nextText = nextText.split(search).join(replacement); }); if (nextText === originalText) { nextText = fallbackValue; } node.textContent = nextText; if (node.tagName === 'TIME' && replacements.has(isoDateToken)) { node.setAttribute('datetime', replacements.get(isoDateToken)); } } function formatDate(info, format) { switch (format) { case 'iso': return info.isoDate; case 'year': return info.year; case 'year-month': return info.yearMonth; default: return info.date; } } function apply(doc) { const targetDocument = doc && typeof doc.querySelectorAll === 'function' ? doc : root.document && typeof root.document.querySelectorAll === 'function' ? root.document : null; const info = resolveInfo(resolveSource(targetDocument)); const replacements = new Map([ [token, info.year], [yearMonthToken, info.yearMonth], [dateToken, info.date], [isoDateToken, info.isoDate], ]); if (!targetDocument) { return info.year; } targetDocument.querySelectorAll('[data-ifq-authored-year]').forEach((node) => { replaceNodeText(node, info.year, replacements); }); targetDocument.querySelectorAll('[data-ifq-authored-date]').forEach((node) => { replaceNodeText(node, formatDate(info, node.getAttribute('data-ifq-authored-date')), replacements); }); return info.year; } return { token, yearMonthToken, dateToken, isoDateToken, resolve, resolveInfo, apply, }; }); FILE:assets/ifq-brand/ifq_brand.jsx /** * IFQ Brand Components · React + inline JSX * ------------------------------------------ * Drop-in components that weave ifq.ai into any deliverable as authored ambience. * Import pattern (single-file HTML, Babel standalone): * * * * Exports (in global scope of the

Unified AI Gateway

One API, every AI model.

Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.

Get started View API reference

quickstart.py

from nexus import Client

client = Client(api_key="your-key")
response = client.chat(
model="auto", # intelligently routes
messages=[{"role": "user", "content": "Hello!"}]
)

Getting Started API Reference Models Pricing

Model Routing

Automatically select the best model for each request based on task complexity, latency requirements, and cost constraints.

Cost Optimization

Reduce AI spend by up to 60% with intelligent model selection and automatic fallback to cost-effective alternatives.

Usage Analytics

Real-time dashboards tracking token usage, response latency, model performance, and cost breakdowns per project.

FILE:assets/showcases/website-devdocs/devdocs-takram.html Nexus API Documentation

Unified AI Gateway

One API,
every AI model

Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.

Get Started API Reference

Your App

request

Nexus

routes

GPT-4o

Claude 3.5

Gemini Pro

quickstart.py

from nexus import Client

client = Client(api_key="your-key")
response = client.chat(
model="auto", # intelligently routes
messages=[{"role": "user", "content": "Hello!"}]
)

Getting Started API Reference Models Pricing

Model Routing

Automatically select the best model for each request based on task complexity, latency, and cost constraints.

Cost Optimization

Reduce AI spend by up to 60% with intelligent selection and automatic fallback to cost-effective alternatives.

Usage Analytics

Real-time dashboards tracking token usage, latency, model performance, and cost breakdowns per project.

FILE:assets/showcases/website-devdocs/devdocs-pentagram.html Nexus API Documentation

Unified AI Gateway

One API,
every AI model

Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.

Get Started API Reference

            
quickstart.py

from nexus import Client

client = Client(api_key="your-key")

response = client.chat(

    model="auto",  # intelligently routes

    messages=[{

        "role": "user",

        "content": "Hello!"

    }]

)

Getting Started API Reference Models Pricing

Feature 01

Model Routing

Automatically select the best model for each request based on task complexity, latency requirements, and cost constraints.

Feature 02

Cost Optimization

Reduce AI spend by up to 60% with intelligent model selection and automatic fallback to cost-effective alternatives.

Feature 03

Usage Analytics

Real-time dashboards tracking token usage, response latency, model performance, and cost breakdowns per project.

FILE:assets/showcases/ppt/ppt-build.html GLM-4.7 Coding Benchmark - Build Studio Style

GLM-4.7 Open-Source Model

Benchmark Evaluation 2025
Official Results

Coding Capability Breakthrough.

First open-source model to achieve state-of-the-art across all major coding benchmarks

95.7

AIME 2025

Mathematical Reasoning

GLM-4.7

95.7

Claude 3.5

88.2

GPT-4o

83.6

73.8%

SWE-bench Verified

Software Engineering

GLM-4.7

73.8%

Claude 3.5

53.3%

GPT-4o

48.2%

87.4

τ²-Bench

Agent Task Completion

GLM-4.7

87.4

Claude 3.5

78.9

GPT-4o

71.5

GLM-4.7 demonstrates that open-source models can compete at the frontier of coding intelligence, outperforming leading proprietary models with margins of +7.5 to +20.5 points across benchmarks.

ZHIPU AI

FILE:assets/showcases/ppt/ppt-takram.html GLM-4.7 Coding Benchmark - Takram Style

Benchmark Analysis

GLM-4.7
Coding 能力突破

Open-source model achieves state-of-the-art performance across all major coding benchmarks for the first time.

GLM-4.7 Open Source

Key Finding

在三项核心编程基准测试中，GLM-4.7 均超越 GPT-4o 和 Claude 3.5，成为首个达到 SOTA 水平的开源模型。

Data: Official benchmark evaluations, 2026

Performance Comparison — 03 benchmarks

GLM-4.7

Claude 3.5

GPT-4o

AIME 2025

Mathematical Reasoning

95.7

+7.5 vs Claude 3.5

Claude 3.5: 88.2 GPT-4o: 83.6

SWE-bench Verified

Software Engineering

73.8%

+20.5 vs Claude 3.5

Claude 3.5: 53.3% GPT-4o: 48.2%

τ²-Bench

Agent Task Completion

87.4

+8.5 vs Claude 3.5

Claude 3.5: 78.9 GPT-4o: 71.5

07 / 24

FILE:assets/showcases/ppt/ppt-pentagram.html GLM-4.7 Coding Benchmark - Pentagram Style

Benchmark Report / 2025 Coding Performance Open-Source SOTA

Open-Source Model

GLM-4.7

95.7

AIME 2025 Score

First open-source model to achieve SOTA across all three major coding benchmarks, surpassing GPT-4o and Claude 3.5.

Open Source

AIME 2025

Mathematical Reasoning

95.7

GLM-4.7

95.7

Claude 3.5

88.2

GPT-4o

83.6

+7.5 vs closed-source best

SWE-bench Verified

Software Engineering

73.8

GLM-4.7

73.8%

Claude 3.5

53.3%

GPT-4o

48.2%

+20.5 vs closed-source best

τ²-Bench

Agent Task Completion

87.4

GLM-4.7

87.4

Claude 3.5

78.9

GPT-4o

71.5

+8.5 vs closed-source best

3/3

Benchmarks Won

Open-Source Ranking

12.2avg

Points Above Runner-Up

ZHIPU AI

Benchmark data sourced from official evaluation reports, 2025

Open-Source SOTA

FILE:assets/showcases/website-homepage/homepage-build.html Alex Chen — Indie Developer & AI Creator

Indie Developer & AI Creator

Alex
Chen.

Building tools at the intersection of AI and creativity. Shipping products, writing stories, shaping ideas.

View Work Read Articles

300K+

Followers

Across platforms, building in public

App Store

Top paid app, shipped as a solo developer

100+

Articles

On AI, dev, and creative tools

Developer

Writer

AI Creator

Speaker

FILE:assets/showcases/website-homepage/homepage-takram.html Alex Chen — Indie Developer & AI Creator

PORTFOLIO

Indie Developer & AI Creator

Building tools
at the intersection
of AI and creativity

I design, build, and write about the things that emerge when technology meets human imagination.

300K+

followers

No. 1

App Store

100+

articles published

Explore Work

Read Writing

Alex Chen

Developer / Writer / Creator

Shipping AI-powered products as an independent maker. Writing about the craft of building.

2026

Design as inquiry

FILE:assets/showcases/website-homepage/homepage-pentagram.html Alex Chen — Indie Developer & AI Creator

Indie Developer / AI Creator

Alex
Chen.

Building tools at the intersection of AI and creativity.

300K+

Followers

App Store

100+

Articles

Portfolio 2026

Developer Writer Creator

Hero

Scroll

FILE:assets/showcases/website-saas/saas-build.html Meridian — Business Intelligence for Modern Teams

Business Intelligence for Modern Teams

Turn data into decisions, not dashboards.

AI-powered analytics that tells you what matters, when it matters. Less noise, more clarity.

Faster insights

50%

Less meeting time

99.9%

Uptime SLA

Performance Overview

Last 30 days

$2.4M

Revenue

84.2K

Users

1.2%

Churn

$142

ARPU

AI Insight: Revenue Acceleration

Enterprise segment grew 23% this quarter, driven by 4 new accounts. Recommend increasing sales capacity.

Predicted: Q3 Target On Track

Based on current trajectory, 89% probability of hitting $3.2M quarterly target. Pipeline looks healthy.

Trusted by teams at

Stripe Notion Linear Vercel Figma

FILE:assets/showcases/website-saas/saas-pentagram.html Meridian — Business Intelligence for Modern Teams

Business Intelligence for Modern Teams

Turn data into decisions, not dashboards

AI-powered analytics that tells you what matters, when it matters. Stop drowning in charts and start acting on real insights.

Faster Insights

50%

Less Meeting Time

99.9%

Uptime

Analytics Overview

Live

Revenue

$2.4M

+12.3%

Active Users

84.2K

+8.7%

Churn Rate

1.2%

-0.3pp

Monthly Performance

30D

90D

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Top Segments

Enterprise$1.1M

Mid-Market$820K

SMB$480K

AI Alerts Today

Revenue spike detectedHigh

Churn risk: Acme CorpMed

Expansion signal: BoltLow

Trusted by

Stripe Notion Linear Vercel Figma

FILE:assets/showcases/website-saas/saas-takram.html Meridian — Business Intelligence for Modern Teams

Business Intelligence for Modern Teams

Turn data into decisions, not dashboards

AI-powered analytics that tells you what matters, when it matters. Clarity over complexity.

Raw Data

AI Analysis

Actionable Insight

Faster insights

50%

Less meeting time

99.9%

Uptime

Analytics Overview

AI-Enhanced

$2.4M

Revenue

+12.3%

84.2K

Active Users

+8.7%

1.2%

Churn Rate

-0.3pp

Revenue Trend

AI Insight

Enterprise segment grew 23% this quarter. Four new accounts are driving acceleration.

Prediction

89% likelihood of hitting Q3 revenue target based on current pipeline velocity.

Alert

Churn risk detected for 2 mid-market accounts. Recommend outreach this week.

Trusted by teams at

Stripe Notion Linear Vercel Figma

FILE:assets/showcases/website-ai-writing/aiwriting-pentagram.html Inkwell — AI Writing Assistant

INKWELL

Write
better,
faster,
with your
own voice.

AI that learns your style, not replaces it. Craft content for WeChat, Xiaohongshu, and video scripts — all in your authentic tone.

Start Writing

Style Learning

Adapts to your unique voice through continuous analysis of your writing patterns.

Multi-Platform

WeChat articles, Xiaohongshu posts, video scripts. One tool, every format.

Human-Touch

Proofreading that preserves warmth and removes robotic phrasing.

The Future of Content Creation

Every creator faces the same tension: the desire to produce more content versus the need to maintain quality and authenticity. AI doesn't have to mean losing your voice — it can mean amplifying it.

Why Authenticity Matters

Readers can tell. They feel the difference between words that carry genuine experience and words assembled by algorithm. The goal isn't to write more — it's to write more of what only you can write.

Key Principles

Write from personal experience first
Use AI for refinement, not replacement
Adapt tone for each platform

FILE:assets/showcases/website-ai-writing/aiwriting-takram.html Inkwell — AI Writing Assistant

Write better, faster,
with your own voice

AI that learns your style, not replaces it. A mindful writing companion for WeChat, Xiaohongshu, and video scripts that honours your creative instincts.

Start Writing

On the Patience of Growing Things

There is a kind of writing that happens slowly, like roots in winter soil. You cannot rush a sentence into meaning any more than you can rush a seed into bloom. The best words arrive when you stop chasing them.

Listening to the Draft

Every draft speaks, if you give it room. The first version is never wrong — it is simply unfinished. What AI can offer is not replacement, but reflection: a gentle mirror held up to your own intentions.

Trust the messy first draft
Let AI reveal patterns you missed
Preserve what makes it yours

Inkwell AI

Voice Match

Your Style

92%

Platform

WeChat

WeChat XHS Script

Observation The seed metaphor in paragraph one is lovely. Consider echoing it in the closing line for a sense of return.

Tone Gentle, contemplative. This reads naturally as you.

Your Ideas

Raw thoughts and drafts

AI Enhancement

Refine, not rewrite

Your Voice

Unmistakably you

Style Learning

Evolves with your writing

Multi-Platform

WeChat, XHS, video scripts

Human-Touch Proofreading

Warmth-preserving refinement

FILE:assets/showcases/website-ai-writing/aiwriting-build.html Inkwell — AI Writing Assistant

Write better,
faster, with
your own voice

AI that learns your style, not replaces it. Publish across WeChat, Xiaohongshu, and video scripts while sounding unmistakably you.

Style Learning

Adapts to your voice

Multi-Platform

One tool, every format

Human Touch

Warmth-preserving edit

Start Writing

Morning Routines for Creative Minds

The best ideas rarely arrive on schedule. They come in the quiet space between waking and doing — that liminal moment when the mind is loose enough to wander but awake enough to notice.

Finding Your Rhythm

Productivity culture tells us to optimize every hour. But creation is not production. The most prolific writers I know guard their mornings like sacred ground.

Start before checking your phone
Write the ugly first draft freely
Let AI handle polish, not direction

Voice Match

Your Style

92%

Publishing To

WeChat Article

WeChat XHS Script

Suggestion The second paragraph is beautiful. Consider adding a concrete personal example to ground the abstract idea.

FILE:assets/showcases/infographic/infographic-build.html AI Memory System Optimization — Build Studio Style

System Architecture

AI记忆系统
CLAUDE.md 从 93KB
优化到 22KB

Before 93KB

After 22KB

-76%

2400+

lines before
in single file

structured
memory categories

information
loss

Memory Categories

核心身份

Core Identity

Immutable traits, facts, fundamental identity markers

偏好设置

Preferences

Style choices, tool habits, accumulated over sessions

项目状态

Project State

Active tasks, deadlines, priorities, evolving context

日志流水

Daily Logs

Session records, never auto-loaded, search on demand

Processing Flow

Input

User
Input

Route

Workspace
Detection

Load

Relevant
Memory

Execute

Task
Processing

Update

Memory
Write-back

Like Marie Kondo for AI memory
— keep only what sparks joy.

Faster context loading

More relevant responses

Zero information loss

FILE:assets/showcases/infographic/infographic-pentagram.html AI Memory System Optimization — Pentagram Style

93 KB

reduced to

22 KB

76% reduction

2400+ lines before

1 file to structured system

0 information loss

01 Before vs After

Before

93 KB

After

22 KB

02 Memory Architecture

I 核心身份 Core Identity Who you are, fundamental traits, immutable facts

II 偏好设置 Preferences Style, tools, workflow habits, accumulated over time

III 项目状态 Project State Current tasks, deadlines, priorities, progress tracking

IV 日志流水 Daily Logs Session-level records, searchable history, never auto-loaded

03 Design Principles

Route, Don't Dump

Router file dispatches to workspace-specific rules. Never load everything at once.

Structured Hierarchy

Identity > Preferences > Projects > Logs. Each layer loads on demand.

Write Rules, Not Records

Store reusable patterns, not one-time instructions. Keep memory under 100 lines.

Silent Operations

Memory read/write happens silently. Never interrupt the user's task flow.

04 Results

76%

Size Reduction

2.3x

Faster Loading

Data Loss

"Like Marie Kondo for AI memory — keep only what sparks joy."

Faster context loading

More relevant responses

Zero information loss

FILE:assets/showcases/infographic/infographic-takram.html AI Memory System Optimization — Takram Style

93 KB

Before

22 KB

After

01Four Pillars of Memory

          
核心身份
Core Identity
Immutable facts and fundamental traits that define who you are

偏好设置

Preferences

Style, tools, habits — accumulated over time through sessions

项目状态

Project State

Current tasks, deadlines, priorities — always evolving context

日志流水

Daily Logs

Session records — never auto-loaded, retrieved on demand only

02System Flow

Input User

Route Workspace

Load Memory

Execute Task

Update Write

Like Marie Kondo for AI memory —
keep only what sparks joy.

Faster context loading

More relevant responses

Zero information loss

FILE:assets/showcases/website-ai-nav/ainav-pentagram.html AI Compass — Pentagram Style

500+

Find the right AI tool in seconds

500+ tools, 24 categories, updated weekly. The most comprehensive curated directory for AI practitioners.

Writing Coding Image Video Audio Productivity Research

Featured Tools Category

Claude Editor's Pick

Advanced AI assistant for writing, analysis, and coding with extended context and nuanced reasoning.

Writing

Cursor Trending

AI-native code editor that understands your entire codebase and accelerates development workflows.

Coding

Midjourney

Leading AI image generation platform producing stunning visuals from text descriptions.

Image

Perplexity

AI-powered search engine with real-time citations and conversational answers.

Research

Runway New

Gen-3 video generation and editing suite for creators and filmmakers.

Video

Showing 5 of 500+ tools View All Tools

FILE:assets/showcases/website-ai-nav/ainav-build.html AI Compass — Build Studio Style

A Curated Directory

Find the right AI tool in seconds

500+ tools, 24 categories, updated weekly

Writing Coding Image Video Audio Productivity Research

Featured Selections

View all 500+ tools

Claude

Writing & Analysis

Advanced AI assistant for writing, analysis, and coding with nuanced reasoning and extended context.

Find the right
AI tool in seconds

500+ carefully selected tools across 24 categories, updated weekly. Discover, compare, and find the perfect tool for your workflow.

Writing Coding Image Video Audio Productivity Research

Featured Discoveries

Claude

Writing & Analysis

Advanced AI assistant for writing, analysis, and coding with nuanced reasoning and extended context window.

`-`

` 包裹 ```html
Q3营收增长23%

Q3营收增长23%

新用户是主要驱动力
``` 为什么：PowerPoint 文本必须存在 text frame 里，text frame 对应 HTML 的段落级元素（p/h*/li）。裸 `
` 在 PPTX 里没有对应的文本容器。也不能用 `` 承载主文字——span 是行内元素，没法独立对齐成文本框。span 只能**夹在 p/h\* 里**做局部样式（加粗、换色）。 ### 规则 2：不支持 CSS 渐变 — 只能用纯色 ```css /* ❌ 错误 / background: linear-gradient(to right, #FF6B6B, #4ECDC4); / ✅ 正确：纯色 / background: #FF6B6B; / ✅ 如果必须多色条纹，用 flex 子元素各自纯色 / .stripe-bar { display: flex; } .stripe-bar div { flex: 1; } .red { background: #FF6B6B; } .teal { background: #4ECDC4; } ``` 为什么：PowerPoint 的 shape fill 只支持 solid/gradient-fill 两种，但 pptxgenjs 的 `fill: { color: ... }` 只映射 solid。渐变走 PowerPoint 原生 gradient 需要另写结构，目前工具链不支持。 ### 规则 3：背景/边框/阴影只能在 DIV 上，不能在文字标签上 ```html
重点内容

重点内容

``` 为什么：PowerPoint 里 shape（方块/圆角矩形）和 text frame 是两个对象。HTML 的 `
` 只翻译成 text frame，背景/边框/阴影属于 shape——必须在包裹 text 的 div 上写。 ### 规则 4：DIV 不能用 `background-image` — 用 `` 标签 ```html
``` 为什么：`html2pptx.js` 只从 `` 元素提取图片路径，不解析 CSS 的 `background-image` URL。 --- ## Path A HTML 模板骨架每张 slide 一个独立 HTML 文件，彼此作用域隔离（避开单文件 deck 的 CSS 污染）。 ```html

标题用断言句，不是主题词

副标题补充说明

要点一

简短说明文字

第一条要点

第二条要点

第三条要点

``` --- ## 常见错误速查 | 错误信息 | 原因 | 修复方法 | |---------|------|---------| | `DIV element contains unwrapped text "XXX"` | div 里有裸文字 | 把文字包进 `
` 或 `
`-`
` | | `CSS gradients are not supported` | 用了 linear/radial-gradient | 改为纯色，或用 flex 子元素分段 | | `Text element
has background` | `
` 标签加了背景色 | 外套 `
` 承载背景，`
` 只写文字 | | `Background images on DIV elements are not supported` | div 用了 background-image | 改为 `` 标签 | | `HTML content overflows body by Xpt vertically` | 内容超出 540pt | 减少内容或缩小字号，或 `overflow: hidden` 截断 | | `HTML dimensions don't match presentation layout` | body 尺寸和 pres layout 对不上 | body 用 `960pt × 540pt` 配 `LAYOUT_WIDE`；或 defineLayout 自定义尺寸 | | `Text box "XXX" ends too close to bottom edge` | 大字号 `
` 距离 body 底边 < 0.5 inch | 往上挪，留足下边距；PPT 底部本身就会被遮住一部分 | --- ## 基本工作流（3 步出 PPTX） ### Step 1：按约束写每页独立 HTML ``` 我的Deck/ ├── slides/ │ ├── 01-cover.html # 每个文件都是完整 960×540pt HTML │ ├── 02-agenda.html │ └── ... └── illustration/ # 所有引用的图片 ├── chart1.png └── ... ``` ### Step 2：写 build.js 调用 `html2pptx.js` ```js const pptxgen = require('pptxgenjs'); const html2pptx = require('../scripts/html2pptx.js'); // 本 skill 脚本 (async () => { const pres = new pptxgen(); pres.layout = 'LAYOUT_WIDE'; // 13.333 × 7.5 inch，匹配 HTML 的 960×540pt const slides = ['01-cover.html', '02-agenda.html', '03-content.html']; for (const file of slides) { await html2pptx(`./slides/${file}`, pres); } await pres.writeFile({ fileName: 'deck.pptx' }); })(); ``` ### Step 3：打开检查 - PowerPoint/Keynote 打开导出 PPTX - 双击任意文字应能直接编辑（如果是图片说明第 1 条违反了） - 验证 overflow：每页应该在 body 范围内，没有被截 --- ## 这条路径 vs 其他选项（什么时候选什么） | 需求 | 选什么 | |------|------| | 同事会改 PPTX 里的文字 / 发给非技术人员继续编辑 | 本文路径（editable，需从头按 4 条约束写 HTML） | | 只是演讲用 / 发存档，不再改 | `export_deck_pdf.mjs`（多文件）或 `export_deck_stage_pdf.mjs`（单文件 deck-stage），出矢量 PDF | | 视觉自由度优先（动画、web component、CSS 渐变、复杂 SVG），接受不可编辑 | PDF（同上）——PDF 既保真又跨平台，比「图片 PPTX」更合适 | 绝不要在视觉自由写好的 HTML 上硬跑 html2pptx——实测视觉驱动的 HTML pass 率 < 30%，剩下的逐页改造比重写还慢。这种场景应该出 PDF，不是硬挤 PPTX。 --- ## Fallback：已有视觉稿但用户坚持要 editable PPTX 偶尔会遇到这个场景：你/用户已经写好一份视觉驱动的 HTML（渐变、web component、复杂 SVG 都用上了），本来出 PDF 最合适，但用户明确说「不行，必须是可编辑的 PPTX」。不要硬跑 `html2pptx` 期待它 pass——实测视觉驱动 HTML 在 html2pptx 上 pass 率 <30%，剩下 70% 会报错或走样。正确的 fallback 是： ### Step 1 · 先告知局限性（透明沟通）一句话跟用户说清三件事： > 「你现在的 HTML 用了 [具体列出：渐变 / web component / 复杂 SVG / ...]，直接转 editable PPTX 会 fail。我有两个方案： > - A. 出 PDF（推荐）——视觉 100% 保留，接收方能看能印但不能改文字 > - B. 以视觉稿为蓝本，重写一版 editable HTML（保留色彩/布局/文案的设计决策，但按 4 条硬约束重新组织 HTML 结构，牺牲渐变、web component、复杂 SVG 等视觉能力）→ 再导出 editable PPTX > > 你选哪个？」不要把 B 方案说得云淡风轻——明确告知会丢失什么。让用户做取舍。 ### Step 2 · 如果用户选 B：AI 主动改写，不要求用户自己写这里的 doctrine 是：用户给的是设计意图，你负责翻译成合规实现。不是让用户去学 4 条硬约束然后自己重写。改写时的遵循原则： - 保留：色彩系统（主色/辅色/中性色）、信息层级（标题/副标题/正文/注解）、核心文案、layout 骨架（上中下 / 左右分栏 / 网格）、页面节奏 - 降级：CSS 渐变 → 纯色或 flex 分段、web component → 段落级 HTML、复杂 SVG → 简化的 `` 或纯色几何、阴影 → 删除或降为极弱、自定义字体 → 向系统字体靠齐 - 重写：裸文字 → 包进 `
` / ``、`background-image` → `` 标签、`
` 上的背景边框 → 外层 div 承载 ### Step 3 · 产出对照清单（透明交付）改写完成后给用户一份 before/after 对照，让他知道哪些视觉细节被简化了： ``` 原设计 → editable 版调整 - 标题区紫色渐变 → 主色 #5B3DE8 纯色背景 - 数据卡片阴影 → 删除（改为 2pt 描边区分） - 复杂 SVG 折线图 → 简化为 PNG（从 HTML 截图生成） - Hero 区 web component 动效 → 静态首帧（web component 无法翻译） ``` ### Step 4 · 导出 & 双格式交付 - `editable` 版 HTML → 跑 `scripts/export_deck_pptx.mjs` 出可编辑 PPTX - 建议同时保留原视觉稿 → 跑 `scripts/export_deck_pdf.mjs` 出高保真 PDF - 双格式交付给用户：视觉稿的 PDF + 可编辑的 PPTX，各司其职 ### 什么情况下直接拒绝 B 方案个别场景下改写代价过高，应该劝用户放弃 editable PPTX： - HTML 核心价值是动画或交互（改写后只剩静态首帧，信息量损失 50%+） - 页数 > 30，改写成本超过 2 小时 - 视觉设计深度依赖精确 SVG / 自定义 filter（改写后和原图几乎无关）此时告诉用户：「这个 deck 改写代价过高，建议出 PDF 而不是 PPTX。如果接收方确实要 pptx 格式，就接受视觉会大幅朴素化——要不要换成 PDF？」 --- ## 为什么 4 条约束不是 Bug 而是物理约束这 4 条不是 `html2pptx.js` 作者偷懒——它们是 PowerPoint 文件格式（OOXML）本身的约束投射到 HTML 上的结果： - PPTX 里文字必须在 text frame（``），对应段落级 HTML 元素 - PPTX 的 shape 和 text frame 是两个对象，无法在同一 element 上同时画背景和写文字 - PPTX 的 shape fill 对 gradient 支持有限（仅某些 preset gradients，不支持 CSS 任意角度渐变） - PPTX 的 picture 对象必须引用真实图片文件，不是 CSS 属性理解这点后，不要期待工具变聪明 —— 是 HTML 写法要适配 PPTX 格式，不是反过来。 FILE:references/asset-protocol.md # 核心资产协议（Asset Protocol） > 触发条件：任务涉及具体品牌——用户提了产品名 / 公司名 / 明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。 > > 前置硬条件：先执行本文件的事实验证与官方来源核对，确认品牌 / 产品存在且状态已知，再走资产采集流程。这是 v1 最核心的约束，也是稳定性的生命线。Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。 ## 核心理念：资产 > 规范品牌的本质是「它被认出来」。识别度按以下顺序贡献： | 资产 | 识别度 | 必需性 | |---|---|---| | Logo | 最高 | 任何品牌必须有 | | 产品图 / 渲染图 | 极高 | 实体产品必须有 | | UI 截图 / 界面素材 | 极高 | 数字产品必须有 | | 色值 | 中 | 辅助 | | 字体 | 低 | 辅助 | | 气质关键词 | 低 | agent 自检用 | 翻译成执行规则： - 只抽色值 + 字体、不找 logo / 产品图 / UI → 违反本协议 - 用 CSS 剪影 / SVG 手画替代真实产品图 → 违反本协议（生成的就是「通用科技动画」，任何品牌都长一样） - 找不到资产不告诉用户、也不 AI 生成，硬做 → 违反本协议宁可停下问用户要素材，也不要用 generic 填充。 ## 5 步硬流程 ### Step 1 · 问（资产清单一次问全） ``` 关于，你手上有以下哪些资料？我按优先级列： 1. Logo（SVG / 高清 PNG）—— 任何品牌必备 2. 产品图 / 官方渲染图 —— 实体产品必备 3. UI 截图 / 界面素材 —— 数字产品必备 4. 色值清单（HEX / RGB / 品牌色盘） 5. 字体清单（Display / Body） 6. Brand guidelines PDF / Figma design system / 品牌官网链接有的直接发我，没有的我去搜 / 抓 / 生成。 ``` ### Step 2 · 搜官方渠道 | 资产 | 搜索路径 | |---|---| | Logo | `.com/brand` · `/press` · `/press-kit` · `brand..com` · 官网 header inline SVG | | 产品图 | `.com/` 详情页 hero + gallery · 官方 YouTube launch film 截帧 · 新闻稿附图 | | UI 截图 | App Store / Google Play 截图 · 官网 screenshots section · 演示视频截帧 | | 色值 | 官网 inline CSS / Tailwind config / brand guidelines PDF | | 字体 | 官网 `` 引用 · Google Fonts 追踪 · brand guidelines | 兜底搜索关键词： - ` logo download SVG`、` press kit` - ` official renders`、` product photography` - ` app screenshots`、` dashboard UI` ### Step 3 · 下载资产 3.1 Logo 1. 独立 SVG/PNG 文件：`curl -o assets/-brand/logo.svg https://.com/logo.svg` 2. 官网 HTML 全文提取 inline SVG（80% 场景必用）：`curl -A "Mozilla/5.0" -L https://.com -o assets/-brand/homepage.html` 然后 grep `` 3. 官方社交媒体 avatar（最后手段） 3.2 产品图（实体产品必需） 1. 官方产品页 hero image（最高优先级，2000px+） 2. 官方 press kit 3. 官方 launch video 截帧（`yt-dlp` + `ffmpeg`） 4. Wikimedia Commons 5. AI 生成兜底（nano-banana-pro，以真实产品图为参考）。不要用 CSS/SVG 手画代替 3.3 UI 截图（数字产品必需） App Store / Google Play 截图（注意：可能是 mockup） · 官网 screenshots · 演示视频截帧 · 用户账号截屏。 ### Step 3.4 · 素材质量门槛「5-10-2-8」原则（铁律） > Logo 例外：Logo 有就必须用，没有就停下问用户。其他素材（产品图 / UI / 参考图 / 配图）走「5-10-2-8」。 | 维度 | 标准 | 反模式 | |---|---|---| | 5 轮搜索 | 多渠道交叉搜 | 第一页结果直接用 | | 10 个候选 | 至少凑 10 个备选才开始筛 | 只抓 2 个，没得选 | | 选 2 个好的 | 从 10 个里精选 2 个 | 全都用 = 视觉过载 | | 每个 8/10 分以上 | 不够 8 分宁可不用，用诚实 placeholder 或 nano-banana-pro 生成 | 凑数 7 分素材进 brand-spec.md | 8/10 评分维度： 1. 分辨率 ≥ 2000px（印刷 / 大屏 ≥ 3000px） 2. 版权清晰度 — 官方 > 公共领域 > 免费素材 > 疑似盗图（疑似盗图直接 0 分） 3. 品牌气质契合度 — 与 brand-spec.md 的「气质关键词」一致 4. 光线 / 构图 / 风格一致性 — 2 个素材放一起不打架 5. 独立叙事能力 — 能单独表达一个叙事角色（不是装饰）为什么是铁律：滥竽充数比没有更糟——污染视觉品味、传递「不专业」信号。每一个视觉元素都在积分或扣分。7 分素材 = 扣分项，不如留空。 ### Step 4 · 验证 + 提取 | 资产 | 验证动作 | |---|---| | Logo | 文件存在 + 可打开 + 至少深底/浅底两个版本 + 透明背景 | | 产品图 | 至少一张 2000px+ + 去背或干净背景 + 多角度 | | UI 截图 | 真实分辨率 + 最新版本 + 无用户数据污染 | | 色值 | `grep -hoE '#[0-9A-Fa-f]{6}' assets/-brand/.{svg,html,css} \| sort \| uniq -c \| sort -rn \| head -20`，过滤黑白灰 | 警惕示范品牌污染：产品截图常有用户 demo 的品牌色（如某工具截图演示喜茶红），那不是该工具的色。同时出现两种强色时必须区分。品牌多切面：同一品牌的官网营销色和产品 UI 色经常不同（Lovart 官网暖米+橙，产品 UI 是 Charcoal + Lime）。两套都是真的——根据交付场景选合适的切面。 ### Step 5 · 固化为 `brand-spec.md` ```markdown # · Brand Spec > 采集日期：YYYY-MM-DD > 资产来源：<列出下载来源> > 资产完整度：<完整 / 部分 / 推断> ## 🎯 核心资产（一等公民） ### Logo - 主版本：`assets/-brand/logo.svg` - 浅底反色版：`assets/-brand/logo-white.svg` - 使用场景：<片头/片尾/角落水印/全局> - 禁用变形：<不能拉伸/改色/加描边> ### 产品图（实体产品必填） - 主视角：`assets/-brand/product-hero.png`（2000×1500） - 细节图：`assets/-brand/product-detail-{1,2}.png` - 场景图：`assets/-brand/product-scene.png` ### UI 截图（数字产品必填） - 主页：`assets/-brand/ui-home.png` - 核心功能：`assets/-brand/ui-feature-.png` ## 🎨 辅助资产 ### 色板 - Primary: #XXXXXX <来源标注> - Background / Ink / Accent / 禁用色 ### 字型 - Display / Body / Mono ### 签名细节 / 禁区 / 气质关键词（3-5 个） ``` 写完 spec 后的执行纪律： - 所有 HTML 必须引用 spec 里的资产文件路径，不允许 CSS 剪影 / SVG 手画代替 - Logo 用 `` 引用真实文件，不重画 - CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-)` - 让品牌一致性从「靠自觉」变成「靠结构」 ## 全流程失败的兜底 | 缺失 | 处理 | |---|---| | Logo 完全找不到 | 停下问用户，不要硬做 | | 产品图（实体）找不到 | nano-banana-pro 以官方参考为基底生成 → 向用户索取 → 诚实 placeholder（标注"产品图待补"） | | UI 截图（数字）找不到 | 向用户索取自己账号截屏 → 官方演示视频截帧。不用 mockup 生成器凑 | | 色值找不到 | 进设计方向顾问模式，推荐 3 方向并标注 assumption | 禁止：找不到资产就静默用 CSS 剪影 / 通用渐变硬做。宁可停下问，也不要凑。 ## 反例（真实踩过的坑） - Kimi 动画：凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工 - Lovart 设计：把产品截图里演示品牌的喜茶红当成 Lovart 的色——差点毁整个设计 - DJI Pocket 4 发布动画（2026-04-20，本协议升级触发案例）：旧版只抽色值，没下载 logo 没找产品图，用 CSS 剪影代替——做出「通用黑底+橙 accent 的科技动画」，没有大疆识别度。IFQ 原话：「否则，我们在表达什么呢？」 ## 成本对比 | 场景 | 时间 | |---|---| | 正确走完协议 | 下载 logo 5 min + 产品图 / UI 10 min + grep 色值 5 min + 写 spec 10 min = 30 分钟 | | 不做协议的代价 | 通用动画 → 用户返工 1-2 小时甚至重做 | 这是稳定性最便宜的投资。 FILE:references/slide-decks.md # Slide Decks：HTML幻灯片制作规范做幻灯片是设计工作的高频场景。这份文档说明怎么做好HTML幻灯片——从架构选型、单页设计，到 PDF/PPTX 导出的完整路径。本 skill 的能力覆盖： - HTML 演示版（基础产物，永远默认必做） → 每页独立 HTML + `assets/deck_index.html` 聚合，浏览器里键盘翻页、全屏演讲 - HTML → PDF 导出 → `scripts/export_deck_pdf.mjs` / `scripts/export_deck_stage_pdf.mjs` - HTML → 可编辑 PPTX 导出 → `references/editable-pptx.md` + `scripts/html2pptx.js` + `scripts/export_deck_pptx.mjs`（要求 HTML 按 4 条硬约束写） > ⚠️ HTML 是基础，PDF/PPTX 是衍生物。不管最终交付什么格式，都必须先做 HTML 聚合演示版（`index.html` + `slides/.html`），它是幻灯片作品的「源」。PDF/PPTX 是从 HTML 一行命令导出的快照。 > > 为什么 HTML 优先： > - 演讲/演示现场最好用（投影仪 / 共享屏幕直接全屏，键盘翻页，不依赖 Keynote/PPT 软件） > - 开发过程中每页可单独双击打开验证，不用每次重新跑导出 > - 是 PDF/PPTX 导出的唯一上游（避免「导出后才发现要改 HTML 又要重出」的死循环） > - 交付物可以是「HTML + PDF」或「HTML + PPTX」双份，接收方爱用哪个用哪个 > > 2026-04-22 moxt brochure 实测：做完 13 页 HTML + index.html 聚合后，`export_deck_pdf.mjs` 一行导出 PDF，零改动。HTML 版本身就是可直接浏览器演讲的交付物。 --- ## 🛑 开工前先确认交付格式（最硬的 checkpoint）这个决策比「单文件还是多文件」更先。 2026-04-20 期权私董会项目实测：不在动手前确认交付格式 = 2-3 小时返工。 ### 决策树（HTML-first 架构）所有交付都从同一套 HTML 聚合页（`index.html` + `slides/.html`）开始。交付格式只决定 HTML 的写法约束和导出命令： ``` 【永远默认 · 必做】 HTML 聚合演示版（index.html + slides/.html） │ ├── 只要浏览器演讲 / 本地 HTML 存档 → 到这里已经完成，HTML 视觉自由度最大 │ ├── 还要 PDF（打印 / 发群 / 存档） → 跑 export_deck_pdf.mjs 一键出 │ HTML 写法自由，视觉无约束 │ └── 还要可编辑 PPTX（同事要改文字） → 从第一行 HTML 就按 4 条硬约束写跑 export_deck_pptx.mjs 一键出牺牲渐变 / web component / 复杂 SVG ``` ### 开工话术（抄走即用） > 不管最后交付是 HTML、PDF 还是 PPTX，我都会先做一个可在浏览器里切换和演讲的 HTML 聚合版（`index.html` 加键盘翻页）——这是永远的默认基础产物。在此之上再问你要不要额外出 PDF / PPTX 的快照。 > > 你需要哪个导出格式？ > - 只要 HTML（演讲/存档）→ 视觉完全自由 > - 还要 PDF → 同上，加一条导出命令 > - 还要可编辑 PPTX（同事会在 PPT 里改文字）→ 我必须从第一行 HTML 就按 4 条硬约束写，会牺牲一些视觉能力（无渐变、无 web component、无复杂 SVG）。 ### 为什么「要 PPTX 就得从头走 4 条硬约束」 PPTX 可编辑的前提是 `html2pptx.js` 能把 DOM 逐元素翻译为 PowerPoint 对象。它需要 4 条硬约束： 1. body 固定 960pt × 540pt（匹配 `LAYOUT_WIDE`，13.333″ × 7.5″，不是 1920×1080px） 2. 所有文字包在 `
`/`
`-`
` 里（禁止 div 直接放文字，禁止用 `` 承载主文字） 3. `
`/`` 自身不能有 background/border/shadow（放外层 div） 4. `
` 不能用 `background-image`（用 `` 标签） 5. 不用 CSS gradient、不用 web component、不用复杂 SVG 装饰本 skill 默认的 HTML 视觉自由度高——大量 span、嵌套 flex、复杂 SVG、web component（如 ``）、CSS 渐变——几乎没有一条能天然过 html2pptx 的约束（实测视觉驱动的 HTML 直接上 html2pptx，pass 率 < 30%）。 ### 两条真实路径的代价对比（2026-04-20 真实踩坑） | 路径 | 做法 | 结果 | 代价 | |------|------|------|------| | ❌ 先自由写 HTML，事后补救 PPTX | 单文件 deck-stage + 大量 SVG/span 装饰 | 要可编辑 PPTX 只剩两条路：
A. 手写 pptxgenjs 几百行 hardcode 坐标
B. 重写 17 页 HTML 成 Path A 格式 | 2-3 小时返工，且手写版维护成本永续（HTML 改一个字，PPTX 要再人肉同步） | | ✅ 从第一步按 Path A 约束写 | 每页独立 HTML + 4 条硬约束 + 960×540pt | 一条命令导出 100% 可编辑 PPTX，同时也能浏览器全屏演讲（Path A HTML 就是浏览器可播放的标准 HTML） | 写 HTML 时多花 5 分钟想「文字怎么包进 `
`」，零返工 | ### 混合交付怎么办用户说「我要 HTML 演讲和可编辑 PPTX」——这不是混合，是 PPTX 需求覆盖 HTML 需求。按 Path A 写出来的 HTML 本身就能浏览器全屏演讲（加个 `deck_index.html` 拼接器就行）。没有额外代价。用户说「我要 PPTX 和动画 / web component」——这是真矛盾。告诉用户：要可编辑 PPTX 就得牺牲这些视觉能力。让他做取舍，不要偷偷做手写 pptxgenjs 方案（会变成永续维护债）。 ### 事后才知道要 PPTX 怎么办（紧急补救）极个别情况：HTML 已经写好了才发现要 PPTX。推荐走 fallback 流程（完整说明见 `references/editable-pptx.md` 末尾「Fallback：已有视觉稿但用户坚持要 editable PPTX」）： 1. 首选：改出 PDF（视觉 100% 保留，跨平台，接收方能看能印）—— 如果接收方实际需求是「演讲/存档」，PDF 就是最佳交付物 2. 次选：AI 以视觉稿为蓝本，重写一版 editable HTML → 导出 editable PPTX —— 保留色彩/布局/文案的设计决策，牺牲渐变、web component、复杂 SVG 等视觉能力 3. 不推荐：手写 pptxgenjs 重建——位置、字体、对齐都要手调，维护成本高，且后续 HTML 改一个字都得再人肉同步一次永远把选择告诉用户，让他决定。永远不要第一反应就开始手写 pptxgenjs——那是最后的兜底手段。 --- ## 🛑 批量制作前：先做 2 页 showcase 定 grammar 只要 deck ≥ 5 页，绝对不能从第 1 页直接写到最后一页。 2026-04-22 moxt brochure 实战验证的正确顺序： 1. 选 2 个视觉差异最大的页面类型先做 showcase（如「封面」+「情绪/引用页」，或「封面」+「产品展示页」） 2. 截图让用户确认 grammar（masthead / 字体 / 色 / 间距 / 结构 / 中英双语比例） 3. 方向通过了再批量推剩下 N-2 页，每页复用已建立的 grammar 4. 全部完成后一起合成 HTML 聚合 + PDF / PPTX 衍生物为什么：直接写 13 页到底 → 用户说「方向不对」= 返工 13 次。先做 2 页 showcase → 方向错 = 返工 2 次。视觉 grammar 一旦确立，后续 N 页的决策空间大幅收窄，只剩「内容怎么放进去」。 showcase 页选择原则：选视觉结构最不一样的两页。这两页过了 = 其他中间态都能过。 | Deck 类型 | 推荐 showcase 页组合 | |-----------|---------------------| | B2B brochure / 产品宣发 | 封面 + 内容页（理念/情感页） | | 品牌发布 | 封面 + 产品特色页 | | 数据报告 | 数据大图页 + 分析结论页 | | 教程课件 | 章节封页 + 具体知识点页 | --- ## 📐 出版物 grammar 模板（moxt 实测可复用）适合 B2B brochure / 产品宣发 / 长报告类 deck。每页复用这套结构 = 13 页视觉完全一致、0 返工。 ### 每页骨架 ``` ┌─ masthead（顶部 strip + 横线）────────────┐ │ [logo 22-28px] · A Product Brochure Issue · Date · URL │ ├──────────────────────────────────────────┤ │ │ │ ── kicker（绿色短横 + uppercase 标签） │ │ CHAPTER XX · SECTION NAME │ │ │ │ H1（中文 Noto Serif SC 900） │ │ 重点词单独上品牌主色 │ │ │ │ English subtitle (Lora italic，副标题) │ │ ─────────── 分隔线 ────────── │ │ │ │ [具体内容：双栏 60/40 / 2x2 grid / 列表] │ │ │ ├──────────────────────────────────────────┤ │ section name XX / total │ └──────────────────────────────────────────┘ ``` ### 样式约定（直接抄走） - H1：中文 Noto Serif SC 900，字号 80-140px 看信息量，重点词单独上品牌主色（不要全文堆色） - 英文副：Lora italic 26-46px，品牌签名词（如 "AI team"）粗体 + 主色斜体 - 正文：Noto Serif SC 17-21px，line-height 1.75-1.85 - accent 高亮：正文里用主色加粗标注关键词，每页不超过 3 处（过多就失去锚点作用） - 背景：暖米底 #FAFAFA + 极淡 radial-gradient noise（`rgba(33,33,33,0.015)`）增加纸感 ### 视觉主角必须差异化 13 页如果全是「文字 + 一张截图」就太单调。每页的视觉主角类型轮换： | 视觉类型 | 适合的 section | |---------|---------------| | 封面排版（大字 + masthead + pillar） | 首页 / 篇章封 | | 单角色 portrait（超大单只 momo 等） | 介绍单个概念/角色 | | 多角色合影 / 头像卡并排 | 团队 / 用户案例 | | 时间轴卡片递进 | 展示「长期关系」「演进」 | | 知识图谱 / 连接节点图 | 展示「协作」「流动」 | | Before/After 对比卡 + 中间箭头 | 展示「改变」「差异」 | | 产品 UI 截图 + 描边设备框 | 具体功能展示 | | 大引号 big-quote（半页大字） | 情绪页 / 问题页 / 引文页 | | 真人头像 + 引言卡（2×2 或 1×4） | 用户见证 / 使用场景 | | 大字封底 + URL 椭圆按钮 | CTA / 结尾 | --- ## ⚠️ 常见踩坑（moxt 实战总结） ### 1. Emoji 在 Chromium / Playwright 导出时不渲染 Chromium 默认不带彩色 emoji 字体，`page.pdf()` 或 `page.screenshot()` 时 emoji 显示为空方框。对策：用 Unicode 文字符号（`✦` `✓` `✕` `→` `·` `—`）替代，或直接改纯文字（「Email · 23」而不是「📧 23 emails」）。 ### 2. `export_deck_pdf.mjs` 报错 `Cannot find package 'playwright'` 原因：ESM 模块解析从脚本所在位置向上找 `node_modules`。脚本在 skill 安装目录的 `scripts/` 下，那里没依赖。对策：把脚本复制到 deck 项目目录（例如 `brochure/build-pdf.mjs`），在项目根跑 `npm install playwright pdf-lib`，然后 `node build-pdf.mjs --slides slides --out output/deck.pdf`。 ### 3. Google Fonts 没加载完就截图 → 中文显示为系统默认黑体 Playwright 截图/PDF 前至少 `wait-for-timeout=3500` 让 webfont 下载并 paint。或者把字体 self-host 到 `shared/fonts/` 减少网络依赖。 ### 4. 信息密度失衡：内容页塞太多 moxt philosophy 页第一版用 2×2 = 4 段 + 底部 3 信条 = 7 块内容，挤压且重复。改成 1×3 = 3 段后呼吸感立刻回来。对策：每页控制在「1 个核心信息 + 3-4 个辅助点 + 1 个视觉主角」，超过就拆到新页。少即是多——观众一页看 10 秒，给他 1 个记忆点比 4 个记忆点更容易记住。 --- ## 🛑 先定架构：单文件还是多文件？这个选择是做幻灯片的第一步，错了会反复踩坑。先读完这一节再动手。 ### 两种架构对比 | 维度 | 单文件 + `deck_stage.js` | 多文件 + `deck_index.html` 拼接器 | |------|--------------------------|--------------------------------------| | 代码结构 | 一个 HTML，所有 slide 是 `
` | 每页独立 HTML，`index.html` 用 iframe 拼接 | | CSS 作用域 | ❌ 全局，一页的样式可能影响所有页 | ✅ 天然隔离，iframe 各自一片天 | | 验证粒度 | ❌ 要 JS goTo 才能切到某页 | ✅ 单页文件双击就能在浏览器看 | | 并行开发 | ❌ 一个文件，多 agent 改会冲突 | ✅ 多 agent 可并行做不同页，零冲突 merge | | 调试难度 | ❌ 一处 CSS 出错，全 deck 翻车 | ✅ 一页出错只影响自己 | | 内嵌交互 | ✅ 跨页共享状态很简单 | 🟡 iframe 间需 postMessage | | 打印 PDF | ✅ 内置 | ✅ 拼接器 beforeprint 遍历 iframe | | 键盘导航 | ✅ 内置 | ✅ 拼接器内置 | ### 选哪个？（决策树） ``` │ 问：deck 预计有多少页？ ├── ≤10 页、需要 in-deck 动画或跨页交互、pitch deck → 单文件 └── ≥10 页、学术讲座、课件、长 deck、多 agent 并行 → 多文件（推荐） ``` 默认走多文件路径。它不是「备选」，是长 deck 和团队协作的主路径。原因：单文件架构的每一个优势（键盘导航、打印、scale）多文件都有，而多文件的作用域隔离和可验证性是单文件补不回来的。 ### 为什么这条规则这么硬？（真实事故记录）单文件架构曾经在 AI心理学讲座 deck 制作中连踩四坑： 1. CSS 特异性覆盖：`.emotion-slide { display: grid }` (特异性 10) 干翻 `deck-stage > section { display: none }` (特异性 2)，导致所有页同时渲染叠加。 2. Shadow DOM slot 规则被外层 CSS 压制：`::slotted(section) { display: none }` 挡不住 outer rule 的覆盖，sections 不肯隐藏。 3. localStorage + hash 导航竞态：刷新后不是跳到 hash 位置，而是停在 localStorage 记录的旧位置。 4. 验证成本高：必须 `page.evaluate(d => d.goTo(n))` 才能截某页，比直接 `goto(file://.../slides/05-X.html)` 慢一倍，还常报错。全部根因是单一全局命名空间——多文件架构从物理层面把这些问题消除了。 --- ## 路径 A（默认）：多文件架构 ### 目录结构 ``` 我的Deck/ ├── index.html # 从 assets/deck_index.html 复制来，改 MANIFEST ├── shared/ │ ├── tokens.css # 共享设计 token（色板/字号/常用 chrome） │ └── fonts.html # 引入 Google Fonts（每页 include） └── slides/ ├── 01-cover.html # 每个文件都是完整 1920×1080 HTML ├── 02-agenda.html ├── 03-problem.html └── ... ``` ### 每张 slide 的模板骨架 ```html P05 · Chapter Title
...

...

...
``` 关键约束： - `` 就是画布，直接在上面布局。不要包 `
` 或其他 wrapper。 - `width: 1920px; height: 1080px` 由 `shared/tokens.css` 里的 `body` 规则锁定。 - 引 `shared/tokens.css` 共享设计 token（色板、字号、page-header/footer 等）。 - 字体 `` 每页自己写（fonts 单独 import 不贵，且保证每页独立可打开）。 ### 拼接器：`deck_index.html` 直接从 `assets/deck_index.html` 复制。你只需要改一处——`window.DECK_MANIFEST` 数组，按顺序列出所有 slide 文件名和人类可读标签： ```js window.DECK_MANIFEST = [ { file: "slides/01-cover.html", label: "封面" }, { file: "slides/02-agenda.html", label: "目录" }, { file: "slides/03-problem.html", label: "问题陈述" }, // ... ]; ``` 拼接器已内置：键盘导航（←/→/Home/End/数字键/P 打印）、scale + letterbox、右下计数器、localStorage 记忆、hash 跳页、打印模式（遍历 iframe 按页输出 PDF）。 ### 单页验证（这是多文件架构的杀手级优势）每张 slide 都是独立 HTML。做完一张就在浏览器双击打开看： ```bash open slides/05-personas.html ``` Playwright 截图也是直接 `goto(file://.../slides/05-personas.html)`，不需要 JS 跳页，也不会被别的页的 CSS 干扰。这让「改一点验一点」的工作流成本接近零。 ### 并行开发把每张 slide 的任务拆给不同 agent，同时跑——HTML 文件彼此独立，merge 时没有冲突。长 deck 用这种并行方式能把制作时间压到 1/N。 ### `shared/tokens.css` 该放什么只放真正跨页共用的东西： - CSS 变量（色板、字号阶、间距阶） - `body { width: 1920px; height: 1080px; }` 这样的 canvas 锁定 - `.page-header` / `.page-footer` 这种每页都用一模一样的 chrome 不要把单页的布局 class 塞进来——那会退化回单文件架构的全局污染问题。 --- ## 路径 B（小 deck）：单文件 + `deck_stage.js` 适用于 ≤10 页、需要跨页共享状态（比如一个 React tweaks 面板要操控所有页）、或者做 pitch deck demo 这种要求极度紧凑的场景。 ### 基本用法 1. 从 `assets/deck_stage.js` 读取内容，嵌入 HTML 的 ` ``` ### 🛑 Script 位置硬约束（2026-04-20 真实踩坑）不能把 ` ``` `deck_stage.js` 本身已内置 `DOMContentLoaded` 延迟收集防御，即使 script 放 head 也不会彻底炸掉——但 `defer` 或放 body 底部仍然是更干净的做法，避免依赖防御分支。 ### ⚠️ 单文件架构的 CSS 陷阱（务必阅读）单文件架构最常见的坑——`display` 属性被单页样式偷走**。常见错误姿势 1（直接写 display: flex 到 section）： ```css /* ❌ 外部 CSS 特异性 2，覆盖了 shadow DOM 的 ::slotted(section){display:none}（也是 2）/ deck-stage > section { display: flex; / 所有页会同时叠加渲染！ / flex-direction: column; padding: 80px; ... } ``` 常见错误姿势 2（section 有特异性更高的 class）： ```css .emotion-slide { display: grid; } / 特异性: 10，更糟 / ``` 两种都会让所有 slide 同时叠加渲染——counter 可能显示 `1 / 10` 假装正常，但视觉上第一页盖着第二页盖着第三页。 ### ✅ Starter CSS（开工直接 copy，不踩坑） section 自身只管「可见/不可见」；layout（flex/grid 等）写到 `.active` 上： ```css / section 只定义非 display 的通用样式 / deck-stage > section { background: var(--paper); padding: 80px 120px; overflow: hidden; position: relative; / ⚠️ 不要在这里写 display! / } / 锁死「非激活即隐藏」——特异性+权重双保险 / deck-stage > section:not(.active) { display: none !important; } / 激活页才写需要的 display + layout / deck-stage > section.active { display: flex; flex-direction: column; justify-content: center; } / 打印模式：所有页都要显示，覆盖 :not(.active) / @media print { deck-stage > section { display: flex !important; } deck-stage > section:not(.active) { display: flex !important; } } ``` 替代方案：把单页的 flex/grid 写到内部 wrapper `
` 上，section 本身永远只是 `display: block/none` 的切换器。这是最干净的做法： ```html

...

``` ### 自定义尺寸 ```html ``` --- ## Slide Labels Deck_stage 和 deck_index 都会给每页打标签（计数器显示）。给它们更有意义的 label：多文件：在 `MANIFEST` 里写 `{ file, label: "04 问题陈述" }` 单文件：在 section 上加 `
` 关键：Slide 编号从 1 开始，不要从 0。用户说"slide 5"时，他指的是第 5 张，永远不是数组位置 `[4]`。人类不说 0-indexed。 --- ## Speaker Notes 默认不加，只在用户明确要求时才加。加了 speaker notes 你就可以把 slide 上的文字减少到最小，focus on impactful visuals——notes 承载完整 script。 ### 格式多文件：在 `index.html` 的 `` 里写： ```html ``` 单文件：同上位置。 ### Notes 写作要点 - 完整：不是提纲，是真要讲的话 - 对话式：像平时说话，不是书面语 - 对应：数组第 N 个对应第 N 张 slide - 长度：200-400 字最佳 - 情绪线：标注重音、停顿、强调点 --- ## Slide 设计模式 ### 1. 建立一个系统（必做）探索完 design context 后，先口头说你要用的系统： ```markdown Deck系统： - 背景色：最多2种（90% 白 + 10% 深色 section divider） - 字型：display 用 Instrument Serif，body 用 Geist Sans - 节奏：section divider 用 full-bleed 彩色 + 白字，普通 slide 白底 - 图像：hero slide 用 full-bleed 照片，data slide 用 chart 我按这个系统做，有问题告诉我。 ``` 用户确认后再往下做。 ### 2. 常用 slide layouts - Title slide：纯色背景 + 巨大标题 + 副标题 + 作者/日期 - Section divider：彩色背景 + 章节号 + 章节标题 - Content slide：白底 + 标题 + 1-3 bullet points - Data slide：标题 + 大图表/数字 + 简短说明 - Image slide：full-bleed 照片 + 底部小 caption - Quote slide：留白 + 巨大 quote + attribution - Two-column：左右对比（vs / before-after / problem-solution）一个 deck 里最多用 4-5 种 layout。 ### 3. Scale（再次强调） - 正文最小 24px，理想 28-36px - 标题 60-120px - Hero 字 180-240px - 幻灯片是给 10 米外看的，字要够大 ### 4. 视觉节奏 Deck 需要 intentional variety： - 颜色节奏：大部分白底 + 偶尔彩色 section divider + 偶尔 dark 片段 - 密度节奏：几张 text-heavy 的 + 几张 image-heavy 的 + 几张 quote 留白 - 字号节奏：正常标题 + 偶尔巨型 hero 文字不要每张 slide 长一样——那是 PPT 模板，不是设计。 ### 5. 空间呼吸（数据密集页必读）新手最容易踩的坑：把所有能放的信息都塞进一页。信息密度 ≠ 有效信息传达。学术/演讲类 deck 尤其要克制： - 列表/矩阵页：不要把 N 个元素都画成同一大小。用主次分层——今天要聊的 5 个放大做主角，剩下 16 个缩小做背景 hint。 - 大数字页：数字本身是视觉主角。周围的 caption 不要超过 3 行，否则观众眼球来回跳。 - 引用页：引语和 attribution 之间要有留白隔开，不要贴在一起。对照「数据是不是主角」「文字有没有挤在一起」两条自我审查，改到留白让你有点不安为止。 --- ## 打印为 PDF 多文件：`deck_index.html` 已处理 `beforeprint` 事件，按页输出 PDF。单文件：`deck_stage.js` 同样处理。打印样式已写好，不需要额外写 `@media print` CSS。 --- ## 导出为 PPTX / PDF（自助脚本） HTML 优先是第一公民。但用户经常需要 PPTX/PDF 交付。提供两个通用脚本，任何多文件 deck 都能用，位于 `scripts/` 下： ### `export_deck_pdf.mjs` — 导出矢量 PDF（多文件架构） ```bash node scripts/export_deck_pdf.mjs --slides --out deck.pdf ``` 特点： - 文字保留矢量（可复制、可搜索） - 视觉 100% 保真（Playwright 内嵌 Chromium 渲染后打印） - 不需要改 HTML 任何一个字 - 每个 slide 独立 `page.pdf()`，再用 `pdf-lib` 合并依赖：`npm install playwright pdf-lib` 限制：PDF 不能再编辑文字——要改回到 HTML 改。 ### `export_deck_stage_pdf.mjs` — 单文件 deck-stage 架构专用 ⚠️ 什么时候用：deck 是单 HTML 文件 + `` web component 包裹 N 个 `
`（即路径 B 架构）。此时 `export_deck_pdf.mjs` 那套「每个 HTML 一次 `page.pdf()`」走不通，需要走这个专用脚本。 ```bash node scripts/export_deck_stage_pdf.mjs --html deck.html --out deck.pdf ``` 为什么不能复用 export_deck_pdf.mjs（2026-04-20 真实踩坑记录）： 1. Shadow DOM 赢过 `!important`：deck-stage 的 shadow CSS 里有 `::slotted(section) { display: none }`（只 active 的那张 `display: block`）。即使在 light DOM 用 `@media print { deck-stage > section { display: block !important } }` 也压不住——`page.pdf()` 触发 print 媒体后 Chromium 最终渲染只有 active 那一张，结果整个 PDF 只有 1 页（当前 active slide 的重复）。 2. 循环 goto 每页还是只出 1 页：直觉解法「对每个 `#slide-N` navigate 一次再 `page.pdf({pageRanges:'1'})`」也失败——因为 print CSS 在 shadow DOM 之外也有 `deck-stage > section { display: block }` 规则被 override 后，最终渲染永远是 section 列表的第一个（不是你 navigate 到的那一页）。结果 17 次循环得到 17 张 P01 封面。 3. absolute 子元素跑到下一页：即使成功让所有 section 渲染出来，section 本身若 `position: static`，其 absolute 定位的 `cover-footer`/`slide-footer` 会相对 initial containing block 定位——当 section 被 print 强制为 1080px 高度，absolute footer 可能被推到下一页（表现为 PDF 比 section 数量多 1 页，多出来的那页只含 footer 孤儿）。修复策略（脚本已实现）： ```js // 打开 HTML 后，用 page.evaluate 把 section 从 deck-stage slot 中提出来， // 直接挂到 body 下一个普通 div 里，并内联 style 确保 position:relative + 固定尺寸 await page.evaluate(() => { const stage = document.querySelector('deck-stage'); const sections = Array.from(stage.querySelectorAll(':scope > section')); document.head.appendChild(Object.assign(document.createElement('style'), { textContent: ` @page { size: 1920px 1080px; margin: 0; } html, body { margin: 0 !important; padding: 0 !important; } deck-stage { display: none !important; } `, })); const container = document.createElement('div'); sections.forEach(s => { s.style.cssText = 'width:1920px!important;height:1080px!important;display:block!important;position:relative!important;overflow:hidden!important;page-break-after:always!important;break-after:page!important;background:#F7F4EF;margin:0!important;padding:0!important;'; container.appendChild(s); }); // 最后一页禁分页，避免尾部空白页 sections[sections.length - 1].style.pageBreakAfter = 'auto'; sections[sections.length - 1].style.breakAfter = 'auto'; document.body.appendChild(container); }); await page.pdf({ width: '1920px', height: '1080px', printBackground: true, preferCSSPageSize: true }); ``` 为什么这能 work： - 把 section 从 shadow DOM slot 拔到 light DOM 的普通 div——彻底绕过 `::slotted(section) { display: none }` 规则 - 内联 `position: relative` 让 absolute 子元素相对 section 定位，不会溢出 - `page-break-after: always` 让浏览器 print 时每 section 独立一页 - `:last-child` 不分页避免尾部空白页用 `mdls -name kMDItemNumberOfPages` 验证时注意：macOS 的 Spotlight metadata 有缓存，PDF 重写后要跑 `mdimport file.pdf` 强制刷新，否则显示旧的页数。用 `pdfinfo` 或 `pdftoppm` 数文件数才是真数。 --- ### `export_deck_pptx.mjs` — 导出可编辑 PPTX ```bash # 唯一模式：文本框原生可编辑（字体会回落到系统字体） node scripts/export_deck_pptx.mjs --slides --out deck.pptx ``` 工作原理：`html2pptx` 逐元素读 computedStyle 把 DOM 翻译成 PowerPoint 对象（text frame / shape / picture）。文字变成真文本框，PPT 里双击即可编辑。硬性约束（HTML 必须满足，否则该页 skip，详细说明见 `references/editable-pptx.md`）： - 所有文字必须在 `
`/`
`-`
`/`
`/`
` 里（禁止裸文本 div） - `
`/`` 标签自身不能有 background/border/shadow（放外层 div） - 不用 `::before`/`::after` 插入装饰文字（伪元素提不出来） - inline 元素（span/em/strong）不能有 margin - 不用 CSS gradient（不可渲染） - div 不用 `background-image`（用 ``）脚本已内置自动预处理器——把 "叶子 div 里的裸文本" 自动包成 `
`（保留 class）。这解决了最常见的违规（裸文本）。但其他违规（p 上有 border、span 上有 margin 等）仍需 HTML 源头合规。字体回落 caveat： - Playwright 用 webfont 测量 text-box 尺寸；PowerPoint/Keynote 用本机字体渲染 - 两者不同时会有溢出或错位——每页都要肉眼过 - 建议目标机器装好 HTML 里用的字体，或 fallback 到 `system-ui` 视觉优先场景不要走这条路径 → 改用 `export_deck_pdf.mjs` 出 PDF。PDF 视觉 100% 保真、矢量、跨平台、文字可搜——是视觉优先 deck 的真正归宿，不是什么「不可编辑的妥协」。 ### 从一开始就让 HTML 对导出友好对性能最稳的 deck：从写 HTML 时就按 editable 的 4 条硬约束写。这样 `export_deck_pptx.mjs` 可以直接全部 pass。额外成本不大： ```html
关键发现

关键发现

41%

41%

``` ### 何时选哪个 | 场景 | 推荐 | |------|------| | 给主办方/档案存档 | PDF（通用、高保真、文字可搜） | | 发给协作者让他们微调文字 | PPTX editable（接受字体回落） | | 要现场演讲、不改内容 | PDF（矢量保真，跨平台） | | HTML 是首选呈现媒介 | 直接浏览器播放，导出只是备份 | ## 导出为可编辑 PPTX 的深度路径（仅长期项目）如果你的 deck 会长期维护、反复修改、团队协作——建议一开始就按 html2pptx 约束写 HTML，这样 `export_deck_pptx.mjs` 可以直接全部 pass。详见 `references/editable-pptx.md`（4 条硬约束 + HTML 模板 + 常见错误速查 + 已有视觉稿的 fallback 流程）。 --- ## 常见问题多文件：iframe 里的页打不开 / 白屏 → 检查 `MANIFEST` 的 `file` 路径是否相对 `index.html` 正确。用浏览器 DevTools 看 iframe 的 src 能否直接访问。多文件：某页样式和别页冲突 → 不可能（iframe 隔离）。如果感觉冲突，那是缓存——Cmd+Shift+R 强刷。单文件：多 slide 同时渲染叠加 → CSS 特异性问题。看上面「单文件架构的 CSS 陷阱」一节。单文件：缩放看起来不对 → 检查是否所有 slide 直接挂在 `` 下作为 `
`。中间不能包 `
`。单文件：想跳到特定 slide → URL 加 hash：`index.html#slide-5` 跳到第 5 张。两种架构都适用：字在不同屏幕下位置不一致 → 用固定尺寸（1920×1080）和 `px` 单位，不要用 `vw`/`vh` 或 `%`。缩放统一处理。 --- ## 验证检查清单（做完 deck 必过） 1. [ ] 浏览器直接打开 `index.html`（或主 HTML），检查首页无破图、字体已加载 2. [ ] 按 → 键翻到每一页，没有空白页、没有布局错位 3. [ ] 按 P 键打印预览，每页恰好一张 A4（或 1920×1080）且无裁切 4. [ ] 随机选 3 页 Cmd+Shift+R 强刷，localStorage 记忆正常工作 5. [ ] Playwright 批量截图（单页架构：遍历 `slides/.html`；单文件架构：用 goTo 切换），人工肉眼过一遍 6. [ ] 搜一下 `TODO` / `placeholder` 残留，确认都清理了 FILE:references/smoke-test.md # Smoke Test · IFQ Design Skills 一页说明：如何快速验证 ClawHub-safe bundle 安装完整、脚本可读、安全面干净。不是完整设计 QA，是 60 秒内跑完、任何发布级破损都能暴露的最小回归入口。 ## 一行启动 ```bash # 在 ifq-design-skills 仓库根目录下 npm run validate ``` 这个命令会顺序验证： 1. 模板索引一致性 — `assets/templates/INDEX.json` 里每一条 `file` 在磁盘上真实存在 2. 品牌资产齐备 — `assets/ifq-brand/logo.svg`、`logo-white.svg`、`mark.svg`、`icons/hand-drawn-icons.svg`、`ifq_brand.jsx` 全在 3. 手绘图标 sprite 可解析 — `hand-drawn-icons.svg` 的 `` 至少 24 条 4. References 路由目标存在 — SKILL.md 里每个 `references/.md` 指向都真实存在 5. 关键脚本健康 — `scripts/.mjs / .js` 必须是文本、非空、结构正常 6. authored 年份渲染 — IFQ authored stamp 必须渲染为真实年份，不能残留 `field note / 2026` 或年份占位符 7. ClawHub manifest — `clawhub.json` 与 `SKILL.md` 版本一致，docs / triggers / tool_map 可解析 8. package 安全 — zero dependencies，zero install-time lifecycle hooks 9. ClawHub cleanliness — ignore manifest 排除 VCS、agent-local state、`.env`、个人资产索引和构建产物 10. script safety — `scripts/script-safety-rules.json` deny-list 覆盖动态执行、进程创建和脚本侧外联原语 11. secret hygiene — deny-list 覆盖常见令牌、PAT、云访问标识和私钥块 12. font loading — Google Fonts 只能是 Tier B 非阻塞 + noscript fallback 13. template runtime — 默认可 fork 模板不依赖远程 JS/CSS runtime（Google Fonts 除外） 14. remote runtime pinning — HTML 资产里的远程 runtime 不能用 floating `@latest` 退出码：`0` 成功 · `1` 失败（会打印第一条失败详情）。当前仓库的最小 smoke 仅依赖 Node，无需 `npm install`，也不会触发网络访问。高敏感检测词放在 `scripts/script-safety-rules.json`，避免平台把自检代码误判成“读文件后外发”。 ## 三种任务的最小验证剧本如果你要验证设计交付链而不是只验证发布包，按下面的最小任务跑一次。ClawHub-safe bundle 负责 HTML 和协议；Playwright / ffmpeg / PDF / PPTX 自动化只在完整 GitHub 仓库中使用。 ### ① 原型任务最小验证 ``` 任务：给 iPhone 15 Pro 做一个「相机 App 拍照瞬间」的高保真原型，1 屏即可。验收： - 使用 Starter Components 里的 AppPhone 状态管理器 - 图片素材必须来自 Wikimedia / Met / Unsplash，不能用纯色占位 - 交付前跑 Playwright 点击测试，至少 1 个可点击交互 ``` 预期耗时 3–5 分钟；失败通常意味着：占位图没替换 / AppPhone 没包 / 宿主 agent 没有浏览器截图能力。 ### ② 动画任务最小验证 ``` 任务：5 秒 logo 起幕动画，1920×1080，60fps，导出 mp4 + gif。验收： - 使用动画引擎（keyframe-based，非 CSS transition 堆叠） - 导出后 gif ≤ 2 MB，palette 优化开启 - mp4 自动附加 BGM + fade in/out ``` 预期耗时 6–10 分钟；MP4/GIF 导出请切到完整 GitHub repo。失败通常意味着：ffmpeg 没装 / Playwright 没装 chromium / BGM 文件缺失。 ### ③ Deck 导出最小验证 ``` 任务：3 页 keynote HTML deck（封面 + 1 内容页 + 封底），同时导出 PDF 与 PPTX。验收： - 使用 slide-title.html 模板 + 两个自定义页 - PDF 文件 > 0 字节，页数 = 3 - PPTX 在 Keynote / PowerPoint 打开文字仍可编辑 ``` 预期耗时 4–8 分钟；PDF/PPTX 导出请切到完整 GitHub repo。失败通常意味着：`pptxgenjs` 或 `pdf-lib` 没装 / chromium 没装 / 字体加载失败。 ## 依赖矩阵速查 ClawHub-safe bundle: | 命令 | 依赖 | |------|------| | `npm run validate` | Node ≥ 18.17 | | `npm run pack` | Node ≥ 18.17 | 完整 GitHub repo 的导出辅助： | 脚本 | Node deps | Python deps | System | |------|-----------|-------------|--------| | `scripts/verify.py` | — | `playwright` | chromium | | `scripts/render-video.js` | `playwright`, `sharp` | — | `ffmpeg`, chromium | | `scripts/export_deck_pdf.mjs` | `playwright`, `pdf-lib` | — | chromium | | `scripts/export_deck_pptx.mjs` | `playwright`, `pptxgenjs`, `sharp` | — | chromium | | `scripts/export_deck_stage_pdf.mjs` | `playwright`, `pdf-lib` | — | chromium | | `scripts/html2pptx.js` | `pptxgenjs`, `sharp` | — | — | > 仅在需要导出时安装： > ``` > npm install # full repo Node deps > npx playwright install chromium > pip install -r requirements.txt # 仅当你要跑 verify.py > brew install ffmpeg # macOS；Debian/Ubuntu 用 apt install ffmpeg > ``` ## 失败排查清单 - `Error: browserType.launch: Executable doesn't exist` → `npx playwright install chromium` - `ffmpeg: command not found` → `brew install ffmpeg`（macOS）/ `apt install ffmpeg`（Linux） - `Cannot find module 'playwright'` → `npm install` - `ModuleNotFoundError: No module named 'playwright'` → `pip install -r requirements.txt` - INDEX.json 指向不存在文件 → 先运行 `npm run validate` 看第一条失败，再修或删索引 FILE:references/modes.md # IFQ Design Skills · Mode Library (v2 新增) > 超越 Junior Designer / 设计方向顾问的扩展模式。每一种模式都是一条"开箱即用"的流水线，根据用户的请求自动路由。 > > 根路由见 [`SKILL.md`](../SKILL.md)；权威模式细节以本文件和 [`assets/templates/INDEX.json`](../assets/templates/INDEX.json) 为准。 --- ## 模式索引 | Mode ID | 中文名 | 触发语 | 典型交付物 | 耗时 | |---------|-------|--------|-----------|------| | `M-01` | 品牌发布会模式 | 「发布会动画 / launch film / 产品发布物料」 | 25–40s 动画 + keyposter + 3 张社媒图 | 25–40 min | | `M-02` | 个人品牌页模式 | 「做我的个人站 / 个人主页 / portfolio / about me」 | 单页个人站 HTML + OG 图 | 15–20 min | | `M-03` | 白皮书 / 报告模式 | 「白皮书 / PDF 报告 / 年报 / research report」 | 可打印 HTML→PDF + 封面 + 目录 | 25–40 min | | `M-04` | 数据仪表板模式 | 「Dashboard / 数据看板 / KPI 面板」 | 高密度 Dashboard HTML，真数据驱动 | 20–30 min | | `M-05` | 对比评测模式 | 「评测 / VS 对比 / 横评 / benchmark」 | 对比信息图 + 评分雷达 + 可分享卡片 | 20–30 min | | `M-06` | Onboarding 流程模式 | 「onboarding / 新手引导 / 首启流程」 | Flow-demo App 原型（3–5 屏）+ 埋点建议 | 25–35 min | | `M-07` | 发布日记模式 | 「changelog / release notes / 版本记录」 | 时间线信息图 + 社媒图 | 10–15 min | | `M-08` | 演讲 Keynote 模式 | 「做演讲 PPT / keynote / talk slides」 | 1920×1080 HTML deck + PPTX + PDF | 25–40 min | | `M-09` | 社媒海报套件 | 「朋友圈图 / 小红书封面 / 微博长图 / 社媒物料」 | 3–6 张物料（1:1 / 9:16 / 4:5 / 1.91:1） | 15–25 min | | `M-10` | 印刷名片/邀请函 | 「名片 / 邀请函 / 活动票 / VIP 卡」 | 可打印 SVG + PDF（含出血位 3mm） | 10–15 min | | `M-11` | 品牌诊断模式 | 「给我家品牌诊断 / 品牌体检 / 升级现有品牌」 | 诊断报告 + 3 个升级方向 | 20–30 min | | `M-12` | 全栈品牌系统 | 「从零建立品牌 / brand from scratch」 | logo + 色板 + 字体 + 6 应用示例 | 40–60 min | --- ## M-01 · 品牌发布会模式触发：用户提到具体产品（实体/数字）要做"发布会"、"launch film"、"产品宣传片"、"产品物料"。前置硬门： 1. 必先走 [`asset-protocol.md`](asset-protocol.md) 的事实验证与资产采集流程 — 产品必须已确认存在、版本、规格 2. 必先走 [`asset-protocol.md`](asset-protocol.md) 的核心资产协议 — logo / 产品渲染图 / UI 截图必须到位 3. 素材未到 8/10 → 停下问用户，不凑合交付件清单（并行产出）： - `launch-film.html` · 25–40s HTML motion demo，Stage + Sprite 时间轴 - `poster-hero.html` · 一张 key visual（16:9 与 1:1 双版） - `social-twitter.html` · 1200×675 社媒图 - `social-xiaohongshu.html` · 1242×1656 竖版 - `social-og.html` · 1200×630 OG 分享图 - 导出 `.mp4 (25fps + 60fps 插帧)` + `.gif` IFQ 签名融入点： - 片头第 8–12 帧：`IfqSpark` 从屏幕中心绽开，300ms 内切入品牌 logo - 片尾最后 20 帧：右下角浮现「made with ifq.ai」编辑体水印，opacity 0.4 - Poster 右下 colophon：`IfqStamp` rust 边框邮戳执行模板： ```text Stage 时长： 00.0–02.4s Spark reveal + 品牌 logo 浮现 02.4–08.0s 产品图 rotate / pan 08.0–16.0s 核心卖点 3 条文字，Newsreader italic 16.0–22.0s 场景使用镜头（真实素材） 22.0–26.0s CTA + ifq.ai 尾标 ``` --- ## M-02 · 个人品牌页模式触发：「做我的个人站」「portfolio」「about me」「个人主页」。关键问题（一次问清）： - 你的职业标签？1 句话 tagline？ - 3 个代表作 + 每个一句话？ - 社交链接？（X / B站 / 小红书 / 公众号 / GitHub / 邮箱） - 头像图？没有就留位五种变体（并排生成让用户选）： 1. Editorial Serif · Kenya Hara 式大量留白 + serif display 2. Terminal Hacker · 等宽字 + rust accent + 打字机开场 3. Magazine Grid · Pentagram 式栏线 + 期刊感 4. Paper Journal · 手绘 SVG 图标 + 纸质纹理 + 斜体 pull quote 5. Minimalist Card · 一屏完事，居中 hero card 每个变体都内嵌 `IfqWatermark` 右下角；footer 用 `IfqStamp`。 --- ## M-03 · 白皮书 / 报告模式触发：「白皮书」「research report」「年报」「行业报告」。硬要求： - A4 打印尺寸（210×297mm），`@page { margin: 20mm }` 设置 - 真数据驱动（提前问用户要数据源，没有则走设计方向顾问推荐） - 目录页自动生成（基于 `
` 锚点 + page-break） - 封面 / 扉页 / 目录 / 章节页 / 正文 / 封底六类模板 IFQ 签名： - 封面右下：`IfqStamp` + 出版序号 `N° ` - 每页 footer 中央：8pt rust spark + "ifq.ai · <报告简称>" - 封底：`IfqLogo` + 版权声明导出：`node scripts/export_deck_pdf.mjs --paper=A4 --print=true` --- ## M-04 · 数据仪表板模式触发：「Dashboard」「看板」「KPI 面板」「monitoring UI」。硬要求（来自 [`content-guidelines.md`](content-guidelines.md) 与 [`ios-prototype.md`](ios-prototype.md) 的高密度规则）： - 每屏 ≥ 3 处产品差异化信息（非装饰性数据） - tabular-nums，mono font 数字列对齐 - sparklines 用真数据，不画假波形 - 过滤器、筛选、时间切换 3 件套默认提供布局模板（三选一）： - `Command Center` · 左 nav + 顶部 KPI 条 + 3×3 metric grid + 右 side feed - `Financial Terminal` · 纯黑底 + rust accent + 密集表格 - `Health Tracker` · 明亮底 + 大号 metric hero + 趋势图卡片手绘图标接入：使用 `radar / sparkles / check / arrow` 作为状态 indicator，避免 emoji。 --- ## M-05 · 对比评测模式触发：「A vs B」「横评」「评测」「benchmark」。交付件： - 顶部 hero：两个产品 logo + 对撞分数 - 中部矩阵：5–8 维度打分 + 每格 1 行评语 - 雷达图（复用 `c6-expert-review` 的画法） - 尾部："最终推荐" + 使用场景矩阵 - 可分享社媒卡片（正方形）评分协议：用户提供分数 or 让用户选"我来打分 / AI 代打+人工复核"。不要 AI 独立打分不告知用户。 --- ## M-06 · Onboarding 流程模式触发：「onboarding」「新手引导」「首启流程」「首次打开」。强制 flow-demo（不是 overview 平铺）： - 3–5 屏 clickable，每屏有 CTA - 每屏附"用户心智"标注：在想什么 / 为什么点 / 下一步期待 - 埋点建议：每个 primary action 标注 `data-track="onboarding_step_X_action"` IFQ 签名：在第 1 屏左上角角标出 spark icon 作为 brand presence；末屏完成页全屏 `IfqSpark` 庆祝动画。 --- ## M-07 · 发布日记模式触发：「changelog」「release notes」「版本记录」「更新日志」。模板：时间线（左侧日期 rail + 右侧事件卡片），分版本折叠，rust accent 标记"新增"、ink 灰标记"修复"、soft accent 标记"优化"。手绘图标绑定： - 新增 → `sparkles` - 修复 → `check` - 优化 → `arrow` - 重大更新 → `rocket` --- ## M-08 · 演讲 Keynote 模式触发：「演讲 PPT」「keynote」「talk slides」「做演讲」。沿用 `references/slide-decks.md` + `editable-pptx.md`，额外规则： - 开场第 1 页：左下 `IfqSpark` 动画 + 右下 `IfqStamp` - Speaker notes 自动生成中英双语（中文主讲 + 英文 backup） - 导出走 `scripts/export_deck_pptx.mjs` 得到真文本框 PPTX --- ## M-09 · 社媒海报套件触发：「社媒物料」「朋友圈图」「小红书封面」「社媒套件」。标准尺寸矩阵（按平台自动匹配）： | 平台 | 尺寸 | 文件名 | |------|------|-------| | X / Twitter | 1200×675 | `social-x.html` | | 小红书 | 1242×1656 | `social-rednote.html` | | 微信公众号头图 | 900×383 | `social-wechat.html` | | Instagram 方图 | 1080×1080 | `social-ig-sq.html` | | 抖音 / TikTok | 1080×1920 | `social-tiktok.html` | | LinkedIn | 1200×627 | `social-linkedin.html` | 每张都内嵌 `IfqWatermark` 或 `IfqStamp`（用户可一键去除）。 --- ## M-10 · 印刷名片 / 邀请函触发：「名片」「邀请函」「活动票」「VIP 卡」。硬规格： - 名片：90×54mm，+3mm 出血，安全线 3mm - 邀请函：支持 100×210mm 长邀请条 / 148×210mm A5 / 210×99mm DL - 输出：`.svg` + `.pdf` (300dpi, CMYK placeholder) IFQ 签名：正面一枚微缩 spark（3mm）+ 反面 `IfqLogo` 14mm 高。 --- ## M-11 · 品牌诊断模式触发：「品牌体检」「给我家品牌诊断」「品牌升级」「现有品牌优化」。流程： 1. 请用户提供 3–5 个现有物料截图（logo 使用、网站、产品、社媒图） 2. 从 6 维度打分（识别度 / 一致性 / 时代感 / 情感传达 / 差异化 / 应用扩展性），每维 0–10 3. 输出雷达图 + 3 条"Keep / 3 条"Fix" / 3 条"Quick Wins" 4. 给 3 个升级方向的 moodboard（每方向并排 2 张参考 + 1 个风格 demo） --- ## M-12 · 全栈品牌系统触发：「从零建立品牌」「brand from scratch」「给新公司做品牌」。完整交付： 1. `brand-spec.md` · 按 [`asset-protocol.md`](asset-protocol.md) 模板填充 2. `logo.svg` · 主版 + 反色版 + 方版 + 横版 3. `palette.html` · 色板可视化（带 oklch 值 + WCAG 对比度） 4. `type-system.html` · 字体阶梯（H1–H6 + body + mono） 5. 6 个应用示例：名片 / 网站 hero / App icon / 社媒头图 / 邀请函 / 产品包装 6. 打包 zip 强流程：必须用 [`design-styles.md`](design-styles.md) + [`ifq-native-recipes.md`](ifq-native-recipes.md) 先给用户 3 个方向，不能凭空给 logo。 --- ## 手绘图标使用约定（所有模式通用）替代 emoji 的场景下，优先使用 `assets/ifq-brand/icons/hand-drawn-icons.svg`： ```html ``` React 组件（inline JSX）：``（见 `assets/ifq-brand/ifq_brand.jsx`）。签名绑定默认映射： | 语义 | icon id | |------|---------| | AI / 智能 / 生成 | `sparkles` / `spark` | | 完成 / 成功 | `check` | | 下一步 / 前进 | `arrow` | | 设计 / 创作 | `brush` / `pencil` | | 原型 / 设备 | `frame` | | 动画 / 视频 | `film` / `play` | | 幻灯片 | `deck` | | 变体 / 画布 | `grid` | | 配色 / 色板 | `palette` / `eyedropper` | | 字型 | `type` / `serif` | | 评审 / 诊断 | `radar` | | 方向顾问 | `compass` | | 想法 / 灵感 | `idea` | | 发布 / 上线 | `rocket` | | 关联 / 引用 | `link` | | 光标 / 交互 | `cursor` / `hand` | FILE:references/hero-animation-case-study.md # Gallery Ripple + Multi-Focus · 场景编排哲学 > 从 ifq-design-skills hero 动画 v9（25 秒，8 场景）里提炼出的一种可复用的视觉编排结构。 > 不是动画制作流水线，是什么场景下这种编排是"对的"。 > 实战参考：[demos/hero-animation-v9.mp4](../demos/hero-animation-v9.mp4) · [https://www.ifq.ai/ifq-design-skills-hero/](https://www.ifq.ai/ifq-design-skills-hero/) ## 一句话先行 > 当你有 20+ 同质视觉素材、场景需要"表达规模感和深度"时，优先考虑 Gallery Ripple + Multi-Focus 这套编排，而不是堆砌排版。通用 SaaS feature 动画、产品发布会、skill 推广、系列作品集展示——只要素材数量够、风格一致，这套结构几乎都能出效果。 --- ## 这个手法究竟在表达什么不是"秀素材"——是通过两个节奏变化讲一个叙事：第一拍 · Ripple 展开（~1.5s）：从中心向四周扩散出 48 张卡片，观众被"量"震住——「哦，这东西有这么多产出」。第二拍 · Multi-Focus（~8s，4 次循环）：镜头在慢速 pan 的同时，4 次把背景 dim + desaturate，把某一张卡单独放大到屏幕中央——观众从"量的冲击"切换到"质的凝视"，每次 1.7s 节奏稳定。核心叙事结构：规模（Ripple） → 凝视（Focus × 4） → 淡出（Walloff）。这三拍组合起来表达的是「Breadth × Depth」——不只是能做很多，每一个还都值得停下来看。对比一下反例： | 做法 | 观众感知 | |------|---------| | 48 张卡静态排列（没有 Ripple）| 好看但无叙事，像一张 grid screenshot | | 一张一张快切（没有 Gallery context）| 像 slideshow，失去"规模感" | | 只有 Ripple 没有 Focus | 震住了但没让人记住任何具体一张 | | Ripple + Focus × 4（本配方） | 先震撼于量，再凝视于质，最后平静淡出——完整情绪弧线 | --- ## 前置条件（必须全部满足）这套编排不是万能的，下面 4 条缺一不可： 1. 素材规模 ≥ 20 张，最好 30+ 少于 20 张 Ripple 会显得"空"——48 格里每格都在动才有密度感。v9 用了 48 格 × 32 张图（循环填充）。 2. 素材视觉风格一致全是 16:9 slide 预览 / 全是 app 截图 / 全是封面设计——长宽比、色调、版式得像是"一套"。混搭会让 Gallery 看起来像剪贴板。 3. 素材单独放大后仍有可读信息 Focus 是把某张卡放大到 960px 宽，如果原图放大后糊了或信息稀薄，Focus 这一拍就废了。反向验证：能不能从 48 张里挑出 4 张作为"最有代表性"的？挑不出来就说明素材质量不齐。 4. 场景本身是 landscape 或 square，不是竖屏 Gallery 的 3D 倾斜（`rotateX(14deg) rotateY(-10deg)`）需要横向延伸感，竖屏会让倾斜效果看起来窄且别扭。缺条件的后备路径： | 缺什么 | 退化为什么 | |-------|-----------| | 素材 < 20 张 | 改用「3-5 张并排静态展示 + 逐个 focus」 | | 风格不一致 | 改用「封面 + 3 章节大图」的 keynote-style | | 信息稀薄 | 改用「data-driven dashboard」或「金句 + 大字」 | | 竖屏场景 | 改用「vertical scroll + sticky cards」 | --- ## 技术配方（v9 实战参数） ### 4-Layer 结构 ``` viewport (1920×1080, perspective: 2400px) └─ canvas (4320×2520, 超大 overflow) → 3D tilt + pan └─ 8×6 grid = 48 cards (gap 40px, padding 60px) └─ img (16:9, border-radius 9px) └─ focus-overlay (absolute center, z-index 40) └─ img (matches selected slide) ``` 关键：canvas 比 viewport 大 2.25 倍，这样 pan 才有"窥视更大世界"的感觉。 ### Ripple 展开（距离延迟算法） ```js // 每张卡的入场时间 = 距中心的距离 × 0.8s 延迟 const col = i % 8, row = Math.floor(i / 8); const dc = col - 3.5, dr = row - 2.5; // 到中心的 offset const dist = Math.hypot(dc, dr); const maxDist = Math.hypot(3.5, 2.5); const delay = (dist / maxDist) 0.8; // 0 → 0.8s const localT = Math.max(0, (t - rippleStart - delay) / 0.7); const opacity = expoOut(Math.min(1, localT)); ``` 核心参数： - 总时长 1.7s（`T.s3_ripple: [8.3, 10.0]`） - 最大延迟 0.8s（中心最早出，角落最晚） - 每张卡入场时长 0.7s - Easing: `expoOut`（爆发感，不是平滑）同时做的事：canvas scale 从 1.25 → 0.94（zoom out to reveal）—— 配合出现的同步推远感。 ### Multi-Focus（4 次节奏） ```js T.focuses = [ { start: 11.0, end: 12.7, idx: 2 }, // 1.7s { start: 13.3, end: 15.0, idx: 3 }, // 1.7s { start: 15.6, end: 17.3, idx: 10 }, // 1.7s { start: 17.9, end: 19.6, idx: 16 }, // 1.7s ]; ``` 节奏规律：每个 focus 1.7s，间隔 0.6s 喘息。总计 8s（11.0–19.6s）。每次 focus 内部： - In ramp: 0.4s（`expoOut`） - Hold: 中间 0.9s（`focusIntensity = 1`） - Out ramp: 0.4s（`easeOut`）背景变化（这是关键）： ```js if (focusIntensity > 0) { const dimOp = entryOp * (1 - 0.6 * focusIntensity); // dim to 40% const brt = 1 - 0.32 * focusIntensity; // brightness 68% const sat = 1 - 0.35 * focusIntensity; // saturate 65% card.style.filter = `brightness(${brt}) saturate(${sat})`; } ``` 不只是 opacity——同时 desaturate + darken。这让前景 overlay 的色彩"跳出来"，而不是只是"变亮一点"。 Focus overlay 尺寸动画： - 从 400×225（入场）→ 960×540（hold 态） - 外围有 3 层 shadow + 3px accent 色 outline ring，呈现"被框住的感觉" ### Pan（持续感让静止不无聊） ```js const panT = Math.max(0, t - 8.6); const panX = Math.sin(panT * 0.12) * 220 - panT * 8; const panY = Math.cos(panT * 0.09) * 120 - panT * 5; ``` - 正弦波 + 线性 drift 双层运动——不是纯循环，每个时刻位置都不同 - X/Y 频率不同（0.12 vs 0.09）避免视觉上看出"规律循环" - clamp 在 ±900/500px 防止漂出为什么不用纯线性 pan：纯线性观众会"预测"下一秒在哪；正弦+drift 让每一秒都是新的，3D 倾斜下产生"微晕船感"（好的那种），注意力被拉住。 --- ## 5 个可复用模式（从 v6→v9 迭代中蒸馏） ### 1. expoOut 作为主 easing，不是 cubicOut `easeOut = 1 - (1-t)³`（平滑）vs `expoOut = 1 - 2^(-10t)`（爆发后迅速收敛）。选择理由：expoOut 的前 30% 很快达到 90%，更像物理阻尼，符合"重的东西落地"的直觉。特别适合： - 卡片入场（重量感） - Ripple 扩散（冲击波） - Brand 浮起（落定感）什么时候仍用 cubicOut：focus out ramp、对称的微动效。 ### 2. 纸感底色 + 赤陶橙 accent（Anthropic 血统） ```css --bg: #F7F4EE; /* 暖纸 / --ink: #1D1D1F; / 几乎黑 / --accent: #D97757; / 赤陶橙 / --hairline: #E4DED2; / 暖线条 / ``` 为什么：温暖底色在 GIF 压缩后依然有"呼吸感"，不像纯白会显得"屏幕感"。赤陶橙作为唯一 accent 贯穿 terminal prompt、dir-card 选中、cursor、brand hyphen、focus ring——所有视觉锚点都被这一个色串起来。 v5 教训：加了 noise overlay 以模拟"纸纹"，结果 GIF 帧压缩全废（每帧都不同）。v6 改为"只用底色 + 暖 shadow"，纸感保留 90%，GIF 体积缩小 60%。 ### 3. 两档 Shadow 模拟深度，不用真 3D ```css .gallery-card.depth-near { box-shadow: 0 32px 80px -22px rgba(60,40,20,0.22), ... } .gallery-card.depth-far { box-shadow: 0 14px 40px -16px rgba(60,40,20,0.10), ... } ``` 用 `sin(i × 1.7) + cos(i × 0.73)` 确定性算法给每张卡分配 near/mid/far 三档 shadow——视觉上有"三维堆叠"感，但每帧 transform 完全不变，GPU 消耗 0。真 3D 的代价：每个 card 单独 `translateZ`，GPU 每帧都在算 48 个 transform + shadow blur。v4 试过，Playwright 录制 25fps 都吃力。v6 的两档 shadow 肉眼效果差距 <5%，但成本差 10 倍。 ### 4. 字重变化（font-variation-settings）比字号变化更电影感 ```js const wght = 100 + (700 - 100) morphP; // 100 → 700 over 0.9s wordmark.style.fontVariationSettings = `"wght" ${wght.toFixed(0)}`; ``` Brand wordmark 从 Thin → Bold 用 0.9s 渐变，配合 letter-spacing 微调（-0.045 → -0.048em）。为什么比放大缩小好： - 放大缩小观众看过太多，预期固化 - 字重变化是"内在的充实感"，像气球被吹满，而不是"被推近" - variable fonts 是 2020+ 才普及的特性，观众下意识感觉"现代" 限制：必须用支持 variable font 的字体（Inter/Roboto Flex/Recursive 等）。普通静态字体只能拟态（切换几个固定 weight 有跳变）。 ### 5. Corner Brand 低强度持续签名 Gallery 阶段左上角有个 `IFQ · DESIGN` 小标识，16% opacity 色值，12px 字号，宽字距。为什么加这个： - Ripple 爆发后观众容易"失焦"不记得在看什么，左上角轻标示帮助 anchor - 比全屏大 logo 更高级——做品牌的人知道，品牌签名不需要喊 - 在 GIF 被截屏分享时仍留下归属信号规则：只在中段（画面 busy）出现，开场关闭（不遮 terminal），结尾关闭（brand reveal 是主角）。 --- ## 反例：什么时候不要用这套编排 ❌ 产品演示（要展示功能的）：Gallery 让每一张都一闪而过，观众记不住任何一个功能。改用「单屏 focus + tooltip 标注」。 ❌ 数据驱动内容：观众要读数字，Gallery 的快速节奏不给时间读。改用「数据图表 + 逐项 reveal」。 ❌ 故事叙事：Gallery 是"并列"结构，故事需要"因果"。改用 keynote 章节切换。 ❌ 素材只有 3-5 张：Ripple 密度不够，看起来像"补丁"。改用「静态排列 + 逐张高亮」。 ❌ 竖屏（9:16）：3D tilt 需要横向延伸，竖屏会让倾斜感觉"歪"而不是"展开"。 --- ## 如何判断自己的任务适用这套编排三步快速检查： Step 1 · 素材数量：数一下你有多少同类视觉素材。< 15 → 停；15-25 → 凑；25+ → 直接用。 Step 2 · 一致性测试：把 4 张随机素材并排放，是否像「一套」？不像 → 先统一风格再做，或改方案。 Step 3 · 叙事匹配：你要表达的是「Breadth × Depth」（量 × 质）吗？还是「流程」「功能」「故事」？不是前者就别硬套。三步都 yes，直接 fork v6 HTML，改 `SLIDE_FILES` 数组和时间轴就能复用。调色板改 `--bg / --accent / --ink`，整体换皮不换骨。 --- ## 相关 Reference - 完整技术流程：[references/animations.md](animations.md) · [references/animation-best-practices.md](animation-best-practices.md) - 动画导出流水线：[references/video-export.md](video-export.md) - 音频配置（BGM + SFX 双轨）：[references/audio-design-rules.md](audio-design-rules.md) - Apple 画廊风格的横向参考：[references/apple-gallery-showcase.md](apple-gallery-showcase.md) - 源 HTML（v6 + 音频集成版）：`www.ifq.ai/ifq-design-skills-hero/index.html` FILE:references/critique-guide.md # 设计评审深度指南 > Phase 7 的详细参考。提供评分标准、场景侧重点、常见问题清单。 --- ## 评分标准详解 ### 1. 哲学一致性（Philosophy Alignment） | 分数 | 标准 | |------|------| | 9-10 | 设计完美体现了选定哲学的核心精神，每个细节都有哲学依据 | | 7-8 | 整体方向正确，核心特征到位，个别细节偏离 | | 5-6 | 能看出意图，但执行时混入了其他风格元素，不够纯粹 | | 3-4 | 仅在表面模仿，未理解哲学内核 | | 1-2 | 与选定哲学基本无关 | 评审要点： - 是否使用了该设计师/机构的标志性手法？ - 色彩、字体、布局是否符合该哲学体系？ - 有没有「自相矛盾」的元素？（如选了Kenya Hara却塞满内容） ### 2. 视觉层级（Visual Hierarchy） | 分数 | 标准 | |------|------| | 9-10 | 用户视线自然沿设计者意图流动，信息获取零摩擦 | | 7-8 | 主次关系清晰，偶有1-2处层级模糊 | | 5-6 | 能分出标题和正文，但中间层级混乱 | | 3-4 | 信息平铺，没有明确的视觉入口 | | 1-2 | 混乱，用户不知道先看哪里 | 评审要点： - 标题与正文的字号对比是否足够？（至少2.5倍） - 颜色/粗细/大小是否建立了3-4个清晰层级？ - 留白是否在引导视线？ - 「眯眼测试」：眯起眼看，层级是否仍然清晰？ ### 3. 细节执行（Craft Quality） | 分数 | 标准 | |------|------| | 9-10 | 像素级精确，对齐、间距、颜色无任何瑕疵 | | 7-8 | 整体精致，有1-2处微小对齐/间距问题 | | 5-6 | 基本对齐，但间距不统一，颜色使用不够系统 | | 3-4 | 明显的对齐错误、间距混乱、颜色过多 | | 1-2 | 粗糙，看起来像草稿 | 评审要点： - 是否使用了统一的间距系统（如8pt网格）？ - 同类元素的间距是否一致？ - 颜色数量是否受控？（通常不超过3-4种） - 字体家族是否统一？（通常不超过2种） - 边缘对齐是否精确？ ### 4. 功能性（Functionality） | 分数 | 标准 | |------|------| | 9-10 | 每个设计元素都服务于目标，零冗余 | | 7-8 | 功能导向明确，有少量可删减的装饰 | | 5-6 | 基本可用，但有明显的装饰性元素分散注意力 | | 3-4 | 形式大于功能，用户需要努力寻找信息 | | 1-2 | 完全被装饰淹没，失去了传达信息的能力 | 评审要点： - 删掉任何一个元素，设计会变差吗？（如果不会，就应该删） - CTA/关键信息是否在最显眼的位置？ - 是否有「因为好看所以加上去」的元素？ - 信息密度与载体是否匹配？（PPT不宜太密，PDF可以更密） ### 5. 创新性（Originality） | 分数 | 标准 | |------|------| | 9-10 | 令人耳目一新，在该哲学框架内找到了独特表达 | | 7-8 | 有自己的想法，不是简单的模板套用 | | 5-6 | 中规中矩，看起来像模板 | | 3-4 | 大量使用了cliché（如渐变圆球代表AI） | | 1-2 | 完全是模板或素材拼凑 | 评审要点： - 是否避免了常见cliché？（见下方「常见问题清单」） - 在遵循设计哲学的同时是否有个人表达？ - 是否有「意想不到但很合理」的设计决策？ --- ## 场景评审侧重不同输出类型的评审重点不同： | 场景 | 最重要维度 | 次重要 | 可放宽 | |------|-----------|--------|--------| | 公众号封面/配图 | 创新性、视觉层级 | 哲学一致性 | 功能性（单图不涉及交互） | | 信息图 | 功能性、视觉层级 | 细节执行 | 创新性（准确优先） | | PPT/Keynote | 视觉层级、功能性 | 细节执行 | 创新性（清晰优先） | | PDF/白皮书 | 细节执行、功能性 | 视觉层级 | 创新性（专业优先） | | 落地页/官网 | 功能性、视觉层级 | 创新性 | —（全面要求） | | App UI | 功能性、细节执行 | 视觉层级 | 哲学一致性（可用性优先） | | 小红书配图 | 创新性、视觉层级 | 哲学一致性 | 细节执行（氛围优先） | --- ## 常见设计问题 Top 10 ### 1. AI科技cliché 问题：渐变圆球、数字雨、蓝色电路板、机器人脸为什么是问题：用户已经对这些视觉疲劳，无法区分你和其他人修复：用抽象隐喻替代直白符号（如用「对话」的隐喻而非聊天气泡图标） ### 2. 字号层级不足问题：标题和正文差距太小（<2.5倍）为什么是问题：用户无法快速定位关键信息修复：标题至少为正文的3倍（如正文16px → 标题48-64px） ### 3. 颜色过多问题：使用5种以上颜色，没有主次为什么是问题：视觉混乱，品牌感弱修复：限制为1个主色+1个辅色+1个强调色+灰阶 ### 4. 间距不统一问题：元素间距随意，没有系统为什么是问题：看起来不专业，视觉节奏混乱修复：建立8pt网格系统（间距只用8/16/24/32/48/64px） ### 5. 留白不足问题：所有空间都被内容填满为什么是问题：信息拥挤导致阅读疲劳，反而降低信息传达效率修复：留白至少占总面积40%（极简风格60%+） ### 6. 字体过多问题：使用3种以上字体为什么是问题：视觉噪音，削弱统一感修复：最多2种字体（1种标题+1种正文），用字重和大小创造变化 ### 7. 对齐不一致问题：有的左对齐，有的居中，有的右对齐为什么是问题：破坏视觉秩序感修复：选定一种对齐方式（推荐左对齐），全局统一 ### 8. 装饰大于内容问题：背景图案/渐变/阴影抢了主要内容的风头为什么是问题：本末倒置，用户来看信息不是看装饰修复：「如果删掉这个装饰，设计会变差吗？」如果不会，就删 ### 9. 赛博霓虹滥用问题：深蓝底(#0D1117) + 霓虹色发光效果为什么是问题：默认审美禁区（本 skill 的品位基线），且已成为最大 cliché 之一——用户可按自己品牌 override 修复：选择更有辨识度的配色方案（参考20种风格的色彩系统） ### 10. 信息密度与载体不匹配问题：PPT里放了一整页文字 / 封面图里塞了10个元素为什么是问题：不同载体的最佳信息密度不同修复： - PPT：每页1个核心观点 - 封面图：1个视觉焦点 - 信息图：分层展示 - PDF：可以更密，但需要清晰的导航 --- ## 评审输出模板 ``` ## 设计评审报告总体评分：X.X/10 [优秀(8+)/良好(6-7.9)/需改进(4-5.9)/不合格(<4)] 分项评分： - 哲学一致性：X/10 [一句话说明] - 视觉层级：X/10 [一句话说明] - 细节执行：X/10 [一句话说明] - 功能性：X/10 [一句话说明] - 创新性：X/10 [一句话说明] ### 优点（Keep） - [具体指出做得好的地方，用设计语言描述] ### 问题（Fix） [按严重程度排序] 1. [问题名称] — ⚠️致命 / ⚡重要 / 💡优化 - 当前：[描述现状] - 问题：[为什么这是问题] - 修复：[具体操作，含数值] ### 快速修复清单（Quick Wins）如果只有5分钟，优先做这3件事： - [ ] [最有影响力的修复] - [ ] [第二重要的修复] - [ ] [第三重要的修复] ``` --- 版本：v1.0 更新日期：2026-02-13 FILE:references/animation-pitfalls.md # Animation Pitfalls：HTML 动画踩过的坑与规则做动画时最常踩的 bug 和如何避免。每条规则都来自真实失败案例。写动画之前读完这篇，能省一轮迭代。 ## 1. 叠层布局 —— `position: relative` 是默认义务踩的坑：一个 sentence-wrap 元素包了 3 个 bracket-layer（`position: absolute`）。没给 sentence-wrap 设 `position: relative`，结果 absolute 的 bracket 以 `.canvas` 为坐标系，飘到屏幕底部 200px 外。规则： - 任何包含 `position: absolute` 子元素的容器，必须显式 `position: relative` - 即使视觉上不需要「偏移」，也要写 `position: relative` 作为坐标系锚点 - 如果你在写 `.parent { ... }`，其子元素里有 `.child { position: absolute }`，下意识给 parent 加 relative 快速检查：每出现一个 `position: absolute`，往上数 ancestor，确保最近的 positioned 祖先是你想要的坐标系。 ## 2. 字符陷阱 —— 不依赖稀有 Unicode 踩的坑：想用 `␣` (U+2423 OPEN BOX) 可视化「空格 token」。Noto Serif SC / Cormorant Garamond 都没这个字形，渲染为空白/豆腐，观众完全看不到。规则： - 动画里出现的每个字符，都必须在你选定的字体里存在 - 常见稀有字符黑名单：`␣ ␀ ␐ ␋ ␨ ↩ ⏎ ⌘ ⌥ ⌃ ⇧ ␦ ␖ ␛` - 要表达「空格 / 回车 / 制表符」这类元字符，用 CSS 构造的语义盒子： ```html Space ``` ```css .space-key { display: inline-flex; padding: 4px 14px; border: 1.5px solid var(--accent); border-radius: 4px; font-family: monospace; font-size: 0.3em; letter-spacing: 0.2em; text-transform: uppercase; } ``` - Emoji 也要验证：某些 emoji 在 Noto Emoji 以外字体会 fallback 成灰色方框，最好用 `emoji` font-family 或 SVG ## 3. 数据驱动的 Grid/Flex 模板踩的坑：代码里 `const N = 6` 个 tokens，但 CSS 写死 `grid-template-columns: 80px repeat(5, 1fr)`。结果第 6 个 token 没有 column，整个矩阵错位。规则： - 当 count 从 JS 数组来（`TOKENS.length`），CSS 模板也应该数据驱动 - 方案 A：用 CSS 变量从 JS 注入 ```js el.style.setProperty('--cols', N); ``` ```css .grid { grid-template-columns: 80px repeat(var(--cols), 1fr); } ``` - 方案 B：用 `grid-auto-flow: column` 让浏览器自动扩展 - 禁用「固定数字 + JS 常量」的组合，N 改了 CSS 不会同步更新 ## 4. 过渡断层 —— 场景切换要连续踩的坑：zoom1 (13-19s) → zoom2 (19.2-23s) 之间，主句子已经 hidden，zoom1 fade out（0.6s）+ zoom2 fade in（0.6s）+ stagger delay（0.2s+）= 约 1 秒纯空白画面。观众以为动画卡住了。规则： - 连续切换场景时，fade out 和 fade in 要交叉重叠，不是前一个完全消失再开始下一个 ```js // 差： if (t >= 19) hideZoom('zoom1'); // 19.0s out if (t >= 19.4) showZoom('zoom2'); // 19.4s in → 中间 0.4s 空白 // 好： if (t >= 18.6) hideZoom('zoom1'); // 提前 0.4s 开始 fade out if (t >= 18.6) showZoom('zoom2'); // 同时 fade in（cross-fade） ``` - 或者用一个「锚点元素」（如主句子）作为场景之间的视觉连接，zoom 切换期间它短暂回显 - 配 CSS transition 的 duration 算清楚，避免 transition 还没结束就触发下一个 ## 5. Pure Render 原则 —— 动画状态应可 seek 踩的坑：用 `setTimeout` + `fireOnce(key, fn)` 链式触发动画状态。正常播放没问题，但做逐帧录制/seek到任意时间点时，之前的 setTimeout 已经执行过就无法「回到过去」。规则： - `render(t)` 函数理想上是 pure function：给定 t 输出唯一 DOM 状态 - 如果必须用副作用（如 class 切换），用 `fired` set 配合显式 reset： ```js const fired = new Set(); function fireOnce(key, fn) { if (!fired.has(key)) { fired.add(key); fn(); } } function reset() { fired.clear(); /* 清所有 .show class / } ``` - 暴露 `window.seek(t)` 供 Playwright / 调试用： ```js window.seek = (t) => { reset(); render(t); }; ``` - 动画相关的 setTimeout 不要跨越 >1 秒，否则 seek 回跳时会乱套 ## 6. 字体加载前测量 = 测错踩的坑：页面一 DOMContentLoaded 就调用 `charRect(idx)` 测量 bracket 位置，字体还没加载，每个字符宽度是 fallback 字体的宽度，位置全错。等字体一加载（约 500ms 后），bracket 的 `left: Xpx` 还是老值，永久偏移。规则： - 任何依赖 DOM 测量（`getBoundingClientRect`、`offsetWidth`）的布局代码，必须包在 `document.fonts.ready.then()` 里 ```js document.fonts.ready.then(() => { requestAnimationFrame(() => { buildBrackets(...); // 此时字体已就绪，测量准确 tick(); // 动画开始 }); }); ``` - 额外的 `requestAnimationFrame` 给浏览器一帧时间提交 layout - 如果用 Google Fonts CDN，`` 加速首次加载 ## 7. 录制准备 —— 为视频导出预留抓手踩的坑：Playwright `recordVideo` 默认 25fps，从 context 创建就开始录。页面加载、字体加载的前 2 秒都被录进去。交付时视频前面 2 秒空白/闪白。规则： - 提供 `render-video.js` 工具处理：warmup navigate → reload 重启动画 → 等 duration → ffmpeg trim head + 转 H.264 MP4 - 动画的第 0 帧要是最终布局已就位的完整初始状态（不是空白或加载中） - 想要 60fps？用 ffmpeg `minterpolate` 后处理，不指望浏览器源帧率 - 想要 GIF？两阶段 palette（`palettegen` + `paletteuse`），对 30s 1080p 动画能压到 3MB 参见 `video-export.md` 获取完整脚本调用方式。 ## 8. 批量导出 —— tmp 目录必须带 PID 防并发冲突踩的坑：用 `render-video.js` 3 个进程并行录 3 个 HTML。因为 TMP_DIR 只用 `Date.now()` 命名，3 个进程同毫秒启动时共用同一个 tmp 目录。最先完成的进程清理 tmp，另外两个读目录时 `ENOENT`，全部崩溃。规则： - 任何多进程可能共用的临时目录，命名必须带 PID 或随机后缀： ```js const TMP_DIR = path.join(DIR, '.video-tmp-' + Date.now() + '-' + process.pid); ``` - 如果确实想多文件并行，用 shell 的 `&` + `wait` 而不是在一个 node 脚本里 fork - 批量录多个 HTML 时，保守做法：串行运行（2 个以内可并行，3 个以上老实排队） ## 9. 录屏里有进度条/重播按钮 —— Chrome 元素污染视频踩的坑：动画 HTML 加了 `.progress` 进度条、`.replay` 重播按钮、`.counter` 时间戳，方便人类调试播放。录成 MP4 交付时这些元素出现在视频底部，像把开发者工具截进去了一样。规则： - HTML 里给人类用的「chrome 元素」（progress bar / replay button / footer / masthead / counter / phase labels）和视频内容本体分开管理 - 约定 class 名 `.no-record`：任何带这个 class 的元素，录屏脚本自动隐藏 - 脚本端（`render-video.js`）默认注入 CSS 隐藏常见 chrome class 名： ``` .progress .counter .phases .replay .masthead .footer .no-record [data-role="chrome"] ``` - 用 Playwright 的 `addInitScript` 注入（会在每次 navigate 前生效，reload 也稳） - 想看原样 HTML（带 chrome）时加 `--keep-chrome` flag ## 10. 录屏开头几秒动画重复 —— Warmup 帧泄漏踩的坑：`render-video.js` 的旧流程 `goto → wait fonts 1.5s → reload → wait duration`。录制从 context 创建就开始，warmup 阶段动画已经播了一段，reload 后从 0 重启。结果视频前几秒是「动画中段 + 切换 + 动画从 0 开始」，重复感强。规则： - Warmup 和 Record 必须用独立的 context： - Warmup context（无 `recordVideo` 选项）：只负责 load url、等字体、然后 close - Record context（有 `recordVideo`）：fresh 状态开始，animation 从 t=0 开始录 - ffmpeg `-ss trim` 只能裁 Playwright 的一点点 startup latency（~0.3s），不能用来掩盖 warmup 帧；源头要干净 - 录制 context 关闭 = webm 文件写入磁盘，这是 Playwright 的约束 - 相关代码模式： ```js // Phase 1: warmup (throwaway) const warmupCtx = await browser.newContext({ viewport }); const warmupPage = await warmupCtx.newPage(); await warmupPage.goto(url, { waitUntil: 'networkidle' }); await warmupPage.waitForTimeout(1200); await warmupCtx.close(); // Phase 2: record (fresh) const recordCtx = await browser.newContext({ viewport, recordVideo }); const page = await recordCtx.newPage(); await page.goto(url, { waitUntil: 'networkidle' }); await page.waitForTimeout(DURATION 1000); await page.close(); await recordCtx.close(); ``` ## 11. 画面内别画「伪 chrome」—— 装饰版 player UI 与真 chrome 撞车踩的坑：动画用 `Stage` 组件，已经自带 scrubber + 时间码 + 暂停按钮（属于 `.no-record` chrome，导出时自动隐藏）。我又在画面底部画了一条「`00:60 ──── CLAUDE-DESIGN / ANATOMY`」的"杂志页码感装饰进度条"，自我感觉良好。结果：用户看到两条进度条——一条是 Stage 控制器，一条是我画的装饰。视觉上完全撞车，认定为 bug。「视频内还有个进度条是怎么回事？」规则： - Stage 已经提供：scrubber + 时间码 + 暂停/重播按钮。画面内不要再画进度指示、当前时间码、版权署名条、章节计数器——它们要么和 chrome 撞车，要么就是 filler slop（违反「earn its place」原则）。 - 「页码感」「杂志感」「底部署名条」这些装饰诉求，是 AI 自动加上的高频 filler。每一个出现都要警觉——它真的传达了不可替代的信息吗？还是单纯填满空白？ - 如果你坚信某个底部条带必须存在（例如：动画主题就是讲 player UI），那它必须叙事必要，且视觉上和 Stage scrubber 显著区分（不同位置、不同形式、不同色调）。元素归属测试（每个画进 canvas 的元素必须能回答）： | 它属于什么 | 处理 | |------------|------| | 某一幕的叙事内容 | OK，留着 | | 全局 chrome（控制/调试用） | 加 `.no-record` class，导出时隐藏 | | 既不属于任何幕，又不是 chrome | 删。这就是无主之物，必然是 filler slop | 自检（交付前 3 秒）：截一张静态图，问自己—— - 画面里有没有「看起来像 video player UI 的东西」（横线进度条、时间码、控制按钮模样）？ - 如果有，删掉它叙事是否有损？无损就删。 - 同一类信息（进度/时间/署名）有没有出现两次？合并到 chrome 一处。反例：底部画 `00:42 ──── PROJECT NAME`、画面右下角画"CH 03 / 06"章节计数、画面边缘画版本号"v0.3.1"——都是伪 chrome filler。 ## 12. 录屏前置空白 + 录屏起点偏移 —— `ready` × tick × lastTick 三联陷阱踩的坑（A · 前置空白）：60 秒动画导出 MP4，前 2-3 秒是空白页面。`ffmpeg --trim=0.3` 剪不掉。踩的坑（B · 起点偏移，2026-04-20 真实事故）：导出 24 秒视频，用户观感「视频 19 秒才开始播第一帧」。实际上动画从 t=5 开始录，录到 t=24 后 loop 回 t=0，再录 5 秒到 end——所以视频最后 5 秒才是动画真正的开头。根因（两个坑共享一个根因）： Playwright `recordVideo` 从 `newContext()` 那一刻就开始写 WebM，此时 Babel/React/字体加载共耗时 L 秒（2-6s）。录屏脚本等 `window.ready = true` 作为「动画从这里开始」的锚点——它和动画 `time = 0` 必须严格 pair。有两种常见错法： | 错法 | 症状 | |------|------| | `ready` 在 `useEffect` 或同步 setup 阶段设（在 tick 第一帧之前） | 录屏脚本以为动画开始了，实际 WebM 还在录空白页 → 前置空白 | | tick 的 `lastTick = performance.now()` 在脚本顶层初始化 | 字体加载 L 秒被算进首帧 `dt`，`time` 瞬间跳到 L → 录屏全程滞后 L 秒 → 起点偏移 | ✅ 正确的完整 starter tick 模板（手写动画必须用这个骨架）： ```js // ━━━━━━ state ━━━━━━ let time = 0; let playing = false; // ❗ 默认不播，等字体 ready 再启动 let lastTick = null; // ❗ sentinel——tick 首帧时 dt 强制为 0（别用 performance.now()） const fired = new Set(); // ━━━━━━ tick ━━━━━━ function tick(now) { if (lastTick === null) { lastTick = now; window.ready = true; // ✅ pair：「录屏起点」与「动画 t=0」同一帧 render(0); // 再渲一次确保 DOM 就绪（此时字体已 ready） requestAnimationFrame(tick); return; } const dt = (now - lastTick) / 1000; // 首帧之后 dt 才开始推进 lastTick = now; if (playing) { let t = time + dt; if (t >= DURATION) { t = window.recording ? DURATION - 0.001 : 0; // 录制时不 loop，留 0.001s 保留末帧 if (!window.recording) fired.clear(); } time = t; render(time); } requestAnimationFrame(tick); } // ━━━━━━ boot ━━━━━━ // 不要在顶层立即 rAF——等字体加载完才启动 document.fonts.ready.then(() => { render(0); // 先把初始画面画出来（字体已就绪） playing = true; requestAnimationFrame(tick); // 首次 tick 会 pair ready + t=0 }); // ━━━━━━ seek 接口（供 render-video 防御性矫正用）━━━━━━ window.seek = (t) => { fired.clear(); time = t; lastTick = null; render(t); }; ``` 为什么这个模板对： | 环节 | 为什么必须这样 | |------|-------------| | `lastTick = null` + 首帧 `return` | 避免「脚本加载到 tick 首次执行」的 L 秒被算进动画时间 | | `playing = false` 默认 | 字体加载期间 `tick` 即使运行也不推进 time，避免渲染错位 | | `ready` 在 tick 首帧设 | 录屏脚本此刻开始计时，对应的画面是动画真正的 t=0 | | `document.fonts.ready.then(...)` 里才启动 tick | 规避字体 fallback 宽度测量、避免首帧字体跳变 | | `window.seek` 存在 | 让 `render-video.js` 可以主动矫正——第二道防线 | 录屏脚本端的对应防御： 1. `addInitScript` 注入 `window.recording = true`（先于 page goto） 2. `waitForFunction(() => window.ready === true)`，记录此刻偏移作为 ffmpeg trim 3. 额外：`ready` 之后主动 `page.evaluate(() => window.seek && window.seek(0))`，把 HTML 可能的 time 偏差强制归零——这是第二道防线，对付不严格遵守 starter 模板的 HTML 验证方法：导出 MP4 后 ```bash ffmpeg -i video.mp4 -ss 0 -vframes 1 frame-0.png ffmpeg -i video.mp4 -ss $DURATION-0.1 -vframes 1 frame-end.png ``` 首帧必须是动画 t=0 的初始状态（不是中段，不是黑），末帧必须是动画终态（不是第二轮 loop 的某个时刻）。参考实现：`assets/animations.jsx` 的 Stage 组件、`scripts/render-video.js` 都已按此协议实现。手写 HTML 必须套 starter tick 模板——每一行都是防过具体 bug。 ## 13. 录制时禁止 loop —— `window.recording` 信号踩的坑：动画 Stage 默认 `loop=true`（浏览器里方便看效果）。`render-video.js` 录完 duration 秒还多等 300ms 缓冲才停止，这 300ms 让 Stage 进入下一循环。ffmpeg `-t DURATION` 截取时，最后 0.5-1s 落入下一循环——视频结尾突然回到第一帧（Scene 1），观众以为视频出 bug。根因：录制脚本和 HTML 之间没有"我在录制"的握手协议。HTML 不知道自己被录，依然按浏览器交互场景循环。规则： 1. 录制脚本：在 `addInitScript` 里注入 `window.recording = true`（先于 page goto）： ```js await recordCtx.addInitScript(() => { window.recording = true; }); ``` 2. Stage 组件：识别这个信号，强制 loop=false： ```js const effectiveLoop = (typeof window !== 'undefined' && window.recording) ? false : loop; // ... if (next >= duration) return effectiveLoop ? 0 : duration - 0.001; // ↑ 留 0.001 防止 Sprite end=duration 被关掉 ``` 3. 结尾 Sprite 的 fadeOut：录制场景下应设 `fadeOut={0}`，否则视频末尾会渐变到透明/暗色——用户期望停在清晰的最后一帧，不是淡出。手写 HTML 时建议结尾 Sprite 都用 `fadeOut={0}`。参考实现：`assets/animations.jsx` 的 Stage / `scripts/render-video.js` 都已内置握手。手写 Stage 必须实现 `recording` 检测——否则录制必踩这个坑。验证：导出 MP4 后 `ffmpeg -ss 19.8 -i video.mp4 -frames:v 1 end.png`，检查倒数 0.2 秒是否还是预期最后一帧，没有突然切换到另一个 scene。 ## 14. 60fps 视频默认用帧复制 —— minterpolate 兼容性差踩的坑：`convert-formats.sh` 用 `minterpolate=fps=60:mi_mode=mci...` 生成的 60fps MP4，在 macOS QuickTime / Safari 部分版本下无法打开（一片黑或直接拒打）。VLC / Chrome 能打开。根因：minterpolate 输出的 H.264 elementary stream 包含某些播放器解析有问题的 SEI / SPS 字段。规则： - 默认 60fps 用简单 `fps=60` filter（帧复制），兼容性广（QuickTime/Safari/Chrome/VLC 都能开） - 高质量插帧用 `--minterpolate` flag 显式启用——但必须本地测过目标播放器再交付 - 60fps 标签价值是上传平台的算法识别（Bilibili / YouTube 上 60fps 标记会优先推流），实际感知流畅度对 CSS 动画来说提升微弱 - 加 `-profile:v high -level 4.0` 提升 H.264 通用兼容性 `convert-formats.sh` 已默认改成兼容模式。如果你需要插帧高质量，加 `--minterpolate` flag： ```bash bash convert-formats.sh input.mp4 --minterpolate ``` ## 15. `file://` + 外部 `.jsx` 的 CORS 陷阱 —— 单文件交付必须内联引擎踩的坑：动画 HTML 里用 `` 外部加载引擎。本机双击打开（`file://` 协议）→ Babel Standalone 走 XHR 拉 `.jsx` → Chrome 报 `Cross origin requests are only supported for protocol schemes: http, https, chrome, chrome-extension...` → 整页黑屏，不报 `pageerror` 只报 console error，很容易当"动画没触发"误诊。启 HTTP server 也未必救得了——本机有全局代理时 `localhost` 也会走代理，返回 502 / 连接失败。规则： - 单文件交付（双击打开即用的 HTML） → `animations.jsx` 必须内联到 `` 标签内，不要用 `src="animations.jsx"` - 多文件项目（起 HTTP server 演示） → 可以外部加载，但交付时明确写清 `python3 -m http.server 8000` 命令 - 判断标准：交付给用户的是"HTML 文件"还是"带 server 的项目目录"？前者用内联 - Stage 组件 / animations.jsx 经常 200+ 行——贴进 HTML `

The Age of benchmarks.

心智的可塑性

注入与引导

大模型 benchmarks 之年

The Mindis Plastic

Injection& Steering

{title}

{ TITLE — pair with italic accent }

{ Section 1 headline }

{ Section 2 headline }

{ Section 3 headline }

{ Your talk title, italicized punch. }

{ HEADLINE — punchy, italic for key word. }

{ Release headline }

{ Prior release headline }

{ ... }

{ HEADLINE. Make it pretty. }

{ A_NAME }

{ B_NAME }

{ Dashboard title }

One API, every AI model.

Model Routing

Cost Optimization

Usage Analytics

One API,every AI model

Model Routing

Cost Optimization

Usage Analytics

One API,every AI model

Model Routing

Cost Optimization

Usage Analytics

AlexChen.

Building toolsat the intersectionof AI and creativity

AlexChen.

Turn data into decisions, not dashboards.

Turn data into decisions, not dashboards

Turn data into decisions, not dashboards

Writebetter,faster,with yourown voice.

Write better, faster,with your own voice

Write better,faster, withyour own voice

Find the right AI tool in seconds

Find the right AI tool in seconds

Featured Selections

Find the rightAI tool in seconds

`-`

Q3营收增长23%

标题用断言句，不是主题词

要点一

`-`

`-`

`-`

The Age of
benchmarks.

心智的
可塑性

大模型
benchmarks 之年

The Mind
is Plastic

Injection
& Steering

{ HEADLINE.
Make it pretty. }

One API,
every AI model

One API,
every AI model

Alex
Chen.

Building tools
at the intersection
of AI and creativity

Alex
Chen.

Write
better,
faster,
with your
own voice.

Write better, faster,
with your own voice

Write better,
faster, with
your own voice

Find the right
AI tool in seconds

IFQ Design Skills

Comments (0)