mcpField
H
huashu-design

huashu-design

github.com/podo设计与 UI29169 次安装3 天前更新
代码仓库

关于 huashu-design

huashu-design 是一款 HTML/CSS 设计技能，可制作原型、幻灯片、动画、信息图和可视化，并提供设计审查与导出选项。它会先展示三个设计方向再执行，并记录已采用的视觉风格以减少项目间重复。

主要功能

  1. 01制作原型、幻灯片和可视化内容
  2. 02执行前提供三个设计方向
  3. 03使用带视觉示例的命名风格
  4. 04运行设计 lint 检查
  5. 05导出为 PPTX、PDF、MP4 和 GIF
  6. 06记录已交付的视觉风格

适用场景

  1. 01制作动画交互原型
  2. 02制作幻灯片或信息图
  3. 03将设计导出为 PPTX、PDF、MP4 或 GIF

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill huashu-design

安装后在 Claude Code 中输入/huashu-design确认已加载。

附带文件stub.yaml

详细介绍

huashu-design

目录占位条目 — 完整技能：alchaincyf/huashu-design

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 huashu-design，调用它并继续
    • pointer → 转到第 2 步

  2. 检测范围，然后安装：

    [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project"

    全局：

    npx skills add alchaincyf/huashu-design --skill huashu-design -g -y

    项目：

    npx skills add alchaincyf/huashu-design --skill huashu-design -y

    Claude Code： 发送一条以 ! 开头的聊天消息作为命令，即可在不中断对话的情况下运行。

注意事项

  • 要求： 技能的辅助脚本（learn.py、design_lint.py、capabilities.py）需要 Python 3；Node.js 需安装技能的 package.json 中列出的包（Playwright、pptxgenjs、sharp、pdf-lib）；导出 PPTX、PDF、MP4 和 GIF 还需确保 PATH 中有 ffmpeg；skills CLI 不会安装这些依赖
  • 许可证： MIT
  • 下载量较大（约 224 MB）： skills CLI 会在克隆 300 秒后放弃；如果超时，请使用 SKILLS_CLONE_TIMEOUT_MS=900000 重试。

安装后调用

  • 技能名称：huashu-design
  • 触发短语："huashu"、"magazine typography"、"CSS Grid design"、"animated prototype"、"MP4 export"

功能

制作出版级 HTML/CSS 设计：可点击原型、幻灯片、动画、信息图和可视化，并提供专家设计审查。对于任何新设计，它都会先展示三个方向，并等待你选定后再开始执行；它借助包含具名设计风格及视觉样例的库，对交付文件运行设计 lint 检查，并维护一份“外观记录”，记录你已发布的设计，以便后续项目避免重复。支持动画交互原型，并可导出为 PPTX、PDF、MP4 和 GIF。与 Agent 无关，且无需外部组件库。该技能的提示词和参考资料为中文，但上游表示，它处理英文任务也完全没问题。

不适用场景

  • 需要后端的生产级 Web 应用或系统——上游表示该技能不适用
  • React Native、SwiftUI 或后端渲染等非 HTML 目标（该技能原生支持 HTML/CSS）
  • 需要预构建组件库或设计系统脚手架时（请使用 shadcn-ui 或 design-consultation）

评论

支持 Markdown