创意设计类 Skills 详解

探索 Anthropic 官方提供的创意设计工具，让 AI 成为你的设计伙伴

本章概览

本章深入解析 5 个创意设计类 Skills：

Skill	用途	输出格式
algorithmic-art	生成式艺术创作	HTML (p5.js)
canvas-design	静态视觉设计	PNG / PDF
frontend-design	高质量前端界面	HTML/React/Vue
slack-gif-creator	Slack 动图制作	GIF
theme-factory	主题配色方案	配色 + 字体

1. Algorithmic Art（算法艺术）

1.1 概述

通俗比喻：这不是让 AI 画一幅画，而是让 AI 写一个"会自己画画的程序"。每次运行，相同的种子产生相同的艺术品；不同的种子产生无限变化。

yaml

name: algorithmic-art
description: Creating algorithmic art using p5.js with seeded randomness
and interactive parameter exploration. Use this when users request creating
art using code, generative art, algorithmic art, flow fields, or particle systems.

1.2 核心概念

算法哲学（Algorithmic Philosophy）

这是 Skill 最独特的设计——不是直接生成艺术，而是先定义一个"美学运动宣言"：

markdown

**命名运动** (1-2 词): "有机湍流" / "量子谐波" / "递归低语"

**阐述哲学** (4-6 段落):
- 计算过程与数学关系
- 噪声函数与随机模式
- 粒子行为与场动力学
- 时间演化与系统状态
- 参数变化与涌现复杂性

示例哲学

名称	哲学	算法表达
有机湍流	被自然法则约束的混沌	分层 Perlin 噪声驱动的流场
量子谐波	离散实体的波浪干涉	网格粒子 + 相位干涉
递归低语	有限空间中的无限深度	L-系统 + 黄金比例分支
场动力学	可见的隐形力量	向量场 + 粒子轨迹
随机结晶	随机过程的有序结构	Voronoi 镶嵌 + 弛豫算法

1.3 技术实现

种子随机性（Art Blocks 模式）

javascript

// 始终使用种子确保可重现性
let seed = 12345;
randomSeed(seed);
noiseSeed(seed);

// 相同种子 = 相同输出
// 不同种子 = 无限变化

参数结构

javascript

let params = {
  seed: 12345,           // 始终包含种子
  // 数量参数
  particleCount: 1000,
  // 尺度参数
  noiseScale: 0.01,
  speed: 2,
  // 概率参数
  spawnProbability: 0.1,
  // 阈值参数
  velocityThreshold: 5,
};

输出格式

单一自包含 HTML 文件：

html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>/* 内联样式 */</style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 种子控制：上一个/下一个/随机/跳转 -->
    <!-- 参数滑块 -->
    <!-- 操作按钮：重新生成/重置/下载 -->
  </div>
  <script>
    // 所有 p5.js 代码内联
    // 参数对象、类、函数
    // setup() 和 draw()
  </script>
</body>
</html>

1.4 工作流程

mermaid

graph LR
    A[用户请求] --> B[创建算法哲学]
    B --> C[推导概念种子]
    C --> D[读取模板 viewer.html]
    D --> E[实现 p5.js 算法]
    E --> F[设计参数控制]
    F --> G[输出交互式 HTML]

1.5 关键要点

哲学先于代码：先定义美学方向，再实现算法
种子可重现：相同种子必须产生相同输出
交互式探索：用户可调节参数、浏览不同种子
品质标准：作品应看起来像经过无数次迭代打磨

2. Canvas Design（画布设计）

2.1 概述

与 algorithmic-art 的动态生成不同，canvas-design 创建静态视觉艺术作品。

yaml

name: canvas-design
description: Create beautiful visual art in .png and .pdf documents
using design philosophy. Use when the user asks to create a poster,
piece of art, design, or other static piece.

2.2 设计哲学方法

同样采用"先哲学后创作"的两步流程：

步骤 1：创建视觉哲学

markdown

**命名运动** (1-2 词): "野兽派欢乐" / "色彩沉默" / "新陈代谢梦境"

