brand-guide by crazyswami/wordpress-dev-skills
npx skills add https://github.com/crazyswami/wordpress-dev-skills --skill brand-guide生成全面的品牌风格指南,记录颜色、排版、图像、声音/语调以及响应式设计规范。
当您需要时,请调用此技能:
brand:
name: "Brand Name"
tagline: "Brand Tagline"
established: 2025
location: "City, State"
colors:
primary:
name: "Color Name"
hex: "#HEXCODE"
rgb: "rgb(r, g, b)"
usage: "When to use this color"
secondary:
name: "Color Name"
hex: "#HEXCODE"
usage: "When to use this color"
accent:
name: "Color Name"
hex: "#HEXCODE"
usage: "When to use this color"
typography:
primary_font: "Font Family"
weights: [300, 400, 700]
headings:
style: "font-light tracking-tighter"
sizes:
h1: "text-5xl md:text-9xl"
h2: "text-4xl md:text-5xl"
h3: "text-xl"
body:
style: "font-light leading-relaxed"
size: "text-lg"
imagery:
style: "Professional/Candid/etc"
treatment: "Filters, overlays"
subjects: ["Subject 1", "Subject 2"]
aspect_ratios:
hero: "16:9"
card: "4:5"
square: "1:1"
voice:
personality: ["Adjective 1", "Adjective 2", "Adjective 3"]
tone: "Description of tone"
examples:
do: ["Example of correct copy"]
dont: ["Example of incorrect copy"]
responsive:
breakpoints:
mobile: "< 768px"
tablet: "768px - 1024px"
desktop: "> 1024px"
behaviors:
navigation: "Hamburger on mobile, full on desktop"
hero: "Stacked on mobile, side-by-side on desktop"
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 名称 | Hex | RGB | 用途 |
|---|---|---|---|
| CSR Cream | #EDEAE3 | rgb(237, 234, 227) | 背景、卡片、页眉 |
| CSR Dark Blue | #07254B | rgb(7, 37, 75) | 文本、标题、页脚、行动号召 |
| CSR Light Blue | #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 |
个性: 专业、精致、可信赖、有远见
语调: 自信但不傲慢,优雅但平易近人
应做:
不应做:
| 断点 | 宽度 | Tailwind 类 |
|---|---|---|
| 移动端 | < 768px | 默认(无前缀) |
| 平板 | 768px - 1024px | md: |
| 桌面端 | > 1024px | lg: |
从主题 CSS/PHP 文件中提取品牌数据。
用法:
python3 /root/.claude/skills/brand-guide/scripts/extract-brand.py \
--theme-path /path/to/theme \
--output /path/to/brand-data.yaml
根据品牌数据生成品牌指南 HTML。
用法:
python3 /root/.claude/skills/brand-guide/scripts/generate-guide.py \
--brand-data /path/to/brand-data.yaml \
--output /path/to/brand-guide.html
用于颜色操作和对比度检查的工具。
用法:
python3 /root/.claude/skills/brand-guide/scripts/color-utils.py \
--hex "#07254B" \
--check-contrast "#EDEAE3"
包含所有部分的完整品牌指南页面模板。
显示色块及代码的颜色方案部分。
显示所有尺寸字体样本的排版部分。
包含示例处理的图像指南。
包含注意事项的声音和语调部分。
包含断点文档的响应式设计规范。
提取品牌数据:
python3 scripts/extract-brand.py --theme-path /path/to/theme
审查并增强提取的数据(添加声音/语调等)
生成指南:
python3 scripts/generate-guide.py --brand-data brand.yaml
使用 wordpress-admin 技能创建 WordPress 页面
生成品牌指南后,将其创建为 WordPress 页面:
# 创建页面
docker exec wordpress-local-wordpress-1 wp post create \
--post_type=page \
--post_title="Brand Style Guide" \
--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 brand style guide" --allow-root
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_metadesc "Complete brand style guide for CSR Real Estate including colors, typography, imagery guidelines, and voice specifications." --allow-root
查看 /root/.claude/skills/brand-guide/examples/csr-brand-guide.md 获取完整的 CSR Development 品牌指南示例。
每周安装
1
仓库
GitHub 星标
3
首次出现
今天
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
Generate comprehensive brand style guides documenting colors, typography, imagery, voice/tone, and responsive design specifications.
Invoke this skill when you need to:
brand:
name: "Brand Name"
tagline: "Brand Tagline"
established: 2025
location: "City, State"
colors:
primary:
name: "Color Name"
hex: "#HEXCODE"
rgb: "rgb(r, g, b)"
usage: "When to use this color"
secondary:
name: "Color Name"
hex: "#HEXCODE"
usage: "When to use this color"
accent:
name: "Color Name"
hex: "#HEXCODE"
usage: "When to use this color"
typography:
primary_font: "Font Family"
weights: [300, 400, 700]
headings:
style: "font-light tracking-tighter"
sizes:
h1: "text-5xl md:text-9xl"
h2: "text-4xl md:text-5xl"
h3: "text-xl"
body:
style: "font-light leading-relaxed"
size: "text-lg"
imagery:
style: "Professional/Candid/etc"
treatment: "Filters, overlays"
subjects: ["Subject 1", "Subject 2"]
aspect_ratios:
hero: "16:9"
card: "4:5"
square: "1:1"
voice:
personality: ["Adjective 1", "Adjective 2", "Adjective 3"]
tone: "Description of tone"
examples:
do: ["Example of correct copy"]
dont: ["Example of incorrect copy"]
responsive:
breakpoints:
mobile: "< 768px"
tablet: "768px - 1024px"
desktop: "> 1024px"
behaviors:
navigation: "Hamburger on mobile, full on desktop"
hero: "Stacked on mobile, side-by-side on desktop"
| Name | Hex | RGB | Usage |
|---|---|---|---|
| CSR Cream | #EDEAE3 | rgb(237, 234, 227) | Backgrounds, cards, header |
| CSR Dark Blue | #07254B | rgb(7, 37, 75) | Text, headings, footer, CTAs |
| CSR Light Blue | #B4C1D1 | rgb(180, 193, 209) | Hover states, labels, accents |
Primary Font: Manrope (Google Fonts)
| Element | Style | Size (Mobile) | Size (Desktop) |
|---|---|---|---|
| H1 | font-light tracking-tighter | text-5xl | text-9xl |
| H2 | font-light | text-4xl | text-5xl |
| H3 | font-light | text-xl | text-xl |
| Body | font-light leading-relaxed | text-lg | text-lg |
| Label | font-bold uppercase tracking-widest | text-xs | text-xs |
Personality: Professional, Sophisticated, Trustworthy, Visionary
Tone: Confident but not arrogant, elegant but accessible
Do:
Don't:
| Breakpoint | Width | Tailwind Class |
|---|---|---|
| Mobile | < 768px | Default (no prefix) |
| Tablet | 768px - 1024px | md: |
| Desktop | > 1024px | lg: |
Extracts brand data from theme CSS/PHP files.
Usage:
python3 /root/.claude/skills/brand-guide/scripts/extract-brand.py \
--theme-path /path/to/theme \
--output /path/to/brand-data.yaml
Generates brand guide HTML from brand data.
Usage:
python3 /root/.claude/skills/brand-guide/scripts/generate-guide.py \
--brand-data /path/to/brand-data.yaml \
--output /path/to/brand-guide.html
Utilities for color manipulation and contrast checking.
Usage:
python3 /root/.claude/skills/brand-guide/scripts/color-utils.py \
--hex "#07254B" \
--check-contrast "#EDEAE3"
Full brand guide page template with all sections.
Color palette section showing swatches with codes.
Typography section with font samples at all sizes.
Imagery guidelines with example treatments.
Voice and tone section with do's and don'ts.
Responsive design specs with breakpoint documentation.
Extract brand data:
python3 scripts/extract-brand.py --theme-path /path/to/theme
Review and enhance the extracted data (add voice/tone, etc.)
Generate guide:
python3 scripts/generate-guide.py --brand-data brand.yaml
Create WordPress page using wordpress-admin skill
After generating a brand guide, create it as a WordPress page:
# Create the page
docker exec wordpress-local-wordpress-1 wp post create \
--post_type=page \
--post_title="Brand Style Guide" \
--post_name="brand-guide" \
--post_status="publish" \
--post_content="$(cat brand-guide.html)" \
--allow-root
# Set SEO
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_focuskw "CSR brand style guide" --allow-root
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_metadesc "Complete brand style guide for CSR Real Estate including colors, typography, imagery guidelines, and voice specifications." --allow-root
See /root/.claude/skills/brand-guide/examples/csr-brand-guide.md for a complete CSR Development brand guide example.
Weekly Installs
1
Repository
GitHub Stars
3
First Seen
Today
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
56,500 周安装
Next.js TypeScript 最佳实践:性能优化、代码规范与安全架构指南
293 周安装
Spec-Kit技能:基于宪法的规范驱动开发工作流,7阶段GitHub功能开发指南
294 周安装
Seaborn 统计可视化库教程:Python 数据可视化与多变量分析指南
296 周安装
InstantDB 完整指南:现代 Firebase 替代方案,内置实时数据库与权限管理
295 周安装
AI研究查询工具 - 实时学术文献、技术文档与统计数据查找,智能模型选择
299 周安装
Next.js 16+ App Router 开发指南:服务器组件、缓存与路由配置
297 周安装