ui-ux-pro-max-skill CIP Deliverable 规格指南：从 7 大企业识别资产到 AI 生成的实现全解

本文以 ui-ux-pro-max-skill 仓库中 CIP Deliverable Guide 文档为主体，完整讲解企业识别系统（Corporate Identity Program, CIP）七大类交付物（Logo、文具、办公环境、服饰、车辆、数字资产、活动物料）的设计规格、尺寸参数与工艺要求，并结合 deliverables.csv 数据契约、BM25 检索引擎 与 Gemini 生成脚本，说明这套交付物清单是如何被 design skill 转化为可搜索、可生成交互式 mockup 的技术资产。

一、CIP 交付物体系在仓库中的定位

ui-ux-pro-max-skill 是一个为多种平台提供 UI/UX 设计智能的 AI skill。在其 design skill 中，CIP（企业识别系统）是内置能力之一：覆盖 50+ 交付物、20 种设计风格、20 个行业，使用 Gemini Nano Banana（Flash/Pro）模型生成 mockup 图片。

cip-deliverable-guide.md 是 CIP 子模块的规格说明书，回答“每一类交付物应该长什么样、用什么规格”；而 cip-design.md 负责“怎么生成”。两者构成完整闭环：本文聚焦前者，并用后者及仓库源码佐证其落地方式。

数据层面，该文档描述的每一类交付物都对应 deliverables.csv 中的一行结构化记录（共 50 条），字段包括尺寸（Dimensions）、文件格式（File Format）、Logo 位置（Logo Placement）、色彩用法（Color Usage）、字体说明（Typography Notes）、mockup 场景（Mockup Context）、最佳实践（Best Practices）与反模式（Avoid）。

二、Core Identity：核心识别资产

指南的第一部分定义品牌的“母版资产”，一切其他物料都从它派生。

2.1 主 Logo（Primary Logo）

• 矢量格式：SVG、AI、EPS
• 必须定义净空区（clear space）规则
• 从 favicon 到巨幅广告牌全程可缩放

在 deliverables.csv 第 1 行中，Primary Logo 的规格被进一步结构化：文件格式为 SVG AI EPS PNG，Logo Placement 为“Center prominent”，色彩用法为“Full color palette”，Mockup Context 为“Clean background product shots”，最佳实践是“Ensure clear space, maintain proportions”，反模式是“Distortion, crowding, busy backgrounds”。

值得注意的是，render-html.py 内置的 DELIVERABLE_INFO 字典（L23-L96）对 business card、letterhead、reception signage、polo shirt、vehicle 等交付物都预置了 concept / purpose / specs 三段描述，其 specs 字段与指南中的规格完全一致（例如 business card 为 “Standard 3.5 x 2 inches, premium paper stock”），说明该文档不仅是给人读的规范，也是 HTML 演示页文案的单一事实来源。

2.2 Logo 变体（Logo Variations）

• 横版（Horizontal）、竖版（Vertical）、堆叠版（Stacked）
• 仅图标/符号版（Icon/symbol only）
• 单色版本（黑色、白色、反白）

对应 CSV 第 2 行：色彩用法为 “Mono color, reverse”，最佳实践是同时创建 horizontal / vertical / stacked / icon 四种变体，反模式是“Inconsistent modifications, unauthorized changes”。这一要求与 generate.py 中的图像编辑模式直接呼应——--logo 参数传入真实 Logo 后，脚本会以 “Use the EXACT logo from the provided image - do NOT modify or recreate the logo” 写入 prompt（见 build_cip_prompt，L89-L183），从生成侧强制保证 Logo 在所有交付物变体中的视觉一致性。

三、Stationery Set：办公文具套装

3.1 名片（Business Card）

项目	规格
标准尺寸	3.5 x 2 英寸 / 85 x 55 mm
纸张克重	优质纸 300-400 gsm
工艺	哑光（matte）、局部 UV（spot UV）、烫金（foil）、压凸（emboss）
文件格式（CSV 补充）	PDF / AI 印刷级文件
Logo 位置（CSV 补充）	正面居中或角落
反模式（CSV 补充）	版面拥挤、字体过多、廉价纸张

deliverables.csv 为名片补充了 Mockup Context “Marble, wood, desk surface”，即默认在大理石/木质桌面上呈现。而 mockup-contexts.csv 则把该场景细化为完整拍摄参数：例如 “Marble Desk” 上下文规定 soft natural daylight 光线、45 度俯拍机位、white/grey marble veins 背景，以及 “photorealistic soft shadows luxury” 的 prompt 修饰词。当 generate.py 的 build_cip_prompt 组装 prompt 时，会把这些 Mockup Context 拼入 “Setting: {mockup_context}” 片段（L114-L119），使同一名片规格在不同场景下呈现不同质感。

