IFQ Design Skills

Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin...

One prompt in, a shippable HTML-first visual artifact out. This skill exists to make AI higher leverage: humans speak in goals, agents get a deterministic route, and the final artifact carries proof instead of decoration. This ClawHub-safe root file is intentionally short: it routes the task, states the security contract, and points the agent to deeper references only when needed.

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, then read modeRoutes and templates in assets/templates/INDEX.json.
3. Fork the routed template into the user's workspace. Never start from a blank HTML file when a listed template can be adapted.
4. If information is missing but a reversible draft is possible, write labeled assumptions/placeholders and continue. Ask only for facts, assets, permissions, or format decisions that would materially change the output.
5. Inline assets/ifq-brand/ifq-tokens.css and weave at least 3 IFQ ambient marks from references/ifq-brand-spec.md.
6. Verify with the host browser/screenshot tools when available. After editing this skill package, run npm run validate.

Quick Decision Tree

Route in under 3 seconds. Match the user prompt to the nearest trigger:

User prompt contains:
├─ "prototype" / "app" / "onboarding" / "flow" → M-06 (T-onboarding)
├─ "dashboard" / "KPI" / "monitor" / "command center" → M-04 (T-dashboard)
├─ "slides" / "deck" / "keynote" / "PPT" → M-08 (T-slide-title)
├─ "portfolio" / "personal site" / "about me" → M-02 (T-portfolio)
├─ "changelog" / "release notes" / "版本记录" → M-07 (T-changelog)
├─ "whitepaper" / "report" / "PDF" / "年报" → M-03 (T-infographic-vertical)
├─ "compare" / "vs" / "benchmark" / "横评" → M-05 (T-compare-vs)
├─ "social" / "小红书" / "cover" / "社媒" → M-09 (T-social-multi)
├─ "card" / "名片" / "invite" / "VIP" → M-10 (T-business-card)
├─ "brand audit" / "diagnosis" / "体检" / "升级" → M-11 (T-diagnosis)
├─ "brand from scratch" / "全栈品牌" / "新品牌" → M-12 (T-hero-landing)
├─ "launch" / "animation" / "motion" / "film" → M-01 (T-hero-landing)
└─ vague / multiple matches / "做设计" → propose 3 directions first

When in doubt, pick the narrowest route. If the prompt spans two modes, choose the primary deliverable and mention the secondary in caveats.

Human + Agent Contract

Audience	Promise
Human user	Say the goal in ordinary language; receive a concrete HTML-first artifact, the assumptions that shaped it, and the verification evidence.
AI agent	Follow a narrow route: classify mode, fork template, fill with real context, run anti-slop checks, verify, then report caveats without self-congratulation.
Maintainer	Keep the ClawHub bundle zero-install, auditable, and small; keep heavy export automation opt-in in the full GitHub repo.

First-Run Success Path

After install, make the first interaction produce a visible artifact in one turn:

1. Accept a natural-language prompt such as "Make a command center dashboard for our internal AI operations."
2. Route it to one mode and one template; name both in the final evidence.
3. Write the HTML file into the user's workspace with a short assumptions comment for unresolved facts.
4. Run npm run verify:lite -- <file.html> when shell is available, and preview or screenshot with the host browser when available.
5. Report the file path, route, template, assumptions, verification result, and only the caveats that affect use.

Do not turn first run into setup work. No account login, global install, export dependency, or broad environment change belongs in the ClawHub-safe path.

AI Leverage Loop

This skill should make both sides more effective: humans should not learn prompt engineering before receiving a useful artifact, and agents should not improvise a design system from a blank page.

1. Human gives intent — ordinary language, partial facts, or a rough visual preference is enough to begin.
2. Agent chooses the narrowest route — one mode, one primary template, required references only.
3. Artifact appears early — a local HTML source is more valuable than an extended planning conversation.
4. Assumptions stay visible — unresolved facts, missing assets, and export limits are labeled in the output and final evidence.
5. Proof closes the loop — the final answer includes the file, mode, template, verification, and caveats, so the next iteration starts from real work.

