花束设计（Huashu Design）深度解析：当 Claude Code 拥有了一个「会设计的大脑」

一个 skill 文件，让 AI agent 从「能写代码」进化为「能交付设计」。6700+ Stars，7 天。这背后发生了什么？

引言：设计的门槛，从来不是工具

2026 年 4 月 19 日，一个叫 huashu-design 的 GitHub 仓库悄悄上线。7 天后，它的 Star 数突破 6700，Fork 超过 1000。

这不是一个新的设计工具，不是 Figma 的竞品，也不是什么 SaaS 产品。它只是一个 Markdown 文件——一个给 Claude Code 看的 skill 文件。

但就是这个 Markdown 文件，让程序员们第一次感受到：原来 AI 做设计，可以不是 AI slop。

在深入技术细节之前，先说一个背景：

过去两年，AI 生成 UI 的质量一直是个笑话。紫色渐变背景、emoji 当图标、Inter 字体一把梭、卡片阴影叠卡片阴影——这套「AI 审美」已经成了互联网上的一个梗。

huashu-design 的作者在 README 里直接点名了这个问题：

「不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。」

这句话是怎么做到的？这篇文章会从技术架构、设计哲学、工程实现三个维度，把 huashu-design 拆开来看。

一、背景：为什么需要一个「设计 skill」？

1.1 Claude Code 的能力边界

Claude Code 是一个强大的编程 agent，它能写代码、读文件、执行命令、调用 API。但它有一个明显的短板：视觉设计。

不是说 Claude Code 不能生成 HTML/CSS，而是它生成的 UI 往往缺乏设计感。原因很简单：

1. 没有设计约束：没有人告诉它「不要用紫色渐变」
2. 没有品牌意识：它不知道 Stripe 的品牌色是 #635BFF，也不知道 Linear 的设计语言是什么
3. 没有工作流：它不知道设计师是怎么工作的——先问需求、再提方向、再迭代

huashu-design 解决的正是这三个问题。

1.2 Skill 生态的崛起

2026 年，随着 Claude Code、Cursor、Codex 等 AI 编程工具的普及，一个新的生态正在形成：Agent Skill。

Skill 的本质是：给 AI agent 的系统提示词（System Prompt），但以结构化的 Markdown 格式存储，可以通过包管理器安装和分发。

# 安装 huashu-design
npx skills add alchaincyf/huashu-design

这一行命令，会把 skill 文件下载到本地，Claude Code 在下次启动时会自动加载它，从此「知道」如何做设计。

这个模式的优雅之处在于：它不需要修改 AI 模型本身，只需要给模型更好的上下文。

1.3 与 Claude Design 的定位差异

2026 年初，Anthropic 推出了 Claude Design——一个专门用于 UI 设计的网页产品。它有漂亮的 GUI，支持 Figma 导出，设计质量很高。

但 huashu-design 的作者给出了一个有趣的定位：

「80 分的 skill，不是 100 分的产品——对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。」

这个对比揭示了一个深刻的趋势：工具的形态正在从 GUI 向对话迁移。

二、核心架构：七大能力模块

huashu-design 的能力可以分为七个模块，每个模块都有明确的交付物和时间预期：

2.1 交互原型（App / Web）

交付物：单文件 HTML，真 iPhone bezel，可点击，Playwright 验证
典型耗时：10–15 分钟

这是 huashu-design 最核心的能力之一。它能生成一个完整的 iOS App 原型，包括：

• 精确的 iPhone 15 Pro 机身：灵动岛、状态栏、Home Indicator，像素级还原
• 状态驱动的多屏切换：不是静态截图，是真正可以点击的交互原型
• 真实图片：从 Wikimedia/Met/Unsplash 获取真实图片，而不是占位符
• Playwright 自动验收：生成后自动运行点击测试，确保交互逻辑正确

技术实现上，这依赖于一套精心设计的 HTML/CSS 模板系统：

<!-- iPhone 15 Pro 精确机身 -->
<div class="iphone-frame">
  <!-- 灵动岛 -->
  <div class="dynamic-island">
    <div class="camera"></div>
    <div class="sensor"></div>
  </div>
  
  <!-- 状态栏 -->
  <div class="status-bar">
    <span class="time">9:41</span>
    <div class="indicators">
      <span class="signal">●●●</span>
      <span class="wifi">▲</span>
      <span class="battery">■</span>
    </div>
  </div>
  
  <!-- 内容区域 -->
  <div class="screen" id="screen-home">
    <!-- 动态内容 -->
  </div>
  
  <!-- Home Indicator -->
  <div class="home-indicator"></div>
</div>

状态驱动的多屏切换通过 JavaScript 实现：

