Huashu Design banner
alchaincyf alchaincyf

Huashu Design

Design community

Description

Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

🌐 中文 · English

Huashu Design

*「打字。回车。一份能交付的设计。」* *"Type. Hit enter. A finished design lands in your lap."*

[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE) [![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh) [![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)


**在你的 agent 里打一句话,拿回一份能交付的设计。**


3 到 30 分钟,你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。

不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产(logo、色板、UI 截图),它会读懂你的品牌气质;什么都不给,**三套逻辑顾问 + 60 种 HTML 原生风格库**也能兜底到不出 AI slop。

**你看到这篇 README 里的每一个动画,都是 huashu-design 自己做的。** 不是 Figma,不是 AE,就是一句话 prompt + skill 跑通。下次产品发布要做宣传片?现在你也能做。

npx skills add alchaincyf/huashu-design

跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。

📣 **已改为 MIT 协议。** 自 2026-05-14 起本 skill 完全开源([MIT License](LICENSE)),个人和**商用都免费**,无需事先授权。原「个人使用免费、企业商用需授权」的条款已作废。([查看变更](#license))

[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)


huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形

▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal
👉 访问带音效的 HTML 互动版 · 下载 MP4(含 BGM+SFX · 10MB)


📺 新手教程(花叔亲录)

不知道怎么用?看花叔录的 huashu-design 上手教程:

huashu-design 使用教程

👉

Related Skills