OpenDesign

使用Chrome DevTools Protocol将整个网页截成一张长图，为作品集、案例介绍和审计报告准备展示页面外观的图片。

• 为作品集截取网站图片
• 为案例介绍附上完整网页截图
• 记录网页外观供审计报告使用

根据代码或文字说明创建、更新Figma界面，使用设计系统的组件，以及颜色、间距等共享视觉设置，将应用页面转换为Figma设计。

• 将应用代码转换为Figma设计
• 根据文字说明创建界面
• 使用共享组件更新界面

先生成网站设计图，再分析文字、留白、配色和布局并据此实现页面。使用各区块的独立参考图，帮助制作在小尺寸笔记本电脑上也易于阅读的页面。

• 根据参考图制作落地页
• 制作适合小屏幕阅读的首屏
• 制作风格统一的作品集网站

将关键指标、分析结果和留存率图表整理为杂志风格的单页HTML报告，结合纸张质感背景与柔和配色卡片，适合制作管理层会议材料及业务报告。

• 制作杂志风格业务报告
• 制作管理层会议单页材料
• 集中展示关键指标与分析

将心理学与行为科学用于营销文案和设计，调整吸引关注的开头、信息呈现方式及价格展示，帮助你审视促销表达。

• 调整吸引关注的开头
• 审视信息呈现方式
• 改善价格展示方式

将文字描述转换为手绘风格的Excalidraw图，并按用途使用动画SVG、在线编辑链接和PNG导出，兼顾图片使用与后续编辑。

• 根据文字创建手绘风格图
• 在线编辑图表
• 将图导出为PNG图片

使用fal.ai托管的虚拟试衣模型，通过图像查看服装穿在人身上的效果，适用于电商穿着形象的构思、服装搭配图册和造型方案尝试。

• 构思电商服装穿着展示图
• 尝试搭配图册中的穿搭方案
• 查看服装穿在人身上的效果

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

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

运行Figma Plugin API脚本，向画布写入内容或检查现有内容，并处理变量及设计系统相关工作，通过脚本操作设计。

• 通过脚本向画布写入内容
• 检查Figma画布的现有内容
• 处理变量和设计系统相关工作

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

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

通过Code Connect关联Figma设计组件与代码组件，建立设计和实现的对应关系，以便将共用设计规则和组件的更新自动反映到代码中。

• 关联Figma组件与代码组件
• 将设计系统更新反映到代码中
• 开始使用Code Connect

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

中文简介正在准备中。当前显示英语简介。

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component

将金融或战略数据制作成三页幻灯片，以黑色、暖纸色和鲜亮青柠色组织信息。保留醒目的大数字卡片与规则网格布局，最终生成可交互的单个HTML文件。

• 用三页幻灯片呈现金融指标
• 制作突出数字的战略演示
• 保持统一布局并更新文字与数值

协助创建、编辑和分析Word文档，处理修订记录、批注和格式，将设计需求说明或文稿整理成可供审阅的文档。

• 用Word编写设计需求说明
• 保留文稿的修订记录
• 准备带批注的审阅文档

实测并整理公开网站的配色、字体、标志、图片和文风，制作品牌指南，并生成带有预览、可重复使用的设计系统。

• 整理网站配色、字体与标志
• 从参考网站制作品牌指南
• 收集代表品牌的图片

将设计方向、颜色与间距等共享数值以及视觉规则集中到DESIGN.md中创建和管理，为制作过程提供统一的文档依据。

• 记录项目的设计方向
• 集中管理设计共享数值
• 用DESIGN.md管理视觉规则

使用p5.js，根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面，适合制作海报、表现动感的静态图像和艺术构图草案。

• 根据规则制作海报
• 创作具有动感的静态图像
• 试验艺术作品的构图

将标志、配色、字体及屏幕和印刷品上的应用示例汇成一张品牌展示图，依据品牌目的与受众，呈现视觉风格统一的设计方案。

• 分享新产品的品牌形象
• 探讨具有明确含义的标志方案
• 集中查看配色、字体与应用示例

将文章或实用知识整理成小红书风格的多张知识卡片，以大字和柔和配色呈现封面、要点及总结，并支持整组或逐张截图，用于准备图片帖子。

• 将实用经验整理成知识卡片
• 制作小红书轮播图文
• 准备WeChat朋友圈图片

将Markdown或笔记整理成杂志风格的长篇HTML文章，以大标题、居中的单栏正文及专用引用和代码样式，让内容层次清晰。

• 将Markdown排成杂志风格文章
• 将笔记整理成随笔
• 设计长篇电子简报

使用D3.js制作可交互的图表，让读者在阅读时探索数据。借助多种图表与表现手法的示例，可用于报告、仪表盘、数据原型和文章配图。

• 通过可缩放图表查看销售数据
• 展示数据之间的关系
• 用颜色呈现每日变化趋势

将模糊的设计需求细化为配色、字体、布局等八个方面，生成用于实施的规格文档和HTML预览，并明确说明为未指定项补充的默认值。

• 将模糊设计需求具体化
• 规划落地页配色、字体与留白
• 通过HTML预览确认外观

依据色彩科学参考资料，协助设计配色并检查文字对比度。也涵盖颜色命名、颜料混色及历史色彩理论，可用于梳理创作中的色彩问题。

• 构思设计配色
• 检查文字与背景的对比度
• 为颜色命名

制作介绍企业文化、战略或行为准则的三页HTML演示文稿，以酒红、浅粉和低调金色搭配大字、圆角标签与八张准则卡片，整理并呈现组织理念。

• 介绍企业文化
• 分享八项行为准则
• 用标签呈现工作室特点