**阐述哲学**:
- 空间与形式
- 色彩与材质
- 尺度与节奏
- 构图与平衡
- 视觉层次

示例哲学

名称	哲学	视觉表达
混凝土诗歌	通过纪念性形式沟通	巨大色块、雕塑般的字体、空间张力
色彩语言	色彩作为主要信息系统	几何精确、色彩区域传递意义
模拟冥想	通过纹理和呼吸空间的视觉沉思	纸张颗粒、墨迹渗透、大量负空间
有机系统	自然聚类和模块化生长模式	圆润形式、有机排列、自然色彩

2.3 创作原则

文字使用

核心原则：文字是稀少的、必要的、作为视觉元素融入

✗ 避免：段落、解释性文字、过多标签
✓ 追求：短语、单词、融入设计的字体

品质要求

markdown

**关键**：创造看起来像花费无数小时的作品

- 构图、间距、色彩选择——一切都要体现专家级工艺
- 没有重叠，格式完美，每个细节都精准
- 可以展示给人们证明专业能力
- 博物馆或杂志级别的品质

2.4 技术实现

使用 Python 的图像处理能力：

python

# 核心依赖
from PIL import Image, ImageDraw, ImageFont
# 或使用 reportlab 生成 PDF
from reportlab.lib.pagesizes import letter
from reportlab.pdfgen import canvas

字体使用

Skill 提供了 ./canvas-fonts 目录，包含可用字体。要点：

使用不同字体
字体本身成为艺术的一部分
如果艺术是抽象的，将字体带入画布，而非数字排版

2.5 输出格式

单页 PDF：默认输出
单页 PNG：替代格式
多页 PDF：如用户请求，创建如同咖啡桌书的多页艺术品

3. Frontend Design（前端设计）

3.1 概述

这个 Skill 的核心目标是避免"AI 风格"——那种一眼就能认出是 AI 生成的通用设计。

yaml

name: frontend-design
description: Create distinctive, production-grade frontend interfaces
with high design quality. Use this skill when the user asks to build
web components, pages, artifacts, posters, or applications.
Generates creative, polished code and UI design that avoids generic AI aesthetics.

3.2 设计思考框架

在编码前，必须回答：

问题	考虑点
目的	这个界面解决什么问题？谁使用它？
调性	极简？复古未来？奢华？玩具感？编辑风？粗野主义？
约束	框架、性能、无障碍访问
差异化	什么让它令人难忘？用户会记住什么？

3.3 美学指南

必须避免的"AI 风格"

❌ 过度使用的字体：Inter, Roboto, Arial, 系统字体
❌ 陈词滥调的配色：紫色渐变配白色背景
❌ 可预测的布局：过度居中、均匀圆角
❌ 缺乏个性的组件

应该追求的

领域	指南
字体	选择美丽、独特、有趣的字体；配对特色展示字体和精致正文字体
色彩	承诺统一的美学；主色配锐利强调色
动效	CSS-only 优先；关注高影响时刻：页面加载的交错展示
空间	意外的布局、不对称、重叠、对角流、打破网格
背景	创造氛围和深度：渐变网格、噪点纹理、几何图案

3.4 示例配色方案

css

/* 1. 经典蓝 */
--dark: #1C2833;
--slate: #2E4053;
--silver: #AAB7B8;
--off-white: #F4F6F6;

/* 2. 青橙珊瑚 */
--teal: #5EA8A7;
--deep-teal: #277884;
--coral: #FE4447;
--white: #FFFFFF;

/* 3. 午夜金 */
--gold: #BF9A4A;
--black: #000000;
--cream: #F4F6F6;

/* 4. 复古彩虹 */
--purple: #722880;
--pink: #D72D51;
--orange: #EB5C18;
--amber: #F08800;
--gold: #DEB600;

3.5 技术栈

支持多种前端技术：

HTML/CSS/JS
├── 原生 HTML + CSS + JavaScript
├── React
├── Vue
└── 其他框架

3.6 核心原则

markdown

记住：Claude 能够创造非凡的创意作品。
不要保守，展示当跳出框架思考、
全力投入独特愿景时能真正创造什么。

