交互设计技能

📌 Skill基础信息

Skill名称：ifq-design-skills

简称：IFQ设计技能包

来源：社区第三方（peixl）

运行宿主：Claude Code、Codex CLI、OpenCode、OpenClaw、ClawHub、Hermes、Cursor、CodeBuddy 及其他兼容 AgentSkills 标准的AI代理工具

核心定位：专为HTML优先的可视化设计交付物生成而优化，通过模板路由和自动化验证，大幅减少人工提示工程工作量，适合快速原型设计和视觉内容制作。

---

🧩 内部核心组成

子Agent集合

• 设计方向顾问（design-direction-advisor.md）
• 事实资产协议（fact-and-asset-protocol.md）
• 应用原型规则（app-prototype-rules.md）
• 动画制作指南（animation-pitfalls.md）

斜杠命令/工具

命令名	功能简述
npm run verify:lite	轻量验证HTML文件，检查占位符和标签泄露
npm run preview	本地预览HTML文件
npm run install:export	安装导出依赖（PDF/PPTX/MP4等）
npm run validate	全量验证技能包完整性
ffmpeg	视频导出转换（需额外安装）

模板文件

• 12种预设模板（T-launch-film, T-hero-landing等）
• 品牌标识系统（ifq-tokens.css）
• 字体加载策略（font-loading.md）

目录结构

├── assets/           # 静态资源
│   ├── templates/    # 模板库
│   └── ifq-brand/   # 品牌资产
├── references/       # 参考文档
├── agents/          # 代理配置
└── SKILL.md         # 主技能文件

---

🛠 安装与启用方式

安装命令：

skills install --user peixl/ifq-design-skills

前置依赖：

• Node.js ≥ 18.17（必需）
• Python + Playwright + Chromium（Tier 1可选）
• ffmpeg（Tier 2视频导出可选）

权限要求：

• 文件系统读写（工作区内）
• 受限网络访问（字体CDN、包管理器）
• 受限Shell执行（验证和导出命令）

---

📋 标准工作流

1. 输入解析：用户输入自然语言设计需求
2. 模式匹配：根据关键词匹配12种设计模式（M-01到M-12）
3. 模板选择：自动选择对应模板（T-hero-landing等）
4. 内容填充：结合事实核查和品牌规范生成HTML
5. 质量验证：执行verify:lite检查占位符和品牌标签
6. 预览交付：运行本地预览或直接输出HTML文件路径
7. 可选导出：根据需求安装导出工具生成PDF/MP4等格式

典型处理时间：单次交互完成核心HTML生成，导出步骤需额外时间。

---

⚠️ 关键限制、缺陷、注意事项

平台限制：

• 不支持Word、Google Docs等文档工具链
• 不支持企业级模板锁定系统

Token消耗：

• 模板路由和验证过程增加约15-20%额外token使用
• 导出操作可能触发额外进程消耗

适用项目：

• ✅ 原型设计、宣传物料、活动页面
• ✅ 品牌视觉方案、动画演示

不适用项目：

• ❌ 生产级Web应用开发
• ❌ SEO关键型网站
• ❌ 后端系统开发
• ❌ 纯文本编辑任务

生产环境警告：

• 导出功能依赖外部工具链稳定性
• 网络字体加载可能受地区限制
• 建议在可控内网环境使用导出功能

---

✅ 适用场景 & ❌ 不适合场景

适合使用：

• 设计师快速制作视觉原型
• 市场人员生成宣传物料
• 产品经理制作演示文档
• 教育机构制作课件模板
• 个人品牌视觉设计

不适合使用：

• 企业级生产系统开发
• 高安全要求的政府项目
• 需要精确品牌控制的商业项目
• 已有成熟设计系统的项目
• 需要与现有代码库深度集成的场景

特别提醒：该技能包采用IFQ品牌视觉语言，输出内容会包含特定设计元素，如需完全自定义品牌体系需进行二次开发。

skills install --user peixl/ifq-design-skills

检测到隐私/敏感信息读取（预设模式 #3）