skill
ifq-design-skills
Agent-native design skill: ordinary prompts -> verified HTML-first prototypes, decks, dashboards, motion demos, and export-ready visuals.
Set up
Skills are installed by placing their folder where your agent loads skills.
Install instructions come from the README
README
synced Oct 14, 2026🌐 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。
60 秒快速上手：装完直接对 Agent 说话。3 个 one-liner 示例 → references/quickstart.md。
对比
| 能力 | IFQ Design Skills | frontend-design | web-design-guidelines | pptx/pdf | impeccable |
|---|---|---|---|---|---|
| 12 种设计模式路由 | ✓ | — | — | — | — |
| 可 fork 模板（非白纸生成） | ✓ 12 个 | 部分 | — | — | — |
| 多格式导出 (MP4/GIF/PPTX/PDF/SVG) | ✓ | — | — | 单格式 | — |
| 品牌融入层 (ambient marks) | ✓ 5 个标记 | — | — | — | — |
| 零安装核心链路 | ✓ | ✓ | ✓ | — | ✓ |
| 事实核验协议 | ✓ | — | — | — | — |
| 20 场景 eval 回归 | ✓ | — | — | — | — |
| 反 AI slop 清单 | ✓ | — | 部分 | — | ✓ |
| 多 Agent 兼容 (8+ 运行时) | ✓ | ✓ | ✓ | ✓ | ✓ |
| 安全审计 (零 spawn/eval/网络) | ✓ | ✓ | ✓ | ✓ | ✓ |
IFQ 是唯一同时做 设计 + 多格式导出 + 品牌融入 的 Skill。
双对象契约
这个 skill 的增长目标不是让用户学会更复杂的提示词，而是让 AI agent 承担更多确定性工作。
| 对象 | 这里承诺什么 | 如何验证 |
|---|---|---|
| 人类用户 | 一句话能拿到可预览、可迭代、可导出的视觉产物 | verify:lite + preview，导出时再跑对应 export gate |
| AI Agent | 不猜路径：先判定模式，再 fork 模板，再读必要 reference，再交付 | SKILL.md 短路由 + assets/templates/INDEX.json + 12 模式 eval |
| Marketplace | 安装面清楚、依赖面克制、安全信号可机读 | .well-known/**、metadata.openclaw.requires、npm run verify:publish |
| 维护者 | 每次升级都能证明没有把 skill 改成只会写文案 | npm run validate 同时跑 smoke 与 eval 契约 |
核心理念是：让 AI 发挥更大效能。人只表达目标、约束和审美偏好；agent 负责事实核验、路由、模板选择、版面生产、占位符清理、预览和导出准备。
给 AI agent（30 秒上手）
本仓库根有 AGENTS.md，SKILL.md 是短路由入口，两处都是为 agent 写的。落地后任何 runtime（Claude Code / Codex / OpenCode / OpenClaw / Hermes / Cursor）的动作都一样：
- 读 SKILL.md 的 30 秒入口（约 100 行）→ 触发边界、依赖分层、路由、验证一眼看完。
- 路由 references/modes.md → 选 12 模式之一 → 在 assets/templates/INDEX.json 找模板 fork，不要从白纸开始。
- 验证（默认 Tier 0 · 零安装）：
npm run verify:lite -- <file>扫占位符 →npm run preview -- <file>拿到file://URL 自己用浏览器工具打开。
首次运行不要变成环境搭建。先交付一个可见 HTML artifact，并在结果里写清文件路径、模式、模板、验证结果和影响使用的 caveat。导出类产物只在用户明确要求、对应命令跑通并检查到文件后再声称存在。
agents/openai.yaml 提供 UI 展示名、短描述、默认提示词和 IFQ 图标路径，方便支持 skill chips / marketplace cards 的 agent 直接展示这项能力。
能力与权限（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 真正去做的事。
「明天沙龙讲 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 只保留版面节奏 · 先给可预览源文件，印刷 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 定版 · 先交 HTML/keyposter，MP4/GIF 经显式导出后再交付
「个人站一页，但不要像找工作。」
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 / 2026 · 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 件事：
┌────────────────────────────────────────────────────────────────────┐
│ ◇ 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
└────────────────────────────────────────────────────────────────────┘
拆开看：
- Editorial contrast — Newsreader serif 配 JetBrains Mono，不是随机字体组合。
- Rust ledger — 左侧那根竖线就是 ifq.ai 的"脊"。比大 logo 更 IFQ。
- Mono field note — 顶部和底部那行
ifq.ai / live system、ifq.ai / 2026。 - Quiet URL — 没有 CTA 咆哮。域名只出现一次，在右下。
- Signal spark — 右下一颗小火花。整页唯一的图形重音。
- Warm paper — 背景
#FAF7F2，不是#FFFFFF。冷白让版面没有温度。 - 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 / 2026 小字 | 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 | 发布动画 · 产品宣传片 | HTML/keyposter 先行；MP4/GIF 显式导出 |
| 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/HTML 源；出血位 PDF 经导出验证 |
| M-11 | 品牌诊断 | 体检 · 升级建议 | 诊断报告 + 3 方向 |
| M-12 | 全栈品牌 | brand from scratch | logo + 色板 + 字体 + 6 应用 |
路由：模式触发 → 设计方向顾问 fallback → Junior Designer 主干。
完整协议：references/modes.md。
六层骨架
这个 skill 像 IFQ，不是因为颜色，而是因为下面 6 层同时工作：
| 层 | 做什么 | 关键文件 |
|---|---|---|
| 01 · Context Engine | 从上下文长设计，不从白纸瞎猜 | design-context.md |
| 02 · Asset Protocol | 动视觉前先抓事实 / logo / 产品图 / UI | fact-and-asset-protocol.md · workflow.md |
| 03 · House Marks | 把 5 个 ambient 标记写进版面 | ifq-brand-spec.md · assets/ifq-brand/ |
| 04 · Style Recipes | 风格靠配方和 scene template 组织 | design-styles.md · ifq-native-recipes.md |
| 05 · Output Compiler | HTML → MP4 / GIF / PPTX / PDF 一条导出链 | scripts/ |
| 06 · Proof Loop | 截图 + 点击 + smoke + 导出核对 | verification.md · smoke-test.mjs |
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 # 20 场景回归契约（12 模式 + 8 边界）
npm run quality:score # 38 项质量评分（Discovery / Implementation / Structure / Expertise / Security）
不需要装 Playwright、不需要 Chromium、不需要 Python。跨 macOS / Linux / Windows 即跑。
Deep 档（按需，仅导出或自动化才装）：
npm run install:export # 一键装齐 playwright + pdf-lib + pptxgenjs + sharp + Chromium
npm run install:browsers # 仅安装 Chromium（不装其他 export 依赖）
python scripts/verify.py path/to/design.html # headless 多 viewport 截图 + 控制台错误
npm run export:pdf -- path/to/deck.html # 导出 PDF（需先 install:export）
npm run export:pptx -- path/to/deck.html # 导出可编辑 PPTX（需先 install:export）
npm run export:stage-pdf -- path/to/deck.html # 导出逐页 PDF（需先 install:export）
npm run render:video -- path/to/film.html # 渲染 MP4（需 ffmpeg + install:export）
单件作品在需要自动截图/可点击测试/导出 MP4 PDF PPTX 时才走 Deep 档。详见 references/verification.md。
Showcase
直接在浏览器打开 demos/ 目录下的 HTML 文件，查看 Skill 的真实产出质量。更安静的 live case 是作者 peixl 的个人站：peixl.ifq.ai —— 由 IFQ Design Skills 完整设计完成，可作为 M-02 Portfolio 的最佳实践样本：不靠简历式堆叠，而靠暖纸、ledger 节奏、mono field note 与 quiet URL，把个人品牌收进一页克制的版面里。
| Demo | 文件 / URL | 展示内容 |
|---|---|---|
| peixl 个人站 | peixl.ifq.ai | IFQ Design Skills 设计完成的 live M-02 Portfolio 最佳实践 |
| Landing Page | demos/hero-landing-showcase.html | Editorial hero + rust ledger + spark animation |
| Dashboard | demos/dashboard-showcase.html | Command center + KPI strip + sparkline grid |
| Slide Deck | demos/deck-showcase.html | 5-slide keynote + field-note colophon |
社区
- Issues: GitHub Issues — bug 报告、功能请求、设计分享和使用交流
- 贡献入口：改 skill 协议、模板、脚本或文档前先看 CONTRIBUTING.md。安全边界与上报流程见 SECURITY.md。
Download History
许可
Apache-2.0 + 品牌归属条款。个人学习和非商业分享完全免费；商业使用保留 IFQ 签名归属即可。详见 LICENSE。
compiled by ifq.ai · 2026