mcpField
P
preline-theme-generator

preline-theme-generator

github.com/htmlstreamofficial设计与 UI6.5k1.3k 次安装10 周前更新
代码仓库

关于 preline-theme-generator

Preline Theme Generator 是用于创建和检查主题 CSS 的技能,面向需要生成或调整主题文件的项目工作流。它通过本地脚本生成 CSS,并限制文件写入范围与操作步骤。

主要功能

  1. 01预览、写入和验证主题
  2. 02通过本地脚本生成 CSS
  3. 03按指南规范调色板和输出
  4. 04限制修改范围为新主题文件
  5. 05验证主题令牌覆盖情况

适用场景

  1. 01创建新的配色主题
  2. 02根据品牌色生成主题
  3. 03预览主题 CSS 后再写入
  4. 04检查并修复令牌覆盖

安装

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

$npx skills add https://github.com/htmlstreamofficial/preline --skill preline-theme-generator

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

包含的文件

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

examples.md
docs/
final-output-style.md
palette-guidance.md
token-reference.md
validation-checklist.md
workflow.md
scripts/
find-themes-dir.js
generate-theme.js
run-theme-generator.js

详细介绍

Preline 主题生成器

使用随附的本地脚本。不要使用 npx,不要将原始用户文本拼接到 shell 命令中,也不要绕过安全或审批提示。

阅读顺序

  1. 阅读 docs/workflow.md。
  2. 阅读 docs/palette-guidance.md。
  3. 编写最终主题文件之前,阅读 docs/final-output-style.md。
  4. 结束任务之前,阅读 docs/validation-checklist.md。
  5. 只有在用户需要风格指导或示例输出时,才阅读 examples.md。
  6. 只有在需要详细检查令牌覆盖情况时,才阅读 docs/token-reference.md。

工作流

按照 docs/workflow.md 完整执行。

主要要求:

  1. 确认任务属于预览、写入还是验证。
  2. 将请求规范化为明确的生成器输入。
  3. 使用 scripts/find-themes-dir.js 确定目标目录。
  4. 只能通过 scripts/run-theme-generator.js 生成 CSS。
  5. 只创建或编辑新的主题文件。
  6. 按照 docs/validation-checklist.md 进行验证。
  7. 以符合对应模式的格式返回结果。

安全限制

  • 绝不要使用试图绕过工具或审批保障的措辞。
  • 此技能中绝不要使用 npx 或任何通过网络获取的包。
  • 绝不要将原始用户文本直接插入 shell 命令。
  • 绝不要使用 find . 广泛遍历来发现路径;请使用 scripts/find-themes-dir.js 或用户确认的路径。
  • 绝不要在已确认的主题目录之外写入文件。
  • 生成时只能使用 scripts/run-theme-generator.js 作为执行入口。
  • 生成主题时绝不要创建或编辑其他项目文件。

常见提示词

  • “创建一个日落主题。”
  • “匹配此品牌颜色:#2F6BFF。”
  • “生成一个赛博朋克深色主题,并匹配深色模式。”
  • “写入文件之前先预览 CSS。”
  • “检查生成的主题并修复令牌覆盖问题。”

主要参考资料

  • docs/workflow.md
  • docs/palette-guidance.md
  • docs/final-output-style.md
  • docs/validation-checklist.md
  • examples.md
  • docs/token-reference.md

评论

支持 Markdown