4. Slack GIF Creator（Slack 动图创建器）

4.1 概述

专门为 Slack 优化的 GIF 创建工具，提供约束条件、验证工具和动画概念。

yaml

name: slack-gif-creator
description: Knowledge and utilities for creating animated GIFs optimized
for Slack. Provides constraints, validation tools, and animation concepts.
Use when users request animated GIFs for Slack.

4.2 Slack 要求

类型	尺寸	FPS	颜色数	时长
Emoji GIF	128×128	10-30	48-128	<3秒
Message GIF	480×480	10-30	48-128	无限制

4.3 核心工作流

python

from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw

# 1. 创建 builder
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. 生成帧
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)
    # 使用 PIL 图元绘制动画
    builder.add_frame(frame)

# 3. 保存并优化
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

4.4 可用工具

工具	用途	示例
GIFBuilder	组装帧并优化	`builder.save()`
validators	检查是否符合 Slack 要求	`validate_gif()`, `is_slack_ready()`
easing	平滑运动函数	`interpolate(start, end, t, 'ease_out')`
frame_composer	帧辅助函数	`create_gradient_background()`

4.5 动画概念

效果	实现方式
抖动/振动	`math.sin()` 或 `math.cos()` + 小随机变化
脉冲/心跳	`math.sin(t * freq * 2 * math.pi)` 缩放尺寸
弹跳	`interpolate()` + `easing='bounce_out'`
旋转	`image.rotate(angle, resample=Image.BICUBIC)`
淡入/淡出	RGBA 图像，调整 alpha 通道
滑动	从屏幕外移动到目标位置
缩放	缩放 + 裁剪中心
爆炸/粒子	粒子 + 随机角度速度 + 重力 + 淡出

4.6 缓动函数

python

from core.easing import interpolate

# 进度从 0.0 到 1.0
t = i / (num_frames - 1)

# 应用缓动
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# 可用缓动：
# linear, ease_in, ease_out, ease_in_out,
# bounce_out, elastic_out, back_out

4.7 图形绘制技巧

python

# 使用较粗的线条
draw.ellipse([x1, y1, x2, y2], outline=(r, g, b), width=3)  # width>=2

# 添加视觉深度
create_gradient_background()  # 渐变背景
# 多层形状（大星星后面画小星星）

# 形状更有趣
# 不只是纯色圆 - 添加高光、环、图案
# 星星可以有光晕（在后面画更大的半透明版本）

# 注意颜色
# 使用鲜艳、互补的颜色
# 添加对比（浅形状上的深轮廓）

5. Theme Factory（主题工厂）

5.1 概述

为各种 Artifact（幻灯片、文档、报告、HTML 页面等）提供主题样式。

yaml

name: theme-factory
description: Toolkit for styling artifacts with a theme. These artifacts
can be slides, docs, reportings, HTML landing pages, etc. There are 10
pre-set themes with colors/fonts that you can apply to any artifact,
or can generate a new theme on-the-fly.

5.2 预设主题

#	主题名	适用场景
1	Ocean Depths	专业、冷静的海洋主题
2	Sunset Boulevard	温暖、活力的日落色彩
3	Forest Canopy	自然、接地的大地色调
4	Modern Minimalist	干净、现代的灰度系列
5	Golden Hour	丰富、温暖的秋季调色板
6	Arctic Frost	清凉、清爽的冬季灵感
7	Desert Rose	柔和、精致的尘土色调
8	Tech Innovation	大胆、现代的科技美学
9	Botanical Garden	清新、有机的花园色彩
10	Midnight Galaxy	戏剧性的宇宙深色调

5.3 使用流程

mermaid

graph LR
    A[显示 theme-showcase.pdf] --> B[用户选择主题]
    B --> C[读取对应主题文件]
    C --> D[应用颜色和字体]
    D --> E[确保对比度和可读性]

5.4 主题结构

每个主题定义在 themes/ 目录：

markdown

# Ocean Depths 主题

## 配色
- 主色：#1A4B6E
- 次色：#2E6B8A
- 强调色：#4FB0C6
- 背景：#F5F9FA

