メニュー
Agent-first 的专业 HTML 原生设计 Skill（花叔 Design）。在终端打一句话，拿回一份可交付的高保真设计作品。支持20种设计哲学、5维度评审框架、31种布局、20+动画、品牌资产解析。当用户说'帮我做一个设计'、'做个网页'、'做个 HTML 页面'、'生成高保真原型'、'做个落地页'、'做个活动页'、'设计一个界面'时触发此 Skill。核心特点：Agent-first非GUI工具、品牌识别能力、专业设计工作流。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/gaoqiongxie/skills-ai --skill htmlコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
网络安全分析师技能库：754个结构化安全技能，覆盖威胁狩猎、数字取证、事件响应、渗透测试、代码安全审计、威胁情报、恶意软件分析等26个安全领域。映射MITRE ATT&CK v19.1、NIST CSF 2.0等五大框架。当用户说'安全分析'、'威胁狩猎'、'威胁情报'、'渗透测试'、'事件响应'、'MITRE'、'数字取证'、'恶意软件分析'、'红队'、'蓝队'、'SOC'、'网络攻防'时触发。与security-audit互补：security-audit聚焦代码层静态扫描，本Skill覆盖全栈安全分析工作流。
企业级全栈迭代工作流Agent：当用户说'开始开发这个需求'、'处理本次迭代'、'全栈开发闭环'、'跑一个迭代'、'enterprise iteration'、'迭代开发'、'需求交付'、'开发闭环'时触发。自动按需求→设计→开发→测试→Review→部署→记忆7阶段推进，维护迭代状态机，路径感知（自动读取需求目录与代码目录），协调多个子Skill协作完成企业级CRM全栈需求交付。支持状态回退、并行分支、上下文继承。
截图转可交互原型统一入口：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型，并自动联动screenshot-to-prd输出PRD、prd-to-demo完善交互。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、多截图串联页面流、与screenshot-to-prd/prd-to-demo形成设计驱动闭环。
| 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 你的品牌资产，它会读懂你的品牌气质" —— 花叔