工具集

引导 agent 在新建或改版界面时先确定视觉方向，在配色、字体与布局上做有取舍的选择，避免千篇一律的模板化 AI 界面。Anthropic 官方技能。

按 Slack 表情（建议 128×128）与消息动图（480×480）的尺寸、帧率、色数和时长建议制作 GIF，提供动画构思要点、GIF 组装与校验工具，基于 Python 与 Pillow。Anthropic 官方技能。

用 p5.js 与种子随机数创作生成艺术（流场、粒子系统等）：先写算法美学理念，再输出可交互调参的 HTML 查看器。Anthropic 官方技能。

先提炼一套设计理念，再用代码绘制海报、插画等静态视觉作品，输出 PNG 或 PDF，强调原创、不照搬已有艺术家作品。Anthropic 官方技能。

内置 10 套配色与字体主题，可套用到幻灯片、文档、报告和 HTML 落地页等产出物，也能按需求即时生成新主题。Anthropic 官方技能。

界面设计知识库技能：按产品类型检索界面风格、配色、字体搭配、图表与 UX 规范，并生成完整设计系统，覆盖 React、SwiftUI、Flutter 等 22 种技术栈。需本机安装 Python 3。

MoneyPrinterTurbo 官方技能：给一个主题或一段文案，agent 自动安装配置并生成带配音、素材、字幕和背景音乐的短视频，默认输出中文竖屏 MP4。需要一个大模型 API Key（Kimi、DeepSeek、OpenAI 等均可）和免费的 Pexels 素材 Key，支持 macOS 与 Windows。

生成或编辑照片、插画、纹理、游戏精灵、产品样机与透明底素材等位图。Codex 内置的系统技能，默认调用内置 image_gen 工具，无需单独安装；经用户确认可改用附带的 CLI 脚本，需要 OPENAI_API_KEY。OpenAI 官方维护。

shadcn/ui 官方技能：让 agent 借助 shadcn CLI 读取项目配置与组件文档，按规范添加、搜索、组合和修复组件，遵守样式、表单与无障碍规则，也能用预设初始化新项目。

让 agent 生成的前端摆脱模板感：先判断设计方向，再用布局变化、动效强度、信息密度三个参数调节效果；另含改版审计、极简与粗野主义风格及设计参考图生成等技能。

前端设计打磨技能：一个技能提供 polish、audit、critique、typeset 等 24 条命令，并用 61 条确定性检测规则找出典型的 AI 生成界面问题，支持在浏览器里实时迭代。适用于 Claude Code、Codex、Cursor 等工具。

开源的 agent 视频制作系统：克隆仓库后在里面打开 Claude Code 或 Codex 说出需求，agent 按内置流程完成调研、脚本、配音、找素材、字幕与合成，出片前先给分镜和费用确认。需本地装 Python、Node.js 与 FFmpeg，不配 API Key 也能用免费素材出片。

marketingskills 合集里的转化率优化技能：给它首页、落地页、定价页或表单的链接或内容，按价值主张、标题、按钮、信任背书、阻力点等维度诊断，输出马上能改的快速优化、高影响改动、A/B 测试思路和备选文案。

HeyGen 官方 HyperFrames 技能集：让 agent 用 HTML、CSS 与动画写出可确定性渲染的 MP4 视频，含产品宣传片、讲解视频、字幕、配乐卡点等创作流程。需要 Node.js 22+ 与 FFmpeg。

Sonner、Vaul 作者 Emil Kowalski 编写的设计工程技能：帮助选择动画曲线与时长，评审和改进动效，吸收 Apple 设计原则，让网页在手机上更像原生应用，并协助选择 UI 库、做多版本原型。

生成自包含 HTML+SVG 的杂志风图表：架构图、流程图、时序图、泳道图、甘特图等数十种类型，可读取网站配色匹配品牌，支持导入 Mermaid、draw.io 与 Excalidraw 源文件重绘。

daisyUI 5 的颜色规则：说明 primary、base-100、error 等语义色及其 -content 前景色的用途，要求尽量只用语义色、不给它们加 dark: 前缀，并给出启用内置主题、编写自定义主题和修改已有主题的写法。daisyUI 官方技能的子指南。

清华大学 THU-MAIC 团队开源的多智能体互动课堂 OpenMAIC 的官方技能：给一个主题或一份 PDF，就能生成含课件、测验、互动模拟、项目式学习和 AI 老师讲解的整堂课。可用官网在线版的访问码，或本地部署并配置大模型 API Key。

按 Vercel 的 Web Interface Guidelines 审查界面代码，覆盖无障碍、焦点、表单、动画、排版、深色模式等规则，以「文件:行号」列出问题；每次审查前联网拉取最新规则。Vercel 官方维护。

Browser Use 出品的剪辑技能：把原始素材放进文件夹，和 Claude Code 或 Codex 对话就能出成片，自动删口头禅和停顿、调色、烧字幕、加动画并逐个剪点自检。需本地装 ffmpeg 与 Python（uv），并准备 ElevenLabs API Key 用于转写。

宝玉（JimLiu）的内容创作技能合集：小红书图文卡片、信息图、封面与文章配图、幻灯片、漫画与翻译，并可发布到公众号、微博和 X。需要 Node.js 与 bun；出图需配置图像模型 API Key，部分技能依赖 Chrome 自动化或非官方接口。

把文章或主题拆成 1–10 张小红书风格图文卡片，提供 12 种视觉风格、8 种版式与 3 套可选配色，出图前先与用户确认方案。需要可用的图像生成后端（如 Codex imagegen 或 baoyu-image-gen）。

把访谈笔记、问卷结果和客服工单等用户反馈归纳成主题，按出现频次和影响排序，输出结构化洞察与路线图建议；可接入知识库、会议转写等工具自动取数。属于 Anthropic 官方 product-management 插件。

一句话让 agent 用 HTML 产出高保真可点击原型、可编辑幻灯片、时间轴动画（可导出 MP4/GIF）与信息图，先给三个设计方向再落地，附五维度设计评审。花叔出品，MIT 协议。