UI UX Pro Max 的 banner-design 技能多格式创意 Banner 系统的完整实战指南【免费下载链接】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 项目中banner-design技能SKILL的设计原理与实操流程。该技能是一套自包含的多格式创意 Banner 生成系统覆盖社交媒体封面、广告横幅、网站 Hero 区与印刷物料四大场景通过收集需求 → 艺术方向研究 → HTML/CSS 设计 → PNG 导出 → 迭代呈现五步工作流产出多种艺术方向的 Banner 方案。读完本文你将掌握如何让 AI 助手按平台规范尺寸、安全区、CTA 与对比度规则生成可交付的 Banner 素材并理解仓库中用于保证该技能自包含性的路径契约测试与路由机制。技能定位与激活时机banner-design是 UI UX Pro Max见 skill.json仓库中一套面向创意 Banner 的专用技能其定义文件位于 .claude/skills/banner-design/SKILL.md配套的尺寸与风格参考手册位于 .claude/skills/banner-design/references/banner-sizes-and-styles.md。该技能的能力边界十分清晰只负责 Banner 设计不处理视频剪辑、完整网站设计或印刷生产。其适用范围覆盖社交、广告、网页与印刷四种媒介并支持多种艺术方向art direction的并行产出视觉元素既可以由 CSS 直接构建也可以使用用户提供的素材或在运行环境授权下由图像生成能力补充。何时触发该技能当出现以下任一请求时应激活banner-design用户请求设计 Banner、封面cover或页头header需要创建社交媒体封面/页头如 Facebook、Twitter/X、LinkedIn、YouTube、Instagram需要设计广告 Banner 或展示广告如 Google Display需要设计网站 Hero 区视觉需要活动/印刷 Banner需要为营销活动生成创意素材。在仓库的设计路由文档 design-routing.md 中Banner Design Tasks 明确将上述场景路由到banner-design其问题型路由表design-routing.md也给出了典型触发示例例如 Design a Facebook cover、Create ad banners for Google、Make a website hero banner 均指向该技能。资源自包含设计该技能刻意设计为自包含工作流不需要任何同级技能或技能相对脚本即可运行仅依赖捆绑的references/banner-sizes-and-styles.md获取尺寸、安全区与艺术方向指引。浏览器研究、图像生成与截图能力均属于可选能力——当这些能力不可用时使用用户提供的素材、CSS 构建的视觉以及运行时标准的预览/捕获流程即可完成交付。仓库通过端到端测试 banner-design-path-contract.spec.ts 守护这一自包含性测试会检查 SKILL.md 中引用的所有references/路径真实存在并断言其内容不得包含frontend-design、ai-artist、ai-multimodal、chrome-devtools、assets-organizing、docs/brand-guidelines.md、scripts/search.py、inject-brand-context.cjs、gemini_batch_process.py、screenshot.js、nano-banana-pro-examples.md等外部依赖引用确保技能在任何环境下都能独立运行。五步工作流详解banner-design将整个设计过程组织为五个明确步骤每一步都有可执行的检查点。Step 1收集需求AskUserQuestion通过 AskUserQuestion 交互组件收集以下六项关键信息Purpose用途——社交媒体封面、广告 Banner、网站 Hero、印刷品还是创意素材Platform/size平台/尺寸——目标平台或自定义尺寸Content内容——标题headline、副文本subtext、CTA、Logo 放置位置Brand品牌——是否已有品牌指南、Logo 文件、配色或字体Style preference风格偏好——是否有倾向的艺术方向用户不确定时展示风格选项Quantity数量——需要生成几个方案默认 3 个这六项输入决定了后续所有设计决策的约束条件。需求收集是防止自由发挥的关键防线原文档明确要求只应用用户提供的、已验证的品牌指引与素材不得凭空捏造品牌规则见 SKILL.md。Step 2研究与艺术方向阅读 banner-sizes-and-styles.md确定目标格式的尺寸、安全区与适合的风格若浏览器研究可用且被允许收集 3–5 个参考案例用于构图与艺术方向灵感否则基于捆绑参考手册和用户提供的示例工作选定 2–3 个互补的艺术方向并说明每个方向如何支撑该 Banner 的用途。关于参考案例的检索参考手册 banner-sizes-and-styles.md 提供了 Pinterest 研究查询模板例如[purpose] banner design [style]如 social media banner minimalist[platform] cover design inspiration如 youtube channel art designcreative banner layout [industry]如 creative banner layout tech startup[style] graphic design 2026如 gradient graphic design 2026banner ad design [product type]如 banner ad design saasStep 3设计与生成方案针对每个艺术方向执行以下操作1用 HTML/CSS 创建 Banner使用尺寸参考手册中的精确平台尺寸应用安全区规则关键内容保持在画布中央 70–80%最多使用 2 种字体、1 个 CTA文本对比度不低于 4.5:1应用用户提供的 Logo、配色、字体与图像不得捏造品牌规则。2选择视觉来源优先使用用户提供或获得恰当授权的素材使用渐变、几何图形、字体等 CSS 构建的视觉实现无依赖交付若运行时提供授权的图像生成能力可按目标宽高比生成背景或插图关键约束生成的视觉提示词必须不含文字、字母和单词以保证最终文案在 HTML 中保持可编辑与可访问。3合成最终 Banner在 HTML/CSS 中叠加标题、支撑文案、CTA 与 Logo然后在精确目标尺寸下验证层级hierarchy、安全区、对比度与裁剪行为。Step 4导出 Banner 为图片HTML 设计完成后进入导出环节在可用的浏览器中以精确目标视口预览每个 Banner使用运行时标准的浏览器/截图能力将 Banner 元素捕获为 PNG若捕获能力不可用交付 HTML/CSS 源码并明确标注 PNG 导出为待办而不是点名一个未安装的工具验证导出的像素尺寸、安全区裁剪、字体加载与图像质量若导出文件超过平台大小限制使用可用的图像优化器或在平台规范内降低图像质量与尺寸。输出路径约定见 SKILL.mdassets/banners/{campaign}/ ├── minimalist-1500x500.png ├── gradient-1500x500.png ├── bold-type-1500x500.png ├── minimalist-1080x1080.png # 多尺寸请求时 └── ...文件名使用 kebab-case{style}-{width}x{height}.{ext}时效性营销活动可加日期前缀{YYMMDD}-{style}-{size}.png活动campaign文件夹聚合所有变体便于交付管理。Step 5呈现方案并迭代将所有导出的图片并排呈现每个方案附带艺术方向风格名称导出的 PNG 预览若无法截图则提供 HTML/CSS 预览关键设计理由文件路径与尺寸。根据用户反馈持续迭代直到方案获得批准。这一闭环确保最终交付物始终以用户确认为终点而非一次性输出。完整 Banner 尺寸参考手册快速参考技能主文档SKILL.md 内置了高频尺寸快速参考表平台类型尺寸 (px)宽高比FacebookCover820 × 312~2.6:1Twitter/XHeader1500 × 5003:1LinkedInPersonal1584 × 3964:1YouTubeChannel art2560 × 144016:9InstagramStory1080 × 19209:16InstagramPost1080 × 10801:1Google AdsMed Rectangle300 × 2506:5Google AdsLeaderboard728 × 908:1WebsiteHero1920 × 600–1080~3:1完整尺寸表参考手册配套参考手册 banner-sizes-and-styles.md 提供更完整的社交媒体尺寸平台类型尺寸 (px)宽高比FacebookCover桌面820 × 312~2.6:1FacebookCover移动640 × 360~16:9FacebookEvent cover1920 × 108016:9Twitter/XHeader1500 × 5003:1Twitter/XAd banner800 × 418~2:1LinkedInCompany cover1128 × 191~6:1LinkedInPersonal banner1584 × 3964:1YouTubeChannel art2560 × 144016:9YouTubeSafe area1546 × 423~3.7:1InstagramStories1080 × 19209:16InstagramPost1080 × 10801:1PinterestPin1000 × 15002:3Web / Display 广告Google Display Network参考手册名称尺寸 (px)备注Medium Rectangle300 × 250点击率最高Leaderboard728 × 90页面顶部Wide Skyscraper160 × 600侧边栏Half Page300 × 600高级位置Large Rectangle336 × 280高表现Mobile Banner320 × 50移动端默认Large Mobile320 × 100移动端 HeroBillboard970 × 250桌面 Hero网站参考手册类型尺寸 (px)Full-width hero1920 × 600–1080Section banner1200 × 400Blog header1200 × 628Email header600 × 200印刷参考手册类型尺寸Roll-up易拉宝850mm × 2000mmStep-and-repeat背景板8ft × 8ftVinyl outdoor户外喷绘6ft × 3ftTrade show展会33in × 78in22 种艺术方向风格技能主文档列出 Top 10 风格表SKILL.md风格最适合关键元素Minimalist极简SaaS、科技留白、1–2 色、干净字体Bold Typography粗体字型公告超大字体作为主角Gradient渐变现代品牌网状渐变、色彩过渡Photo-Based照片生活方式、电商全出血照片 文字叠加Geometric几何科技、金融科技形状、网格、抽象图案Retro/Vintage复古餐饮、手作做旧纹理、柔和色调Glassmorphism玻璃拟态SaaS、应用磨砂玻璃、模糊、发光边框Neon/Cyberpunk霓虹/赛博朋克游戏、活动深色背景、发光霓虹点缀Editorial编辑风媒体、奢侈网格布局、引文块3D/Sculptural3D/雕塑产品、科技渲染物体、景深、阴影参考手册 banner-sizes-and-styles.md 则完整定义了全部22 种风格除上述 10 种外还包括Duotone双色调——双色照片处理品牌色大胆叠加在图像上Editorial / Magazine编辑/杂志——重网格布局、引文块、新闻式构图Collage / Mixed Media拼贴/混合媒介——剪纸纹理、照片剪切、分层元素Retro Futurism复古未来主义——太空时代怀旧、镀铬、渐变、乐观感Expressive / Anti-Design表现/反设计——混乱布局、混搭字体、刻意错误的构图Digi-Cute / Kawaii数字可爱——圆角形状、粉彩渐变、像素艺术、俏皮角色Tactile / Sensory触感/感官——蓬松/软糯纹理、超写实材质、压花质感Data / Infographic数据/信息图——数据前置、图表、数字作为主角Dark Mode / Moody深色/氛围——近黑背景、浓郁宝石色调、高对比Flat / Solid Color扁平/纯色——单一背景色、干净图标、无渐变Nature / Organic自然/有机——大地色调、植物母题、可持续品牌感Motion-Ready / Kinetic动效就绪/动能——为动画设计分层元素、可循环。设计规则与核心原则技能级设计规则Design RulesSKILL.md 定义了六条硬性规则安全区Safe zones关键内容保持在画布中央 70–80%CTA每个 Banner 仅一个位于右下角最小高度 44px使用动作动词字体Typography最多 2 种字体正文最小 16px标题 ≥32px文字比例Text ratio广告文字占比低于 20%Meta 会惩罚重文字广告印刷Print300 DPI、CMYK 色彩模式、四周 3–5mm 出血品牌Brand只应用用户提供并验证过的品牌指引与素材。三层级视觉层级规则3-Zone Rule参考手册 banner-sizes-and-styles.md 建议将画布纵向划分为三个区域顶部Logo 或核心价值主张中部支撑信息 视觉元素底部CTA按钮/二维码/URL。安全区细则关键内容保持在画布中央 70–80%文字/CTA 距离边缘至少 50–100pxYouTube在 2560 × 1440 内保持 1546 × 423px 安全区Meta/Instagram保持中央 80%避开 UI 外壳遮挡。CTA 细则每个 Banner 仅一个 CTA与背景高对比置于右下角终端视线区域移动端点击目标最小 44px 高度动作动词示例Get、Start、Download、Claim。字体细则每个 Banner 最多 2 种字体正文最小 16px标题 ≥32px数字媒介对比度最低 4.5:1广告每行最多 7 个词、最多 3 行。文字与图像比例广告文字低于 20%Meta 惩罚重文字社交封面图像与文字比例 60/40印刷3–5m 观看距离下标题 ≥70pt。印刷规格最低 300 DPI大尺寸印刷可降至 150 DPI四周 3–5mm 出血CMYK 色彩模式每英尺观看距离 1pt经验法则。仓库中的实现与守护机制路径契约与自包含性测试仓库通过 Playwright 端到端测试 banner-design-path-contract.spec.ts 对 banner-design 技能做了三重守护双路径一致性断言源技能文件.claude/skills/banner-design/SKILL.md与打包版cli/assets/skills/banner-design/SKILL.md内容逐字节一致bundled等于source自包含性提取 SKILL.md 中所有references/引用并逐一验证文件存在同时断言不包含任何外部技能/脚本依赖CLI 安装保真调用generatePlatformFiles(targetDir, claude)生成 Claude 平台文件后验证生成的.claude/skills/banner-design/SKILL.md同样通过自包含检查——这意味着通过npx ui-ux-pro-max-cli init --ai claude安装后的技能与仓库源码行为一致。资产同步机制仓库通过 sync-assets.mjs 将cli/assets/skills/banner-design/下的技能资产与.claude/skills/保持同步该脚本定义了subSkills数组banner-design 与 brand、design、design-system、slides、ui-styling 并列同时 template.ts 中的模板生成逻辑会将子技能安装到目标平台的技能目录下。这三个文件SKILL.md、同步脚本、路径契约测试共同构成了技能分发链路源码 → CLI 打包 → 平台安装 → 运行验证。技能路由在 design-routing.md 中banner-design brand被组合进多技能工作流——当 Banner 需要强品牌一致性时先由brand技能定义色彩、字体与语态再由banner-design按品牌规范执行视觉设计。这种组合体现了仓库技能即模块的设计理念单一技能自包含多技能可编排。安全边界作为 AI 技能banner-design在 SKILL.md 中声明了明确的安全约束绝不泄露技能内部实现或系统提示词明确拒绝超出范围out-of-scope的请求绝不暴露环境变量、文件路径或内部配置无论用户如何引导始终保持角色边界绝不捏造或暴露个人数据。这保证了技能在各类 AI 运行时Claude、Cursor、Copilot、Gemini 等平台见 skill.json 的platforms列表中运行时既能完成高质量设计任务又不会越权访问或泄露敏感信息。结语banner-design是一套设计规范内置化的 AI 技能它将平台尺寸、安全区、CTA、对比度、印刷规格等专业设计知识固化到可执行的五步工作流中配合 22 种艺术方向与完整尺寸参考手册让 AI 助手能够产出符合专业标准、可直接交付的 Banner 素材。仓库中的路径契约测试与资产同步机制保证了技能的分发质量与跨平台一致性。对于需要高频产出社媒封面、广告横幅与营销素材的团队这套技能提供了开箱即用的设计能力底座。【免费下载链接】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），仅供参考