首页
/ ui-ux-pro-max-skill CIP 风格指南实战:企业身份设计八大量化风格规范与风格检索机制解析

ui-ux-pro-max-skill CIP 风格指南实战:企业身份设计八大量化风格规范与风格检索机制解析

2026-09-04 15:26:29作者:钟日瑜

本文围绕 ui-ux-pro-max-skill 仓库中 CIP(Corporate Identity Program,企业身份程序)子技能的核心参考文档 cip-style-guide.md 展开,完整解析八大设计风格在行业适配、色彩取值、字体策略、材质与工艺上的量化规范,并结合仓库中的风格数据表(styles.csv)、BM25 检索引擎(core.py)与提示词工程文档,讲清楚这些风格规范如何被"检索 → 装配进设计简报 → 注入 AI 生成提示词"的完整链路消费,读完后可独立为任意品牌选择合适的 CIP 风格并复现该技能的设计决策流程。

风格指南在 CIP 流水线中的位置

在 ui-ux-pro-max-skill 的 design 技能中,CIP 是"从 Logo 到整套企业视觉落地物"的核心工作流,官方定义的三步流程为(见 cip-design.md):

  1. scripts/cip/search.py --cip-brief 生成 CIP 设计简报;
  2. scripts/cip/generate.py --brand --logo --industry --set 调用 Gemini 生成落地物 mockup;
  3. scripts/cip/render-html.py 将 mockup 渲染为单文件 HTML 提案。

cip-style-guide.md 正是第 1 步"选风格"环节的判断依据:它为每种风格给出行业适配、色值、字体、材质、工艺五个维度的硬性约束,使"风格"不再是模糊的形容词,而是可被程序读取、可被提示词引用的结构化参数。同级的 cip-deliverable-guide.md 负责"做什么落地物",cip-prompt-engineering.md 负责"怎么把它写进 AI 提示词",三者与风格指南共同构成 CIP 的决策知识层。

八大核心风格:完整参数规范

风格指南正文定义了 8 种风格,每种都按 Industries(适用行业)/ Colors(主色与色值)/ Typography(字体策略)/ Materials(材质)/ Finishes(工艺) 五个字段描述。以下为文档中的完整规格(色值照录自 cip-style-guide.md):

Corporate Minimal(企业极简)

  • 适用行业:Finance(金融)、Legal(法律)、Consulting(咨询)、Tech(科技)
  • 色彩:Navy #0F172A、White #FFFFFF、蓝色点缀
  • 字体:干净无衬线(Inter、Helvetica)
  • 材质:高档哑光纸、细微纹理
  • 工艺:哑光(Matte)、Logo 局部 UV(spot UV)

这是金融与咨询行业的默认答案:深蓝底 + 大量留白 + 无衬线字,传达"克制、可信"。

Modern Tech(现代科技)

  • 适用行业:Tech、SaaS、Startups(初创)、AI
  • 色彩:Purple #6366F1、Cyan #0EA5E9、Green #10B981
  • 字体:几何无衬线(Outfit、Poppins)
  • 材质:光滑表面、渐变色印刷
  • 工艺:亮光(Gloss)、金属点缀

#6366F1(indigo)+ #0EA5E9(sky)+ #10B981(emerald)这组色值与 Tailwind 默认色板一致,说明该技能的科技风格规范与实际前端工程实践是打通的。

Luxury Premium(奢华高级)

  • 适用行业:Fashion(时尚)、Jewelry(珠宝)、Hotels(酒店)、Fine Dining(精致餐饮)
  • 色彩:Black #1C1917、Gold #D4AF37、White
  • 字体:优雅衬线(Playfair Display)+ 细体无衬线
  • 材质:厚棉纸、皮革、金属
  • 工艺:烫金(Gold foil)、凸版(emboss)、凹版(deboss)、触感软膜(soft-touch)

#D4AF37(经典金)在全文档中反复出现,是奢华类风格的锚定色;工艺字段给出了 4 种可堆叠的高级印刷工艺,这是直接面向实体打样交付的规范。

