前言¶
在 Cursor、Claude Code 等环境里做落地页、信息图或动效演示时，常见路径是：先堆 React 组件、再调样式，或让模型直接出 PNG 却难以迭代。若目标是可预览、可改、可导出的视觉交付物，而不是上线用的生产站点，需要一条更窄的约束：以 HTML 为载体，把版式、动效和多方案探索放在同一套流程里。
下面介绍 SkillHub 上的 IFQ Design Skills（坐标 @user_0b351294/ifq-design-skills，当前版本 2.4.3）。它面向「HTML-first」的视觉设计交付，并明确划定了不该使用的边界。
这是什么¶
IFQ Design Skills 是一条社区来源（community）的 Agent Skill，分类为 design-media，由发布者 user_0b351294 维护。SkillHub 页面标注 requires_api_key=false，安装后无需额外 API Key。
官方简介的核心判断逻辑是：当用户要的是以 HTML 为主的视觉设计交付物时启用；当任务是生产级 Web 应用、SEO 站点、后端、纯文案润色或孤立 CSS 修 bug 时，不应依赖本 Skill。
核心功能¶
以下能力均来自 SkillHub 与官方简介，未单独核实到的实现细节不展开。
支持的交付类型¶
Skill 说明中列出的 HTML-first 交付包括：
- 交互原型（interactive prototype）
- 幻灯片 / 演示稿（slide deck）
- 动效演示（motion demo）
- 信息图（infographic）
- 仪表盘（dashboard）
- 落地页（landing page）
- 白皮书版式（whitepaper）
- 更新日志页（changelog）
- 名片（business card）
- 社媒封面（social cover）
- 品牌体系探索（brand system）
- 设计评审（design critique）
- 多方案对比（multi-variant exploration）
导出规划¶
除在对话中生成可打开的 HTML 外，简介还提到可对 MP4、GIF、PPTX、PDF、SVG 等格式做导出规划（export planning）。具体导出步骤以 Skill 包内 SKILL.md 及 Agent 执行环境为准；本文不假定本地已预装转码或 Office 工具链。
明确不覆盖的范围¶
官方「Do not use」列表包括：
- 生产环境 Web 应用（production web apps）
- SEO 导向站点（SEO sites）
- 后端系统（backend systems）
- 纯文案修改（pure copy edits）
- 孤立的 CSS bug 修复（isolated CSS bug fixes）
把边界写清楚，有助于减少 Agent 误用本 Skill 去改业务代码或做上线工程。
安装与启用¶
SkillHub 推荐两种方式：用 CLI 装到当前 Agent 的 skills 目录，或把安装提示词发给 AI 按官方文档执行。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 skillhub：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装 IFQ Design Skills¶
安装技能时必须用 --dir 指向当前 Agent 识别的 skills 目录；默认装到 ./skills/ 可能不会被加载。常见路径如下（摘自 SkillHub 安装说明）：
| 环境 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
在 Cursor 中示例：
skillhub install @user_0b351294/ifq-design-skills --dir ~/.cursor/skills/
SkillHub 产品页给出的 AI 安装提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_0b351294/ifq-design-skills`。
安装完成后，按你所用客户端的要求重启或刷新 Agent，使新 Skill 被索引。
典型用法¶
本 Skill 没有单独的「一键命令」；用法是在对话中描述交付物类型与约束，由 Agent 按 SKILL.md 工作流生成 HTML 优先的稿面。下列表述与官方简介中的场景一一对应，可直接复现意图（需已安装并启用该 Skill）：
落地页 + 导出格式说明
用 IFQ Design Skills：做一个产品发布的 HTML 落地页，桌面宽 1280px，含 hero、功能三点、定价表。最后说明若要导出 PDF 和 MP4，分别需要哪些步骤。
多方案探索
为同一 SaaS 仪表盘做 3 套 HTML-first 视觉方案（浅色 / 深色 / 高对比），在同一目录下分文件输出，并附简短设计 critique。
动效与幻灯片
做一个 5 页的 HTML slide deck，主题是公司季报摘要；第 3 页需要简单的 motion demo（CSS 或内联脚本），并规划导出为 PPTX 时要注意的点。
经过上面的步骤，Agent 应倾向于产出可本地打开的 HTML 资产，而不是直接改你仓库里的生产前端代码。
适用场景与注意¶
适合谁
- 需要快速出可交互预览的 prototype、deck、infographic、dashboard 的开发者或产品同学
- 希望在对话里完成多 variant 探索或设计评审，再决定是否进入 Figma / 工程实现
- 希望 Agent 在 MP4、GIF、PPTX、PDF、SVG 等导出路径上给出规划，而不是盲目承诺一键导出
使用注意
- 评分与下载量：SkillHub 页面显示评分 100000、下载 822（抓取时间与页面统计一致；若你打开页面数字有更新，以页面为准）。
- 不是建站 Skill：要做 SEO、后端、可部署的生产应用，应换用工程类 Skill 或常规开发流程。
- 目录与重启：
skillhub install务必--dir到正确路径，否则 Skill 不会被当前 Agent 加载。 - 社区来源：
source: community，升级与兼容性以 SkillHub 上 v2.4.3 及后续版本说明为准。
结尾¶
IFQ Design Skills 把「HTML-first 视觉交付」和「导出格式规划」收进一条 Skill，并用清晰的 Do-not-use 列表避免与生产开发混用。若你的工作流里频繁出现 prototype、deck、landing、brand system 等稿面，可以在 SkillHub 安装 @user_0b351294/ifq-design-skills 后，用自然语言直接描述交付物。
- SkillHub 页面：https://www.skillhub.cn/skills/user_0b351294/ifq-design-skills
- API 坐标页：https://api.skillhub.cn/user_0b351294/ifq-design-skills
- 安装说明：https://skillhub.cn/install/skillhub.md
