前端与 UI

UI-UX Pro Max · Banner Design

用 HTML 做好尺寸精准的 Banner,再导出成 PNG。

这是什么

一套五步 Banner 流程:收集需求、调研艺术方向、用 HTML 和 CSS 加生成图搭出 Banner、按平台精确像素截图,再给出多个方案供迭代。

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
来自上游 SKILL.md

它对设计意味着什么

  • 每张 Banner 都按平台精确像素导出,不会被裁切或缩放。
  • 生成图不带文字,标题始终用清晰的 HTML 渲染。
  • 每次给三个艺术方向,先比选再定稿。

包含哪些内容

  • Workflow
  • Banner size quick reference
  • Art direction styles
  • Design rules
  • Prerequisites

如何安装

UI-UX Pro Max · Banner Design

  1. 克隆这个仓库。

    git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
  2. 把 Codex 指向这个 Skill 文件。

    cli/assets/skills/banner-design/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 回答用途、平台、内容、品牌、风格和数量这几个问题。

  2. 它为每个艺术方向做一张套好安全区的 HTML Banner。

  3. 按设定宽高逐张截图,超出体积上限的会压缩。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。