OpenDesign

介绍结合电影感动画、MiniMax API生成的AI媒体与生成艺术的网页制作技能，适用于页面首屏及作品、产品展示网站。

• 制作带电影感动画的首屏
• 制作作品展示网站
• 在网页中使用AI生成媒体

以现有代码库为基础，创建或更新Figma设计系统组件库，让产品中已实现的组件与设计时使用的参考内容保持一致。

• 从代码库创建Figma组件库
• 按已实现的组件更新设计库
• 统一设计参考与产品实现

将业务流程或系统流程绘成白板风格图，用彩色便利贴和曲线箭头展示步骤、分支与合并，输出可用于入门引导或运营说明的单个HTML文件。

• 图解开始使用的步骤
• 说明运营流程
• 介绍系统结构

使用MiniMax API，将照片制作成Funko Pop或Pop Mart风格的动态GIF贴纸，可用于个人聊天贴纸和基于照片的头像合集。

• 将照片制作成个人聊天贴纸
• 制作玩具风格的动态贴纸
• 根据照片制作头像合集

生成单个HTML文件，在流动变色的背景上叠加醒目的引语、标题或短消息，可用于视频片头、落地页主视觉和海报，并可选择横向或纵向画布。

• 制作带简短消息的视频片头
• 制作落地页主视觉
• 制作流体背景海报

使用fal.ai视觉模型检测图像中的物体、划分各自区域、识别文字并描述内容。还可以针对图像提问，核实画面中可见的信息。

• 识别图像中的文字
• 检测物体并划分区域
• 获取图像描述并询问可见细节

制作带动画的HTML演示文稿，并在制作过程中查看视觉预览。适用于在线演讲、嵌入网页的演示内容，以及供读者交互操作的说明材料。

• 制作在线演讲幻灯片
• 在网页中嵌入演示文稿
• 制作可交互的说明材料

使用GSAP基础API实现网页元素和SVG的移动、旋转、淡入淡出等动画，调整速度变化与错峰启动，并适配屏幕宽度和减少动态效果的设置。

• 为网页添加移动和淡入淡出效果
• 让多个元素错峰开始动画
• 根据屏幕宽度切换动画

这是介绍图像生成与编辑技能的目录条目，使用OpenAI的Image API制作界面模型、图标、插画、社交媒体卡片及视觉参考资料。

• 制作界面模型图
• 生成图标和插画
• 准备社交媒体卡片图

通过fal.ai上的AI超分辨率模型提高图像或视频的分辨率。此条目用于发现该能力，实际执行需要另行安装原始发行包中的完整流程及配套文件。

• 提高图像分辨率
• 将视频转换为更高分辨率
• 请求智能体执行AI超分辨率处理

根据文字或参考图制作适用于Codex的动态宠物，检查各动作的外观一致性与背景透明度，并输出动画精灵图及配置文件。

• 根据文字制作Codex宠物
• 将角色图片制作成动态宠物
• 修正动作之间的外观差异

帮助在Flutter应用中实现动画效果、页面转场和界面内的运动，为面向iOS和Android的原生应用加入动态设计。

• 为Flutter页面添加动画
• 实现页面切换时的动态效果
• 实现iOS和Android界面的运动

将Figma设计转换为忠于原始视觉效果、可用于生产环境的前端代码。可把设计画框直接交给负责前端的AI智能体，用于实现对应界面。

• 实现Figma中设计的界面
• 将设计交接给AI智能体
• 用代码还原设计的视觉效果

依据OpenAI的前端制作指引，以精简的页面布局创建视觉协调的落地页、网站和应用界面，用于规划界面外观与元素排列。

• 制作布局简洁的落地页
• 创建视觉协调的网站
• 制作应用界面

通过Google Gemini的图像生成API创建界面效果图、图标和插画等视觉素材，可用于构思屏幕外观或准备项目所需的图片。

• 制作界面效果图
• 生成设计所需的图标
• 为作品生成插画

将落地页或产品网站的设计方案按区块生成为独立横向参考图，统一配色、字体与图片处理方式，同时变化构图、留白和按钮呈现，供开发人员或编程代理参考。

• 逐区块讨论落地页设计
• 研究首屏构图
• 向开发人员分享参考图

将季度回顾或未来计划整理为蓝、橙、奶油色的复古演示文稿，以单个HTML文件呈现封面、三项重点、路线图与关键绩效指标，并提供动画切换和键盘翻页。

• 制作季度回顾演示文稿
• 分享团队的三项重点
• 展示路线图与关键绩效指标

为将Figma设计转化为代码制定项目专用规则，把颜色、间距等共用值、命名规范和自动检查标准集中在一处，供项目实施时统一查阅。

• 制定Figma设计实现规则
• 整理设计共用值与命名规范
• 汇总自动检查标准

将网站和业务界面从设计制作成可运行的代码，围绕用途统一字体排版、配色与布局，并完善手机显示和交互过程中的各种状态。

• 制作视觉方向明确的落地页
• 设计日常业务仪表盘
• 优化现有界面的外观与操作

将移动应用的界面方案和操作流程制作成图像，结合iOS、Android等平台特点，统一文字大小、配色和多屏视觉风格，并兼顾阅读体验与操作衔接。

• 用多屏图像展示应用构想
• 规划首次使用引导界面
• 设计登录与账号恢复界面

在Figma Design或FigJam中新建空白文件，作为代理工作流程的起点，用于设计系统建设或工作坊准备的初始设置。

• 新建空白Figma Design文件
• 准备工作坊使用的FigJam文件
• 为设计系统工作准备初始文件

将公告或消息制作成macOS风格通知横幅，包含应用图标、标题和正文，输出单个HTML文件，可用于视频叠加、产品预告和社交媒体配图。

• 在视频上叠加通知横幅
• 制作产品发布预告
• 制作社交媒体公告配图

使用GSAP插件实现文字、SVG、拖动、滚动及布局切换动画，从选择合适的插件到注册、配置和清理均有说明，也可用于审查现有动画代码。

• 让标题逐字或逐行出现
• 添加SVG描边与形状变换
• 实现带惯性的拖动交互

帮助编写和审查使用GSAP工具函数的动画代码，完成数值映射、范围限制、随机变化和固定间隔吸附，并支持将滚动进度转换为动画变化及处理多个元素。

• 将滚动进度转换为位移或旋转
• 将动画数值限制在指定范围内
• 为位置或颜色添加随机变化