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