品牌指南技能

生成和维护品牌风格指南 - 颜色、字体、图像、语调/语气、响应式规范。在记录品牌身份或创建风格指南页面时使用。

何时使用此技能

当您需要：

创建品牌风格指南页面
记录十六进制/RGB值的颜色板
指定排版指南
定义图像和摄影风格
建立语调和语气指南
记录响应式设计的断点
从现有主题中提取品牌信息

此技能的作用

**从现有主题文件（CSS、PHP）**中提取品牌数据
生成HTML/Markdown品牌指南内容
创建WordPress页面，包含品牌文档
记录所有断点的响应行为

品牌数据结构

品牌：
  名称："品牌名称"
  口号："品牌口号"
  成立时间：2025
  位置："城市，州"

颜色：
  主色：
    名称："颜色名称"
    十六进制："#HEXCODE"
    rgb："rgb(r, g, b)"
    用途："何时使用此颜色"
  副色：
    名称："颜色名称"
    十六进制："#HEXCODE"
    用途："何时使用此颜色"
  强调色：
    名称："颜色名称"
    十六进制："#HEXCODE"
    用途："何时使用此颜色"

排版：
  主字体："字体家族"
  字重：[300, 400, 700]
  标题：
    风格："font-light tracking-tighter"
    大小：
      h1："text-5xl md:text-9xl"
      h2："text-4xl md:text-5xl"
      h3："text-xl"
  正文：
    风格："font-light leading-relaxed"
    大小："text-lg"

图像：
  风格："Professional/Candid/etc"
  处理："Filters, overlays"
  主题：["主题1", "主题2"]
  宽高比：
    英雄："16:9"
    卡片："4:5"
    方形："1:1"

语调：
  个性：["形容词1", "形容词2", "形容词3"]
  语气："语气描述"
  例子：
    做：["正确文案示例"]
    不要：["错误文案示例"]

响应式：
  断点：
    移动："< 768px"
    平板："768px - 1024px"
    桌面："> 1024px"
  行为：
    导航："移动设备上的汉堡包，桌面上的全屏"
    英雄："移动设备上堆叠，桌面上并排"

CSR开发品牌

颜色

名称	十六进制	RGB	用途
CSR奶油色	#EDEAE3	rgb(237, 234, 227)	背景、卡片、头部
CSR深蓝色	#07254B	rgb(7, 37, 75)	文本、标题、页脚、CTA
CSR浅蓝色	#B4C1D1	rgb(180, 193, 209)	悬停状态、标签、强调

排版

主字体： Manrope (Google Fonts)

元素	风格	大小（移动）	大小（桌面）
H1	font-light tracking-tighter	text-5xl	text-9xl
H2	font-light	text-4xl	text-5xl
H3	font-light	text-xl	text-xl
正文	font-light leading-relaxed	text-lg	text-lg
标签	font-bold uppercase tracking-widest	text-xs	text-xs

图像

风格： 专业建筑摄影
处理： 微妙的灰度（20%），深蓝色叠加（10%不透明度）
主题： 现代建筑，迈阿密天际线，豪华室内，建筑
宽高比：
- 英雄：16:9（视频）或全高
- 组合卡：4:5
- 团队照片：1:1

语调&语气

个性： 专业，精致，可信，有远见

语气： 有信心但不傲慢，优雅但易于接近

做：

“CSR获取和开发创造长期价值的房地产资产”
“建立在遗产之上”
“通过周到的设计提升生活水平”

不要：

过于随意的语言
过多的感叹号
行业术语无解释

响应式断点

断点	宽度	Tailwind类
移动	< 768px	默认（无前缀）
平板	768px - 1024px	md:
桌面	> 1024px	lg:

脚本

extract-brand.py

从主题CSS/PHP文件中提取品牌数据。

用法：

python3 /root/.claude/skills/brand-guide/scripts/extract-brand.py \
  --theme-path /path/to/theme \
  --output /path/to/brand-data.yaml

generate-guide.py

从品牌数据生成品牌指南HTML。

用法：

python3 /root/.claude/skills/brand-guide/scripts/generate-guide.py \
  --brand-data /path/to/brand-data.yaml \
  --output /path/to/brand-guide.html

color-utils.py

颜色操作和对比度检查的实用程序。

用法：

python3 /root/.claude/skills/brand-guide/scripts/color-utils.py \
  --hex "#07254B" \
  --check-contrast "#EDEAE3"

模板

brand-guide-page.html

包含所有部分的完整品牌指南页面模板。

color-palette.html

显示带有代码的色板的颜色板部分。

typography.html

所有大小的字体样本排版部分。

imagery.html

带有示例处理的图像指南。

voice-tone.html

带有做和不做的语调和语气部分。

responsive.html

带有断点文档的响应式设计规范。

工作流程

为现有站点创建品牌指南

提取品牌数据：

python3 scripts/extract-brand.py --theme-path /path/to/theme

审查和增强提取的数据（添加语调/语气等）

生成指南：

python3 scripts/generate-guide.py --brand-data brand.yaml

使用wordpress-admin技能创建WordPress页面

从零开始创建品牌指南

填写品牌数据模板（见上述结构）
生成指南HTML
创建WordPress页面
在每个断点添加屏幕截图

与wordpress-admin集成

生成品牌指南后，将其作为WordPress页面创建：

# 创建页面
docker exec wordpress-local-wordpress-1 wp post create \
  --post_type=page \
  --post_title="品牌风格指南" \
  --post_name="brand-guide" \
  --post_status="publish" \
  --post_content="$(cat brand-guide.html)" \
  --allow-root

# 设置SEO
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_focuskw "CSR品牌风格指南" --allow-root
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_metadesc "CSR房地产开发品牌风格指南，包括颜色、排版、图像指南和语调规范。" --allow-root

参考文件

CSR主题： /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/
CSR风格CSS： /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/style.css
CSR标志： /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/assets/images/csr-logo.svg

示例

查看/root/.claude/skills/brand-guide/examples/csr-brand-guide.md了解完整的CSR开发品牌指南示例。