ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

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

ui-ux-pro-max-skill CIP 风格指南实战:企业身份设计八大量化风格规范与风格检索机制解析 ui-ux-pro-max-skill 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本文围绕 ui-ux-pro-max-skill 仓库中 CIPCorporate 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用scripts/cip/search.py --cip-brief生成 CIP 设计简报用scripts/cip/generate.py --brand --logo --industry --set调用 Gemini 生成落地物 mockup用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.mdCorporate Minimal企业极简适用行业Finance金融、Legal法律、Consulting咨询、Tech科技色彩Navy#0F172A、White#FFFFFF、蓝色点缀字体干净无衬线Inter、Helvetica材质高档哑光纸、细微纹理工艺哑光Matte、Logo 局部 UVspot UV这是金融与咨询行业的默认答案深蓝底 大量留白 无衬线字传达克制、可信。Modern Tech现代科技适用行业Tech、SaaS、Startups初创、AI色彩Purple#6366F1、Cyan#0EA5E9、Green#10B981字体几何无衬线Outfit、Poppins材质光滑表面、渐变色印刷工艺亮光Gloss、金属点缀#6366F1indigo#0EA5E9sky#10B981emerald这组色值与 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 embossWarm 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 ForDark PremiumSophisticated#0F0F0F #1A1A1A #D4AF37夜生活、奢华、时尚科技儿童、医疗、明亮场景Playful ColorfulFun#F472B6 #FBBF24 #4ADE80儿童、娱乐、游戏严肃企业、医疗Industrial RawIndustrial#374151 #78716C #F97316制造、建筑、手作柔和、奢华、女性向Scandinavian MinimalMinimal#FFFFFF #F5F5F5 #0F172A设计、家居、北欧系高饱和、传统风格Retro VintageNostalgic#8B4513 #CA8A04 #DC2626食品、饮料、手工艺现代科技Geometric ModernAbstract#6366F1 #0EA5E9 #F97316建筑、设计、创意传统保守、有机系Monochrome ElegantSophisticated#000000 #FFFFFF #D4AF37奢华、时尚、摄影多彩、活泼Gradient ModernDigital#6366F1 #EC4899 #F97316科技、游戏、数字媒体传统印刷导向Nature BiophilicOrganic#228B22 #8B4513 #0EA5E9健康、户外、生态工业、城市科技Art DecoHeritage#D4AF37 #0F172A #FFFFFF酒店、奢华、活动休闲、现代极简Swiss MinimalClean#FFFFFF #000000 #DC2626企业、建筑、设计装饰繁复、俏皮Memphis BoldPlayful#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 Name、Category、Keywords、Description、Mood输出列返回给调用方的完整规格Style Name、Category、Keywords、Description、Primary Colors、Secondary Colors、Typography、Materials、Finishes、Mood、Best For、Avoid For也就是说风格指南中的 Industries/Colors/Typography/Materials/Finishes 五个字段在数据层以 Primary/Secondary Colors、Typography、Materials、Finishes 列存在检索时只吃名称 类别 关键词 描述 气质命中后把整行规格吐出。BM25 参数与分词BM25类core.py采用标准 BM25 参数k11.5, b0.75def __init__(self, k11.5, b0.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 的 tokenIDF 采用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把风格指南落为四段式简报其选风格逻辑值得逐步拆解行业检索用查询词在 industry 域取 Top1数据源 industries.csv风格解析若未用--style显式覆盖则取该行业行的CIP Style列作为风格查询词如 Technology → Modern Tech Geometric再到 style 域取 Top1色彩系统装配color_system.primary优先取风格行的Primary Colors风格缺失时回退到行业行的Primary Colorssecondary同理推荐落地物按行业行的Key Deliverables拆分前 5 个词逐个在 deliverable 域检索并合并进简报。行业 → 风格的映射关系正是风格指南Industries字段的反向索引industries.csv 中 20 个行业的CIP Style列与 8 大核心风格的对应关系为行业CIP Style对应风格指南条目TechnologyModern Tech GeometricModern TechFinance BankingCorporate Minimal ClassicCorporate MinimalLegalClassic TraditionalClassic TraditionalConsultingCorporate Minimal SwissCorporate MinimalHospitalityLuxury Premium ElegantLuxury PremiumFashionLuxury Premium MonochromeLuxury PremiumBeauty CosmeticsSoft ElegantSoft ElegantFood BeverageWarm Organic VintageWarm OrganicAgricultureWarm Organic NaturalWarm OrganicSports FitnessBold DynamicBold DynamicAutomotiveBold Dynamic IndustrialBold DynamicHealthcareFresh Modern MinimalFresh ModernEducationFresh Modern ClassicFresh ModernNon-ProfitFresh Modern WarmFresh ModernRetailFresh Modern PlayfulFresh 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 Minimalclean minimal aesthetic, white space, subtle shadows, matte finish, professionalLuxury Premiumdark background, dramatic rim lighting, gold accents, premium materials, sophisticatedModern Techgradient colors, geometric elements, clean surfaces, futuristic, innovativeWarm Organicnatural 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_KEY并pip install google-genai pillow。色彩心理学选色依据速查风格指南末尾的 Color Psychology 表照录自 cip-style-guide.md给出跨风格通用的选色决策依据颜色语义最佳用途Blue信任、稳定Finance, Tech, HealthcareGreen成长、自然Eco, Wellness, OrganicGold奢华、尊贵Premium, JewelryRed能量、热情Food, SportsBlack精致、高级Luxury, FashionWhite干净、极简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 OrganicBrown #8B4513 / Green #228B22Kraft paperUncoated # 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-cipHTML 提案页包含品牌名、行业、风格、气质词的 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 的修饰词手工拼装提示词完整复现该技能的风格决策链路。【免费下载链接】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),仅供参考
返回列表