메뉴
Agent-first 的专业 HTML 原生设计 Skill（花叔 Design）。在终端打一句话，拿回一份可交付的高保真设计作品。支持20种设计哲学、5维度评审框架、31种布局、20+动画、品牌资产解析。当用户说'帮我做一个设计'、'做个网页'、'做个 HTML 页面'、'生成高保真原型'、'做个落地页'、'做个活动页'、'设计一个界面'时触发此 Skill。核心特点：Agent-first非GUI工具、品牌识别能力、专业设计工作流。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/gaoqiongxie/skills-ai --skill html명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 的。" 用命令行取代设计软件。
把设计工作室的专业工作流翻译成 Agent 可执行的 Skill。一句话需求，拿回可交付的高保真设计。
| 维度 | 内容 |
|---|---|
| 设计哲学 | 20种（极简、包豪斯、新拟态、毛玻璃、赛博朋克等） |
| 评审框架 | 5维度（视觉层次、配色、排版、空间感、交互反馈） |
| 布局类型 | 31种（卡片流、瀑布流、全屏、分栏、网格等） |
| 动画效果 | 20+种（滚动动效、入场、悬停、微交互） |
| 输出格式 | 纯 HTML + CSS，可直接部署 |
用户：帮我做一个个人简历网页，极简风格
用户：做一个产品落地页，科技感，主产品是AI写作工具
用户：设计一个课程介绍页，活泼风格，面向小学生
用户：做一个品牌官网首页
品牌：轻瘦App（减脂健康应用）
主色：绿色系
风格：清新、健康
需要：Hero区域 + 功能介绍 + 用户评价
| 编号 | 哲学 | 特点 |
|---|---|---|
| 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 | 国潮 | 水墨、红色、中式元素 |
生成后自动进行设计自检：
| 维度 | 检查要点 |
|---|---|
| 视觉层次 | 主次是否分明，眼睛知道往哪看 |
| 配色系统 | 主色/辅色/中性色是否和谐 |
| 排版节奏 | 字号对比、行距、段落间距 |
| 空间感 | 留白是否充足，不拥挤 |
| 交互反馈 | Hover效果、动画是否恰当 |
| 场景 | 推荐布局 |
|---|---|
| 落地页 / 官网 | Hero全屏 + 卡片流 + CTA |
| 个人简历 | 双栏（左固定信息、右内容） |
| 产品展示 | 瀑布流 / 网格卡片 |
| 数据报告 | Dashboard仪表盘布局 |
| 活动页 | 全屏大图 + 渐进式内容 |
| 博客 / 文章 | 单栏内容 + 侧边导航 |
用户：帮我设计一个减脂打卡页面，清新健康风
助手：→ 生成以下 HTML 页面
风格：自然有机 + 莫兰迪配色
组件：今日打卡（饮食/运动）、体重趋势图、鼓励语
动画：完成打卡时的庆祝动效
用户：帮我做一个 Java 技术博客首页，暗黑极简风
助手：→ 生成以下 HTML 页面
风格：暗黑模式 + 极简主义
组件：文章列表、标签云、最新文章卡片
特效：代码高亮、鼠标悬停卡片浮起
用户：做一个"轻瘦App"的落地页
助手：→ 生成完整落地页
Hero：大标题 + 手机截图 + 下载按钮
功能：三栏功能特性介绍
数据：核心数据展示（用户数、减重案例）
评价：用户证言卡片
| huashu-design | Claude Design (GUI) | Figma | |
|---|---|---|---|
| 使用方式 | 命令行 / 对话 | 图形界面 | 图形界面 |
| 输出 | 可部署 HTML | 设计稿 | 设计稿 |
| 学习成本 | 零 | 低 | 高 |
| 定制性 | 通过描述 | 拖拽 | 完全自由 |
| 品牌识别 | ✅ | ✅ | ❌（需手动） |
"给 skill 你的品牌资产，它会读懂你的品牌气质" —— 花叔