Classic Traditional(经典传统)

  • 适用行业:Law Firms(律所)、Heritage Brands(传承品牌)、Finance
  • 色彩:Navy、Burgundy(勃艮第红)、Gold
  • 字体:传统衬线(Times、Garamond)
  • 材质:高品质帘纹纸(laid paper)、木材
  • 工艺:凸版印刷(Letterpress)、烫金压印(gold emboss)

Warm Organic(暖调有机)

  • 适用行业:Food(食品)、Organic(有机)、Wellness(健康)、Craft(手作)
  • 色彩:Brown #8B4513、Green #228B22、Cream(奶油色)
  • 字体:亲和衬线 + 有机手写体
  • 材质:牛皮纸(Kraft paper)、再生材料
  • 工艺:不覆膜(Uncoated)、自然纹理

Bold Dynamic(动感强烈)

  • 适用行业:Sports(体育)、Entertainment(娱乐)、Gaming(游戏)
  • 色彩:Red #DC2626、Orange #F97316、Black
  • 字体:粗体压缩无衬线(Bold condensed sans)
  • 材质:高对比、金属
  • 工艺:亮光(Gloss)、高饱和色彩

Fresh Modern(清新现代)

  • 适用行业:Healthcare(医疗)、Wellness、Fintech
  • 色彩:Mint #10B981、Sky #0EA5E9、White
  • 字体:现代圆角无衬线
  • 材质:轻盈、干净的表面
  • 工艺:哑光、极简

Soft Elegant(柔美优雅)

  • 适用行业:Beauty(美妆)、Wedding(婚礼)、Spa(水疗)、Fashion
  • 色彩:Pink #F472B6、Gold、White
  • 字体:优雅手写体 + 细体无衬线
  • 材质:触感软膜(soft-touch)、优质纸张
  • 工艺:玫瑰金箔(Rose gold foil)、压印(emboss)

完整风格库:styles.csv 中的 20 种风格

值得注意:cip-style-guide.md 收录的是 8 种"核心风格",而程序实际消费的风格库是 styles.csv,共 20 行风格数据(与 SKILL.md 中"20 styles"的表述一致)。除文档中的 8 种外,数据表还包含 12 种扩展风格,且每个风格比文档多出一组反向约束Avoid For)与主色/辅色的完整 HEX 值:

扩展风格 类别 主色(HEX) 适用(Best For) 避免用于(Avoid For)
Dark Premium Sophisticated #0F0F0F #1A1A1A #D4AF37 夜生活、奢华、时尚科技 儿童、医疗、明亮场景
Playful Colorful Fun #F472B6 #FBBF24 #4ADE80 儿童、娱乐、游戏 严肃企业、医疗
Industrial Raw Industrial #374151 #78716C #F97316 制造、建筑、手作 柔和、奢华、女性向
Scandinavian Minimal Minimal #FFFFFF #F5F5F5 #0F172A 设计、家居、北欧系 高饱和、传统风格
Retro Vintage Nostalgic #8B4513 #CA8A04 #DC2626 食品、饮料、手工艺 现代科技
Geometric Modern Abstract #6366F1 #0EA5E9 #F97316 建筑、设计、创意 传统保守、有机系
Monochrome Elegant Sophisticated #000000 #FFFFFF #D4AF37 奢华、时尚、摄影 多彩、活泼
Gradient Modern Digital #6366F1 #EC4899 #F97316 科技、游戏、数字媒体 传统印刷导向
Nature Biophilic Organic #228B22 #8B4513 #0EA5E9 健康、户外、生态 工业、城市科技
Art Deco Heritage #D4AF37 #0F172A #FFFFFF 酒店、奢华、活动 休闲、现代极简
Swiss Minimal Clean #FFFFFF #000000 #DC2626 企业、建筑、设计 装饰繁复、俏皮
Memphis Bold Playful #F472B6 #FBBF24 #4ADE80 创意、娱乐、青年向 保守企业、严肃场景

