企业官网建设流程全解析

基于 Gemini Nano Banana 的企业视觉识别系统（CIP）设计指南：从 Brief 到 Mockup 与 HTML 提案的完整实践

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill

导读

企业视觉识别系统（Corporate Identity Program，简称 CIP）覆盖名片、信纸、办公标识、车辆、制服、包装等 50 余种交付物，是品牌落地的核心工程。本指南以 ui-ux-pro-max-skill 仓库中 design skill 的 CIP 参考文档（cip-design.md）为主线，完整讲解如何用内置的 search.py、generate.py 与 render-html.py 三个脚本完成「生成 Brief → 生成 Mockup → 渲染 HTML 提案」的完整流水线。读完本文，你将掌握 BM25 语义检索机制、基于 Gemini Nano Banana（Flash/Pro）的图像生成与图像编辑两种模式、Logo 注入的推荐做法，以及输出单文件可交付提案的完整技巧。

一、CIP 模块概览：数据、检索与生成三层架构

CIP 能力不是孤立的生成脚本，而是由结构化数据、检索内核、生成脚本、渲染脚本四层组成。从仓库目录结构可以看出其设计：

cli/assets/skills/design/ ├── data/cip/ # 结构化知识库（CSV） │ ├── deliverables.csv # 50 个交付物规格 │ ├── styles.csv # 20 种设计风格 │ ├── industries.csv # 20 个行业指引 │ └── mockup-contexts.csv # 20 种场景语境 ├── references/ │ ├── cip-design.md # 本指南的主参考文档 │ ├── cip-deliverable-guide.md # 交付物规格明细 │ ├── cip-style-guide.md # 设计风格描述 │ └── cip-prompt-engineering.md # AI 提示词工程 └── scripts/cip/ ├── core.py # BM25 搜索引擎内核 ├── search.py # 搜索 / Brief 生成 CLI ├── generate.py # Gemini 图像生成 CLI └── render-html.py # HTML 提案渲染 CLI

其中 core.py 通过CSV_CONFIG定义了四个可检索域（domain），每个域声明了参与检索的列与输出列：

二、检索内核：轻量 BM25 实现与自动域识别

search.py的搜索能力由 core.py 中的 BM25 算法提供。BM25 是一种经典的词频-逆文档频率排序算法，其核心实现在BM25类中：

• 分词：tokenize()将文本转为小写、去标点，并过滤长度 ≤ 2 的短词（如 "a"、"to"），见 core.py；
• 索引构建：fit()统计每个词的文档频率与全语料平均长度，计算 IDF（逆文档频率），见 core.py；
• 打分：score()对每个文档累加idf * tf*(k1+1) / (tf + k1*(1-b+b*len/avgdl))，其中默认参数k1=1.5（词频饱和控制）、b=0.75（文档长度归一化），见 core.py；
• 排序输出：仅保留score > 0的命中项，默认最多返回 3 条（MAX_RESULTS = 3）。

值得注意的细节是detect_domain()的自动域识别逻辑（core.py）：它通过一组领域关键词给四个域打分，得分最高的域胜出，全部为 0 时默认回退到deliverable。例如查询中含 "card"、"signage"、"vehicle" 命中 deliverable 关键词，含 "luxury"、"minimal" 命中 style，含 "hospitality"、"finance" 命中 industry，含 "mockup"、"studio" 命中 mockup 域。这意味着日常搜索无需手动指定--domain，脚本会智能路由。

而get_cip_brief()（core.py）则串联起三个域：先用行业查询定位industry记录 → 提取其CIP Style字段作为风格查询 → 取行业记录的Key Deliverables前 5 项逐一检索交付物规格，最终拼装出包含品牌名、行业、风格、色系（primary/secondary）、字体、材质、工艺与推荐交付物的完整 Brief。

三、搜索与 Brief 生成：search.py 完整命令手册

search.py 是 CIP 流水线的第一站。其参数设计如下：

3.1 生成 CIP Brief（推荐起点）

Brief 是后续生成与提案的"设计指令书"。命令格式：

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

输出结构（来自 search.py 的format_brief）包含：

• Industry：行业名、推荐 CIP 风格、情绪（Mood）；
• Design Style：风格名称、描述、材质（Materials）、工艺（Finishes）；
• Color System：Primary（主色）与 Secondary（次色）；
• Typography：字体建议；
• Recommended Deliverables：按行业推荐的交付物清单及描述截断。

例如对 "consulting"（咨询）行业，data 中的 industries.csv 会匹配到 Corporate Minimal 风格（深蓝#003366、#1E3A8A、金色#D4AF37），推荐商务卡片、高级信纸、办公室标识等交付物。生成 JSON 便于程序消费：

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