3.2 信纸（Letterhead）

• A4 或 Letter 尺寸
• 顶部预留 Logo/联系方式区域
• 提供数字版与印刷版两种

CSV 补充：文件格式为 PDF AI Word template，色彩用法要求 “Subtle brand colors”（品牌色应克制），最佳实践是 “Consistent margins, proper hierarchy”，反模式是 “Overpowering logo, excessive graphics”。

3.3 信封（Envelope）

• 规格：DL、C4、C5 三种标准尺寸
• Logo 位于翻盖（flap）或正面
• 回邮地址（return address）需统一样式

CSV 补充：信封需与信纸构成统一的设计系统（“Match letterhead design system”），反模式是印刷错位与低质纸张。

指南列出的三项文具在 CSV 中被扩展为 6 项（增加 Folder 文件夹、Notebook 笔记本、Pen 钢笔），例如 Folder 要求 “A4/Letter pocket folder，含口袋与模切设计”，Pen 则归类到 Promotional（宣传品）而非 Stationery，这种分类差异体现了 CSV 按“使用场景”而非“文档章节”组织的思路。

四、Office Environment：办公环境

4.1 前台标识（Reception Signage）

• 3D 立体字（3D dimensional letters）
• 背光 LED 选项
• 材质：亚克力（acrylic）、金属（metal）、木（wood）

CSV 将其扩展为 “Reception Signage”（第 13 行）与 “Wayfinding Signage”（第 13 行）两条记录，并补充了 “Meeting Room Signs”（会议室门牌，A5/A6 自定义尺寸，强调可读性）。render-html.py 的预置描述中，reception signage 的 specs 写为 “3D dimensional letters, backlit LED options, premium materials”，purpose 是 “Creates strong first impression for visitors and reinforces brand identity”。

4.2 导视系统（Wayfinding System）

• 统一的图标系统
• 清晰的层级结构
• ADA 合规（无障碍标准）

CSV 中 Wayfinding Signage 的最佳实践是 “Consistent system, clear hierarchy”，反模式是“Inconsistent styles, poor visibility”。ADA 合规这一硬性要求在 CSV 中没有逐字复述，体现了“文档给人定标准、CSV 给机器做检索”的分工。

4.3 墙面图形（Wall Graphics）

• 使命/价值观展示
• 大幅壁画（large-scale murals）
• 玻璃磨砂贴膜（window frosting）

CSV 将其拆为两条：第 15 行 “Wall Graphics”（全墙面覆盖、全色域渐变、Mockup 场景为 open office space）与第 16 行 “Window Graphics”（磨砂隐私贴膜，Vector cut files 切割文件，反模式是“遮挡自然光、画面杂乱”）。mockup-contexts.csv 的 “Office Lobby” 上下文（现代办公大堂、明亮办公照明、广角建筑机位）正是生成这类 mockup 时的默认场景。

五、Apparel：服饰

5.1 Polo 衫

• 优先刺绣工艺（embroidery preferred）
• Logo 位于左胸
• 面料要求珠地棉（pique cotton）

5.2 工作服/制服（Uniforms）

• 部门色彩编码（department color coding）
• 工牌（name badge）一体化设计
• 有安全要求时须满足（如反光条等）

deliverables.csv 将服饰类扩展为 Polo Shirt（第 18 行，S-XXL 全尺码、刺绣矢量文件）、T-Shirt（第 19 行）、Cap Hat（第 20 行）、Jacket（第 21 行）、Apron（第 22 行）五条记录。Polo Shirt 的 CSV 规格为 “Left chest, back” 双位置、Mockup 场景为 “Folded or worn lifestyle”，最佳实践 “Quality fabric, embroidery”、反模式 “Cheap fabric, poor embroidery” 与指南的“质量面料”要求一一对应。

render-html.py 中 Polo Shirt 的预置描述同样精确继承指南：concept 为 “Professional team apparel”，specs 为 “Premium pique cotton, embroidered logo on left chest”——文档中的“pique cotton”在这里成为演示页的固定文案。

六、Vehicle Branding：车辆品牌化

6.1 轿车/商务车

• 车门面板品牌化
• 局部贴覆（partial wrap）或全车贴覆（full wrap）
• 联系方式必须清晰可见

6.2 车队车辆（Fleet Vehicles）

• 全车队设计统一
• 高可视度联系方式
• 专业施工安装

