What makes IFQ Design Skills notable?

1.2K downloads. Trust evidence available

How should IFQ Design Skills be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

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... Skill: IFQ Design Skills Owner: peixl Summary: Use this skill when the user asks for an HTML-first visual design deliverable: interactive prototype, slide deck, motion demo, infographic, dashboard, landin... Tags: latest:2.4.3 Version history: v2.4.3 | 2026-04-29T06:34:36.807Z | user Version 2.4.3 - Added six new template and script files, including GALLERY.html, brand-diagnosis.html, onboarding-flow.html, portfolio-

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.2k

Updated

Oct 11, 2026

Version

2.4.3

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.2K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1.2K downloadsadoption · observed Oct 11, 2026
Latest release: 2.4.3release · observed Apr 29, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s173rnxmp48r4bf80p56924bth85ade3:ifq-design-skills

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-peixl-ifq-design-skills/snapshot"

Documentation

CLAWHUB

160,000 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
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.4.3
license: "MIT"
platforms: [macos, linux, windows]
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.4.3","category":"creative","tags":["design","html","prototype","slides","motion","infographic","dashboard","brand","pptx","pdf","svg","mp4","gif","ifq"],"openclaw":{"skillKey":"ifq-design-skills","category":"creative","summary":"HTML-first design engine for prototypes, decks, dashboards, motion, and brand systems. Fork a template, weave the IFQ ambient layer, verify the artifact.","entrypoint":"SKILL.md","homepage":"https://github.com/peixl/ifq-design-skills","os":["darwin","linux","win32"],"requires":{"bins":["node"],"env":[],"config":[]},"required_plugins":["filesystem","shell"],"optional_plugins":["browser","memory"],"permissions":{"filesystem":"read+write workspace only","shell":"workspace Node scripts only","browser":"optional outbound HTTPS read","network":"optional outbound HTTPS only; no inbound server"},"tool_map":{"read_file":"filesystem/read","write_file":"filesystem/write","list_dir":"filesystem/list","run_command":"shell/exec","web_search":"browser/search","web_fetch":"browser/fetch","screenshot":"browser/screenshot-or-host-tool"},"triggers":["prototype","interactive prototype","hi-fi mockup","slide deck","ppt","pptx","dashboard","landing page","whitepaper","infographic","business card","social cover","brand system","design critique","design variants","motion demo","mp4 export plan","gif export plan","原型","幻灯片","信息图","名片","小红书","品牌诊断","3 方向","portfolio","onboarding","brand-diagnosis","changelog"],"quick_commands":[{"label":"Validate skill health","command":"npm run validate"},{"label":"Validate eval suite","command":"npm run evals:validate"},{"label":"Static HTML check","command":"npm run verify:lite -- <file.html>"},{"label":"Build ClawHub bundle","command":"npm run pack"},{"label":"Anti-slop preflight","command":"npm run anti-slop -- <file.html>"}]},"clawhub":{"category":"creative","safe":true,"network":"optional","filesystem":"workspace","requires":{"bins":["node"],"env":[]},"capability_signals":{"crypto":false,"can_make_purchases":false,"requires_sensitive_credentials":false},"audit":"scanner-clean preflight via npm run validate","security_scan":{"posture":"scanner-clean","deny_list_rules":18,"secret_patterns":5,"bundle_integrity":"deterministic tarball via node:zlib"}},"hermes":{"category":"creative","tags":["design","html",

README.md

<sub>🌐 <a href="README.en.md">English</a> · <b>中文</b> · <code>ifq.ai / &lt;authored year&gt;</code></sub>

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/ifq-brand/logo-white.svg">
  <img src="assets/ifq-brand/logo.svg" alt="ifq.ai" height="64">
</picture>

# IFQ Design Skills

> ClawHub-safe 版本：这里保留模板、references 和前端资产。
> Playwright 验证、MP4/GIF/PDF/PPTX 导出等本地自动化能力，请使用完整仓库：https://github.com/peixl/ifq-design-skills
<sub><i>Intelligence, framed quietly.</i></sub>

<br>

<code>&nbsp;一句话进。&nbsp;&nbsp;一份能发出去的页面出来。&nbsp;&nbsp;做工像 ifq.ai 亲手做的。&nbsp;</code>

<br><br>

