ui-ux-pro-max-skill 的 design 技能全解从 BM25 设计知识库检索到 Gemini Logo、CIP 与 SVG 图标生成【免费下载链接】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-skilldesign技能是 ui-ux-pro-max-skill 仓库中统一品牌设计的入口技能它将 Logo 生成、企业视觉识别系统CIP样机、HTML 演示、Banner、社交图片与 SVG 图标七类设计任务整合在一份技能清单下并通过 BM25 检索本地 CSV 设计知识库 调用 Gemini / Atlas Cloud 图像模型完成从“设计决策”到“成品产出”的闭环。读完后你将掌握如何在该技能下检索 55 种 Logo 风格/配色/行业指南、用哪些命令行参数生成 Logo 与 CIP 样机、SVG 图标走的是哪条“文本模型出 XML”的管线以及 Banner 与社交图片各平台的尺寸规范。一、技能定位何时使用 design 技能design技能的技能清单文件为 SKILL.md其 frontmatter 声明了技能元信息name: designlicense: MITauthor: claudekitversion: 2.1.0argument-hint: [design-type] [context]即调用时建议传入设计类型与上下文两个参数。该技能适用于以下八类场景引自 SKILL.md 的 When to Use 一节品牌识别、品牌语调voice、品牌资产设计系统 Token 与规范基于 shadcn/ui Tailwind 的 UI 样式Logo 设计与 AI 生成企业识别系统CIP交付物演示文稿与融资路演 Deck面向社交媒体、广告、网站、印刷的 Banner 设计Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 等平台的社交图片。二、子技能路由内置能力与外部子技能的分工design 技能的核心架构是“路由表”——根据任务类型决定走内置脚本还是外部子技能这是 SKILL.md 中 Sub-skill Routing 一节的完整内容任务子技能详情品牌识别、语调、资产brand外部技能Token、规范、CSS 变量design-system外部技能shadcn/ui、Tailwind、代码ui-styling外部技能Logo 创建、AI 生成Logo内置references/logo-design.mdCIP 样机、交付物CIP内置references/cip-design.md演示文稿、路演 DeckSlides内置references/slides.mdBanner、封面、头图Banner内置references/banner-sizes-and-styles.md社交媒体图片Social Photos内置references/social-photos-design.mdSVG 图标、图标集Icon内置references/icon-design.md也就是说品牌层brand、Token 层design-system、代码层ui-styling由三个外部子技能承担而 Logo、CIP、Slides、Banner、Social Photos、Icon 六类产出型任务由 design 技能内置的 Python 脚本直接完成。三个外部子技能在本仓库中分别位于 .claude/skills/brand/SKILL.md、.claude/skills/design-system/SKILL.md 与 .claude/skills/ui-styling/SKILL.md。三、前置条件与环境配置3.1 Python 依赖该技能所有脚本均为 Python 实现。Windows 环境下应将python3替换为python例如python scripts/logo/search.py。检查 Python 是否安装python3 --version || python --version3.2 API Key 与依赖包export GEMINI_API_KEYyour-key # 在 Google AI Studio 控制台获取 pip install google-genai pillowWindows 下如需使用 pip用python -m pip install google-genai pillow。3.3 环境变量加载的优先级源码实现细节从源码结构看三个生成脚本logo/generate.py、cip/generate.py、icon/generate.py都内置了load_env()函数按以下优先级依次查找.env文件且不会覆盖已存在的环境变量技能目录下的.env~/.claude/skills/design/.env~/.claude/skills/.env~/.claude/.env。因此即使不导出GEMINI_API_KEY把 key 写入上述任一.env文件即可生效。另外 cip/generate.py 在读取 key 时同时兼容GEMINI_API_KEY与GOOGLE_API_KEY两个变量名。使用 Atlas Cloud 作为 Logo 生成提供方时则额外需要ATLASCLOUD_API_KEY。四、Logo 设计检索设计知识库 AI 生成Logo 模块覆盖 55 风格、30 种配色方案、25 个行业指南数据文件实际条目见 data/logo/styles.csv 等底层图像模型为 Gemini Nano Banana 系列。4.1 生成 Logo 设计简报python3 scripts/logo/search.py tech startup modern --design-brief -p BrandName--design-brief模式下search.py 中的generate_design_brief()会调用search_all()跨 style/color/industry 三个域各取前 2 条结果再按“INDUSTRY ANALYSIS → STYLE RECOMMENDATIONS → COLOR PALETTE OPTIONS”三段式输出行业分析、风格建议与配色方案-p指定品牌名后会作为简报标题。4.2 按域检索风格、配色、行业python3 scripts/logo/search.py minimalist clean --domain style python3 scripts/logo/search.py tech professional --domain color python3 scripts/logo/search.py healthcare medical --domain industry支持的全部命令行参数见 search.py 的 argparse 定义参数说明query位置参数检索查询--domain, -d指定域可选style/color/industry--max-results, -n最大结果数默认 3--json以 JSON 输出--design-brief, -db生成综合设计简报--brand-name, -p简报所用的品牌名4.3 检索的底层实现BM25 排序算法从源码看检索引擎并非简单的子串匹配而是 logo/core.py 中自实现的 BM25 排序分词器将查询小写化、去标点、过滤长度 ≤2 的词fit()阶段为每个词计算 IDFlog((N - df 0.5) / (df 0.5) 1)score()阶段按k11.5, b0.75的标准 BM25 公式对每行 CSV 文档打分排序文档由CSV_CONFIG中各域的search_cols列拼接而成例如 style 域检索Style Name / Category / Keywords / Best For四列输出则返回output_cols中包括Primary Colors、Typography、Effects、Avoid For等 11 列设计要素未指定--domain时detect_domain()会对查询做关键词计分自动判域如查询含 vintage、wordmark 判为 style 域含 #/palette 判为 color 域全部未命中则默认 style 域MAX_RESULTS默认为 3且只返回得分 0 的结果。4.4 用 AI 生成 Logo约定输出的 Logo 图像一律要求白色背景。python3 scripts/logo/generate.py --brand TechFlow --style minimalist --industry tech python3 scripts/logo/generate.py --prompt coffee shop vintage badge --style vintage python3 scripts/logo/generate.py --brand TechFlow --provider atlasgenerate.py 的关键实现参数模型选择默认gemini-2.5-flash-imageNano Banana快、低成本--pro切换为gemini-3-pro-image-previewNano Banana Pro专业质量、高级推理风格修饰--style的可选值来自STYLE_MODIFIERS字典共 18 种minimalist、vintage、modern、luxury、playful、corporate、organic、geometric、hand-drawn、3d、abstract、lettermark、wordmark、emblem、mascot、gradient、lineart、negative-space每种风格会被扩展成一段英文修饰语注入提示词行业提示--industry可选 10 个值tech、healthcare、finance、food、fashion、fitness、eco、education、real-estate、creative同样映射到INDUSTRY_PROMPTS提示词组装enhance_prompt()将品牌名、风格修饰、行业提示按序拼入LOGO_PROMPT_TEMPLATE模板强制“矢量风格、清晰轮廓、居中构图、纯白或透明背景、不生成文字除非明确要求”等 Logo 硬性要求宽高比--aspect-ratio支持1:1 / 16:9 / 9:16 / 4:3 / 3:4Logo 场景默认1:1正方形批量模式--batch N --output-dir ./logos会按内置的 9 种批次风格minimalist、modern、geometric、gradient、abstract、lettermark、negative-space、lineart、3d逐一生成变体每次请求间 sleep 2 秒做限流Atlas Cloud 提供方--provider atlas走异步生成 API模型为google/nano-banana-2-lite/text-to-image提交后每 2 秒轮询一次状态、最多 90 次源码中_validate_public_https_url()会对媒体下载地址做 HTTPS、非内网 IP 校验防止重定向到私有地址。--pro与--provider atlas互斥会直接报错。可用--list-styles与--list-industries查看完整可选值。生成完成后SKILL.md 要求始终通过AskUserQuestion询问用户是否需要 HTML 预览若需要则调用/ui-ux-pro-max进入画廊展示。另外文档中有一条重要运维约定当脚本失败时应尝试直接修复脚本而不是跳过。五、CIP 设计50 交付物、20 风格、20 行业的视觉识别样机CIP 模块基于 Gemini Nano BananaFlash/Pro生成企业识别样机其数据由 data/cip/ 下的 4 个 CSV 支撑deliverables.csv约 50 条交付物、styles.csv、industries.csv各约 20 条、mockup-contexts.csv约 20 条样机场景。5.1 生成 CIP 简报python3 scripts/cip/search.py tech startup --cip-brief -b BrandName5.2 按域检索CIP 检索比 Logo 多一个mockup域四个域分别映射 cip/core.py 的CSV_CONFIGpython3 scripts/cip/search.py business card letterhead --domain deliverable python3 scripts/cip/search.py luxury premium elegant --domain style python3 scripts/cip/search.py hospitality hotel --domain industry python3 scripts/cip/search.py office reception --domain mockupdeliverable 域输出包含Dimensions、Logo Placement、Mockup Context等 12 列mockup 域输出包含Scene Description、Lighting、Camera Angle、Props等摄影场景要素——这些字段会直接进入后续提示词。5.3 生成 CIP 样机# 带 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 # 无 Logo 纯文生图 python3 scripts/cip/generate.py --brand TechFlow --deliverable business card --no-logo-prompt模型选择flash默认gemini-2.5-flash-image快速低成本与progemini-3-pro-image-preview高质量、4K 文字渲染与 cip/generate.py 中MODELS字典一致。关键参数补充来自 argparse 定义--deliverables可传逗号分隔列表自定义套装内容--set缺省套装为business card, letterhead, office signage, vehicle, polo shirt五项--ratio指定宽高比默认 1:1--output指定输出目录--prompt-only只打印提示词不调用模型--json以 JSON 输出。从源码结构看CIP 的“带 Logo 模式”实质是 Gemini 的文生图 图生图编辑双模式load_logo_image()用 Pillow 读取 Logo若是 RGBA/P 模式会自动合成到白底 RGB 图上Gemini 对 RGB 处理最佳提供--logo时build_cip_prompt()会生成强调“使用提供的原始 Logo、不得修改或重绘、Logo 必须与输入图像完全一致”的编辑型提示词且调用generate_content时contents [prompt, logo_image]同时传入文本与图像未提供 Logo 时走纯文生图提示词中则显式注入检索到的主色、字体、材质、场景与情绪字段未提供 Logo 且未加--no-logo-prompt时脚本会交互询问三选一继续无 LogoAI 自行诠释品牌 Logo/ 先去用 Logo 脚本生成 / 退出并补--logo参数。提示词的组装逻辑在build_cip_prompt()中先以search(deliverable, deliverable, 1)取交付物详情再依次检索 style缺省 corporate minimal、industry缺省 technology、mockup 场景最终拼接为“photorealistic product photography、soft natural lighting、8K resolution”一类的摄影级提示词。5.4 渲染 HTML 展示页将生成的样机图渲染为 HTML 展示页python3 scripts/cip/render-html.py --brand TopGroup --industry consulting --images /path/to/cip-output文档提示若品牌尚无 Logo应先走上文 Logo 设计流程生成再回来到 CIP 中传--logo。六、Slides基于知识库的 HTML 演示文稿Slides 子能力是“策略驱动的 HTML 演示文稿”使用 Chart.js、设计 Token 与文案公式。创建流程加载 references/slides-create.md。其知识库文件索引如下主题文件创建指南slides-create.md版式模式slides-layout-patterns.mdHTML 模板slides-html-template.md文案公式slides-copywriting-formulas.md策略slides-strategies.mdSlides 没有独立 Python 脚本见 SKILL.md 的 Scripts 表产出依赖 Agent 按知识库文档编写 HTML这与 Logo/CIP/Icon 三条脚本化管线形成对照。七、Banner 设计22 种艺术指导风格的跨平台头图Banner 子能力覆盖社交、广告、网站、印刷四类用途共 22 种艺术指导风格流程中会激活frontend-design、ai-artist、ai-multimodal、chrome-devtools等技能。完整尺寸与风格参考见 references/banner-sizes-and-styles.md。7.1 五步工作流收集需求AskUserQuestion——用途、平台、内容、品牌、风格、数量调研——激活ui-ux-pro-max在 Pinterest 浏览参考图设计——用frontend-design编写 HTML/CSS Banner用ai-artist/ai-multimodal生成视觉素材导出——用chrome-devtools截屏为精确像素尺寸的 PNG呈现——所有方案并排展示按反馈迭代。7.2 常用尺寸速查表平台类型尺寸 (px)Facebook封面820 x 312Twitter/X头图1500 x 500LinkedIn个人主页1584 x 396YouTube频道头图2560 x 1440Instagram快拍1080 x 1920Instagram帖子1080 x 1080Google Ads中矩形300 x 250网站Hero 头图1920 x 600-10807.3 高频艺术风格风格适用场景极简 MinimalistSaaS、科技粗体排版 Bold Typography公告类渐变 Gradient现代品牌照片主导 Photo-Based生活方式、电商几何 Geometric科技、金融科技玻璃拟态 GlassmorphismSaaS、App霓虹/赛博朋克 Neon/Cyberpunk游戏、活动7.4 设计硬规则安全区关键内容放在中央 70–80% 区域每个 Banner 只放一个 CTA置于右下角高度不低于 44px最多 2 种字体正文最小 16px标题不小于 32px广告类文字面积不超过 20%Meta 会对超量文字广告降权印刷品300 DPI、CMYK、3–5mm 出血。八、Icon 设计文本模型直出 SVG 的管线Icon 子能力共 15 种风格、12 个分类使用Gemini 3.1 Pro Preview 纯文本输出生成 SVG因为 SVG 本身就是 XML 文本无需图像生成 API。8.1 单个图标生成python3 scripts/icon/generate.py --prompt settings gear --style outlined python3 scripts/icon/generate.py --prompt shopping cart --style filled --color #6366F1 python3 scripts/icon/generate.py --name dashboard --category navigation --style duotone8.2 批量变体与多尺寸导出python3 scripts/icon/generate.py --prompt cloud upload --batch 4 --output-dir ./icons python3 scripts/icon/generate.py --prompt user profile --sizes 16,24,32,48 --output-dir ./icons8.3 风格速查与模型说明风格适用场景outlinedUI 界面、Web 应用filled移动 App、导航栏duotone营销页、落地页rounded友好型 App、健康类sharp科技、金融科技、企业级flatMaterial 设计、Google 风格gradient现代品牌、SaaS模型为gemini-3.1-pro-preview仅输出文本SVG 为 XML 文本不需要图像生成 API。从源码看icon/generate.py 的管线有几个值得注意的设计ICON_STYLES字典内置 15 种风格指令比 SKILL.md 表格多出 thin、bold、glassmorphism、pixel、isometric、glyph、animated-readyICON_CATEGORIES内置 12 个分类词表均与文档声明的“15 styles, 12 categories”一致风格数据另有 data/icon/styles.csv 承载提示词模板SVG_PROMPT_TEMPLATE硬性要求ViewBox0 0 24 24、stroke/fill 使用currentColor可继承 CSS 颜色、不嵌字体与栅格图、必须带title无障碍描述、仅输出svg代码块extract_svgs()采用三级回退提取模型输出先匹配svg代码块再匹配xml块最后匹配裸svg标签提升了对模型输出格式漂移的鲁棒性apply_color()将currentColor替换为--color指定的色值generate_sizes()对每个尺寸以对应 viewbox 单独生成一次并 sleep 1 秒限流单图标生成为temperature0.7, max_output_tokens4096批量模式为temperature0.9, max_output_tokens16384。九、Social PhotosHTML/CSS 到截屏的社交图片流水线Social Photos 支持多平台社交图片设计走“HTML/CSS → 截屏导出”路线会用到ui-ux-pro-max、brand、design-system、chrome-devtools等技能尺寸与模板细则见 references/social-photos-design.md。9.1 八步工作流编排——project-management技能拆解 TODO独立任务用并行子代理解析——拆解提示词中的主体、平台、风格、品牌上下文、内容要素构思——产出 3–5 个概念经AskUserQuestion呈现设计——依次调用/ckm:brand→/ckm:design-system→ 随机调用/ck:ui-ux-pro-max或/ck:frontend-design按“概念 × 尺寸”逐个写 HTML导出——chrome-devtools或 Playwright 按精确像素截屏2x deviceScaleFactor校验——用 Chrome MCP 或chrome-devtools技能目视检查导出结果修复布局/样式问题后重新导出报告——设计决策摘要写入plans/reports/整理——调用assets-organizing技能归档输出文件与报告。9.2 关键尺寸表平台尺寸 (px)平台尺寸 (px)IG 帖子1080×1080FB 帖子1200×630IG 快拍1080×1920X 帖子1200×675IG 轮播1080×1350LinkedIn1200×627YouTube 缩略图1280×720Pinterest1000×1500十、组合工作流品牌全案与设计系统落地SKILL.md 定义了两条端到端组合流程完整品牌包Complete Brand PackageLogo→scripts/logo/generate.py→ 生成 Logo 变体CIP→scripts/cip/generate.py --logo ...→ 创建交付物样机Presentation→ 加载 slides-create.md → 构建路演 Deck。新设计系统New Design SystemBrandbrand 技能→ 定义色彩、字体、语调Tokensdesign-system 技能→ 创建语义化 Token 分层Implementui-styling 技能→ 配置 Tailwind、shadcn/ui。十一、参考资料与脚本清单11.1 参考资料索引主题文件设计路由design-routing.mdLogo 设计指南logo-design.mdLogo 风格logo-style-guide.mdLogo 色彩logo-color-psychology.mdLogo 提示词logo-prompt-engineering.mdCIP 设计指南cip-design.mdCIP 交付物cip-deliverable-guide.mdCIP 风格cip-style-guide.mdCIP 提示词cip-prompt-engineering.mdSlides 创建slides-create.mdSlides 版式slides-layout-patterns.mdSlides 模板slides-html-template.mdSlides 文案slides-copywriting-formulas.mdSlides 策略slides-strategies.mdBanner 尺寸与风格banner-sizes-and-styles.md社交图片指南social-photos-design.md图标设计指南icon-design.md11.2 脚本清单脚本用途scripts/logo/search.py检索 Logo 风格、配色、行业scripts/logo/generate.py调用 Gemini AI 生成 Logoscripts/logo/core.pyLogo 数据 BM25 检索引擎scripts/cip/search.py检索 CIP 交付物、风格、行业、样机场景scripts/cip/generate.py调用 Gemini 生成 CIP 样机scripts/cip/render-html.py将 CIP 样机渲染为 HTML 展示页scripts/cip/core.pyCIP 数据 BM25 检索引擎scripts/icon/generate.py用 Gemini 3.1 Pro 生成 SVG 图标11.3 集成关系外部子技能brand、design-system、ui-styling关联技能frontend-design、ui-ux-pro-max、ai-multimodal、chrome-devtools。十二、总结design技能的价值在于把“设计决策”数据化、把“设计执行”脚本化BM25 检索引擎logo/core.py、cip/core.py让 Agent 能在生成前先给出有数据依据的风格/配色/交付物建议三条生成管线Logo 文生图、CIP 图生图编辑、Icon 文本出 SVG各有明确模型分工gemini-2.5-flash-image/gemini-3-pro-image-preview/gemini-3.1-pro-previewBanner 与 Social Photos 则规定了平台尺寸、安全区与导出校验的完整工程化流程。按本文第三节完成 API Key 配置后即可从 4.1 的设计简报检索起步沿第十节的品牌全案工作流走完一个品牌的 Logo → CIP → 路演 Deck 完整闭环。【免费下载链接】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），仅供参考