_{🌐 English · 中文 · ifq.ai / 2026}

IFQ Design Skills

_{Intelligence, framed quietly.}

 一句话进。  一份能发出去的页面出来。  做工像 ifq.ai 亲手做的。 

_{立场  ·  安装  ·  双对象契约  ·  说给它听  ·  一页的解剖  ·  五个标记  ·  12 种模式  ·  六层骨架  ·  验证  ·  许可}

立场

很多 agent 被要求"做设计"时，会交出两类东西：过度装饰的模板感页面，或者 只是被排版过的说明文档。都不能发出去。

这个 skill 解决的就是这一件事。它不是配色文件，也不是一张 logo 贴纸。

它是一种 做工：把网页当编辑部版面排、把动画当预告片剪、把 PPT 当发布会母版做、把名片当印前 PDF 对齐出血位。

ifq.ai 的标识被埋在这份做工里。看第一眼是内容，第二眼才意识到：这是 ifq.ai 的手感。

安装

npx skills add peixl/ifq-design-skills

peixl/ifq-design-skills 是 GitHub 仓库短路径 → https://github.com/peixl/ifq-design-skills

装完直接对 agent 说话。skill 自己判断任务、自己路由模式、自己挑模板、自己跑验证。

核心链路零依赖：写 HTML → npm run preview -- <file> 打印 file:// 预览 URL → npm run verify:lite -- <file> 扫占位符。不需要装 Playwright、Chromium、Python、ffmpeg。只有当用户真的要导出 MP4 / PDF / PPTX 时，才用 npm run install:export 按需拉齐。

Marketplace proof：npm run validate 覆盖 smoke 的 14 项本地闸门（模板索引、references、脚本语法、安全不变量、secret hygiene、不可见 Unicode 控制符、自动安装脚本、默认 HTML 网络策略、well-known 规范）以及 12 模式 eval 契约。ClawHub / VirusTotal 发布前按 references/marketplace-quality.md 线上复核，不上传私有素材。

可回归的进化：evals/evals.json 覆盖 12 种模式，每条样例都同时写清 user_value 与 agent_contract，避免 skill 越改越会写文案、却越来越不会交付。npm run validate 会同时跑 smoke 与 eval 校验。

其他 agent 一键安装：

# Hermes（Nous Research）
hermes skills install github:peixl/ifq-design-skills

# OpenClaw / ClawHub
openclaw skills install peixl/ifq-design-skills

# Claude Code（personal）
git clone https://github.com/peixl/ifq-design-skills ~/.claude/skills/ifq-design-skills

# Codex CLI / OpenCode / 任何读取 AGENTS.md 的 agent
# 本仓库根已内置 AGENTS.md —— 克隆后 agent 自动认得
git clone https://github.com/peixl/ifq-design-skills

# 共享给所有 agent（推荐）
git clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills

完整矩阵与工具映射：references/agent-compatibility.md。

双对象契约

这个 skill 的增长目标不是让用户学会更复杂的提示词，而是让 AI agent 承担更多确定性工作。

核心理念是：让 AI 发挥更大效能。人只表达目标、约束和审美偏好；agent 负责事实核验、路由、模板选择、版面生产、占位符清理、预览和导出准备。

给 AI agent（30 秒上手）

本仓库根有 AGENTS.md，SKILL.md 是短路由入口，两处都是为 agent 写的。落地后任何 runtime（Claude Code / Codex / OpenCode / OpenClaw / Hermes / Cursor）的动作都一样：

1. 读 SKILL.md 的 30 秒入口（约 100 行）→ 触发边界、依赖分层、路由、验证一眼看完。
2. 路由 references/modes.md → 选 12 模式之一 → 在 assets/templates/INDEX.json 找模板 fork，不要从白纸开始。
3. 验证（默认 Tier 0 · 零安装）：npm run verify:lite -- <file> 扫占位符 → npm run preview -- <file> 拿到 file:// URL 自己用浏览器工具打开。

能力与权限（SKILL.md frontmatter 里有单行 JSON metadata，OpenClaw / ClawHub / Hermes 可按 metadata.openclaw.requires 与 security signals 授权）：

• 读：skill 根目录下所有文件
• 写：用户当前 workspace（不会写到 workspace 之外）
• 运行：仅 npm run preview | verify:lite | smoke | install:export + 可选 ffmpeg
• 网络：#0 事实校验用 WebSearch；产出的 HTML 默认 local-first 字体、不加载 Google Fonts，只有用户明确需要时才 opt-in Google Fonts / unpkg / jsDelivr
• Node/Python 脚本零 child_process、零 eval、零对外网络请求；少数 shell 导出助手只在用户明确要 MP4/GIF/音频时调用 ffmpeg / ffprobe。内置模板默认不加载远程 CSS/JS——静态安全扫描（ClawHub 等）更干净

只想要 HTML 的任务永远停在 Tier 0。只有用户明确要 MP4 / GIF / PDF / PPTX 时才 npm run install:export 拉 Tier 2 依赖；只有要自动化多 viewport 截图时才 pip install playwright 拉 Tier 1。

说给它听

下面是真实的对话。左边是你随口一句，右边是 skill 真正去做的事。

不用记模式编号。说人话，skill 自己路由。

一页的解剖

一张 hero landing。它看起来很安静。它同时在做 7 件事：

 ┌────────────────────────────────────────────────────────────────────┐
 │  ◇ 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 个。

这不是装饰元素，是版面语法。

共品牌

IFQ 可以隐身，不能不在场。做工本身就是标识。

12 种模式

路由：模式触发 → 设计方向顾问 fallback → Junior Designer 主干。

完整协议：references/modes.md。

六层骨架

这个 skill 像 IFQ，不是因为颜色，而是因为下面 6 层同时工作：

ifq-design-skills/
├── SKILL.md                 # 短路由：触发 · 依赖 · 模式 · 安全 · 验证
├── assets/
│   ├── ifq-brand/           # logo · sparkle · tokens · BRAND-DNA
│   └── templates/           # 已内嵌 ambient marks 的可 fork 模板
├── references/              # 方法论 · 模式手册 · 验证 · 风格配方 · 宪章
├── scripts/                 # 导出 · 验证 · smoke · pdf · pptx
└── demos/                   # 示例产物

验证

Lite 档（默认，零依赖）：

npm run preview -- path/to/design.html   # 打印 file:// URL，交给浏览器工具或用户打开
npm run verify:lite -- path/to/design.html   # 纯静态扫占位符残留（YYYY / {…} / lorem / 空 data-ifq-*）
npm run smoke                              # 一分钟 skill 自检
npm run evals:validate                     # 12 模式回归契约

不需要装 Playwright、不需要 Chromium、不需要 Python。跨 macOS / Linux / Windows 即跑。

Deep 档（按需，仅导出或自动化才装）：

npm run install:export   # 一键装齐 playwright + pdf-lib + pptxgenjs + sharp + Chromium
python scripts/verify.py path/to/design.html   # headless 多 viewport 截图 + 控制台错误

单件作品在需要自动截图/可点击测试/导出 MP4 PDF PPTX 时才走 Deep 档。详见 references/verification.md。

贡献入口：改 skill 协议、模板、脚本或文档前先看 CONTRIBUTING.md。安全边界与上报流程见 SECURITY.md。

许可

个人用免费。商用见 LICENSE。