3.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

--all模式会遍历四个域各取 2 条结果（core.py），适合模糊需求下的全局扫描。

四、数据资产：交付物、风格、行业与场景的规格体系

CIP 的知识沉淀在四张 CSV 中，正是它们让检索与生成有了"依据"，而不是凭空捏造。

4.1 交付物分类（deliverables.csv，50 项）

每行交付物都带有规格字段，例如名片（deliverables.csv 第 3 行）：尺寸3.5x2 inches / 85x55mm、文件格式PDF AI print-ready、Logo 位置"front center or corner"、最佳实践"premium paper stock spot UV foil"、应避免"cluttered design too many fonts cheap paper"。这些字段会原样进入后续生成的提示词与 HTML 提案。

4.2 设计风格（styles.csv，20 种）

每种风格还定义材质、工艺与情绪：如 Corporate Minimal 使用"premium paper quality materials"+"matte spot UV"+"professional trustworthy"，而 Luxury Premium 使用"leather metal glass"+"gold foil emboss deboss"+"prestigious exclusive"。这些结构化属性正是后续提示词工程的语料来源。

4.3 行业指引（industries.csv，20 个）

行业表建立了「行业 → 风格 → 关键交付物」的映射。以 Hospitality 为例，其CIP Style为 Luxury Premium Elegant，主色#D4AF37 #0F172A #FFFFFF，关键交付物包含 uniforms、stationery、room signage。这一映射使得 Brief 可以自动为任意行业推荐风格与交付物组合。

4.4 场景语境（mockup-contexts.csv，20 种）

场景表为提示词提供拍摄语境：Marble Desk（45 度俯拍、大理石桌面、柔光）、Dark Background（戏剧性轮廓光、深黑渐变背景）、Office Lobby（现代办公室内、宽幅建筑摄影）等，并附Prompt Modifiers（如 "photorealistic soft shadows luxury"）直接用于提示词拼接。

五、Mockup 生成：generate.py 与 Gemini Nano Banana

generate.py 是整个流水线的核心生成环节，底层调用 Gemini 的原生图像生成能力（Nano Banana）。

5.1 双模型配置

模型定义在 generate.py：

通过--model pro切换。若交付物上有显著文字（如名片、信纸），推荐使用 pro 以获得清晰的 4K 文本渲染。

5.2 两种生成模式

• 纯文生图（Text-to-image）：无 Logo 时，由模型自行"解读"品牌并绘制 Logo 的近似表达；
• 图像编辑（Text-and-image-to-image，推荐）：传入真实 Logo 图片后，Gemini 会在保持 Logo 原貌的前提下将其置入场景。这是仓库明确标注的RECOMMENDED路径——因为真实品牌识别必须使用真实 Logo。

5.3 Logo 预处理细节

当提供--logo时，load_logo_image()（generate.py）用 Pillow 完成加载与规范化：RGBA/P 模式（透明图）会先合成到白色背景再转 RGB，其他模式统一转 RGB，确保送入 Gemini 的是干净的 RGB 图像。这也解释了 Setup 中为何需要pip install pillow。

5.4 提示词构建：结构化字段 → 自然语言

build_cip_prompt()（generate.py）从四个域检索到的结构化数据动态拼装提示词：

**图像编辑模式（带 Logo）**的关键指令包括：

Use the EXACT logo from the provided image - do NOT modify or recreate the logo Place the logo on the business card at: front center or corner Color scheme matching the logo colors

纯文生图模式则注入完整设计属性：

Professional corporate identity mockup photograph showing business card for brand 'TopGroup', Corporate Minimal design style, using colors #0F172A #1E3A8A #FFFFFF, Sans-serif geometric clean typography, logo placement: front center or corner, premium quality materials with matte spot UV finish, marble desk setting, professional trustworthy mood, photorealistic product photography, ...

生成结束后，图像以{brand}-{deliverable}-{timestamp}.png的命名规范保存到输出目录（generate.py），便于后续render-html.py按文件名识别交付物类型。

5.5 单件 / 全套 / 参数详解

# 单件生成（带真实 Logo，推荐） python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" # 全套 CIP 生成（默认核心五件套） 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 # 自定义交付物列表 + 宽高比 python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "GreenLeaf" --logo logo.png --industry "organic food" --deliverables "letterhead,packaging,vehicle" --ratio 16:9 # 无 Logo（AI 生成解读版） python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt # 仅预览提示词，不调用模型 python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --prompt-only

CLI 完整参数（generate.py）：

5.6 无 Logo 时的交互式引导

