为演示、文档、报告和网页建立或套用一套完整主题,包括颜色、字体、间距和组件表面。适合已有内容但缺少统一视觉,或需要为同一内容快速生成不同主题版本。
安装前请审阅 skill 内容:skill 会影响你的 AI 助手行为,仅安装你信任的来源。
不用安装 Node.js。复制后粘贴到本地 Agent 对话框,它会读取官方指南、安装并验收。
npx -y @huohuahub/cli@0.1.1 install artifact-theme-styler --target auto --registry https://huohuahub.com跨平台 CLI 会校验 SHA256,并保护本地修改。旧脚本需要定向安装时,可在下面选择 AI。
旧版脚本仅供人工兼容:它会备份并替换同名目录。请先确认没有需要保留的本地修改;AI 安装协议不会自动调用它。
curl -fsSL "https://huohuahub.com/api/skills/artifact-theme-styler/install" | bash自动检测本机已装的 AI 工具:只有一个直接装,检测到多个会列出让你挑(回车 = 全部)。审阅脚本内容 ↗
powershell -c "irm 'https://huohuahub.com/api/skills/artifact-theme-styler/install.ps1' | iex"用 DeepSeek App、Kimi、豆包这类聊天 AI(没有 agent 端可装)? 可以把内容直接复制成 Prompt 粘贴使用;附带脚本和资料不会安装:
为演示、文档、报告和网页建立或套用一套完整主题,包括颜色、字体、间距和组件表面。
完成任务时重点处理:
最终目标不是堆出一份看似完整的内容,而是交付能够直接使用、继续修改并清楚验收的结果。
如果现有内容结构混乱时先修复层级,再应用主题,先处理前置条件,不要直接假装任务已经完成。
优先收集:
1. 目标受众与使用场景 2. 画布尺寸、数量和输出格式 3. 原始内容与可用素材 4. 品牌规范、风格偏好和禁用项 5. 需要套用主题的文件或页面范围 6. 希望保留的现有元素和可替换资产
信息不必一次问完。先检查用户已经提供的材料,只追问会明显改变结果的问题。
判断内容是正式、温暖、技术、文化还是活动导向。
确定明暗、色温、字体关系、网格和图像处理。
定义颜色、字号、间距、边框、阴影和状态。
先处理标题、正文、卡片、表格、图表和按钮。
为封面、章节、引用和结论保留受控变化。
检查对比度、密度、字体缺失和主题覆盖遗漏。
至少交付以下内容:
所有文件使用能说明内容和版本的名称。若任务包含执行动作,还要记录执行状态、验证结果和可继续处理的材料。
用户有一份数据密集的季度报告,希望改成温暖而可信的阅读体验;使用纸张色背景、深墨正文和少量高亮色统一图表。
合理处理顺序:
1. 读取内容气质 2. 选择主题骨架 3. 生成设计令牌 4. 应用高频组件 5. 处理特殊页面 6. 全局校正
交付时应重点展示主题说明、主题化成品、令牌清单,并说明尚未验证的部分。
火花 Hub 官方内容库首发版本。
解压后把 artifact-theme-styler/ 整个目录放进对应位置即可。
~/.claude/skills/artifact-theme-styler/~/.gemini/skills/artifact-theme-styler/改动后在会话里执行 /skills reload~/.qwen/skills/artifact-theme-styler/重启 CLI 生效~/.iflow/skills/artifact-theme-styler/需在 frontmatter 补 license 字段~/.zcode/skills/artifact-theme-styler/它们同时也读 ~/.claude/skills/ 或 ~/.agents/skills/,解压到那两个目录就顺带覆盖了。
~/.codex/skills/artifact-theme-styler/也读标准目录 ~/.agents/skills/~/.openclaw/skills/artifact-theme-styler/~/.cursor/skills/artifact-theme-styler/~/.copilot/skills/artifact-theme-styler/~/.agents/skills/artifact-theme-styler/Deep Code 读标准目录 ~/.agents/skills/~/.kimi-code/skills/artifact-theme-styler/也读标准目录 ~/.agents/skills/~/.config/opencode/skills/artifact-theme-styler/也读 ~/.claude/skills/ 与 ~/.agents/skills/这两个端只支持项目内目录,家目录探测不到,只能手动放。
.windsurf/skills/artifact-theme-styler/在项目根目录执行.trae/skills/artifact-theme-styler/在项目根目录执行点文件名就地展开内容,审阅后再安装 —— skill 会影响你的 AI 助手行为, 只安装你信任的来源。
这个 skill 的用法交流都在它的使用心得笔记里:去参与(0 赞 · 0 条评论)↗
发现违规、恶意或侵权内容?到来源笔记举报此 skill ↗(skill 从笔记涌现,笔记下架即 skill 下架)。
[](https://huohuahub.com/skills/artifact-theme-styler)什么时候会用上它:为演示、文档、报告和网页建立或套用一套完整主题,包括颜色、字体、间距和组件表面。适合已有内容但缺少统一视觉,或需要为同一内容快速生成不同主题版本。
怎么用:在 AI 工具里直接描述任务即可自动触发。显式调用的写法各端不同:Claude Code / Cursor 等用 /artifact-theme-styler,Codex 用 $artifact-theme-styler,Kimi Code 用 /skill:artifact-theme-styler,ZCODE 用 $artifact-theme-styler,Gemini CLI 以自动激活为主。