以 Corporate Minimal 为例,其在 CSV 中的完整记录为:主色 #0F172A #1E3A8A #FFFFFF、辅色 #64748B #E2E8F0、气质词 "Professional trustworthy"、适用 "Finance legal consulting tech"、避免用于 "Playful consumer youth brands"。这种"正面规范 + 负面清单"的双向结构,是该风格库区别于普通设计指南的关键:它不仅回答"适合谁",还显式回答"不适合谁",为后续自动选型和提示词负向约束提供了依据。

风格检索机制:BM25 与 CSV_CONFIG

风格指南的文本规范之所以能被"程序消费",是因为同一套字段被结构化为 CSV,并由 core.py 中的 BM25 引擎负责检索。

检索字段配置

CSV_CONFIGcore.py)定义了四个检索域,其中 style 域的检索列与输出列分别是:

  • 检索列(参与匹配的列):Style NameCategoryKeywordsDescriptionMood
  • 输出列(返回给调用方的完整规格):Style NameCategoryKeywordsDescriptionPrimary ColorsSecondary ColorsTypographyMaterialsFinishesMoodBest ForAvoid For

也就是说,风格指南中的 Industries/Colors/Typography/Materials/Finishes 五个字段,在数据层以 Primary/Secondary Colors、Typography、Materials、Finishes 列存在,检索时只吃"名称 + 类别 + 关键词 + 描述 + 气质",命中后把整行规格吐出。

BM25 参数与分词

BM25 类(core.py)采用标准 BM25 参数 k1=1.5, b=0.75

def __init__(self, k1=1.5, b=0.75):
    ...
def tokenize(self, text):
    """Lowercase, split, remove punctuation, filter short words"""
    text = re.sub(r'[^\w\s]', ' ', str(text).lower())
    return [w for w in text.split() if len(w) > 2]

分词逻辑为:小写 → 去标点 → 丢弃长度 ≤2 的 token;IDF 采用 log((N - df + 0.5) / (df + 0.5) + 1) 的平滑公式。_search_csv 在打分后还会做一道 score > 0 过滤(core.py),即无命中时宁缺毋滥,不会返回噪声结果。

域自动探测

不显式指定 --domain 时,detect_domaincore.py)用关键词计分在 deliverable / style / industry / mockup 四个域中取最高分,全零则回落到 deliverable。其中 style 域的探测词包括:style, minimal, modern, luxury, vintage, industrial, elegant, bold, corporate, organic, playful —— 与 8 大核心风格的名称一一对应,意味着查询"luxury elegant"会天然路由到风格库。

CLI 用法

风格检索入口是 search.py,完整参数(源自其 argparse 定义,search.py):

# 指定域检索风格(--max 默认 3,--json 输出结构化结果)
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "scandinavian clean" --domain style --max 5 --json

# 生成 CIP 简报(-b 指定品牌名,-s 可覆盖风格)
python3 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
python3 scripts/cip/search.py "hospitality hotel" --cip-brief -b "TopGroup" -s "Luxury Premium"

注意:SKILL.md 说明 Windows 下用 python 替代 python3;且脚本实际位于仓库 .claude/skills/design/ 下,~/.claude/skills/design/ 是技能安装到用户主目录后的路径。

CIP 简报流程中的风格自动选型

--cip-brief 触发的 get_cip_briefcore.py)把风格指南落为四段式简报,其选风格逻辑值得逐步拆解:

  1. 行业检索:用查询词在 industry 域取 Top1(数据源 industries.csv);
  2. 风格解析:若未用 --style 显式覆盖,则取该行业行的 CIP Style 列作为风格查询词(如 Technology → "Modern Tech Geometric"),再到 style 域取 Top1;
  3. 色彩系统装配color_system.primary 优先取风格行的 Primary Colors,风格缺失时回退到行业行的 Primary Colorssecondary 同理;
  4. 推荐落地物:按行业行的 Key Deliverables 拆分前 5 个词,逐个在 deliverable 域检索并合并进简报。

