前端与 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
它对设计意味着什么
- 每张 Banner 都按平台精确像素导出,不会被裁切或缩放。
- 生成图不带文字,标题始终用清晰的 HTML 渲染。
- 每次给三个艺术方向,先比选再定稿。
包含哪些内容
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
如何安装
UI-UX Pro Max · Banner Design
-
克隆这个仓库。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
把 Codex 指向这个 Skill 文件。
cli/assets/skills/banner-design/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
回答用途、平台、内容、品牌、风格和数量这几个问题。
-
它为每个艺术方向做一张套好安全区的 HTML Banner。
-
按设定宽高逐张截图,超出体积上限的会压缩。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。