site-apply-theme

SKILL.md 内容

{
  "name": "site-apply-theme",
  "content": "---\nname: site-apply-theme\ndescription: |\n  一键改造任何 web 站点的视觉风格。\n  触发场景：\n  - \"网站改浅色风格\" / \"网站换主题\" / \"套用 XXX 站风格\"\n  - \"图标太花了\" / \"换纯色图标\" / \"把 emoji 换成 SVG\"\n  - \"logo 改方案\" / \"logo 加 slogan\" / \"logo 改字号\"\n  - \"导航加高\" / \"导航加宽\" / \"改 hero\"\n  - \"全站美化\" / \"整体换皮\"\n  \n  本 skill 会自动：\n  1. 读取参考站截图（可选） / 听用户描述\n  2. 改 CSS 变量（背景/卡片/文字/边框/强调色）\n  3. 改 logo 布局方案（4 种预设：圆框/红字/红字+slogan/完整品牌）\n  4. 把所有 emoji 图标换成纯色 SVG（28 个内建图标）\n  5. 改导航高度（4 档：64/72/80/96px）\n  6. build + 浏览器视觉验证（vision_analyze）\n  7. 用户确认后提交 Git\n  \n  适用项目：Nuxt 3 / Vue 3 + Tailwind / Element / 原生 CSS 均可\n  不适用：仅改 1 个小细节（直接说改什么更快）\n---\n\n# site-apply-theme — 一键网站美化\n\n> **核心理念**：用户只说\"改成浅色风格\"或\"图标太花了\"——skill 自动做完所有相关改动，不用用户一步步指挥。\n>\n> **分级确认机制**（2026-08 增）：美化是循环过程，**不要把每步都问用户**。\n>\n> | 等级 | 何时用 | 怎么做 |\n> |------|--------|--------|\n> | **L0 自动** | 已知偏好（浅色/红/极简/不用emoji/方案B Logo）、标准美化、数据已存 | 做完**只报告**\"改了哪些文件 + 验证结果\"，不列选项 |\n> | **L1 简短确认** | 改 1 文件/加 1 字段/改 1 处样式 | **1 句话**描述要做什么，回\"做/改X/不做\" |\n> | **L2 必须确认** | 架构选型、多租户主题、引入第三方、改核心结构、删数据、域名/URL/Host/端口/路径、ICP 备案号 | 列 **3-4 选项 + 推荐**，回字母 |\n>\n> **5 问重检**：\n> - L0：**跳过**\n> - L1：只问\"做对了吗\"\n> - L2：完整 5 问（重/审批/闭环/并发/对齐）\n>\n> **用户独有信息规则**：ICP 备案号、域名、URL、Host、端口、路径——**必须问用户，不自己编**。\n\n## 0. 何时用 vs 不用\n\n| 场景 | 用 skill？ | 为什么 |\n|------|:---:|------|\n| \"把网站改成浅色白底风格\" | ✅ | 全站主题换肤 |\n| \"图标太花了，改成纯色\" | ✅ | 批量改 emoji → SVG |\n| \"logo 改方案\" | ✅ | 4 种预设可选 |\n| \"导航太矮了加高\" | ✅ | 1 行 CSS 改动 |\n| 改某个按钮颜色 | ❌ | 1 行 CSS，直接说改什么 |\n| 加 1 个新区块 | ❌ | 跨 skill，是 feature |\n| 改文案 / 改栏目结构 | ❌ | 是内容改，不是美化 |\n\n---\n\n## 1. 流程总览\n\n```\n[用户说\"改风格/美化/换主题\"]\n        ↓\n[询问偏好：参考站截图？描述？or 选预设？]\n        ↓\n[执行 5 步改造] ←──┐\n        ↓           │\n[build + 浏览器验证] │\n        ↓           │\n[用户确认 → 提交]    │\n        ↓           │\n[结束] ──────────────┘\n```\n\n---\n\n## 2. 输入：3 种方式（任选一）\n\n### 方式 A：参考站截图（最准）\n用户提供类似站点的截图，skill 用 `browser_navigate` 抓取后用 `vision_analyze` 提炼：\n- 配色（背景/卡片/文字/强调）\n- 字体（粗细/大小/字距）\n- 布局（间距/卡片样式）\n- Logo 风格\n\n### 方式 B：用户口述（最常用）\n用户说：\"改成浅色白底，红色保留，专业商务风\" — skill 提炼 → 用预设 A/B/C 之一。\n\n### 方式 C：直接选预设（最快）\n| 预设 | 风格 | 配色 | 适合 |\n|------|------|------|------|\n| **甲：极浅白底** | 现代极简 | 白底 + 浅灰卡片 + 深色字 | 政企/服务/品牌 |\n| **乙：暖白米色** | 温暖 | 米白 + 浅暖灰 + 深棕 | 教育/文化 |\n| **丙：深色科技** | 沉浸 | 黑底 + 深蓝卡片 + 浅色字 | AI/技术/游戏 |\n| **丁：白底紫强调** | 极简活泼 | 白底 + 紫色强调 | 工具/平台 |\n\n**默认推甲**（最适合政企品牌），除非用户明确说别的。\n\n---\n\n## 3. 执行：5 步改造\n\n### 步骤 1：改 CSS 变量（全局换肤）\n\n**如果项目有 `assets/css/main.css` 或 `app.css`**，改 14 个变量：\n\n```css\n/* 极浅白底预设（甲） */\n:root {\n  /* 背景 */\n  --bg-primary: #ffffff;       /* 纯白底层 */\n  --bg-secondary: #f8fafc;     /* 极浅灰区块 */\n  --card-bg: #ffffff;          /* 卡片背景 */\n  --card-bg-hover: #f8fafc;    /* 卡片悬停 */\n  \n  /* 边框 */\n  --border-color: #e2e8f0;\n  --border-hover: #cbd5e1;\n  \n  /* 文字 */\n  --text-primary: #0f172a;\n  --text-secondary: #475569;\n  --text-muted: #94a3b8;\n  \n  /* 强调色（按品牌） */\n  --accent: #dc2626;           /* 红 */\n  --accent-hover: #b91c1c;\n  --accent-soft: rgba(220, 38, 38, 0.08);\n  --accent-glow: rgba(220, 38, 38, 0.25);\n  \n  --radius: 12px;\n  --radius-sm: 8px;\n}\n```\n\n**验证**：build 后 curl `grep \"0a0e1a\"` 应为 0（深色特征已清）。\n\n### 步骤 1B：项目用 `@nuxt/ui` 时走 Tailwind Variants（比散改 CSS 干净）\n\n**先判断**：`grep -c '@nuxt/ui' package.json` > 0 → 用这条；纯 Tailwind/纯 CSS 站仍走步骤 1。\n\nNuxt UI 的主题入口是 **`app.config.ts` 的 `ui` 键**（不是逐页改 class）：改一处，全站该类组件一起变。这是官方推荐姿势，也是\"换肤\"最小 diff 的路径。\n\n```ts\n// app.config.ts —— 只写要覆盖的部分，其余用默认\nexport default defineAppConfig({\n  ui: {\n    colors: { primary: 'red', neutral: 'slate' },   // 主题色（对应 Tailwind 调色板名）\n    button: {\n      slots: { base: 'font-medium rounded-xl' },     // 槽位：类名直接写\n      variants: {\n        size: { md: { base: 'px-4 py-2 text-sm' } }, // 变体：按 size/color/variant 覆盖\n      },\n      defaultVariants: { color: 'primary', size: 'md' },\n    },\n  },\n})\n```\n\n**只在个别地方偏离主题**时，用组件级 `:ui`（不污染全局）：\n\n```vue\n<UButton label=\"提交\" :ui=\"{ trailingIcon: 'rotate-90' }\" class=\"rounded-full\" />\n```\n\n**为什么优先它**：① 主题集中在一处，客户改主色只需改 1 行；② 类名走 Tailwind Variants 的智能合并，不会像手写 class 那样互相打架；③ 和本 skill 后面的 CSS 变量不冲突 —— **颜色/圆角等全局令牌仍用 CSS 变量，组件结构/密度类调整走 `app.config.ts`**。\n\n**验证**：改完 build + **真浏览器截图**（`grep` 产物里的类名只能证明\"写进去了\"，证明不了\"长对了\"）。官方参考 <https://ui.nuxt.com/>（Tailwind Variants 主题 API 与模板库）。\n\n### 步骤 2：改 Logo（4 方案可选）\n\n```html\n<!-- 方案 A：圆框单字 + 4 字 -->\n<div class=\"rounded-lg flex items-center justify-center text-white\"\n     style=\"background: var(--accent)\">\n  <span class=\"font-bold text-sm\">今</span>\n</div>\n<span>{{ siteName }}</span>\n\n<!-- 方案 B：只 4 字红字（无圆框） -->\n<span class=\"font-bold text-lg md:text-xl tracking-wide\"\n      :style=\"{ color: 'var(--accent)' }\">\n  {{ siteName }}\n</span>\n\n<!-- 方案 C：4 字红字 + slogan 副标题 -->\n<div class=\"flex flex-col leading-tight\">\n  <span class=\"font-bold text-lg md:text-xl tracking-wide\"\n        :style=\"{ color: 'var(--accent)' }\">{{ siteName }}</span>\n  <span class=\"text-[10px] md:text-xs text-[var(--text-secondary)] hidden sm:block\">\n    {{ slogan }}\n  </span>\n</div>\n\n<!-- 方案 D：完整品牌（圆框字 + 4 字 + slogan） -->\n<div class=\"flex items-center gap-2\">\n  <div class=\"rounded-lg\">...</div>\n  <div class=\"flex flex-col leading-tight\">\n    <span>{{ siteName }}</span>\n    <span>{{ slogan }}</span>\n  </div>\n</div>\n```\n\n**默认推 B**（极简）或 **C**（带 slogan）。\n\n### 步骤 3：把 emoji 换成纯色 SVG\n\n#### 3.1 创建 `utils/iconMap.ts`（28 个内建图标）\n\n复制 skill 内的 `references/iconMap.ts` 模板到项目。\n\n#### 3.2 创建通用 Icon 组件 `components/Icon.vue`\n\n```vue\n<template>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" :width=\"size\" :height=\"size\"\n       viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n       :stroke-width=\"strokeWidth\" stroke-linecap=\"round\"\n       stroke-linejoin=\"round\" class=\"inline-block shrink-0\"\n       v-html=\"iconPath\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { iconMap, type IconKey } from '~/utils/iconMap'\nconst props = withDefaults(defineProps<{\n  name: IconKey\n  size?: number | string\n  strokeWidth?: number | string\n}>(), { size: 24, strokeWidth: 1.75 })\nconst iconPath = computed(() => iconMap[props.name] || '')\n</script>\n```\n\n#### 3.3 批量替换 emoji → Icon\n\n```bash\n# 1. 找所有 emoji\ngrep -rE \"📚|💼|🌐|🏢|📱|📞|✍️|📧|📍|📅\" app/\n\n# 2. 映射（28 个图标对应 50+ emoji）\n📚 → book | 💼 → briefcase | 🌐 → globe | 🏢 → building\n📱 → mobile | 📞 → phone | ✍️ → pen | 📧 → mail | 📍 → map-pin\n📅 → calendar | 🎬 → film | 🖨️ → printer | 🎤 → mic | 📢 → megaphone\n🤝 → handshake | 📊 → chart | 📦 → package | 🔄 → cycle\n🏆 → trophy | ✨ → sparkles | 🎪 → podium | 🏛️ → landmark\n🏔️ → mountain | 🏭 → factory | 🏦 → bank | 📝 → clipboard\n🔲 → grid | 🎨 → pen (复用) | 📁 → clipboard (复用)\n\n# 3. 替换模板\n# 改前：<div class=\"text-3xl mb-3\">🏢</div>\n# 改后：<div class=\"text-[var(--accent-hover)] mb-3 flex justify-center\">\n#         <Icon name=\"building\" :size=\"36\" />\n#       </div>\n```\n\n**验证**：`grep -cE \"📚|💼|🌐\" app/**/*.vue` 应为 0。\n\n### 步骤 4：改导航高度（4 档）\n\n```html\n<!-- 64px 紧凑（默认） -->\n<div class=\"flex items-center justify-between h-16\">\n\n<!-- 72px 舒适 -->\n<div class=\"flex items-center justify-between h-[72px]\">\n\n<!-- 80px 标准（推荐） -->\n<div class=\"flex items-center justify-between h-20\">\n\n<!-- 96px 高大 -->\n<div class=\"flex items-center justify-between h-24\">\n```\n\n**默认推 80px**（`h-20`），适合带 slogan 的 logo。\n\n### 步骤 5：build + 浏览器验证\n\n```bash\n# 1. Build\ncd frontend && npm run build\n\n# 2. 重启\nsudo systemctl restart smartsite-frontend\n\n# 3. curl 验证\nfor path in \"/\" \"/products\" \"/business\" \"/ecosystem\" \"/about\" \"/contact\"; do\n  code=$(curl -sk -o /dev/null -w \"%{http_code}\" \"https://DOMAIN/site$path\")\n  echo \"$path | $code\"\ndone\n\n# 4. 浏览器视觉验证（必做）\nbrowser_navigate https://DOMAIN/site/\nbrowser_vision \"详细描述：1) 整体配色 2) logo 样式 3) 关键图标风格 4) 整体视觉感受\"\n```\n\n**5 问重检通过**（重/审批/闭环/并发/对齐）→ 用户确认 → 提交 Git。\n\n---\n\n## 4. 完整操作清单\n\n每次执行时按此清单：\n\n```markdown\n- [ ] 1. 询问：参考截图 / 描述 / 选预设\n- [ ] 2. 改 CSS 变量（14 个）\n- [ ] 3. 改 logo 方案（A/B/C/D）\n- [ ] 4. 复制 iconMap.ts + Icon.vue\n- [ ] 5. 批量替换 emoji → Icon\n- [ ] 6. 改导航高度（64/72/80/96）\n- [ ] 7. npm run build\n- [ ] 8. sudo systemctl restart smartsite-frontend\n- [ ] 9. curl 验证 6 页面 HTTP 200\n- [ ] 10. browser_navigate + browser_vision 视觉确认\n- [ ] 11. 用户确认 → git add . && git commit\n```\n\n---\n\n## 5. 注意事项\n\n| 坑 | 解决 |\n|----|------|\n| **改全局 CSS 影响其他租户** | 提前确认租户；新主题全用 CSS 变量驱动（已实现）|\n| **emoji 字符跨平台不一致** | 全替换 SVG 后 `grep` 验证 0 |\n| **slogan 移动端拥挤** | `hidden sm:block` 控制显示 |\n| **导航高度改了 hero 区没空出** | 不需要，sticky 定位自动 |\n| **SVG 颜色不跟随主题** | 用 `stroke=\"currentColor\"` + 父元素 `text-[var(--accent-hover)]` |\n| **build 失败** | `grep \"syntax\\|error\"` 看具体行号 |\n| **服务重启失败** | `journalctl -u smartsite-frontend -n 20` |\n\n---\n\n## 6. 验证标准\n\n| 验证项 | 命令 | 通过条件 |\n|--------|------|---------|\n| 深色特征清除 | `grep -c \"0a0e1a\" HTML` | 0 |\n| 红色保留 | `grep -c \"DC2626\\|dc2626\" CSS` | ≥1 |\n| emoji 全清 | `grep -cE \"📚\\|💼\\|🌐\" app/**` | 0 |\n| 6 页面 HTTP | `curl -sk` | 全 200 |\n| 视觉确认 | `browser_vision` | \"极简 + 专业 + 纯色\" |\n\n---\n\n## 7. 不要做的事\n\n- ❌ 不要装 npm 包（lucide-vue-next / heroicons）— 用内建 iconMap 0 装包\n- ❌ 不要同时改超过 5 个文件 — 分步 commit\n- ❌ 不要省略浏览器视觉验证 — vision 报告不通过不算完\n- ❌ 不要改用户没要求的样式 — 询问清楚再动\n- ❌ 不要在没确认前 commit — 用户说\"提交\"才动\n\n---\n\n## 8. 关联资源\n\n- `references/iconMap.ts` — 28 个内建 SVG 图标\n- `references/theme-presets.md` — 4 套预设配色（甲乙丙丁）\n- `references/logo-templates.md` — 4 种 logo 方案代码模板\n",
  "path": "/home/agentuser/.hermes/skills/site-apply-theme/SKILL.md",
  "size": 8905
}