行业 → 风格的映射关系正是风格指南"Industries"字段的反向索引,industries.csv 中 20 个行业的 CIP Style 列与 8 大核心风格的对应关系为:

行业 CIP Style 对应风格指南条目
Technology Modern Tech Geometric Modern Tech
Finance Banking Corporate Minimal Classic Corporate Minimal
Legal Classic Traditional Classic Traditional
Consulting Corporate Minimal Swiss Corporate Minimal
Hospitality Luxury Premium Elegant Luxury Premium
Fashion Luxury Premium Monochrome Luxury Premium
Beauty Cosmetics Soft Elegant Soft Elegant
Food Beverage Warm Organic Vintage Warm Organic
Agriculture Warm Organic Natural Warm Organic
Sports Fitness Bold Dynamic Bold Dynamic
Automotive Bold Dynamic Industrial Bold Dynamic
Healthcare Fresh Modern Minimal Fresh Modern
Education Fresh Modern Classic Fresh Modern
Non-Profit Fresh Modern Warm Fresh Modern
Retail Fresh Modern Playful Fresh Modern

可以看到:CIP Style 列往往是"核心风格 + 修饰风格"的组合(如 "Corporate Minimal Swiss"),组合查询会被 BM25 拆解为多个 token 分别匹配,因此能同时命中两种风格的数据行。format_briefsearch.py)随后把简报渲染为"INDUSTRY / DESIGN STYLE / COLOR SYSTEM / TYPOGRAPHY / RECOMMENDED DELIVERABLES"五段文本,其中 DESIGN STYLE 段直接输出风格行的 Description、Materials、Finishes —— 与本文开头风格指南的五字段结构完全同构。

风格规范到生成提示词的落地

风格规范最终要在 AI 出图时被消费。cip-prompt-engineering.md 给出了基础提示词骨架:

Professional corporate identity mockup photograph showing [DELIVERABLE] for brand '[BRAND_NAME]', [STYLE] design style, using colors [COLORS], [TYPOGRAPHY] typography, logo placement: [PLACEMENT], [MATERIALS] materials with [FINISHES] finish, [CONTEXT] setting, [MOOD] mood, photorealistic product photography, soft natural lighting, high quality professional shot, 8k resolution detailed

其中 [MATERIALS][FINISHES] 两个占位符的取值来源正是风格指南的 Materials/Finishes 字段。该文档还定义了 4 种风格的风格修饰符,可直接拼入 [STYLE] 之后:

风格 修饰符文本
Corporate Minimal clean minimal aesthetic, white space, subtle shadows, matte finish, professional
Luxury Premium dark background, dramatic rim lighting, gold accents, premium materials, sophisticated
Modern Tech gradient colors, geometric elements, clean surfaces, futuristic, innovative
Warm Organic natural materials, kraft paper texture, warm lighting, authentic, artisan

再叠加照明修饰符(Studio / Natural / Dramatic / Warm)、场景修饰符(Marble desk / Wooden table / Office interior / Flat lay / Lifestyle)与恒定质量修饰符(photorealistic, professional photography, high quality, 8k resolution, detailed, sharp focus),并规避负向提示词(blurry, low quality, distorted text, misspelled, amateur, clipart, cartoon, illustration, watermark),即完成一条完整 mockup 提示词。

执行生成时,generate.py 的常用调用为(照录自 SKILL.md):

# 带 Logo(推荐,走图像编辑路径)
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# 整套 CIP
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro 模型(4K 文字渲染)
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

模型选择:flash(默认,gemini-2.5-flash-image,快且省)与 progemini-3-pro-image-preview,质量与 4K 文字渲染)。运行前提为 export GEMINI_API_KEYpip install google-genai pillow

色彩心理学:选色依据速查

风格指南末尾的 Color Psychology 表(照录自 cip-style-guide.md)给出跨风格通用的选色决策依据:

