花叔设计

📌 Skill基础信息

Skill名称：huashu-design（花叔Design）

简称：花叔Design

来源：社区第三方（alchaincyf）

运行宿主：专为特定AI Agent工具设计（需支持subagent spawn能力，如Claude-Code CLI等具备多线程处理能力的Agent环境）

核心定位：用HTML快速生成高保真视觉原型，适用于幻灯片、动画演示、UI mockup等前端视觉产出场景，通过三方向初稿机制确保设计多样性。

🧩 内部核心组成

子Agent集合

• 秒数轮盘Agent：随机抽取20种预设设计风格之一执行
• 现实参照Agent：参照真实获奖案例进行设计迁移
• 最佳设计师Agent：模拟顶级设计师/工作室的设计哲学

工作流程组件

• 品牌资产协议：强制验证和获取品牌logo/产品图/色值
• 设计方向顾问：需求模糊时的三方向初稿生成机制
• 事实验证模块：通过WebSearch验证产品信息真实性

模板文件体系

文件类型	功能描述
brand-spec.md	品牌资产规范模板
design-styles.md	40种设计风格库（网页20+PPT20）
critique-guide.md	设计评审标准指南
多领域参考文件	动画分镜、运镜语言、UI演示等专项指南

目录结构

项目名/
├── design-demos/          # 三方向初稿存放
├── assets/               # 静态资源（图片/字体）
├── references/           # 各类参考指南
└── product-facts.md      # 事实验证记录

🛠 安装与启用方式

安装命令：

skills install --user alchaincyf/huashu-design

前置依赖：

• Python 3（用于图片获取脚本）
• Playwright（用于截图生成）
• WebSearch能力（事实验证必需）

关键脚本：

• fetch_images.py：图片素材获取脚本
• 品牌资产下载命令链（svgl API → simpleicons → Google favicon）

启动方式：通过特定触发词激活（做原型、PPT、幻灯片、动画、设计风格、评审等）

📋 标准工作流

1. 需求接收：用户通过触发词提交视觉设计需求
2. 事实验证：对提及的产品/品牌进行WebSearch验证
3. 需求澄清：主动索要参考材料（logo/品牌色/参考网站）
4. 资产获取：执行品牌资产协议获取必需素材
5. 三方向生成：

- 撰写详细设计spec（≥500字）

- 判断图片需求并预先获取

- 并行启动三个subagent生成差异化初稿

1. 用户选择：展示三版真实视觉初稿，等待用户选择
2. 定向执行：基于选定方向完成完整设计
3. 交付输出：生成HTML文件，支持导出MP4/GIF等格式

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

平台限制：

• 需支持subagent spawn的Agent环境（弱runtime环境需降级模式运行）
• 依赖外部API获取品牌资产（svgl/simpleicons等）

Token消耗：

• 三方向并行机制消耗3倍计算资源
• 事实验证和WebSearch增加额外token开销

适用项目类型：

• ✅ 高保真原型、幻灯片、动画演示
• ✅ 视觉探索和风格试验
• ✅ 专家评审和设计对比

不适用场景：

• ❌ 生产级Web应用（无后端支持）
• ❌ SEO网站（纯前端输出）
• ❌ 需要动态数据的系统

已知坑点：

• 品牌资产获取失败时需手工处理
• 弱runtime环境三方向生成效率低下
• 动画项目必须预先制作分镜卡

生产环境适用性：仅限原型设计和演示用途，不建议直接用于生产环境。

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

适用场景：

• 产品经理需要快速可视化创意
• 设计师需要探索多种设计方向
• 团队需要制作演示文稿或动画原型
• 初创企业需要低成本品牌视觉探索

不适合场景：

• 需要持久化数据存储的应用
• 需要用户认证和权限管理的系统
• 高并发生产环境Web应用
• 需要复杂后端逻辑的业务系统

目标用户：

• 产品经理、UI设计师、前端开发者
• 需要快速制作演示材料的商务人员
• 设计教育和工作坊场景

回避用户：

• 后端开发工程师
• 需要完整全栈解决方案的团队
• 对设计一致性有极端要求的品牌项目

skills install --user alchaincyf/huashu-design

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