# 花叔 HTML 设计

> Agent-first 的专业 HTML 原生设计 Skill（花叔 Design）。在终端打一句话，拿回一份可交付的高保真设计作品。支持20种设计哲学、5维度评审框架、31种布局、20+动画、品牌资产解析。当用户说'帮我做一个设计'、'做个网页'、'做个 HTML 页面'、'生成高保真原型'、'做个落地页'、'做个活动页'、'设计一个界面'时触发此 Skill。核心特点：Agent-first非GUI工具、品牌识别能力、专业设计工作流。

- Skill: `gaoqiongxie/html` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaoqiongxie/html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gaoqiongxie/html

---


> **来源**: alchaincyf/huashu-design ⭐2,839（GitHub本周热门新晋，作者：花叔 alchaincyf）
>
> **发布时间**: 2026-04-19
>
> **理念**: "花叔 Design 是 Agent-first 的，Claude Design 是 GUI-first 的。" 用命令行取代设计软件。

# 花叔 HTML 设计 Skill

把设计工作室的专业工作流翻译成 Agent 可执行的 Skill。一句话需求，拿回可交付的高保真设计。

---

## 🎨 核心能力

| 维度 | 内容 |
|------|------|
| 设计哲学 | **20种**（极简、包豪斯、新拟态、毛玻璃、赛博朋克等） |
| 评审框架 | **5维度**（视觉层次、配色、排版、空间感、交互反馈） |
| 布局类型 | **31种**（卡片流、瀑布流、全屏、分栏、网格等） |
| 动画效果 | **20+种**（滚动动效、入场、悬停、微交互） |
| 输出格式 | 纯 HTML + CSS，可直接部署 |

---

## 🚀 使用方式

### 直接描述需求

```
用户：帮我做一个个人简历网页，极简风格
```

```
用户：做一个产品落地页，科技感，主产品是AI写作工具
```

```
用户：设计一个课程介绍页，活泼风格，面向小学生
```

### 提供品牌资产（可选）

```
用户：做一个品牌官网首页
品牌：轻瘦App（减脂健康应用）
主色：绿色系
风格：清新、健康
需要：Hero区域 + 功能介绍 + 用户评价
```

---

## 🧩 20 种设计哲学

| 编号 | 哲学 | 特点 |
|------|------|------|
| 1 | **极简主义** | 大量留白，只保留必要元素 |
| 2 | **包豪斯** | 功能即美，几何形状、原色 |
| 3 | **新拟态** | 柔和阴影，仿实体质感 |
| 4 | **毛玻璃** | 模糊透明叠层，现代感 |
| 5 | **赛博朋克** | 霓虹、深色、像素风 |
| 6 | **日式简约** | 留白哲学，和风配色 |
| 7 | **Brutalism** | 粗犷、无修饰、冲击感 |
| 8 | **渐变流行** | 多彩渐变，Instagram风 |
| 9 | **暗黑模式** | 深色背景，护眼舒适 |
| 10 | **Paper UI** | 纸张质感，扁平化 |
| 11 | **手绘风** | 粗线条，人情味 |
| 12 | **复古港风** | 霓虹灯、胶片质感 |
| 13 | **莫兰迪** | 低饱和度，高级感 |
| 14 | **自然有机** | 土地色调，圆润形态 |
| 15 | **企业商务** | 蓝色，专业、严肃 |
| 16 | **活泼插画** | 卡通、多彩，亲切 |
| 17 | **科技感** | 线条、数据、冷色调 |
| 18 | **奢华感** | 黑金、高端、精致 |
| 19 | **APPLE风** | 简洁、高清大图、优雅 |
| 20 | **国潮** | 水墨、红色、中式元素 |

---

## ✅ 5 维度评审框架

生成后自动进行设计自检：

| 维度 | 检查要点 |
|------|---------|
| **视觉层次** | 主次是否分明，眼睛知道往哪看 |
| **配色系统** | 主色/辅色/中性色是否和谐 |
| **排版节奏** | 字号对比、行距、段落间距 |
| **空间感** | 留白是否充足，不拥挤 |
| **交互反馈** | Hover效果、动画是否恰当 |

---

## 📐 常用布局类型

| 场景 | 推荐布局 |
|------|---------|
| 落地页 / 官网 | Hero全屏 + 卡片流 + CTA |
| 个人简历 | 双栏（左固定信息、右内容） |
| 产品展示 | 瀑布流 / 网格卡片 |
| 数据报告 | Dashboard仪表盘布局 |
| 活动页 | 全屏大图 + 渐进式内容 |
| 博客 / 文章 | 单栏内容 + 侧边导航 |

---

## 💡 使用示例

### 示例1：减脂打卡页
```
用户：帮我设计一个减脂打卡页面，清新健康风

助手：→ 生成以下 HTML 页面
     风格：自然有机 + 莫兰迪配色
     组件：今日打卡（饮食/运动）、体重趋势图、鼓励语
     动画：完成打卡时的庆祝动效
```

### 示例2：技术博客页
```
用户：帮我做一个 Java 技术博客首页，暗黑极简风

助手：→ 生成以下 HTML 页面
     风格：暗黑模式 + 极简主义
     组件：文章列表、标签云、最新文章卡片
     特效：代码高亮、鼠标悬停卡片浮起
```

### 示例3：产品官网
```
用户：做一个"轻瘦App"的落地页

助手：→ 生成完整落地页
     Hero：大标题 + 手机截图 + 下载按钮
     功能：三栏功能特性介绍
     数据：核心数据展示（用户数、减重案例）
     评价：用户证言卡片
```

---

## 🆚 与其他设计工具的区别

| | huashu-design | Claude Design (GUI) | Figma |
|--|---------------|---------------------|-------|
| 使用方式 | 命令行 / 对话 | 图形界面 | 图形界面 |
| 输出 | 可部署 HTML | 设计稿 | 设计稿 |
| 学习成本 | 零 | 低 | 高 |
| 定制性 | 通过描述 | 拖拽 | 完全自由 |
| 品牌识别 | ✅ | ✅ | ❌（需手动） |

---

*"给 skill 你的品牌资产，它会读懂你的品牌气质" —— 花叔*