关于 theme-factory
theme-factory 是用于演示文稿及其他制品的主题样式技能,提供配色与字体搭配,并在用户选择后应用。主题不合适时,也可根据需求创建自定义主题。
主要功能
- 01展示 10 种预设主题
- 02提供色板与字体搭配
- 03按选择统一应用样式
- 04创建并供用户审核自定义主题
- 05为构建流水线提供 DESIGN.md 规格
适用场景
- 01为演示文稿统一配色和字体
- 02为文档或报告应用所选主题
- 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.mdbotanical-garden.mddesert-rose.mdforest-canopy.mdgolden-hour.mdmidnight-galaxy.mdmodern-minimalist.mdocean-depths.mdsunset-boulevard.mdtech-innovation.mdthemes/arctic-frost.mdbotanical-garden.mddesert-rose.mdforest-canopy.mdgolden-hour.mdmidnight-galaxy.mdmodern-minimalist.mdocean-depths.mdsunset-boulevard.mdtech-innovation.md详细介绍
主题工厂技能
此技能提供精心挑选的专业字体和配色主题,每种主题都搭配了经过仔细选择的调色板和字体。选定主题后,即可将其应用于任何作品。
用途
使用此技能可为演示文稿统一应用专业样式。每种主题都包含:
- 一套协调的配色方案及其十六进制代码
- 适用于标题和正文的互补字体搭配
- 独特的视觉风格,适合不同场景和受众
使用说明
要为演示文稿或其他作品应用样式:
- 展示主题预览:展示
theme-showcase.pdf文件,让用户直观查看所有可用主题。不要对其进行任何修改;只需展示文件供用户查看。 - 询问用户的选择:询问要将哪种主题应用于演示文稿
- 等待用户选择:明确确认所选主题
- 应用主题:选定主题后,将该主题的颜色和字体应用于演示文稿/作品
可用主题
以下 10 种主题均可在 theme-showcase.pdf 中预览:
- Ocean Depths - 专业而沉静的海洋主题
- Sunset Boulevard - 温暖鲜明的日落色彩
- Forest Canopy - 自然而沉稳的大地色调
- Modern Minimalist - 简洁现代的灰度风格
- Golden Hour - 浓郁温暖的秋日配色
- Arctic Frost - 清冷明快、灵感源自冬日的主题
- Desert Rose - 柔和雅致的灰粉色调
- Tech Innovation - 大胆现代的科技美学
- Botanical Garden - 清新自然的花园配色
- Midnight Galaxy - 戏剧感十足的深邃宇宙色调
主题详情
每种主题都在 themes/ 目录中定义,包含完整规范,例如:
- 协调的配色方案及其十六进制代码
- 适用于标题和正文的互补字体搭配
- 独特的视觉风格,适合不同场景和受众
应用流程
选定主题后:
- 从
themes/目录中读取对应的主题文件 - 在整个演示文稿中统一应用指定的颜色和字体
- 确保对比度适当且易于阅读
- 在所有幻灯片中保持主题的视觉风格
创建自定义主题
如果现有主题都不适用于某个作品,可以创建自定义主题。根据提供的信息,生成一种与上述主题风格相近的新主题。为主题取一个类似的名称,体现字体和颜色组合所代表的风格。根据提供的基本描述选择合适的颜色和字体。生成主题后,展示给用户审阅和确认,然后按上述说明应用主题。
扩展主题(DESIGN.md 格式)
对于使用 DESIGN.md 文件的构建流水线(website-rebuild、local-business-rebuild、azerbaijan-website-build),design-md/ 目录中提供了每种主题的扩展版本。这些版本包含完整的 9 个部分规范:
- 完整的配色方案及语义角色(不只是 4 种颜色)
- 字体排版层级表,包含字号、字重、行高和字间距
- 组件样式(按钮及其状态、卡片、输入框、导航)
- 阴影/层级系统及精确的 CSS 值
- 包含间距尺度的布局原则
- 针对该主题的注意事项和禁忌
- 响应式行为和断点
- 包含精确 CSS 值的 Agent 提示词示例
在构建流水线中使用
- 按常规方式展示主题预览
- 用户选定主题后,从
design-md/[theme-name].md中读取 DESIGN.md 版本 - 将其内容复制到项目根目录,命名为
DESIGN.md - 构建流水线会在代码生成过程中读取该文件
用于非构建类作品
对于幻灯片、文档和报告,请继续使用 themes/ 中的简单主题文件。简单格式足以为作品设置样式,也能保持轻量。
评论
支持 Markdown