## 字体
- 标题：Poppins Bold
- 正文：Lora Regular

5.5 自定义主题

如果预设主题不适合，可以创建自定义主题：

markdown

## 创建自定义主题

1. 收集用户输入（颜色偏好、风格描述）
2. 生成类似结构的新主题
3. 命名主题以描述其代表的风格
4. 展示主题供审核
5. 按上述流程应用

6. 本章小结

创意类 Skills 对比

Skill	输入	输出	核心技术	特色
algorithmic-art	概念/主题	交互式 HTML	p5.js	种子可重现、参数可调
canvas-design	概念/主题	静态 PNG/PDF	PIL/reportlab	艺术哲学驱动
frontend-design	UI 需求	前端代码	React/Vue/HTML	避免 AI 风格
slack-gif-creator	动画需求	优化的 GIF	PIL/ImageIO	Slack 约束优化
theme-factory	风格需求	配色方案	文本定义	10 预设 + 自定义

共同设计理念

哲学优先：先定义美学方向，再实现
品质第一：作品应达到专业级别
避免通用：每件作品都应独特、有记忆点
工艺精神：细节决定成败

上一章：架构设计

下一章：文档处理类 Skills

创意设计类 Skills 详解 ​

本章概览 ​

1. Algorithmic Art（算法艺术） ​

1.1 概述 ​

1.2 核心概念 ​

算法哲学（Algorithmic Philosophy） ​

示例哲学 ​

1.3 技术实现 ​

种子随机性（Art Blocks 模式） ​

参数结构 ​

输出格式 ​

1.4 工作流程 ​

1.5 关键要点 ​

2. Canvas Design（画布设计） ​

2.1 概述 ​

2.2 设计哲学方法 ​

步骤 1：创建视觉哲学 ​

示例哲学 ​

2.3 创作原则 ​

文字使用 ​

品质要求 ​

2.4 技术实现 ​

字体使用 ​

2.5 输出格式 ​

3. Frontend Design（前端设计） ​

3.1 概述 ​

3.2 设计思考框架 ​

3.3 美学指南 ​

必须避免的"AI 风格" ​

应该追求的 ​

3.4 示例配色方案 ​

3.5 技术栈 ​

3.6 核心原则 ​

4. Slack GIF Creator（Slack 动图创建器） ​

4.1 概述 ​

4.2 Slack 要求 ​

4.3 核心工作流 ​

4.4 可用工具 ​

4.5 动画概念 ​

4.6 缓动函数 ​

4.7 图形绘制技巧 ​

5. Theme Factory（主题工厂） ​

5.1 概述 ​

5.2 预设主题 ​

5.3 使用流程 ​

5.4 主题结构 ​

5.5 自定义主题 ​

6. 本章小结 ​

创意类 Skills 对比 ​

共同设计理念 ​

创意设计类 Skills 详解

本章概览

1. Algorithmic Art（算法艺术）

1.1 概述

1.2 核心概念

算法哲学（Algorithmic Philosophy）

示例哲学

1.3 技术实现

种子随机性（Art Blocks 模式）

参数结构

输出格式

1.4 工作流程

1.5 关键要点

2. Canvas Design（画布设计）

2.1 概述

2.2 设计哲学方法

步骤 1：创建视觉哲学

示例哲学

2.3 创作原则

文字使用

品质要求

2.4 技术实现

字体使用

2.5 输出格式

3. Frontend Design（前端设计）

3.1 概述

3.2 设计思考框架

3.3 美学指南

必须避免的"AI 风格"

应该追求的

3.4 示例配色方案

3.5 技术栈

3.6 核心原则

4. Slack GIF Creator（Slack 动图创建器）

4.1 概述

4.2 Slack 要求

4.3 核心工作流

4.4 可用工具

4.5 动画概念

4.6 缓动函数

4.7 图形绘制技巧

5. Theme Factory（主题工厂）

5.1 概述

5.2 预设主题

5.3 使用流程

5.4 主题结构

5.5 自定义主题

6. 本章小结

创意类 Skills 对比

共同设计理念