跳转到内容

Theme Factory:Artifacts 主题配色方案

theme-factory 是为 Artifacts 提供主题样式的 Skill——包含 10 套精心设计的配色+字体方案,并支持按需生成自定义主题。

  • 🎨 10 套预设主题:涵盖 Ocean Depths、Sunset Boulevard、Forest Canopy 等风格
  • 🔤 字体搭配:每套主题包含 Header 和 Body 字体组合
  • 🎨 完整色板:每套主题包含 4 种颜色的协调色板(含 HEX 色值)
  • ✨ 自定义主题:当预设主题不满足需求时,可按描述生成新主题
  • 📋 可视化展示:theme-showcase.pdf 可让用户直观浏览所有主题
  • 🔧 一键应用:选择主题后可直接应用到已有 Artifact

当用户说”给这个 artifact 上色”、“换个主题”、“应用一个配色方案”、“给幻灯片加主题”等时触发。

theme-factory is a Skill for theming artifacts — offering 10 preset color palette + font pairing themes, with the ability to generate custom themes on demand.

  • 🎨 10 preset themes: Ocean Depths, Sunset Boulevard, Forest Canopy, and more
  • 🔤 Font pairing: each theme includes Header and Body font combinations
  • 🎨 Complete color palettes: 4 coordinated colors per theme (with HEX values)
  • ✨ Custom themes: generate new themes on-the-fly when presets don’t fit
  • 📋 Visual showcase: theme-showcase.pdf for intuitive browsing
  • 🔧 One-click apply: apply selected theme to any existing artifact

Triggers when users say “theme this artifact”, “change the theme”, “apply a color scheme”, “theme this slides”, etc.

theme-factory 是一个**“配置驱动型”(Configuration-driven)** Skill——核心行为由 10 个主题 .md 文件定义,SKILL.md 负责描述应用流程。

  • SKILL.md(约 60 行):定义 4 步工作流程:展示 → 询问 → 确认 → 应用
  • theme-showcase.pdf:主题预览文件,供用户可视化地浏览所有主题
  • themes/:10 个 .md 文件,每个定义一套完整的主题方案
  1. 展示主题(Show the theme showcase):显示 theme-showcase.pdf,让用户直观浏览所有 10 个主题
  2. 询问选择(Ask for their choice):询问用户想应用哪个主题
  3. 等待确认(Wait for selection):获得明确的主题确认
  4. 应用主题(Apply the theme):读取对应主题文件,将配色和字体应用到 artifact

当 10 个预设主题都不满足需求时,SKILL.md 支持”按需生成”自定义主题:

  1. 根据用户提供的描述生成新主题(命名 + 色板 + 字体配对)
  2. 预览新主题供用户审核
  3. 确认后应用到 artifact