CSV 将车辆类拆为 Car Sedan（第 30 行）、Van（第 31 行）、Truck（第 32 行）三条：Sedan 强调 “Door, hood, trunk” 位置与 “Side angle, motion blur” 场景；Van 要求 “Maximum visibility, contact info”；Truck 则强调 “High visibility, fleet consistency”。三条记录共享同一反模式基线：“Amateur install, bubbles, peeling”（业余施工、气泡、翘边）。mockup-contexts.csv 为车辆提供了 “Street Scene”（城市街道、golden hour、3/4 前侧机位）、“Parking Lot”（车队、阴天柔光）、“Highway Motion”（追拍、运动模糊）三个专门场景，search.py 搜索 “vehicle branding” 时即会命中这些上下文。

七、Digital Assets：数字资产

7.1 社交媒体

• 头像（Profile Picture）：使用图标版 Logo
• 封面图（Cover Image）：按平台分别制作
• 帖子模板（Post Templates）

7.2 邮件签名（Email Signature）

• HTML 响应式
• 最大宽度 600px
• 仅保留必要联系信息

CSV 补充了两条指南未展开的数字资产：Favicon（第 36 行，16x16 / 32x32 ICO/PNG/SVG，反模式 “Too complex, loses form”）与 Social Media Cover（第 34 行，强调平台安全区 “Platform-specific safe zones”）。Email Signature 的 CSV 规格与指南完全一致：“600px max width, HTML responsive, limited web-safe colors”，并额外给出 “Images blocked, heavy files” 这一现实反模式（邮件客户端屏蔽图片、附件过重）。

八、Events & Promotional：活动与宣传品

8.1 展台（Trade Show Booth）

• 模块化设计（modular design）
• 易于组装（easy assembly）
• 关键信息（key messaging）醒目可见

CSV 第 44 行给出具体规格：10x10 / 10x20 英尺标准展位尺寸、large format print 大幅面印刷、反模式 “Cheap materials, hard to assemble”。同时 Events 类还包含 Banner Stand（第 45 行，80x200cm 标准易拉宝）、Table Cover（第 46 行，6ft/8ft 桌布）、Backdrop（第 47 行，媒体墙 repeat pattern，强调摄影友好）、Name Badge 与 Lanyard（第 48-49 行）等，形成完整展会物料链。

8.2 宣传品（Promotional Items）

• 质量优先于数量
• 优先选择实用物品
• 品牌色突出

CSV 把宣传品扩展为 12 条记录（Pen、Tote Bag、Paper Bag、Gift Box、USB Drive、Water Bottle、Mug Cup、Umbrella 等），每条都带专属 Mockup Context（如 Water Bottle 的 “Lifestyle, fitness, outdoor”、Mug 的 “Lifestyle, office desk”）和针对性反模式（USB Drive 的 “Cheap mechanism, low storage”、Umbrella 的 “Cheap mechanism, breaks easily”），核心原则与指南一致：耐用机制 + 品牌色 + 实用价值。

九、数据契约：deliverables.csv 的 12 字段结构

上述七大类在 deliverables.csv 中共 50 行，表头 12 列固定：

No, Deliverable, Category, Keywords, Description, Dimensions,
File Format, Logo Placement, Color Usage, Typography Notes,
Mockup Context, Best Practices, Avoid

其中 Category 的取值比文档章节更细，共 10 类：Core Identity、Stationery、Security Access（ID Badge / Lanyard / Access Card，指南未单列）、Office Environment、Apparel、Promotional、Vehicle、Digital、Product（Packaging Box / Label / Tag / Retail Display）、Events、Documents（Certificate）。

core.py 的 CSV_CONFIG（L17-L38）明确定义了检索契约：deliverable 域以 Deliverable, Category, Keywords, Description, Mockup Context 五列作为 BM25 语料（search_cols），输出时返回全部 12 列（output_cols）。这意味着用户在 search.py 中查询 “business card” 时，命中的 Description/Keywords 决定排序，而返回的 Dimensions/Best Practices/Avoid 正是指南中那些规格条目的机器可读版本。

十、检索引擎：BM25 与四域自动路由

core.py 内置了一个轻量 BM25 实现（L42-L101）：

• 分词器 tokenize（L55-L58）：小写化、去标点、过滤长度 ≤2 的单词；
• 参数 k1=1.5、b=0.75（L45），标准 BM25 取值；
• IDF 使用平滑公式 log((N - df + 0.5) / (df + 0.5) + 1)（L77）；
• search（L152-L171）只返回得分 >0 的 top-N 结果（默认 MAX_RESULTS=3）。

detect_domain（L136-L149）负责在四个数据域之间自动路由：

域	数据文件	路由关键词示例
deliverable	deliverables.csv	card、letterhead、envelope、signage、vehicle、packaging、booth
style	styles.csv	minimal、luxury、vintage、corporate、playful
industry	industries.csv	tech、finance、legal、healthcare、hospitality
mockup	mockup-contexts.csv	mockup、scene、lighting、studio、lifestyle