未传--logo且未加--no-logo-prompt时，check_logo_required()（generate.py）会提示三个选项：继续无 Logo（AI 解读版）、先用内置 logo-design skill 生成 Logo、退出并提供 Logo 路径。这恰好呼应参考文档 Workflow 中的 Tip：若暂无 Logo，可先用 Logo Design 能力生成一个，再回填--logo重新执行，形成「Logo → CIP」的链路闭环。

六、渲染 HTML 提案：render-html.py

render-html.py 将生成的 Mockup 目录一键渲染成面向客户的演示提案。

6.1 命令用法

# 默认输出到图片目录 python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output # 指定输出文件 python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip --output presentation.html

6.2 内部实现机制

• 文件名 → 交付物映射：get_deliverable_info()（render-html.py）将生成脚本产出的{brand}-{deliverable}-{timestamp}.png文件名与内置的DELIVERABLE_INFO字典匹配，自动为名片、信纸、polo 衫、车辆等 12+ 类交付物附加概念（concept）、用途（purpose）与规格（specs）文案；
• Base64 单文件嵌入：get_image_base64()（render-html.py）将 PNG 转为data:image/png;base64内联，生成的 HTML 为单文件便携形态，可直接邮件发送或演示，无外部资源依赖；
• 动态 Brief 注入：页面 Hero 区的 Industry / Style / Mood / Deliverables 元信息来自get_cip_brief()实时检索结果；
• 响应式深色主题：内置完整 CSS，桌面端为图文交替双栏（偶数项direction: rtl形成交错排版），@media (max-width: 900px)下自动切换为单栏纵向布局，适配移动端演示。

七、端到端工作流与环境准备

7.1 三步流水线

1. 生成 CIP Brief：search.py --cip-brief确定行业风格、色系与推荐交付物；
2. 生成 Mockup：generate.py --brand --logo --industry --set产出全套交付物图像（优先带真实 Logo）；
3. 渲染 HTML 提案：render-html.py --brand --industry --images产出可交付的单文件演示。

7.2 环境依赖

export GEMINI_API_KEY="your-key" pip install google-genai pillow

从源码看，API Key 还支持GOOGLE_API_KEY环境变量作为备选（generate.py）；此外load_env()（generate.py）会自动从脚本上级目录.env、~/.claude/skills/.env、~/.claude/.env三个位置加载密钥，因此也可以将密钥写入.env文件而无需每次手动 export。

八、提示词工程速查

参考文档 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

交付物级修饰：名片加marble surface, stack of cards, premium paper texture, soft shadows, 45 degree angle；信纸加flat lay with envelope and pen, overhead view；办公室标识加3D logo signage on office wall, backlit LED, brushed metal finish；车辆加3/4 front angle view, professional car wrap。

风格级修饰：Corporate Minimal 加clean minimal aesthetic, white space, matte finish；Luxury Premium 加dark background, dramatic rim lighting, gold accents；Modern Tech 加gradient colors, geometric elements, futuristic。

光照修饰：Studio 用professional studio lighting, even illumination；自然光用soft natural window light；戏剧性用dramatic directional lighting。

这些提示词片段与 generate.py 中的 prompt 组装逻辑一一对应，掌握后可直接在--prompt-only模式下微调验证。

九、最佳实践与注意事项

1. 优先提供真实 Logo：图像编辑模式能保证品牌标识的绝对一致性（"do NOT modify or recreate the logo"）；无 Logo 时 AI 的"解读"只能用于概念探索，不适合正式交付；
2. 含文字交付物用 pro 模型：名片、信纸等对文字渲染敏感，--model pro的 4K 文本渲染能力是关键；
3. 善用--prompt-only与--json：批量生成前先预览提示词，且 JSON 输出便于 Agent/CI 流水线自动化解析；
4. 按交付物匹配宽高比：车辆、横幅适合 16:9 横向构图，名片、证件适合 1:1，通过--ratio控制；
5. 组合--deliverables与--set：--set默认生成 business card、letterhead、office signage、vehicle、polo shirt 五件套，自定义时用逗号分隔列表；
6. 先 Brief 后生成：先运行--cip-brief拿到行业推荐的风格与交付物组合，避免拍脑袋选型，这正是数据驱动设计（data-driven design）的核心价值。

十、延伸阅读

• CIP 交付物规格指南：名片、信纸、办公环境、车辆、数字资产等交付物的工程规格细节；
• CIP 风格指南：各设计风格的完整描述；
• CIP 提示词工程：交付物/风格/光照级提示词修饰大全；
• 若需先生成 Logo，可参考 design skill 下的 logo 生成脚本，与 CIP 流程无缝衔接。

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill