SuperAPI AI 工具集

applying-themes

前端与建站

查看项目

更新于 10-16 03:13

技能介绍

用途:当视觉产物需要统一配色与字体系统时使用,适用于幻灯片、报告、HTML 页面、仪表盘、PDF、文档等。核心原则是每个主题都解析为同一组八个语义令牌:base、surface、line、ink、ink-2、ink-3、accent、accent-ink;组件只引用令牌名,绝不直接写十六进制值,这样换主题只需替换一个令牌块。

主要能力:内置十个主题,如 ocean-depths(深色,金融、咨询、基础设施)、sunset-boulevard(浅色,创意、发布、酒店)、forest-canopy(浅色,可持续、手工艺、长文)、modern-minimalist(浅色,文档、作品集、系统)、golden-hour(浅色,评测、美食、回顾)、arctic-frost(浅色,医疗、分析、合规)、desert-rose(浅色,精品、邀请、健康)、tech-innovation(深色,开发工具、AI、变更日志、状态)、botanical-garden(浅色,食品、农业、社区)、midnight-galaxy(深色,发布、娱乐、主题演讲)。每个 themes/<name>.md 含完整调色板与角色、对比度要求、网页字体搭配及 PDF 度量安全回退、缩放比例和误用说明。

使用方式:先展示主题表并让用户明确选择,不要擅自套用;读取 themes/<name>.md 作为事实来源;运行对比度检查器验证,自定义主题必须检查;在产物顶部一次性输出令牌块;组件按令牌名应用;最后检查渲染效果。检查命令示例:source ~/.local/opencode-venv/bin/activate,python3 scripts/check_contrast.py themes/ocean-depths.md,python3 scripts/check_contrast.py themes/*.md,python3 scripts/check_contrast.py --pair "#8a7357" "#fbf5ea"。退出码非零即失败,可作门禁。HTML/CSS 在 :root 输出令牌后仅引用变量;React 导出 theme 对象;Tailwind 映射到 theme.extend.colors;PDF/幻灯片使用主题排版表中的 PDF/幻灯片列,因网页字体常不可用,缺失字体会静默替换并破坏布局。

限制与注意:未验证对比度不得套用主题,4.5:1 不达标即不可用;ink-3 仅用于大号说明文字和元数据,不用于正文;强调色若同时用于大色块和小文字,通常需要两个明度值;不要为“多样性”添加第二个强调色;深色主题下阴影不可见,层级应来自更亮的表面;对比度需在明暗两种模式下分别检查。theme-showcase.pdf 是旧版遗留视觉,颜色和字体已与主题文件不符,不应作为准确预览。自定义主题需命名方向与真实参考、选定色相策略、用着色而非纯灰构建中性色、从强调色低彩度低明度派生 ink、写入 themes/ 并运行检查器,通过后再展示给用户确认。