颜色 语义 最佳用途
Blue 信任、稳定 Finance, Tech, Healthcare
Green 成长、自然 Eco, Wellness, Organic
Gold 奢华、尊贵 Premium, Jewelry
Red 能量、热情 Food, Sports
Black 精致、高级 Luxury, Fashion
White 干净、极简 Tech, Healthcare

将其与前文行业映射对照可发现一致性:Healthcare 行业主色为 #0077B6 #10B981(蓝 + 绿),对应"信任 + 成长";Food Beverage 主色 #DC2626 #F97316(红 + 橙),对应"能量、食欲";Luxury Premium 风格的锚定金 #D4AF37 对应"尊贵"。也就是说,风格指南中的 HEX 取值并非随手所设,而是色彩心理学语义与行业语境的交叉结果。

实战速查:从风格到提案的完整链路

# 1. 生成设计简报(自动完成 行业→风格→色彩→落地物 装配)
python3 scripts/cip/search.py "organic food" --cip-brief -b "GreenLeaf"
#    → 预期命中 Warm Organic:Brown #8B4513 / Green #228B22,Kraft paper,Uncoated

# 2. 单独复核某风格的完整规格
python3 scripts/cip/search.py "warm organic natural" --domain style --json

# 3. 生成 mockup(默认 flash 模型)
python3 scripts/cip/generate.py --brand "GreenLeaf" --logo logo.png --industry "organic food" --set

# 4. 渲染单文件 HTML 提案(图片 base64 内嵌,桌面/移动端响应式、暗色主题)
python3 scripts/cip/render-html.py --brand "GreenLeaf" --industry "organic food" --images ./greenleaf-cip

HTML 提案页包含品牌名、行业、风格、气质词的 Hero 区,每张落地物卡片附概念、用途、规格描述(见 cip-design.md 的 "HTML Presentation Features" 一节)。

小结:ui-ux-pro-max-skill 的 CIP 风格指南把"选风格"这件高度依赖设计师直觉的工作拆成了三层可验证资产——人读的五字段规范(本文正文)、机器读的 20 行 styles.csv、以及 BM25 + 行业映射的自动装配逻辑(core.py)。理解这三层的对应关系,就能在不修改任何数据的前提下,用 --cip-brief -s 覆盖风格、用 --domain style 校验规格、用 cip-prompt-engineering.md 的修饰词手工拼装提示词,完整复现该技能的风格决策链路。

登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
33
18
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库,实现网络在NPU上加速计算。
C++
1.12 K
2.72 K
kernelkernel
openEuler内核是openEuler操作系统的核心,既是系统性能与稳定性的基石,也是连接处理器、设备与服务的桥梁。
C
527
590
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库,实现网络在NPU上加速计算。
C++
904
1.82 K
pytorchpytorch
作为 Ascend for PyTorch 社区的核心组件,TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件,使 PyTorch 框架能够直接调用昇腾 NPU,为开发者提供昇腾 AI 处理器的超强算力。
Python
854
1.34 K
docsdocs
暂无描述
Markdown
889
5.78 K
jiuwenswarmjiuwenswarm
JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent,它能够将大语言模型的强大能力,通过你日常使用的各类通讯应用,直接延伸至你的指尖。
Python
3.52 K
1.01 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库,实现网络在NPU上加速计算。
C++
1.33 K
1.45 K
cann-learning-hubcann-learning-hub
CANN 学习中心仓,支持在线互动运行、边学边练,提供教程、示例与优化方案,一站式助力昇腾开发者快速上手。
Jupyter Notebook
981
502
AscendNPU-IRAscendNPU-IR
AscendNPU-IR是基于MLIR(Multi-Level Intermediate Representation)构建的,面向昇腾亲和算子编译时使用的中间表示,提供昇腾完备表达能力,通过编译优化提升昇腾AI处理器计算效率,支持通过生态框架使能昇腾AI处理器与深度调优
C++
540
384