Output Boundary

• ClawHub-safe core outputs verified local HTML, SVG/static companion files, and export-ready source structure.
• MP4/GIF/PDF/PPTX automation is not bundled in the ClawHub-safe package. For those requests, prepare the HTML source and export plan here, then use the full GitHub repo only when the user explicitly wants local automation.
• Never claim that an export file exists until the corresponding export command has actually run and the file has been inspected.

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 prepares export-ready source, 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 so OpenClaw can read triggers, permissions, requires, os, and neutral-verb tool mapping without parsing the full manual.
• Minimum runtime: Node >= 18.17. metadata.openclaw.requires.bins declares node; required env/config gates are intentionally empty. The ClawHub bundle has zero dependencies, zero install hooks, and no script-side outbound network calls.
• 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 for logo, product image, UI screenshot, color, and typography assets.

Routing Contract

• Clear visual request: route through references/modes.md and modeRoutes in assets/templates/INDEX.json.
• Vague request or no style/context: propose 3 directions using references/design-styles.md, references/ifq-native-recipes.md, and references/design-context.md.
• Real brand/product: run references/asset-protocol.md before color, layout, or hero imagery decisions.
• App prototype: use references/ios-prototype.md and the frame assets.
• Slides/decks: load references/slide-decks.md before writing; use references/editable-pptx.md only when editable export is requested.
• Motion/video: load references/animation-pitfalls.md, references/animation-best-practices.md, references/animations.md, and 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.
• 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 and references/smoke-test.md.

Anti-Slop Preflight (Hard Gate)

Before delivery, run the 7-point checklist from references/anti-ai-slop.md. Every item is a hard gate — skip one and the output looks like default AI:

1. No side border-left > 1px as card emphasis. Use full borders, background blocks, or icon leads.
2. No gradient text (background-clip: text). Use solid color + weight/size for hierarchy.
3. No default glassmorphism. Use only when real spatial depth exists.
4. No hero-metric template (big number + small label + gradient row). SaaS cliché since 2018.
5. No same-size icon card grid. Vary rhythm — irregular sizes, mixed layouts.
6. No purple gradient on white. AI "premium" cliché.
7. Display font is not Inter/Roboto/Arial/system default. Use Newsreader, Noto Serif SC, or the user's brand font.

Run npm run anti-slop -- <file.html> when shell is available, or scan manually. Fix violations before delivery.

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; in ClawHub-safe mode, report the export plan rather than pretending the helper ran.
4. For motion exports, verify timing, audio policy, promotion mark, and final file presence only when the full GitHub repo helper has actually produced the file.
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/clawhub-publishing.md, references/smoke-test.md
Marketplace lessons and quality bar	references/skill-ecosystem-quality.md
Mode routing and execution workflow	references/modes.md, references/workflow.md, references/verification.md
Facts, brand assets, design context, critique	references/asset-protocol.md, references/design-context.md, references/critique-guide.md
Style direction and anti-slop	references/design-styles.md, references/ifq-native-recipes.md, references/content-guidelines.md, references/anti-ai-slop.md
React/Babel single-file output and fonts	references/react-setup.md, references/font-loading.md
IFQ identity assets	references/ifq-brand-spec.md, assets/ifq-brand/BRAND-DNA.md
App prototypes	references/ios-prototype.md
Slides and editable PPTX	references/slide-decks.md, references/editable-pptx.md
Motion, video, and audio	references/animations.md, references/animation-best-practices.md, references/animation-pitfalls.md, references/video-export.md, references/audio-design-rules.md, references/sfx-library.md
Scenes, live tweaking, and showcase patterns	references/scene-templates.md, references/tweaks-system.md, references/apple-gallery-showcase.md, references/hero-animation-case-study.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.