无法识别时回落到 deliverable 域（L149）。search_all（L174-L181）则跨四域联合检索；get_cip_brief（L184-L215）把 industry → style → 该行业 Key Deliverables 三次检索串成一份品牌简报，取行业前 5 个关键交付物逐一回查 deliverable 域，并合成色彩系统（primary/secondary）、字体、材质与工艺——这正是把指南“规格条目”升级为“可执行设计决策”的关键函数。

十一、实战工作流：从规格到 Mockup 生成

结合 cip-design.md 与 SKILL.md，完整工作流四步（以下命令在仓库根目录执行，Windows 下将 python3 换为 python）：

1. 生成 CIP 简报（行业 → 风格 → 推荐交付物）：

python3 .claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

2. 按域检索交付物规格（即本文前八节的机器入口）：

python3 .claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 .claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 .claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 .claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

3. 生成 mockup 图片。generate.py 的 MODELS（L29-L33）定义两个模型：

模型键	模型名	定位
flash（默认）	gemini-2.5-flash-image	快速、低成本
pro	gemini-3-pro-image-preview	高质量、4K 文字渲染

# 带真实 Logo（推荐，图像编辑模式）
python3 .claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# 整套 CIP（默认 5 件：business card / letterhead / office signage / vehicle / polo shirt，见 generate_cip_set L286-L338）
python3 .claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro 模型（4K 文字）
python3 .claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# 无 Logo（AI 自解释品牌）
python3 .claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

源码层面有三个与指南规格直接相关的细节：

• load_logo_image（L36-L66）用 PIL 把 RGBA/P 模式 Logo 贴到白底再转 RGB，因为 “Gemini works best with RGB”；
• build_cip_prompt（L89-L183）对每个交付物执行一次 deliverable 域检索，取出 Description、Dimensions、Logo Placement 拼进 prompt（如 “logo placement: {logo_placement}”），即指南的规格条目成为 prompt 的组成部分；
• 输出文件命名规则为 {brand_slug}-{deliverable_slug}-{timestamp}.png（L265-L268），品牌名与交付物均小写连字符化，便于第四步按文件名反查交付物。

4. 渲染 HTML 演示页：

python3 .claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images ./cip-output

render-html.py 通过 get_deliverable_info（L109-L120）从文件名（如 topgroup-business-card-*.png）反查 DELIVERABLE_INFO 字典，输出包含品牌 Hero 区、交付物卡片（concept / purpose / specs）、base64 内嵌图片的单文件响应式暗色页面。

十二、风格与行业数据的协同

交付物规格落地时还需搭配 styles.csv（20 种风格）与 industries.csv（20 个行业）。每个风格给出 Primary/Secondary Colors（HEX 值）、Typography、Materials、Finishes、Mood、Best For / Avoid For；每个行业给出 CIP Style 推荐、Key Deliverables 与 Mood。例如：

• Corporate Minimal：#0F172A #1E3A8A #FFFFFF，材质 “Premium paper quality materials”，工艺 “Matte, spot UV”——与指南 Business Card 的 “300-400gsm / matte, spot UV, foil, emboss” 工艺清单相互印证；
• Luxury Premium：#1C1917 #D4AF37 #FFFFFF，工艺 “Gold foil, emboss, deboss”，Best For “Luxury, fashion, jewelry, hotels”，Avoid For “Budget, mass market”。

get_cip_brief 的色彩回退策略（core.py L208-L214）体现了优先级：风格行 Primary Colors → 行业行 Primary Colors，字体同理，保证即使风格检索落空，行业数据仍能兜底输出完整简报。

十三、小结：文档、数据与代码的三层一致性

cipt-deliverable-guide 的价值在于它是三层结构中“人可读”的那一层：

1. 规格层（本文主体文档）：7 大类交付物的人类语言规格，含尺寸、工艺、位置、合规要求；
2. 数据层（deliverables.csv 等 4 个 CSV）：50 条交付物 × 12 字段 + 20 风格 + 20 行业 + 20 mockup 场景，是 core.py BM25 索引的语料；
3. 执行层（search.py / generate.py / render-html.py）：把检索结果注入 prompt、调用 Gemini 图像生成与图像编辑、产出单文件 HTML 演示页。

三者之间通过字段名（如 Mockup Context、Logo Placement）与文案（如 “pique cotton”“3.5 x 2 inches”）保持逐字一致，修改任一层的规格时应对照其余两层同步更新，才能维持整套 CIP 交付物从检索到生成的可预期性。