mcpField
T
theme-factory

theme-factory

github.com/lotfb86设计与 UI1554 次安装28 周前更新
代码仓库

关于 theme-factory

theme-factory 是用于演示文稿及其他制品的主题样式技能,提供配色与字体搭配,并在用户选择后应用。主题不合适时,也可根据需求创建自定义主题。

主要功能

  1. 01展示 10 种预设主题
  2. 02提供色板与字体搭配
  3. 03按选择统一应用样式
  4. 04创建并供用户审核自定义主题
  5. 05为构建流水线提供 DESIGN.md 规格

适用场景

  1. 01为演示文稿统一配色和字体
  2. 02为文档或报告应用所选主题
  3. 03为网站构建流程提供 DESIGN.md

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/lotfb86/web-design-skills --skill theme-factory

安装后在 Claude Code 中输入/theme-factory确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

design-md/
arctic-frost.md
botanical-garden.md
desert-rose.md
forest-canopy.md
golden-hour.md
midnight-galaxy.md
modern-minimalist.md
ocean-depths.md
sunset-boulevard.md
tech-innovation.md
themes/
arctic-frost.md
botanical-garden.md
desert-rose.md
forest-canopy.md
golden-hour.md
midnight-galaxy.md
modern-minimalist.md
ocean-depths.md
sunset-boulevard.md
tech-innovation.md

详细介绍

主题工厂技能

此技能提供精心挑选的专业字体和配色主题,每种主题都搭配了经过仔细选择的调色板和字体。选定主题后,即可将其应用于任何作品。

用途

使用此技能可为演示文稿统一应用专业样式。每种主题都包含:

  • 一套协调的配色方案及其十六进制代码
  • 适用于标题和正文的互补字体搭配
  • 独特的视觉风格,适合不同场景和受众

使用说明

要为演示文稿或其他作品应用样式:

  1. 展示主题预览:展示 theme-showcase.pdf 文件,让用户直观查看所有可用主题。不要对其进行任何修改;只需展示文件供用户查看。
  2. 询问用户的选择:询问要将哪种主题应用于演示文稿
  3. 等待用户选择:明确确认所选主题
  4. 应用主题:选定主题后,将该主题的颜色和字体应用于演示文稿/作品

可用主题

以下 10 种主题均可在 theme-showcase.pdf 中预览:

  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 - 戏剧感十足的深邃宇宙色调

主题详情

每种主题都在 themes/ 目录中定义,包含完整规范,例如:

  • 协调的配色方案及其十六进制代码
  • 适用于标题和正文的互补字体搭配
  • 独特的视觉风格,适合不同场景和受众

应用流程

选定主题后:

  1. 从 themes/ 目录中读取对应的主题文件
  2. 在整个演示文稿中统一应用指定的颜色和字体
  3. 确保对比度适当且易于阅读
  4. 在所有幻灯片中保持主题的视觉风格

创建自定义主题

如果现有主题都不适用于某个作品,可以创建自定义主题。根据提供的信息,生成一种与上述主题风格相近的新主题。为主题取一个类似的名称,体现字体和颜色组合所代表的风格。根据提供的基本描述选择合适的颜色和字体。生成主题后,展示给用户审阅和确认,然后按上述说明应用主题。

扩展主题(DESIGN.md 格式)

对于使用 DESIGN.md 文件的构建流水线(website-rebuild、local-business-rebuild、azerbaijan-website-build),design-md/ 目录中提供了每种主题的扩展版本。这些版本包含完整的 9 个部分规范:

  • 完整的配色方案及语义角色(不只是 4 种颜色)
  • 字体排版层级表,包含字号、字重、行高和字间距
  • 组件样式(按钮及其状态、卡片、输入框、导航)
  • 阴影/层级系统及精确的 CSS 值
  • 包含间距尺度的布局原则
  • 针对该主题的注意事项和禁忌
  • 响应式行为和断点
  • 包含精确 CSS 值的 Agent 提示词示例
在构建流水线中使用
  1. 按常规方式展示主题预览
  2. 用户选定主题后,从 design-md/[theme-name].md 中读取 DESIGN.md 版本
  3. 将其内容复制到项目根目录,命名为 DESIGN.md
  4. 构建流水线会在代码生成过程中读取该文件
用于非构建类作品

对于幻灯片、文档和报告,请继续使用 themes/ 中的简单主题文件。简单格式足以为作品设置样式,也能保持轻量。

评论

支持 Markdown