以 skill 自身的术语
统一的设计 skill,涵盖品牌识别、design token、基于 shadcn/ui 与 Tailwind 的 UI 样式设计、logo 生成(通过 Gemini、Atlas Cloud 或 MuAPI 提供 55 种风格)、包含 50 项交付物的企业形象识别(CIP)方案、使用 Chart.js 的 HTML 演示文稿、横幅设计(社交、广告、网页、印刷共 22 种艺术指导风格)、图标设计(15 种风格,通过 Gemini 3.1 Pro 输出 SVG),以及涵盖 Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok 与 Threads 的社交媒体图片设计。它会路由到外部子 skill 以处理品牌、design-system 与 ui-styling,同时内置 logo、CIP、幻灯片、横幅、图标与社交图片的工作流,并配合 Python 脚本、AI 生成与 HTML 转截图导出功能。
它产出什么
- 通过 chrome-devtools 导出的、按精确平台尺寸生成的横幅 PNG 截图
- 15 种风格的 SVG 图标文件,支持可选的多尺寸导出和批量变体
- 按平台特定尺寸生成并存放在有序资源目录中的社交媒体图片
工作方式
- 01按任务类型路由
该 skill 将品牌识别与语调分派给 brand 子 skill,将 token 和规格分派给 design-system,将 shadcn/ui 和 Tailwind 代码分派给 ui-styling,同时通过内置工作流处理 Logo、企业形象方案、演示文稿、横幅、图标和社交图片。
- 02使用 AI 提供方生成 Logo
运行 Python 脚本,检索 55 种风格、30 种配色方案和 25 个行业指南,然后通过 Gemini Nano Banana、Atlas Cloud 或 MuAPI 生成白底 Logo。
- 03通过样机创建企业形象方案交付物
使用 Gemini Flash 或 Pro 模型为 50 项交付物生成企业形象方案样机,可选叠加 Logo,然后渲染输出内容的 HTML 演示文稿。
- 04构建策略性 HTML 演示文稿
通过加载幻灯片创建工作流参考,利用 Chart.js 集成、design token 和文案公式创建演示文稿。
- 05用 HTML/CSS 设计横幅
收集需求,通过 ui-ux-pro-max 在 Pinterest 上调研,使用 frontend-design 设计 HTML/CSS 横幅,并用 ai-artist/ai-multimodal 生成视觉素材,然后通过 chrome-devtools 按精确尺寸导出。
- 06导出并验证截图
使用 chrome-devtools 或 Playwright 以 2x 设备缩放比例按精确像素尺寸截图设计稿,在最终导出前目测检查并修复布局问题。