// 状态管理
const AppState = {
  currentScreen: 'home',
  history: [],
  
  navigate(screenId) {
    this.history.push(this.currentScreen);
    this.currentScreen = screenId;
    this.render();
  },
  
  back() {
    if (this.history.length > 0) {
      this.currentScreen = this.history.pop();
      this.render();
    }
  },
  
  render() {
    // 隐藏所有屏幕
    document.querySelectorAll('.screen').forEach(s => {
      s.style.display = 'none';
    });
    // 显示当前屏幕
    document.getElementById(`screen-${this.currentScreen}`).style.display = 'block';
  }
};

2.2 演讲幻灯片（HTML Slides → 可编辑 PPTX）

交付物：HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留）
典型耗时：15–25 分钟

这个能力有一个技术亮点：HTML → PPTX 的转换保留了真实文本框。

传统的 HTML 转 PPTX 工具（如 LibreOffice、Pandoc）通常会把文字渲染成图片，导出的 PPTX 里双击文字是无法编辑的。

huashu-design 的 html2pptx.js 采用了不同的方案：

// html2pptx.js 核心逻辑
async function convertSlide(slideElement, pptxSlide) {
  // 遍历所有 DOM 元素
  const elements = slideElement.querySelectorAll('*');
  
  for (const el of elements) {
    const style = window.getComputedStyle(el);
    const rect = el.getBoundingClientRect();
    
    if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'P') {
      // 文字元素：转换为 PPTX 文本框
      pptxSlide.addText(el.textContent, {
        x: rect.left / slideWidth,
        y: rect.top / slideHeight,
        w: rect.width / slideWidth,
        h: rect.height / slideHeight,
        fontSize: parseInt(style.fontSize),
        fontFace: style.fontFamily.split(',')[0].trim(),
        color: rgbToHex(style.color),
        bold: style.fontWeight >= 700,
        align: style.textAlign
      });
    } else if (el.tagName === 'IMG') {
      // 图片元素：转换为 PPTX 图片
      const imageData = await fetchImageAsBase64(el.src);
      pptxSlide.addImage({
        data: imageData,
        x: rect.left / slideWidth,
        y: rect.top / slideHeight,
        w: rect.width / slideWidth,
        h: rect.height / slideHeight
      });
    }
    // ... 更多元素类型
  }
}

关键在于 computedStyle 的使用——它读取的是浏览器最终渲染的样式，而不是原始 CSS，这确保了转换的准确性。

2.3 Motion Design 引擎（Stage + Sprite）

交付物：MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM
典型耗时：8–12 分钟

这是 huashu-design 技术含量最高的部分。它实现了一个完整的动画引擎，核心是 Stage + Sprite 时间片段模型。

Stage（舞台）

Stage 是动画的容器，管理时间轴和渲染循环：

class Stage {
  constructor(canvas, duration) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.duration = duration; // 总时长（秒）
    this.sprites = [];
    this.currentTime = 0;
    this.fps = 60;
  }
  
  addSprite(sprite) {
    this.sprites.push(sprite);
    return this;
  }
  
  render(time) {
    this.currentTime = time;
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 按 z-index 排序渲染
    const sortedSprites = [...this.sprites].sort((a, b) => a.zIndex - b.zIndex);
    
    for (const sprite of sortedSprites) {
      if (time >= sprite.startTime && time <= sprite.endTime) {
        const localTime = (time - sprite.startTime) / (sprite.endTime - sprite.startTime);
        sprite.render(this.ctx, localTime);
      }
    }
  }
  
  async exportMP4(fps = 60) {
    const frames = [];
    const frameCount = Math.ceil(this.duration * fps);
    
    for (let i = 0; i < frameCount; i++) {
      const time = i / fps;
      this.render(time);
      frames.push(this.canvas.toDataURL('image/png'));
    }
    
    // 使用 ffmpeg.wasm 合成 MP4
    return await encodeMP4(frames, fps);
  }
}

Sprite（精灵）

Sprite 是动画的基本单元，每个 Sprite 负责一段时间内的渲染：

class Sprite {
  constructor({ startTime, endTime, zIndex = 0 }) {
    this.startTime = startTime;
    this.endTime = endTime;
    this.zIndex = zIndex;
  }
  
  render(ctx, localTime) {
    // 子类实现
  }
}

// 文字精灵
class TextSprite extends Sprite {
  constructor({ text, x, y, fontSize, color, animation, ...rest }) {
    super(rest);
    this.text = text;
    this.x = x;
    this.y = y;
    this.fontSize = fontSize;
    this.color = color;
    this.animation = animation;
  }
  
  render(ctx, localTime) {
    const easedTime = this.animation ? Easing[this.animation](localTime) : localTime;
    
    ctx.save();
    ctx.font = `${this.fontSize}px serif`;
    ctx.fillStyle = this.color;
    ctx.globalAlpha = easedTime; // 淡入效果
    ctx.fillText(this.text, this.x, this.y);
    ctx.restore();
  }
}

四大核心 API

// 1. useTime - 获取当前时间（0-1 归一化）
function useTime(startTime, endTime, currentTime) {
  return Math.max(0, Math.min(1, (currentTime - startTime) / (endTime - startTime)));
}