[![License](https://img.shields.io/badge/license-MIT-D4532B?style=flat-square&labelColor=111111)](LICENSE.md)
[![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)
[![templates](https://img.shields.io/badge/templates-12-A83518?style=flat-square&labelColor=111111)](assets/templates/GALLERY.html)
[![anti-slop](https://img.shields.io/badge/anti--slop-preflight-D4532B?style=flat-square&labelColor=111111)](references/anti-ai-slop.md)

<br>

<sub>立场 &nbsp;·&nbsp; 安装 &nbsp;·&nbsp; 说给它听 &nbsp;·&nbsp; 一页的解剖 &nbsp;·&nbsp; 五个标记 &nbsp;·&nbsp; 12 种模式 &nbsp;·&nbsp; 12 个模板 &nbsp;·&nbsp; 六层骨架 &nbsp;·&nbsp; 验证 &nbsp;·&nbsp; 许可</sub>

</div>

---

## 立场

大多数 agent 被要求"做设计"时，会交出两样东西：**一张过度装饰的 Figma Community 模板**，或者 **一份被 AI 格式化过的 Notion 页面**。都不能发出去。

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

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

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

## 给人和 Agent 的承诺

| 对象 | 得到什么 |
|------|----------|
| **人类用户** | 只要说目标，不必先写完整 PRD；skill 会把假设、缺口、输出文件和验证证据讲清楚。 |
| **AI Agent** | 不从空白页乱猜：先路由模式，读 `modeRoutes`，fork 模板，填内容，跑 anti-slop 和验证。 |
| **维护者** | ClawHub 包保持零依赖、零安装钩子、可审计；重型 MP4/GIF/PDF/PPTX 自动化留在完整 GitHub 仓库。 |

理念很简单：**让 AI 发挥更大效能**。人类负责判断方向和事实，Agent 负责把流程走完整、把证据收齐。

---

## 安装

```bash
# 从 ClawHub 安装（推荐）
openclaw skills install ifq-design-skills
```

> ClawHub 是推荐安装通道。需要本地开发请克隆完整仓库：<https://github.com/peixl/ifq-design-skills>；ClawHub 打包仓库是 <https://github.com/peixl/ifq-design-clawhub>。

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

### 首次运行应该得到什么

第一轮不要变成环境配置。直接说一句设计目标，例如：

```text
给我们的内部 AI 运营做一个 command center。信息密度高，冷静，不要 BI 套壳。
```

合格的首次运行会返回 6 个证据：输出 HTML 文件路径、使用的 mode、使用的 template、写入的假设、执行过的验证（`verify:lite` 或浏览器预览）、以及影响使用的 caveat。它不应该要求登录账户、全局安装导出依赖，或改动 OpenClaw 之外的环境。

### 为什么它适合冲 ClawHub Top 10

ClawHub 上真正会被反复安装的 skill 通常不是"什么都能做"，而是**一个场景讲得很清楚、第一次使用马上有结果、安全边界让人放心**。IFQ Design Skills 把这个增长飞轮写进了包里：

| 转化信号 | 这里怎么做到 |
|---|---|
| 一眼知道用途 | 只承诺 HTML-first 视觉产物

_meta.json

{
  "ownerId": "kn773bqttn3cqgx01s874fcty1826nxe",
  "slug": "ifq-design-skills",
  "version": "2.4.3",
  "publishedAt": 1777444476807
}

references/agent-compatibility.md

# Agent Compatibility Matrix

> How to mount and run `ifq-design-skills` across every major agent runtime. The skill follows the **Anthropic Agent Skills** convention and adds Hermes and ClawHub metadata blocks without breaking any runtime. ClawHub is the recommended install channel; GitHub installs are for local development and non-OpenClaw runtimes.

The skill itself uses neutral verbs (`read file`, `write file`, `run command`, `web search`, `take screenshot`). This file maps those verbs to each runtime's actual tool surface and documents install paths and slash commands.

## Universal prerequisites — ClawHub-safe default is zero-install

```
Tier 0 · ClawHub-safe core
Node ≥ 18.17 # npm run validate / npm run pack
filesystem + shell # workspace-scoped only

Tier 1 · Optional browser context
browser/web_fetch # facts, assets, screenshots in host agent

Tier 2 · Full GitHub repo only
Python / Playwright / ffmpeg / pptxgenjs / pdf-lib / sharp
# used for deep screenshots, MP4/GIF, PDF, and PPTX automation
```

The ClawHub-safe bundle intentionally ships with no dependency tree and no install hooks. Use the full GitHub repo only when a task explicitly needs local export automation.

## Recommended install path — ClawHub first

```bash
openclaw skills install ifq-design-skills
openclaw skills info ifq-design-skills
openclaw skills check ifq-design-skills
```

## Shared local development path

Hermes documents `~/.agents/skills/` as the cross-tool shared external directory. Install there once and every agent below can point at the same copy.

```bash
mkdir -p ~/.agents/skills
git clone https://github.com/peixl/ifq-design-skills ~/.agents/skills/ifq-design-skills
```

Each agent's section below shows how to register that shared path or install an independent copy.

---

## 1 · Claude Code (Anthropic)

Claude Code honors the Anthropic Agent Skills spec natively. Mount at either path:

```bash
# Personal (visible only to you)
ln -s ~/.agents/skills/ifq-design-skills ~/.claude/skills/ifq-design-skills

# Project-scoped (checked into the repo)
ln -s ~/.agents/skills/ifq-design-skills .claude/skills/ifq-design-skills
```

**Discovery** is automatic. Claude Code scans `~/.claude/skills/` and `.claude/skills/`, loads the frontmatter (`name`, `description`) into the system prompt, and reads `SKILL.md` only when the description matches the user request.

| Neutral verb | Claude Code tool |
|---|---|
| read file | `Read` |
| write file | `Write`, `Edit` |
| run command | `Bash` |
| web search | `WebSearch`, `WebFetch` |
| verify / screenshot | host browser/screenshot tool; full repo can additionally run `scripts/verify.py` |

No config changes required.

---

## 2 · Hermes (Nous Research)

Hermes is the most feature-rich runtime. It understands the extended frontmatter (`platforms`, `metadata.hermes`, `fallback_for_toolsets`, `required_environment_variables`, `config`) and ships a fully integrated skills hub.

references/animation-best-practices.md

# Animation Best Practices · 正向动画设计语法

> 基于当代顶级产品动画（Apple Keynote / Anthropic 产品发布动画 / Field.io 运动诗学）
> 的深度拆解，提炼出的「电影级产品动画」设计规则，由 ifq.ai 设计团队沉淀。
>
> 配套 `animation-pitfalls.md`（避坑清单）使用——本文件是「**应该这样做**」，
> pitfalls 是「**不要这样做**」，两者正交，都要读。
>
> **约束声明**：本文件只收录**运动逻辑和表达风格**，**不引入任何品牌色具体色值**。
> 色彩决策走 [`asset-protocol.md`](asset-protocol.md)（从品牌 spec 抽取）或 3 方向顾问流程
> （20 种哲学各自的配色方案）。本 reference 讨论的是「**怎么动**」，不是「**什么色**」。

---

## §0 · 你是谁 · 身份与品味

> 在读后面任何技术规则之前，先读这一节。规则是**从身份涌现的**——
> 不是相反。

### §0.1 身份锚点

**你是一个研究过 Anthropic / Apple / Pentagram / Field.io 运动档案的 motion designer。**

做动画时，你不是在调 CSS transition——你是在用数字元素**模拟一个物理世界**，
让观众的潜意识相信「这是有重量、有惯性、会溢出的物体」。

你不做 PowerPoint 式动画。你不做「fade in fade out」动画。你做的动画**让人相信屏幕
是一个可以伸手进去的空间**。

### §0.2 核心信念（3 条）

1. **动画是物理学，不是动画曲线**
   `linear` 是数字，`expoOut` 是物体。你相信屏幕上的像素值得被当作"物体"对待。
   每一条 easing 的选择，都是在回答「这个元素有多重？摩擦系数多大？」的物理问题。

2. **时间分配比曲线形状更重要**
   Slow-Fast-Boom-Stop 是你的呼吸。**均匀节奏的动画是技术演示，有节奏的动画是叙事。**
   在正确的时刻慢下来——比在错误的时刻用对 easing 更重要。

3. **礼让观众，比炫技更难**
   关键结果前停 0.5 秒是**技术**，不是妥协。**让人类大脑有反应时间，是动画师的最高素养。**
   AI 默认会做一个没有停顿的、信息密度满格的动画——那是新手。你要做的是克制。

### §0.3 品味标准 · 什么是美

你对「好」和「great」的判断标准如下。每一条都有**识别方法**——当你看到一个候选动画时，
用这些问题判断它是否达标，而不是机械对照 14 条规则。

| 美的维度 | 识别方法（观众反应） |
|---|---|
| **物理重量感** | 动画结束时，元素"**落**"得稳——不是"**停**"在那里。观众潜意识觉得"这有重量" |
| **礼让观众** | 关键信息出现前有一个可感的 pause（≥300ms）——观众来得及"**看见**"再继续 |
| **留白** | 收尾是戛然而止 + hold，不是 fade to black。最后一帧清晰、肯定、有决定感 |
| **克制** | 全片只有一处「120% 精致」，其余 80% 恰到好处——**到处炫技是廉价的信号** |
| **手感** | 弧线（不是直线）、不规律（不是 setInterval 的机械节奏）、有呼吸感 |
| **敬意** | 展示 tweak 的过程、展示 bug 的修复——**不藏工作、不给"魔法"**。AI 是协作者不是魔术师 |

### §0.4 自检 · 观众第一反应法

做完一支动画，**观众看完第一反应是什么？**——这是你唯一要优化的指标。

| 观众反应 | 评级 | 诊断 |
|---|---|---|
| "看起来挺流畅的" | good | 合格但无特色，你在做 PowerPoint |
| "这个动画真顺" | good+ | 技术对了，但没惊艳 |
| "这个东西看起来真的像**从桌面上浮起来的**" | great | 你触到了物理重量感 |
| "这不像是 AI 做的" | great+ | 你触到了 Anthropic 的门槛 |
| "我想**截图**发朋友圈" | great++ | 你做到了让观众主动传播 |

**great 和 good 的区别，不在于技术正确度，在于品味判断**。技术正确 + 品味对 = great。
技术正确 + 品味空 = good。技术错误 = 没入门。

### §0.5 身份和规则的关系

下面 §1-§8 的技术规则，是这套身份在具体场景的**执行手段**——不是独立规则清单。

- 遇到规则没覆盖的场景 → 回到 §0，用**身份**判断，不要瞎猜
- 遇到规则之间有冲突 → 回到 §0，用**品味标准**判断哪条更重要
- 想破一条规则 → 先回答："这样做符合 §0.3 哪一条美？" 答得上就破，答不上就别破

好。继续读下去。

---

## 总览 · 动画是物理学的三层展开

大多数 AI 生成动画有廉价感的根源是——**它们表现得像「数字」不是「物体」**。
真实世界的物体有质量、有惯性、有弹性、会溢出。Anthropic 三支片子的「高级感」根源，
就在于给数字元素一套**物理世界的运动规则**。

这套规则有 3 个层次：

1. **叙事节奏层**：Slow-Fast-Boom-Stop 的时间分配
2. **运动曲线层**：Expo Out / Overshoot / Spring，拒绝 linear
3. **表达语言层**：展示过程、鼠标弧线、Logo 形变收束

---

## 1. 叙事节奏 · Slow-Fast-Boom-Stop 5 段结构

Anthropic 三支片子无一例外遵循这个结构：

| 段 | 占比 | 节奏 | 作用 |
|---|---|---|---|
| **S1 触发** | ~15% | 慢 | 给人类反应时间，建立真实感 |
| **S2 生成** | ~15% | 中 | 视觉惊艳点出现 |
| **S3 过程** | ~40% | 快 | 展示可控性/密度/细节 |
| **S4 爆发** | ~20% | Boom | 镜头拉远/3D pop-out/多面板涌现 |
| **S5 落幅** | ~10% | 静 | 品牌 Logo + 戛然而止 |

**具体时长映射**（15 秒动画为例）：
S1 触发 2s · S2 生成 2s · S3 过程 6s · S4 爆发 3s · S5 落幅 2s

**禁止做的事**：
- ❌ 均匀节奏（每秒信息密度一样）— 观众疲劳
- ❌ 持续高密度 — 无峰值无记忆点
- ❌ 渐弱收尾（fade out 到透明）— 应该**戛然而止**

**自检**：用纸笔画 5 个 thumbnail，每个代表一段

Github ReposUpdated 1d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.