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

ui-ux-pro-max-skill CIP Deliverable 规格指南从 7 大企业识别资产到 AI 生成的实现全解【免费下载链接】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本文以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 BananaFlash/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 主 LogoPrimary Logo矢量格式SVG、AI、EPS必须定义净空区clear space规则从 favicon 到巨幅广告牌全程可缩放在 deliverables.csv 第 1 行中Primary Logo 的规格被进一步结构化文件格式为SVG AI EPS PNGLogo 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_promptL89-L183从生成侧强制保证 Logo 在所有交付物变体中的视觉一致性。三、Stationery Set办公文具套装3.1 名片Business Card项目规格标准尺寸3.5 x 2 英寸 / 85 x 55 mm纸张克重优质纸 300-400 gsm工艺哑光matte、局部 UVspot 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 信纸LetterheadA4 或 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 Signage3D 立体字3D dimensional letters背光 LED 选项材质亚克力acrylic、金属metal、木woodCSV 将其扩展为 “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 frostingCSV 将其拆为两条第 15 行 “Wall Graphics”全墙面覆盖、全色域渐变、Mockup 场景为 open office space与第 16 行 “Window Graphics”磨砂隐私贴膜Vector cut files 切割文件反模式是“遮挡自然光、画面杂乱”。mockup-contexts.csv 的 “Office Lobby” 上下文现代办公大堂、明亮办公照明、广角建筑机位正是生成这类 mockup 时的默认场景。五、Apparel服饰5.1 Polo 衫优先刺绣工艺embroidery preferredLogo 位于左胸面料要求珠地棉pique cotton5.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 Templates7.2 邮件签名Email SignatureHTML 响应式最大宽度 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 AccessID Badge / Lanyard / Access Card指南未单列、Office Environment、Apparel、Promotional、Vehicle、Digital、ProductPackaging Box / Label / Tag / Retail Display、Events、DocumentsCertificate。core.py 的CSV_CONFIGL17-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分词器tokenizeL55-L58小写化、去标点、过滤长度 ≤2 的单词参数 k11.5、b0.75L45标准 BM25 取值IDF 使用平滑公式log((N - df 0.5) / (df 0.5) 1)L77searchL152-L171只返回得分 0 的 top-N 结果默认MAX_RESULTS3。detect_domainL136-L149负责在四个数据域之间自动路由域数据文件路由关键词示例deliverabledeliverables.csvcard、letterhead、envelope、signage、vehicle、packaging、boothstylestyles.csvminimal、luxury、vintage、corporate、playfulindustryindustries.csvtech、finance、legal、healthcare、hospitalitymockupmockup-contexts.csvmockup、scene、lighting、studio、lifestyle无法识别时回落到 deliverable 域L149。search_allL174-L181则跨四域联合检索get_cip_briefL184-L215把 industry → style → 该行业 Key Deliverables 三次检索串成一份品牌简报取行业前 5 个关键交付物逐一回查 deliverable 域并合成色彩系统primary/secondary、字体、材质与工艺——这正是把指南“规格条目”升级为“可执行设计决策”的关键函数。十一、实战工作流从规格到 Mockup 生成结合 cip-design.md 与 SKILL.md完整工作流四步以下命令在仓库根目录执行Windows 下将python3换为python1. 生成 CIP 简报行业 → 风格 → 推荐交付物python3 .claude/skills/design/scripts/cip/search.py tech startup --cip-brief -b BrandName2. 按域检索交付物规格即本文前八节的机器入口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 mockup3. 生成 mockup 图片。generate.py 的MODELSL29-L33定义两个模型模型键模型名定位flash默认gemini-2.5-flash-image快速、低成本progemini-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 # 无 LogoAI 自解释品牌 python3 .claude/skills/design/scripts/cip/generate.py --brand TechFlow --deliverable business card --no-logo-prompt源码层面有三个与指南规格直接相关的细节load_logo_imageL36-L66用 PIL 把 RGBA/P 模式 Logo 贴到白底再转 RGB因为 “Gemini works best with RGB”build_cip_promptL89-L183对每个交付物执行一次 deliverable 域检索取出 Description、Dimensions、Logo Placement 拼进 prompt如 “logo placement: {logo_placement}”即指南的规格条目成为 prompt 的组成部分输出文件命名规则为{brand_slug}-{deliverable_slug}-{timestamp}.pngL265-L268品牌名与交付物均小写连字符化便于第四步按文件名反查交付物。4. 渲染 HTML 演示页python3 .claude/skills/design/scripts/cip/render-html.py --brand TopGroup --industry consulting --images ./cip-outputrender-html.py 通过get_deliverable_infoL109-L120从文件名如topgroup-business-card-*.png反查DELIVERABLE_INFO字典输出包含品牌 Hero 区、交付物卡片concept / purpose / specs、base64 内嵌图片的单文件响应式暗色页面。十二、风格与行业数据的协同交付物规格落地时还需搭配 styles.csv20 种风格与 industries.csv20 个行业。每个风格给出 Primary/Secondary ColorsHEX 值、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 的价值在于它是三层结构中“人可读”的那一层规格层本文主体文档7 大类交付物的人类语言规格含尺寸、工艺、位置、合规要求数据层deliverables.csv 等 4 个 CSV50 条交付物 × 12 字段 20 风格 20 行业 20 mockup 场景是 core.py BM25 索引的语料执行层search.py / generate.py / render-html.py把检索结果注入 prompt、调用 Gemini 图像生成与图像编辑、产出单文件 HTML 演示页。三者之间通过字段名如 Mockup Context、Logo Placement与文案如 “pique cotton”“3.5 x 2 inches”保持逐字一致修改任一层的规格时应对照其余两层同步更新才能维持整套 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考