SKILL.md → themes/*.md(数据)→ artifact(最终输出)

这是一个典型的”数据驱动”模式——主题是数据而非逻辑,更换主题就是更换数据文件。

theme-factory is a “Configuration-driven” Skill — core behavior is defined by 10 theme .md files, while SKILL.md describes the application workflow.

  • SKILL.md (~60 lines): Defines the 4-step workflow: Show → Ask → Confirm → Apply
  • theme-showcase.pdf: Theme preview file for visual browsing of all themes
  • themes/: 10 .md files, each defining a complete theme specification
  1. Show the theme showcase: Display theme-showcase.pdf for visual browsing of all 10 themes
  2. Ask for their choice: Ask the user which theme to apply
  3. Wait for selection: Get explicit theme confirmation
  4. Apply the theme: Read the corresponding theme file, apply colors and fonts to the artifact

When none of the 10 presets fit, SKILL.md supports “generate on-the-fly” custom themes:

  1. Generate a new theme from user description (name + palette + font pairing)
  2. Preview the new theme for user review
  3. Apply to artifact after confirmation

SKILL.md → themes/*.md (data) → artifact (final output)

This is a classic “data-driven” pattern — themes are data not logic, swapping themes means swapping data files.

theme-factory 不包含任何 Python 或 JS 脚本。但它有 10 个主题 .md 文件,扮演了”数据脚本”的角色。

“配置即内容”(Configuration as Content)模式

Section titled ““配置即内容”(Configuration as Content)模式”

这是 theme-factory 最独特的设计模式——用结构化 Markdown 文件替代传统配置文件或脚本,作为数据源。

ocean-depths.md 为例,展示主题文件的结构:

theme-factory contains no Python or JS scripts. But its 10 theme .md files play the role of “data scripts”.

This is theme-factory’s most unique design pattern — using structured Markdown files instead of traditional configuration files or scripts as data sources.

Using ocean-depths.md as an example to show the theme file structure:

themes/ocean-depths.md — 主题数据文件
1 # Ocean Depths 2 3 A professional and calming maritime theme that evokes the serenity of deep ocean waters. 4 5 ## Color Palette 6 7 - **Deep Navy**: `#1a2332` - Primary background color 8 - **Teal**: `#2d8b8b` - Accent color for highlights and emphasis 9 - **Seafoam**: `#a8dadc` - Secondary accent for lighter elements 10 - **Cream**: `#f1faee` - Text and light backgrounds 11 12 ## Typography 13 14 - **Headers**: DejaVu Sans Bold 15 - **Body Text**: DejaVu Sans 16 17 ## Best Used For 18 19 Corporate presentations, financial reports, professional consulting decks, trust-building content.
代码解读
L1 标题 = 主题名称,与文件名一致。命名风格:两个有张力的词组合。"Ocean" 暗示海洋 / 深度,"Depths" 加强沉稳感。 L5 一段简短的描述性句子,建立主题的情绪和语境。让用户立刻感受到主题的气质。 L7 Color Palette 部分:4 种颜色(主背景色、强调色、次要强调色、文字色)。每个颜色有名 + HEX 值 + 用途说明。 L13 Typography 部分:Headers 和 Body Text 各指定一种字体。字体名应匹配可获取的字体(DejaVu Sans 是广泛可用且可靠的字体)。 L16 Best Used For 部分:提示最佳使用场景。帮助 Claude 和用户判断主题是否适合当前上下文。
主题色板基调最佳场景
Ocean Depths深海军蓝、青色、海沫、奶油色企业演示、财务报告
Sunset Boulevard日落暖橙、深红、金色创意展示、广告提案
Forest Canopy森林绿、土褐、苔藓色环保、户外、自然报告
Modern Minimalist黑白灰渐变科技、创业 pitch
Golden Hour琥珀、焦糖、奶油高端品牌、奢侈品
Arctic Frost冰蓝、银白、冷灰冬季主题、科技
Desert Rose灰粉、沙色、哑光红时尚、美容
Tech Innovation深蓝、霓虹绿、电光紫科技产品发布
Botanical Garden叶绿、花红、土黄园艺、食品
Midnight Galaxy深紫、星银、夜空蓝会议、戏剧活动
ThemePalette ToneBest For
Ocean DepthsNavy, teal, seafoam, creamCorporate presentations, financial reports
Sunset BoulevardSunset orange, crimson, goldCreative pitches, advertising proposals
Forest CanopyForest green, earth brown, mossEnvironmental, outdoor, nature reports
Modern MinimalistBlack, white, gray gradientTech, startup pitches
Golden HourAmber, caramel, creamHigh-end brands, luxury
Arctic FrostIce blue, silver, cool grayWinter themes, technology
Desert RoseDusty pink, sand, matte redFashion, beauty
Tech InnovationDeep blue, neon green, electric purpleTech product launches
Botanical GardenLeaf green, flower red, earth yellowGardening, food
Midnight GalaxyDeep purple, star silver, night blueConferences, drama events
特性说明
人类可读Markdown 比 JSON/YAML 更易读、易编辑
Claude 可直接处理无需解析器——Claude 原生理解 Markdown 结构
版本控制友好每个主题是独立文件,diff 清晰可见
扩展简单添加新主题只需创建一个新的 .md 文件
双重用途同一文件既供人类阅读又供 Claude 解析
FeatureDescription
Human-readableMarkdown is easier to read and edit than JSON/YAML
Claude-nativeNo parser needed — Claude natively understands Markdown structure
Version control friendlyEach theme is an independent file, diff is clearly visible
Easy to extendAdding a new theme just means creating a new .md file
Dual-purposeSame file for both human reading and Claude parsing
  1. “配置即内容”模式:用 Markdown 文件替代 JSON/YAML 作为配置格式——更易读、更易编辑、Claude 原生支持
  2. 展示→询问→确认→应用流程:清晰的 4 步用户交互流程,确保用户在每个环节都有知情和控制
  3. 视觉预览 PDF:theme-showcase.pdf 提供了直观的浏览方式,降低了用户的选择成本
  4. 自定义主题弹性的:10 个预设 + 按需生成——覆盖 80% 场景的同时保留灵活性
  5. 10 个主题覆盖完整场景:从企业到创意,从温暖到冷冽,从自然到科技

“如果你想创建其他配置驱动的 Skill(模板库、配色方案、布局预设)…”

  1. 保留”配置即内容”模式:用 Markdown 文件定义你的配置项
  2. 替换主题内容:将颜色/字体替换为你需要的配置字段
  3. 保留展示流程:展示 → 选择 → 确认 → 应用——这是最通用的用户交互模式
  4. 替换 showcase:将 PDF 替换为你的配置的可视化展示方式
  5. 添加验证逻辑:在 SKILL.md 中添加约束规则(如”颜色必须有良好对比度”)

⚠️ 主题文件格式需一致: 所有 10 个主题必须遵循相同的 Markdown 结构——如果格式不一致,Claude 解析会出错

⚠️ 展示 PDF 不可修改: SKILL.md 明确要求”不对 theme-showcase.pdf 做任何修改”——但它容易在迭代中被意外修改

⚠️ 自定义主题标准模糊: SKILL.md 说”生成类似上面的主题”,但没有定义严格的 Schema——可能导致生成的主题格式不一致

⚠️ 字体可用性: 主题中指定的字体可能在用户的系统上不存在——需要在应用时做降级处理

⚠️ 确认步骤容易被跳过: Claude 可能在展示后就立即应用,而不是等待用户确认——需要 SKILL.md 明确约束

  1. “Configuration as Content” Pattern: Markdown files replace JSON/YAML as config format — more readable, more editable, Claude-native
  2. Show → Ask → Confirm → Apply Flow: Clear 4-step user interaction, ensuring informed user control at every stage
  3. Visual Preview PDF: theme-showcase.pdf provides intuitive browsing, reducing user choice cost
  4. Custom Theme Flexibility: 10 presets + on-demand generation — covers 80% of scenarios while maintaining flexibility
  5. 10 Themes Cover Full Spectrum: From corporate to creative, warm to cool, nature to tech

“If you want to create other config-driven Skills (template libraries, color schemes, layout presets)…”

  1. Keep “Configuration as Content”: define your config items with Markdown files
  2. Replace theme content: swap colors/fonts for your required config fields
  3. Keep showcase flow: Show → Choose → Confirm → Apply — the most universal user interaction pattern
  4. Replace showcase: swap PDF for your config’s visual representation
  5. Add validation logic: constraint rules in SKILL.md (e.g., “colors must have good contrast”)

⚠️ Theme file format must be consistent: All 10 themes must follow the same Markdown structure — inconsistent format breaks Claude parsing

⚠️ Showcase PDF must not be modified: SKILL.md explicitly says “do not make any modifications” to theme-showcase.pdf — but it’s easy to accidentally modify during iteration

⚠️ Custom theme standard is vague: SKILL.md says “generate similar to above” but doesn’t define a strict Schema — may lead to inconsistent format custom themes

⚠️ Font availability: Fonts specified in themes may not exist on the user’s system — need fallback handling during application

⚠️ Confirmation step easily skipped: Claude might apply immediately after showing instead of waiting for confirmation — SKILL.md needs explicit constraints

模式说明适用于...
配置即内容用结构化 Markdown 文件替代 JSON/YAML任何以数据配置为主的 skill
展示→询问→确认→应用可视化展示 → 用户选择 → 确认 → 执行任何需要用户选择配置的 skill
预设 + 自定义N 个预设选项 + 按需生成需要"常用选项"+ "灵活定制"的场景
独立主题文件每个主题一个 .md 文件可扩展的配置集合
PatternDescriptionApplies to...
Configuration as ContentStructured Markdown files replace JSON/YAMLAny data-configuration-driven skill
Show → Ask → Confirm → ApplyVisual show → user choice → confirmation → executionAny skill needing user configuration selection
Preset + CustomN presets + on-demand generation"Common options" + "flexible customization" scenarios
Independent Theme FilesOne .md file per themeExtensible configuration collections