// 2. useSprite - 创建精灵并绑定到舞台
function useSprite(stage, config) {
  const sprite = new Sprite(config);
  stage.addSprite(sprite);
  return sprite;
}

// 3. interpolate - 数值插值
function interpolate(from, to, t) {
  return from + (to - from) * t;
}

// 4. Easing - 缓动函数库
const Easing = {
  linear: t => t,
  easeIn: t => t * t,
  easeOut: t => 1 - (1 - t) * (1 - t),
  easeInOut: t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
  spring: t => {
    const c4 = (2 * Math.PI) / 3;
    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
  },
  bounce: t => {
    const n1 = 7.5625;
    const d1 = 2.75;
    if (t < 1 / d1) return n1 * t * t;
    else if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
    else if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
    else return n1 * (t -= 2.625 / d1) * t + 0.984375;
  }
};

60fps 导出的技术细节

60fps 导出是一个技术挑战，因为浏览器的 requestAnimationFrame 通常只能达到 60fps，而且受到屏幕刷新率的限制。

huashu-design 的解决方案是离线渲染：不依赖浏览器的渲染循环，而是直接在 Canvas 上逐帧渲染，然后用 ffmpeg.wasm 合成视频：

async function exportHighFPS(stage, fps = 60) {
  const { createFFmpeg, fetchFile } = FFmpeg;
  const ffmpeg = createFFmpeg({ log: false });
  await ffmpeg.load();
  
  const frameCount = Math.ceil(stage.duration * fps);
  
  // 逐帧渲染
  for (let i = 0; i < frameCount; i++) {
    const time = i / fps;
    stage.render(time);
    
    // 将 Canvas 内容写入 ffmpeg 虚拟文件系统
    const blob = await new Promise(resolve => stage.canvas.toBlob(resolve, 'image/png'));
    const arrayBuffer = await blob.arrayBuffer();
    ffmpeg.FS('writeFile', `frame${String(i).padStart(6, '0')}.png`, new Uint8Array(arrayBuffer));
  }
  
  // 合成 MP4
  await ffmpeg.run(
    '-framerate', String(fps),
    '-i', 'frame%06d.png',
    '-c:v', 'libx264',
    '-pix_fmt', 'yuv420p',
    '-crf', '18', // 高质量
    'output.mp4'
  );
  
  const data = ffmpeg.FS('readFile', 'output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}

2.4 设计变体（Tweaks 实时调参）

交付物：配色/字型/信息密度等参数化，侧边面板切换，纯前端 + localStorage 持久化
典型耗时：10 分钟

Tweaks 系统的核心是 CSS 变量 + 参数化面板：

// Tweaks 配置系统
const TweaksConfig = {
  colorScheme: {
    label: '配色方案',
    type: 'select',
    options: ['minimal', 'vibrant', 'dark', 'brand'],
    default: 'minimal'
  },
  typography: {
    label: '字型风格',
    type: 'select',
    options: ['serif', 'sans', 'mono', 'display'],
    default: 'serif'
  },
  density: {
    label: '信息密度',
    type: 'range',
    min: 1,
    max: 5,
    default: 3
  }
};

// 应用 Tweaks
function applyTweaks(config) {
  const root = document.documentElement;
  
  // 配色方案
  const colorSchemes = {
    minimal: { '--bg': '#fff', '--text': '#111', '--accent': '#000' },
    vibrant: { '--bg': '#f0f4ff', '--text': '#1a1a2e', '--accent': '#6366f1' },
    dark: { '--bg': '#0f0f0f', '--text': '#e5e5e5', '--accent': '#a3e635' },
    brand: { '--bg': 'var(--brand-bg)', '--text': 'var(--brand-text)', '--accent': 'var(--brand-primary)' }
  };
  
  const colors = colorSchemes[config.colorScheme];
  Object.entries(colors).forEach(([key, value]) => {
    root.style.setProperty(key, value);
  });
  
  // 字型风格
  const fontFamilies = {
    serif: '"Georgia", "Times New Roman", serif',
    sans: '"Inter", "Helvetica Neue", sans-serif',
    mono: '"JetBrains Mono", "Fira Code", monospace',
    display: '"Playfair Display", "Cormorant Garamond", serif'
  };
  root.style.setProperty('--font-family', fontFamilies[config.typography]);
  
  // 信息密度（通过 padding/gap 控制）
  const densityScale = config.density / 3; // 归一化到 1
  root.style.setProperty('--spacing-unit', `${densityScale * 16}px`);
  
  // 持久化
  localStorage.setItem('tweaks-config', JSON.stringify(config));
}

2.5 信息图 / 数据可视化

交付物：印刷级排版，CSS Grid 精准分栏，可导 PDF/PNG/SVG
典型耗时：10 分钟

信息图的核心是排版质量。huashu-design 在这里引入了几个专业排版技巧：

/* 印刷级排版 CSS */
.infographic {
  /* 使用 oklch 色彩空间，更准确的色彩感知 */
  --primary: oklch(45% 0.2 250);
  --secondary: oklch(65% 0.15 200);
  --accent: oklch(70% 0.25 30);
  
  /* CSS Grid 精准分栏 */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-unit);
  
  /* 排印细节 */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* text-wrap: pretty - 避免孤行 */
p, li {
  text-wrap: pretty;
  /* 等价于：避免最后一行只有一个单词 */
}

/* 标题使用 display 字体 */
h1, h2 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* 正文使用 text 字体 */
p {
  font-family: "Source Serif 4", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: oklch(25% 0.02 250);
}

PDF 导出使用 window.print() + 打印样式表，确保矢量输出：

@media print {
  .infographic {
    width: 210mm; /* A4 宽度 */
    height: 297mm;
    margin: 0;
    padding: 15mm;
  }
  
  /* 确保颜色正确打印 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

2.6 设计方向顾问（Fallback 模式）

交付物：5 流派 × 20 种设计哲学，推荐 3 个差异化方向，并行生成 Demo
典型耗时：5 分钟

这是 huashu-design 最有趣的能力之一。当用户的需求模糊到无法着手时，skill 会自动进入 Fallback 模式：

5 大设计流派：

1. 极简主义（Minimalism）：留白、单色、几何
2. 新拟物（Neumorphism）：柔和阴影、立体感、单色调
3. 玻璃态（Glassmorphism）：毛玻璃、透明度、模糊
4. 暗黑科技（Dark Tech）：深色背景、霓虹色、网格线
5. 编辑设计（Editorial）：杂志排版、衬线字体、大标题

20 种设计哲学（每个流派 4 种）：

• 极简：留白优先、单色系、几何构成、无装饰
• 新拟物：柔和阴影、内嵌效果、单色立体、触感设计
• 玻璃态：背景模糊、透明层叠、彩色光晕、霜冻效果
• 暗黑科技：霓虹发光、网格背景、数据可视化、终端美学
• 编辑：大标题、分栏排版、图文混排、印刷细节

Fallback 模式的工作流：

用户：「做一个 AI 工具的落地页」

Fallback 触发条件：需求模糊，无法确定风格方向

→ 从 5 流派中选 3 个差异化方向（必须来自不同流派）
→ 每个方向：
   - 代表作品（如：Linear、Stripe、Vercel）
   - 气质关键词（如：「克制、精准、工程美学」）
   - 代表设计师（如：Rasmus Andersson）
   - 并行生成 Demo HTML

→ 展示 3 个 Demo，让用户选择
→ 用户选定后，进入正式设计流程

2.7 五维度专家评审

交付物：雷达图 + Keep/Fix/Quick Wins，可操作修复清单
典型耗时：3 分钟

评审维度：

评审输出格式：

## 设计评审报告

### 雷达图评分
- 哲学一致性：8/10
- 视觉层级：7/10
- 细节执行：6/10
- 功能性：9/10
- 创新性：7/10

### Keep（保留）
- ✅ 配色方案统一，主色调贯穿全页
- ✅ 导航结构清晰，层级分明

### Fix（修复）
- ❌ 正文字号过小（12px），建议 16px
- ❌ 按钮间距不一致，需统一为 8px 倍数

### Quick Wins（快速改进）
- 🚀 将 `font-size: 12px` 改为 `font-size: 1rem`（5 分钟）
- 🚀 添加 `gap: 8px` 到所有 flex 容器（10 分钟）
- 🚀 将 `color: #333` 统一为 CSS 变量（15 分钟）

三、防 AI Slop：设计规则系统

huashu-design 最核心的价值之一，是它内置了一套防 AI Slop 的视觉规则。

3.1 什么是 AI Slop？

AI Slop 是指 AI 生成内容中那些千篇一律、缺乏设计感的视觉模式：

典型 AI Slop 特征：

• 紫色/蓝色渐变背景（background: linear-gradient(135deg, #667eea, #764ba2)）
• emoji 当图标（🚀 ✨ 💡 🎯）
• Inter 字体做 display 标题
• 卡片 + 阴影 + 圆角的无限堆叠
• 「玻璃态」毛玻璃效果滥用
• 所有按钮都是圆角矩形 + 渐变

3.2 huashu-design 的反制规则

## 禁止列表（Anti-patterns）

### 颜色
- ❌ 禁止：`linear-gradient(135deg, #667eea, #764ba2)` 或任何紫蓝渐变
- ❌ 禁止：`#6366f1`（Indigo-500）作为主色，除非品牌色
- ✅ 推荐：oklch 色彩空间，感知均匀
- ✅ 推荐：单色系 + 一个强调色

### 字体
- ❌ 禁止：Inter 作为 display/heading 字体
- ❌ 禁止：所有标题都用 font-weight: 700
- ✅ 推荐：serif 字体做大标题（Playfair Display, Cormorant）
- ✅ 推荐：字重对比（300 正文 vs 700 标题）

### 图标
- ❌ 禁止：emoji 作为功能图标
- ❌ 禁止：Font Awesome 的通用图标集
- ✅ 推荐：SVG 自绘图标，与设计语言一致
- ✅ 推荐：Lucide/Phosphor 等线性图标（需与整体风格匹配）

### 布局
- ❌ 禁止：无限嵌套的卡片 + 阴影
- ❌ 禁止：所有元素都加 border-radius: 12px
- ✅ 推荐：CSS Grid 精准分栏
- ✅ 推荐：留白优先，不要填满每一寸空间

### 动效
- ❌ 禁止：所有元素都加 hover: scale(1.05)
- ❌ 禁止：无意义的 loading 动画
- ✅ 推荐：有意义的状态转换动画
- ✅ 推荐：微交互（subtle feedback）

3.3 oklch 色彩空间的使用

huashu-design 推荐使用 oklch 色彩空间，这是一个相对较新的 CSS 特性，但在设计质量上有显著优势：

/* 传统 HSL：感知不均匀 */
.traditional {
  color: hsl(200, 80%, 50%); /* 蓝色 */
  background: hsl(30, 80%, 50%); /* 橙色 */
  /* 问题：相同 lightness 值，视觉亮度差异很大 */
}

/* oklch：感知均匀 */
.modern {
  color: oklch(60% 0.2 220); /* 蓝色 */
  background: oklch(60% 0.2 60); /* 橙色 */
  /* 优势：相同 lightness 值，视觉亮度真正相同 */
}

/* oklch 的三个参数 */
/* L: 亮度 (0-1)，感知线性 */
/* C: 色度/饱和度 (0-0.4)，0 是灰色 */
/* H: 色相 (0-360)，与 HSL 的 H 类似 */

/* 实用示例：生成一套和谐的配色 */
:root {
  --primary: oklch(45% 0.2 250);    /* 深蓝 */
  --primary-light: oklch(75% 0.15 250); /* 浅蓝 */
  --accent: oklch(65% 0.25 30);     /* 橙色强调 */
  --text: oklch(20% 0.02 250);      /* 近黑 */
  --bg: oklch(98% 0.01 250);        /* 近白 */
}

四、品牌资产协议：最硬的一段规则

品牌资产协议是 huashu-design 中最严格的部分，它解决了一个常见问题：AI 会从记忆中猜测品牌色，而不是从官方资源获取。

4.1 五步强制流程

步骤 1：问
  → 用户有 brand guidelines 吗？
  → 如果有，直接使用

步骤 2：搜官方品牌页
  → 尝试 <brand>.com/brand
  → 尝试 brand.<brand>.com
  → 尝试 <brand>.com/press

步骤 3：下载资产（三条兜底）
  → 优先：下载 SVG logo 文件
  → 备选：获取官网 HTML 全文
  → 最后：产品截图取色

步骤 4：grep 提取色值
  → 从资产中提取所有 #xxxxxx 格式的颜色
  → 按出现频率排序
  → 过滤掉黑色（#000000）和白色（#ffffff）
  → 过滤掉灰色（R≈G≈B 的颜色）

步骤 5：固化 spec
  → 写 brand-spec.md
  → 定义 CSS 变量
  → 所有 HTML 引用 var(--brand-*)

4.2 为什么不能从记忆猜？

这是一个很好的问题。AI 模型在训练时见过大量品牌资料，理论上应该知道 Stripe 的品牌色是 #635BFF。

但问题在于：

1. 品牌色会更新：Stripe 在 2023 年更新了品牌色，从 #6772E5 改为 #635BFF
2. 记忆不准确：AI 可能混淆相似品牌的颜色
3. 变体太多：品牌通常有主色、辅色、深色版、浅色版等多个变体

实际测试数据（来自 README）：

A/B 测试（v1 vs v2，各跑 6 agent）：v2 的稳定性方差比 v1 低 5 倍。

v1 是「从记忆猜品牌色」，v2 是「强制执行品牌资产协议」。方差低 5 倍意味着：v2 的输出质量更稳定，不会出现「有时候对，有时候错」的情况。

4.3 实现细节

# 步骤 3：下载资产的实现
# 优先：SVG logo
curl -s "https://stripe.com/brand/stripe-logo.svg" -o stripe-logo.svg

# 备选：官网 HTML
curl -s "https://stripe.com/brand" -o stripe-brand.html

# 步骤 4：grep 提取色值
grep -oE '#[0-9a-fA-F]{6}' stripe-brand.html | \
  sort | uniq -c | sort -rn | \
  head -20

# 输出示例：
#   15 #635BFF  ← 主色（出现最多）
#    8 #0A2540  ← 深色背景
#    6 #00D4FF  ← 强调色
#    4 #F6F9FC  ← 浅色背景

五、Junior Designer 工作流：AI 的「谦逊模式」

这是 huashu-design 中最有工程哲学意味的部分。

5.1 传统 AI 的问题：「闷头做大招」

传统的 AI 设计工具有一个共同问题：接到需求就开始做，做完了才展示。

这导致：

• 如果理解错了需求，整个工作白费
• 用户等待时间长，但结果可能不满意
• 迭代成本高

5.2 Junior Designer 工作流

huashu-design 引入了一个「Junior Designer 工作流」，模拟真实设计师的工作方式：

阶段 1：问问题清单
  → 在开始设计之前，列出所有不确定的点
  → 例如：「目标用户是谁？」「主要 CTA 是什么？」「有品牌资产吗？」

阶段 2：写假设和占位符
  → 对于没有答案的问题，写下假设
  → 例如：「假设目标用户是开发者，使用深色主题」
  → 用占位符标记需要确认的内容

阶段 3：尽早 show
  → 不要等到「完美」才展示
  → 先展示骨架/线框，确认方向
  → 「理解错了早改比晚改便宜 100 倍」

阶段 4：Playwright 验收
  → 设计完成后，自动运行点击测试
  → 确保所有交互逻辑正确
  → 生成测试报告

5.3 为什么这很重要？

这个工作流背后有一个深刻的洞察：AI 的错误成本和人类不同。

人类设计师做错了，可以在 Figma 里快速修改。但 AI agent 做错了，需要重新生成整个页面，成本更高。

所以，提前确认方向比事后修改更经济。

六、实战：用 huashu-design 做一个产品落地页

让我们通过一个完整的例子，展示 huashu-design 的实际工作流。

6.1 安装

# 安装 huashu-design
npx skills add alchaincyf/huashu-design

# 验证安装
ls ~/.claude/skills/
# 应该看到 huashu-design 目录

6.2 启动 Claude Code

claude

6.3 发起设计请求

用户：做一个 AI 代码审查工具的落地页，产品名叫 CodeLens

Claude Code（huashu-design 激活）：

在开始之前，我需要确认几个问题：

1. 目标用户：个人开发者还是企业团队？
2. 主要 CTA：注册试用、查看 Demo 还是联系销售？
3. 有品牌资产吗？（logo、品牌色）
4. 竞品参考：有没有你喜欢的设计风格？

如果没有明确答案，我会推荐 3 个设计方向供你选择。

6.4 选择设计方向

用户：目标用户是企业团队，CTA 是「申请 Demo」，没有品牌资产，帮我推荐方向

Claude Code：

我推荐以下 3 个方向（来自不同流派）：

方向 A：工程极简（Minimalism）
- 代表作：Linear、Vercel
- 气质：克制、精准、工程美学
- 配色：黑白 + 单一强调色
- 字体：Geist Mono + Inter

方向 B：暗黑科技（Dark Tech）
- 代表作：Datadog、Grafana
- 气质：专业、数据驱动、技术感
- 配色：深灰背景 + 绿色/蓝色数据色
- 字体：JetBrains Mono + Source Sans

方向 C：编辑设计（Editorial）
- 代表作：Notion、Craft
- 气质：清晰、可读、内容优先
- 配色：米白背景 + 深色文字 + 橙色强调
- 字体：Playfair Display + Source Serif

正在并行生成 3 个 Demo...

6.5 生成的 Demo 代码示例

以方向 A（工程极简）为例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeLens - AI 代码审查</title>
  <style>
    :root {
      --bg: oklch(98% 0.005 250);
      --text: oklch(15% 0.02 250);
      --accent: oklch(45% 0.2 250);
      --muted: oklch(60% 0.01 250);
      --border: oklch(90% 0.01 250);
      
      --font-display: "Geist Mono", monospace;
      --font-body: "Inter", sans-serif;
      
      --spacing: 8px;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    
    /* 导航 */
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: calc(var(--spacing) * 3) calc(var(--spacing) * 8);
      border-bottom: 1px solid var(--border);
    }
    
    .logo {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    
    .nav-links {
      display: flex;
      gap: calc(var(--spacing) * 4);
      list-style: none;
    }
    
    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.15s;
    }
    
    .nav-links a:hover {
      color: var(--text);
    }
    
    .cta-button {
      background: var(--text);
      color: var(--bg);
      border: none;
      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
      font-family: var(--font-body);
      font-size: 0.9rem;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    
    .cta-button:hover {
      opacity: 0.8;
    }
    
    /* Hero */
    .hero {
      max-width: 800px;
      margin: 0 auto;
      padding: calc(var(--spacing) * 16) calc(var(--spacing) * 8);
      text-align: center;
    }
    
    .hero-badge {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
      margin-bottom: calc(var(--spacing) * 4);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    
    h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: calc(var(--spacing) * 3);
    }
    
    .hero-desc {
      font-size: 1.1rem;
      color: var(--muted);
      max-width: 500px;
      margin: 0 auto calc(var(--spacing) * 6);
      text-wrap: pretty;
    }
    
    /* 代码展示区 */
    .code-demo {
      background: oklch(12% 0.02 250);
      border: 1px solid oklch(25% 0.02 250);
      padding: calc(var(--spacing) * 4);
      text-align: left;
      margin-top: calc(var(--spacing) * 8);
      font-family: var(--font-display);
      font-size: 0.85rem;
      line-height: 1.8;
    }
    
    .code-line {
      display: flex;
      gap: calc(var(--spacing) * 2);
    }
    
    .line-number {
      color: oklch(40% 0.01 250);
      user-select: none;
      min-width: 2ch;
      text-align: right;
    }
    
    .code-content {
      color: oklch(85% 0.02 250);
    }
    
    .code-comment {
      color: oklch(55% 0.05 150); /* 绿色注释 */
    }
    
    .code-keyword {
      color: oklch(70% 0.15 280); /* 紫色关键字 */
    }
    
    .code-string {
      color: oklch(75% 0.15 60); /* 橙色字符串 */
    }
    
    /* AI 审查标注 */
    .review-annotation {
      position: relative;
      background: oklch(45% 0.2 250 / 0.1);
      border-left: 2px solid var(--accent);
    }
    
    .annotation-tooltip {
      position: absolute;
      right: calc(var(--spacing) * 2);
      top: 50%;
      transform: translateY(-50%);
      background: var(--accent);
      color: white;
      font-size: 0.7rem;
      padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <nav>
    <div class="logo">CodeLens</div>
    <ul class="nav-links">
      <li><a href="#">功能</a></li>
      <li><a href="#">定价</a></li>
      <li><a href="#">文档</a></li>
    </ul>
    <button class="cta-button">申请 Demo</button>
  </nav>
  
  <section class="hero">
    <div class="hero-badge">AI-Powered Code Review</div>
    <h1>让每一行代码<br>都经过专家审查</h1>
    <p class="hero-desc">
      CodeLens 在 PR 合并前自动发现安全漏洞、性能问题和代码异味，
      平均节省团队 40% 的 Code Review 时间。
    </p>
    <button class="cta-button" style="font-size: 1rem; padding: 16px 32px;">
      申请 Demo →
    </button>
    
    <div class="code-demo">
      <div class="code-line">
        <span class="line-number">1</span>
        <span class="code-content">
          <span class="code-keyword">async function</span> 
          <span style="color: oklch(75% 0.15 200)">getUserData</span>(userId) {
        </span>
      </div>
      <div class="code-line review-annotation">
        <span class="line-number">2</span>
        <span class="code-content">
          &nbsp;&nbsp;<span class="code-keyword">const</span> query = 
          <span class="code-string">`SELECT * FROM users WHERE id = ${userId}`</span>
        </span>
        <div class="annotation-tooltip">⚠ SQL 注入风险</div>
      </div>
      <div class="code-line">
        <span class="line-number">3</span>
        <span class="code-content code-comment">
          &nbsp;&nbsp;<span class="code-comment">// CodeLens 建议：使用参数化查询</span>
        </span>
      </div>
      <div class="code-line">
        <span class="line-number">4</span>
        <span class="code-content">
          &nbsp;&nbsp;<span class="code-keyword">return</span> db.query(query)
        </span>
      </div>
      <div class="code-line">
        <span class="line-number">5</span>
        <span class="code-content">}</span>
      </div>
    </div>
  </section>
</body>
</html>

6.7 Playwright 验收测试

// huashu-design 自动生成的验收测试
const { chromium } = require('playwright');

async function runAcceptanceTests() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('file:///path/to/codelens-landing.html');
  
  // 测试 1：页面标题正确
  const title = await page.title();
  console.assert(title === 'CodeLens - AI 代码审查', '标题测试失败');
  
  // 测试 2：CTA 按钮存在
  const ctaButton = await page.$('.cta-button');
  console.assert(ctaButton !== null, 'CTA 按钮不存在');
  
  // 测试 3：代码演示区域可见
  const codeDemo = await page.$('.code-demo');
  const isVisible = await codeDemo.isVisible();
  console.assert(isVisible, '代码演示区域不可见');
  
  // 测试 4：审查标注存在
  const annotation = await page.$('.review-annotation');
  console.assert(annotation !== null, '审查标注不存在');
  
  console.log('✅ 所有验收测试通过');
  await browser.close();
}

runAcceptanceTests();

七、性能优化：让 skill 更快、更稳定

7.1 并行生成的优化

huashu-design 的 Fallback 模式会并行生成 3 个 Demo。在 Claude Code 中，这通过多个 Task 工具调用实现：

# Claude Code 内部执行（伪代码）
parallel_tasks = [
  Task("生成方向 A Demo", generate_demo_a),
  Task("生成方向 B Demo", generate_demo_b),
  Task("生成方向 C Demo", generate_demo_c),
]

results = await asyncio.gather(*parallel_tasks)

并行生成的优势：

• 3 个 Demo 的总时间 ≈ 1 个 Demo 的时间
• 用户可以同时看到 3 个方向，做出更好的选择

7.2 单文件输出的优势

huashu-design 的所有交付物都是单文件 HTML，这是一个重要的设计决策：

优势：

• 无需构建工具（Webpack、Vite）
• 无需 CDN 或外部依赖
• 可以直接用浏览器打开
• 便于分享（发一个文件就行）
• 便于 Playwright 测试

实现方式：

• CSS 内联在 <style> 标签中
• JavaScript 内联在 <script> 标签中
• 图片使用 Base64 编码或外部 URL
• 字体使用 Google Fonts CDN（可选）

7.3 稳定性优化

前面提到，v2（品牌资产协议）的稳定性方差比 v1 低 5 倍。这背后有几个工程原则：

1. 确定性优于随机性：从官方资源获取品牌色，而不是从模型记忆中猜测
2. 约束优于自由：明确的禁止列表（Anti-patterns）减少了随机性
3. 验收测试：Playwright 测试确保交互逻辑正确，而不是靠肉眼检查

八、生态与未来：Skill 经济的崛起

8.1 Skill 生态的现状

2026 年，随着 Claude Code、Cursor、Codex 等工具的普及，一个 Skill 生态正在快速形成：

• skills.sh：Skill 的包管理平台，类似 npm
• npx skills add：一行命令安装 Skill
• Agent-agnostic：Skill 可以在任何支持 Markdown 的 agent 上运行

huashu-design 的成功（7 天 6700+ Stars）证明了这个生态的潜力。

8.2 Skill 的商业模式

目前 huashu-design 是免费开源的（Personal Use Only 许可证）。但 Skill 生态的商业模式正在探索中：

• 订阅制：付费解锁高级 Skill
• 按使用付费：每次调用收费
• 企业授权：团队/企业版本

8.3 技术趋势：从 GUI 到对话

huashu-design 代表了一个更大的趋势：工具的形态正在从 GUI 向对话迁移。

传统设计工具（Figma、Sketch）需要用户学习复杂的 GUI 操作。而 huashu-design 只需要用户说话：

「做一个 AI 工具的落地页，工程极简风格，主色用深蓝，CTA 是申请 Demo」

这降低了设计的门槛，让更多人（特别是程序员）能够快速产出高质量的设计。

8.4 局限性与挑战

huashu-design 也有明显的局限性：

1. 不是 100 分：作者自己说是「80 分的 skill」，复杂的设计需求仍然需要专业设计师
2. 依赖 AI 模型：质量受限于底层 AI 模型的能力
3. 单文件限制：复杂的多页面应用不适合单文件输出
4. 动画复杂度：Stage + Sprite 引擎适合简单动画，复杂的 3D 动画仍然需要专业工具

九、总结：一个 Markdown 文件改变了什么

huashu-design 的成功，表面上是一个 GitHub 项目的爆红，但背后有更深层的意义：

它证明了 Skill 的价值：一个精心设计的 Markdown 文件，可以显著提升 AI agent 的能力上限。

它定义了 AI 设计的新标准：通过明确的规则（防 AI Slop）和工作流（Junior Designer），让 AI 设计从「还行」变成「像大厂做的」。

它开创了一种新的工作方式：不需要打开 Figma，不需要学习设计工具，只需要在终端里说话，就能得到一份能交付的设计。

对于程序员来说，这是一个好消息：设计的门槛，正在被 AI 降低。

对于设计师来说，这也是一个信号：AI 不会取代设计师，但会取代不会用 AI 的设计师。

附录：快速上手指南

安装

# 安装 huashu-design
npx skills add alchaincyf/huashu-design

# 或者手动下载
git clone https://github.com/alchaincyf/huashu-design
cp huashu-design/DESIGN.md ~/.claude/skills/

常用 Prompt 模板

# 交互原型
「做一个 [产品名] 的 iOS App 原型，包含 [屏幕列表]，[风格描述]」

# 落地页
「做一个 [产品名] 的落地页，目标用户是 [用户群]，主要 CTA 是 [行动]」

# 幻灯片
「做一个关于 [主题] 的演讲 PPT，[页数] 页，[风格描述]，导出 PPTX」

# 动画
「做一个 [内容] 的 60 秒动画，[风格描述]，导出 MP4」

# 信息图
「把 [数据/内容] 做成一张信息图，[风格描述]，导出 PDF」

# 设计评审
「对这个设计做一个 5 维度评审，给出 Keep/Fix/Quick Wins 清单」

项目地址

• GitHub：https://github.com/alchaincyf/huashu-design
• 安装：npx skills add alchaincyf/huashu-design
• Stars：6700+（2026-04-26）
• License：Personal Use Only

本文基于 huashu-design v2.0 版本，项目仍在快速迭代中，具体 API 和功能以最新 README 为准。