ui-ux-pro-max-skill Logo 设计指南:55+ 风格、BM25 检索与 Gemini/Atlas 双引擎 AI 生成实战 📅 发布时间:2026/9/18 2:47:25 👁 浏览次数: ui-ux-pro-max-skill Logo 设计指南55 风格、BM25 检索与 Gemini/Atlas 双引擎 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 项目中内建的 AI Logo 设计能力如何用 BM25 检索style/color/industry三类设计知识库、一键生成结构化设计简报Design Brief、并通过 Gemini Nano Banana默认与 Atlas Cloud显式 opt-in双提供商批量生成品牌 Logo。读完本文你将能独立完成从需求描述 → 知识检索 → 简报生成 → 多风格变体生成 → HTML 预览的完整 Logo 设计流水线并掌握每条命令的底层实现原理与可复制参数。一、能力总览一个内置在 Skill 里的 Logo 设计引擎ui-ux-pro-max-skill 的 design 技能内置了一个完整的 Logo 设计子系统核心参考文档是 cli/assets/skills/design/references/logo-design.md由 55 种设计风格、30 个配色方案、25 个行业指南组成知识底座。该子系统与 CIP企业形象识别系统、Slides、Banner、Icon 等模块并列在 cli/assets/skills/design/SKILL.md 中通过子技能路由表被统一编排Logo creation, AI generation → references/logo-design.md。整套能力由三个 Python 脚本驱动脚本职责scripts/logo/core.py纯 Python 实现的 BM25 检索引擎负责在 logo 数据 CSV 上做相关性排序scripts/logo/search.pyCLI 入口搜索风格/配色/行业或一键生成设计简报scripts/logo/generate.pyCLI 入口调用 Gemini 或 Atlas Cloud 图像生成 API 产出 Logo数据层是三个精心策划的 CSV 知识库位于 cli/assets/skills/design/data/logo/styles.csv55 行风格记录含类别、关键词、主/辅色、字体、效果、适用/规避场景、复杂度、时代属性colors.csv55 个配色方案每个含 5 个 Hex 色值与心理语义industries.csv55 个行业指南每个含推荐风格、主色、字体、常见符号、氛围、最佳实践与规避项。从源码结构看数据规模55 styles / 55 palettes / 55 industries与文档中55 styles, 30 color palettes, 25 industry guides的描述属于演进中的版本表述实际数据文件以当前仓库为准。二、快速开始环境准备运行 Logo 脚本前需要完成两件事设置 Gemini API Key 并安装google-genai客户端库Atlas Cloud 作为可选提供商只需额外设置 Key 即可不要求额外 Python 包因为它走的是标准 HTTP 异步 API。export GEMINI_API_KEYyour-key pip install google-genai # 可选Atlas Cloud 提供商无需额外 Python 包 export ATLASCLOUD_API_KEYyour-key两点提示见 SKILL.md 的 PrerequisitesWindows 用户用python代替python3例如python scripts/logo/search.py ...用python -m pip install ...代替pip install ...密钥注入方式generate.py的load_env()会按优先级依次加载三个位置的.env文件skill 目录父级、~/.claude/skills/.env、~/.claude/.env并遵循环境变量已存在则不覆盖的原则见 generate.py。三、设计简报Design Brief推荐的起点面对任何 Logo 需求第一件事不是直接生成图片而是先生成一份结构化的设计简报。search.py的--design-brief模式会同时在 style / color / industry 三个域内各检索 2 条最佳结果拼装成包含行业分析、风格推荐、配色方案的完整决策文档python3 ~/.claude/skills/design/scripts/logo/search.py tech startup modern --design-brief -p BrandName注~/.claude/skills/design/是安装后的路径形态在仓库内可直接用cli/assets/skills/design/scripts/logo/search.py的相对路径运行。参数说明见 search.py参数简写说明query—必填搜索词例如 tech startup modern--design-brief-db生成综合设计简报跨三域检索--brand-name-p品牌名出现在简报标题中--domain-d限定域style/color/industry--max-results-n结果数上限默认 3--json—输出 JSON便于程序化消费由generate_design_brief()search.py生成的简报包含三块内容INDUSTRY ANALYSIS行业推荐风格、主色、字体、常见符号、氛围、最佳实践、应规避项STYLE RECOMMENDATIONS风格名称与类别、主/辅色、字体、效果、适用场景、复杂度COLOR PALETTE OPTIONS方案名、Primary/Secondary/Accent/Background 四个 Hex 值、心理语义。输出做了 token 优化单字段超过 300 字符会被截断专为 LLM 消费设计见format_output()search.py。四、按域检索Style / Color / Industry 三种玩法search.py的普通模式按域检索。三个域对应三份 CSV 与各自的检索/输出列配置见 core.py# 风格检索在 Style Name/Category/Keywords/Best For 列上做 BM25 python3 ~/.claude/skills/design/scripts/logo/search.py minimalist clean --domain style # 配色检索在 Palette Name/Category/Keywords/Psychology/Best For 列上做 BM25 python3 ~/.claude/skills/design/scripts/logo/search.py tech professional --domain color # 行业检索在 Industry/Keywords/Recommended Styles/Mood 列上做 BM25 python3 ~/.claude/skills/design/scripts/logo/search.py healthcare medical --domain industry域自动检测不传--domain时detect_domain()core.py会按查询词命中情况自动选择最相关的域——例如查询含 minimalist/vintage/modern/emblem 等词归入 style含 color/palette/hex/#/blue 等词归入 color含 tech/healthcare/finance/food 等行业词归入 industry都未命中则默认 style。BM25 检索原理为什么相关性能这么好core.py从零实现了一个标准 BM25 排序算法core.py关键参数为k11.5词频饱和、b0.75文档长度归一化这是 BM25 的经典默认取值分词小写化 → 去标点 → 过滤长度 ≤ 2 的短词IDF 计算log((N - df 0.5) / (df 0.5) 1)平滑版本避免除零打分对每个查询词按idf * tf*(k11) / (tf k1*(1 - b b*dl/avgdl))累加再按总分降序返回。检索时每行记录会用search_cols指定的列拼接成一篇文档整表构成语料库fit()建索引、score()打分仅返回得分 0 的结果core.py。这意味着查询语言不必与 CSV 中的词完全一致——例如搜 tech professional 也能命中语义相近的配色方案这正是设计知识检索最需要的模糊匹配能力。五、AI 生成 LogoGemini 与 Atlas Cloud 双引擎检索到方向后用generate.py真正产出图片。文档反复强调一条硬性规则输出 Logo 一律使用白色背景该规则也被固化进内置提示词模板见下文。# 方式一品牌名 风格 行业最常用 python3 ~/.claude/skills/design/scripts/logo/generate.py --brand TechFlow --style minimalist --industry tech # 方式二直接写自然语言提示词 python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt coffee shop vintage badge --style vintage # 方式三显式切换到 Atlas Cloud 提供商 python3 ~/.claude/skills/design/scripts/logo/generate.py --brand TechFlow --provider atlas5.1 完整参数清单generate.py的全部 CLI 参数generate.py参数简写说明可选值/默认值--prompt-pLogo 描述提示词自由文本--brand-b品牌名会插入提示词开头Logo for 品牌名:自由文本--style-s设计风格STYLE_MODIFIERS18 种风格键见 5.3--industry-i行业INDUSTRY_PROMPTS10 个行业键见 5.3--output-o输出文件路径默认自动生成品牌名_时间戳.png--output-dir—批量模式输出目录默认./品牌名_logos--batch—批量生成数量进入批处理模式整数最大 9受内置风格列表限制--brand-context—附加品牌上下文拼进每个变体提示词自由文本--pro—使用 Nano Banana Pro 模型仅--provider gemini可用--provider—图像提供商gemini默认/atlas--atlas-model—Atlas 模型 ID默认google/nano-banana-2-lite/text-to-image--aspect-ratio-r宽高比1:1默认/16:9/9:16/4:3/3:4--list-styles—列出所有可用风格布尔--list-industries—列出所有可用行业布尔两个约束关系值得注意--pro与--provider atlas互斥代码会直接parser.error报错见 generate.py--prompt与--brand至少提供一个否则报错。5.2 模型矩阵与参数默认值从源码常量generate.py可以确认提供商模型 ID定位Gemini Nano Banana默认gemini-2.5-flash-image快速、高并发、低延迟Gemini Nano Banana Pro--progemini-3-pro-image-preview专业质量、更强推理Atlas Cloud--provider atlasgoogle/nano-banana-2-lite/text-to-image异步图像生成 API显式 opt-in其他关键默认值宽高比默认1:1方形最适合 LogoAtlas 轮询间隔 2 秒、最多 90 次轮询约 3 分钟上限批量模式每次请求间 sleep 2 秒做限速输出文件名默认格式为品牌名_YYYYMMDD_HHMMSS.png品牌名中的空格替换为下划线。Gemini 路径还会配置 4 类安全设置仇恨言论/危险内容/色情/骚扰阈值BLOCK_LOW_AND_ABOVE以及response_modalities[IMAGE, TEXT]generate.py。5.3 内置提示词增强风格修饰器与行业提示enhance_prompt()generate.py会把用户输入与STYLE_MODIFIERS、INDUSTRY_PROMPTS、品牌名自动拼接再套进LOGO_PROMPT_TEMPLATE模板。模板强制要求矢量风格插图、任意尺寸可缩放、清晰剪影、居中构图、纯白或透明背景、无多余文字、高对比清晰边缘、方形居中输出——这些正是AI 生成 Logo最容易翻车的地方模板层面直接兜底。可用风格键18 种minimalist、vintage、modern、luxury、playful、corporate、organic、geometric、hand-drawn、3d、abstract、lettermark、wordmark、emblem、mascot、gradient、lineart、negative-space。每个键都配有具体到构图细节的修饰词例如negative-space对应 clever use of white space, hidden meaning, dual imagery, optical illusion。可用行业键10 个tech、healthcare、finance、food、fashion、fitness、eco、education、real-estate、creative各含行业专属意象词如 tech 对应 circuit-like elementshealthcare 对应 cross or heart symbol。5.4 Atlas Cloud 异步生成与安全下载--provider atlas走完全不同的异步流程generate.py先 POST/model/generateImage提交任务拿到 prediction ID然后每 2 秒轮询/model/prediction/{id}直到状态为completedfailed/timeout/canceled直接抛错最终从输出 URL 下载图片。值得一提的是安全设计_validate_public_https_url()会拒绝非 HTTPS、带用户名密码、localhost/.local/.internal域名以及非公网 IP 的媒体 URL_SafeRedirectHandler对重定向做同样的校验generate.py下载时还会校验Content-Type必须以image/开头——防止 API 返回恶意或非图片内容。单测 tests/test_generate.py 验证了提交一次 轮询至完成的调用序列、生成请求不重试、以及媒体 URL 安全校验等行为。5.5 批量生成一次产出 9 种风格变体--batch N进入批处理模式generate_batch()generate.py会按内置的 9 种风格依次生成变体minimalist、modern、geometric、gradient、abstract、lettermark、negative-space、lineart、3d输出文件名格式为品牌名_风格_序号.pngpython3 ~/.claude/skills/design/scripts/logo/generate.py --brand Unikorn --batch 9 --output-dir ./logos --pro批量模式会自动os.makedirs输出目录、在变体间限速、最后汇总成功/失败数量。这让给客户看多个候选方案变成一条命令的事。六、风格体系与配色心理知识库速查文档自带两张核心速查表源自 styles.csv 与 colors.csv 的真实数据。6.1 风格分类总览分类风格General通用Minimalist、Wordmark、Lettermark、Pictorial Mark、Abstract Mark、Mascot、Emblem、Combination MarkAesthetic美学Vintage/Retro、Art Deco、Luxury、Playful、Corporate、Organic、Neon、Grunge、WatercolorModern现代Gradient、Flat Design、3D/Isometric、Geometric、Line Art、Duotone、Motion-ReadyClever巧思Negative Space、Monoline、Split/Fragmented、Responsive/Adaptive更完整的风格语义关键词、主/辅色、字体、效果、复杂度、时代可查询 CSV 或用--list-styles直接输出例如Minimalistclean, simple, essential, whitespace, geometric, modern黑白灰单色 单一强调色细字重无衬线无特效、高对比适合 SaaS 与专业服务复杂度 Low时代 2010s-Present。6.2 配色心理速查颜色心理语义最佳场景Blue信任、稳定金融、科技、医疗Green成长、自然环保、健康、有机Red能量、激情食品、体育、娱乐Gold奢华、高级时尚、珠宝、酒店Purple创意、创新美妆、创意、科技完整版logo-color-psychology.md还提供了每个颜色的 Hex 示例与搭配色如 BlueNavy#003366、Royal#0055A4、Sky#0EA5E9搭配白/金/浅灰、行业配色矩阵如 Food 主色红橙、规避蓝色——蓝色是食欲抑制剂、四种配色和谐类型单色/互补/类似/三色以及无障碍要求对比度最低 4.5:1WCAG AA、避免红绿单通道指示、灰度测试、考虑约 8% 的男性色盲用户。colors.csv中每个方案都给出了 Primary/Secondary/Accent/Background/Text 五个 Hex 值例如Tech Gradient#6366F1 / #8B5CF6 / #06B6D4 / #0F172A / #F8FAFC。七、行业默认配置开箱即用的方向感文档给出 5 个行业的默认推荐完整版在 industries.csv55 个行业行业推荐风格配色字体TechMinimalist、Abstract蓝、紫、渐变几何无衬线HealthcareProfessional、Line Art蓝、绿、青干净无衬线FinanceCorporate、Emblem藏蓝、金衬线或干净无衬线FoodVintage Badge、Mascot暖红、橙友好、手写体FashionWordmark、Luxury黑、金、白优雅衬线以Food Restaurant行为例CSV 中完整字段为Vintage Badge, Mascot, Combination主色#DC2626 #F97316 #CA8A04字体 friendly script 或粗体无衬线符号餐具/厨师帽/食物图形氛围 appetizing warm inviting最佳实践暖色 清晰可读规避冷色、过度复杂。这类结构化知识正是search.py --domain industry检索与--design-brief简报的底层数据源。八、端到端工作流从需求到 HTML 预览文档定义的标准工作流共 4 步生成设计简报→scripts/logo/search.py --design-brief确定方向生成 Logo 变体→scripts/logo/generate.py --brand --style --industry产出候选图询问用户是否需要 HTML 预览→ 使用AskUserQuestion工具如需要→ 调用/ui-ux-pro-max技能生成 HTML 图库gallery。完整落地示例# 1. 先出简报明确 tech 行业的方向 python3 cli/assets/skills/design/scripts/logo/search.py tech startup modern --design-brief -p TechFlow # 2. 按简报推荐生成 9 个风格变体方形、白色背景 python3 cli/assets/skills/design/scripts/logo/generate.py --brand TechFlow --batch 9 --output-dir ./techflow_logos --aspect-ratio 1:1 # 3. 与用户确认是否进入 HTML 预览确认后交给 /ui-ux-pro-max 渲染 gallery配合使用 SKILL.md 中定义的Complete Brand Package流程Logo 还能无缝衔接 CIP 虚拟样机scripts/cip/generate.py --logo ...与商业路演 Slides形成品牌全案闭环。九、常见坑与进阶提示背景必须是白色内置提示词模板已强制 plain white or transparent background不要再给模型自由发挥背景的空间文字问题AI 对文字渲染不可靠模板默认 No text unless specifically requested复杂字标建议单独生成宽高比Logo 默认1:1需要横幅/竖版时显式传--aspect-ratio 16:9或9:16别用照片风提示词中应包含 vector-style illustration 语义模板已内置避免 photorealistic 输出单色可用性交付前对照 logo-style-guide.md 的可扩展性清单自查——16×16 favicon 可辨识、名片尺寸清晰、支持单色与黑白、无缩放后消失的细节想深入掌握提示词阅读 logo-prompt-engineering.md内含按风格组织的关键词库、负向提示NOT: photorealistic, 3D render, clip art, watermarks...、行业专属提示模板与保持/修改变体请求结构。十、设计决策背后的工程保障最后从工程视角总结这套 Logo 子系统的可靠性设计均有源码/测试佐证可离线检索core.py的 BM25 引擎是纯 Python 标准库实现csv/re/math/collections不依赖任何外部检索服务知识检索不消耗 API 额度密钥多级加载.env按 skill 目录 →~/.claude/skills/.env→~/.claude/.env优先级加载且不覆盖已有环境变量提供商可插拔generate_logo()通过provider参数统一分发到_generate_with_gemini或_generate_with_atlas新增提供商只需扩展分发点安全下载Atlas 媒体 URL 做 HTTPS/公网 IP 校验 Content-Type 白名单可测试tests/test_generate.py 用 mock 验证了 Atlas 轮询时序、请求体结构、失败不重试等关键路径确保生成流程回归可控。从需求描述到多风格 Logo 落地这套内置引擎把设计知识检索 AI 生成 品牌全案衔接压缩进了几条 CLI 命令结合 SKILL.md 的子技能路由它可以作为 Agent 在品牌、CIP、Slides 等场景中的标准 Logo 能力入口。【免费下载链接】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),仅供参考