设计案例库

OpenDesign 展示案例:
AI 设计示例

  • 网站
  • 应用
  • 仪表盘
  • 演示文稿
  • 平面设计
  • 动效

98 个设计示例,涵盖网站、应用、仪表盘、演示文稿和平面设计,包含 OpenDesign 官方模板。打开项目即可查看布局思路和建议提示词;模型名称仅在有记录时显示。

98 个设计示例 · 三个系列 · 10 个有记录的模型

设计示例

为你的下一个创意寻找灵感

按输出类型、用途、系列或生成内容的模型筛选。

98 个项目
Kimi Careers 招聘网站开场画面,采用月球视觉主题

网站

招聘网站设计

Kimi Careers 来自 OpenDesign

以八个月球场景讲述招聘故事,搭配滚动联动转场和插画呈现的四步申请流程。

黑客松示例
汴京夜游网站设计:灯火映照的河畔城市首屏

网站

汴京夜游网站设计

Bianjing After Dark 来自 OpenDesign

一场穿越想象中的宋代汴京的互动夜游之旅,融合常驻河畔城市、诗词、灯笼与多语言章节节奏。

LLM Arena · GPT 6 Sol
开封夜游网站设计:灯火映照的河流与夜游介绍

网站

开封夜游网站设计

Bianjing After Dark 来自 OpenDesign

沿着灯火映照的河流,走过 Bianjing After Dark 的五个篇章,从城门、夜市到诗词与放灯。

LLM Arena · Claude Opus 5.5
旅行规划仪表盘,包含城市地图、地点收藏库和每日行程

仪表盘

旅行规划仪表盘设计

Halcyon Cove 来自 OpenDesign

在 Halcyon Cove 规划六个停靠点的一日行程:在同一仪表盘中关联收藏地点、地图位置和步行时间。

LLM Arena · Claude Opus 5
海洋生物收藏应用设计:当前标本与探索卡片海洋生物收藏应用设计:潜水任务与探索要求

应用

海洋生物收藏应用设计

Abyssal Log 来自 OpenDesign

与潜水任务相连的海洋标本收藏。每条未知记录都会说明揭晓它所需的任务与进度。

LLM Arena · Claude Opus 5
Life System 仪表盘工作区概览,包含每周评分、身体图谱指标和实验追踪器

仪表盘

个人仪表盘设计

Life System 来自 OpenDesign

每周评分、身体部位指标、每日节律和五项实验汇集于一个桌面仪表盘,并通过四个带注释的细节视图进行说明。

黑客松示例
Ember & Pepper 餐厅网站首页,含菜单和预订

网站

餐厅预约网站设计

Ember & Pepper 来自 OpenDesign

招牌菜品与到店信息一览,并为准备预订的顾客提供预订弹窗。

LLM Arena · GPT 5.6 Sol
Harbor Skirmish 岛屿概览与开始界面

应用

岛屿冒险游戏设计

Harbor Skirmish 来自 OpenDesign

一座小巧的海滨岛屿,设有屋顶路线、三个武器栏位和充满趣味的第一人称界面。

LLM Arena · GPT 6 Astra
Agent-Native Design Workspace 演示文稿的开篇主张页

演示文稿

产品演示文稿设计

Agent-Native Workspace 来自 OpenDesign

三页讲述一个产品故事:开篇主张、移动端伴侣概念和企业控制室。

黑客松示例
一日游规划器,包含插画风城市地图、地点库和每日行程

应用

一日游规划器设计

Solara Bay 来自 OpenDesign

虚构的 Solara Bay 六个定时停靠点,配有插画地图、步行时间估算和实用路线提示。

LLM Arena · GPT 5.6 Sol
发现收藏应用设计:当前标本与发现卡片发现收藏应用设计:潜水看板及其探险队列

应用

发现收藏应用设计

Abyssal Atlas 来自 OpenDesign

标本收藏与潜水队列相连:锁定记录、两行筛选项和进度计数,帮助你了解接下来要发现什么。

LLM Arena · Grok 4.6
Yàn Huǒ 火锅餐厅网站首页

网站

火锅餐厅网站设计

Yàn Huǒ 来自 OpenDesign

通过标明价格的招牌菜单、用餐环境图库和到店信息介绍火锅,随后即可预订。

LLM Arena · Qwen 3.8 Max
Second Spring 森林修复网站介绍

网站

森林修复网站设计

Second Spring 来自 OpenDesign

一根可交互的倒木带你了解森林实地故事、修复计划,以及模拟参与方式。

LLM Arena · DeepSeek V4.1 Flash
Second Spring 保护网站,展示倒木上生长的苔藓

网站

交互式自然保护网站设计

Second Spring 来自 OpenDesign

在倒木上培育一片苔藓,然后探索林地故事和模拟助力方式。

LLM Arena · Claude Fable 5.1
倾斜展示的概念设备及其完整分解图层

平面设计

交互式产品介绍设计

iPhone Inside 来自 OpenDesign

概念手机的分离图层,配有相机预设、滑块和包含八个装配组的面板。

LLM Arena · GPT Astra
Harbor Skirmish FPS 岛屿概览与开始界面

应用

岛屿 FPS 游戏设计

Harbor Skirmish 来自 OpenDesign

醒目的岛屿标题界面引出第一人称游戏体验,配有方框状态面板和带编号的武器控制项。

LLM Arena · DeepSeek V4.1 Flash
Tom Goodman 简历网站,展示个人资料、工作经历、能力条和精选成果

平面设计

简历网站设计

Tom Goodman 来自 OpenDesign

一份虚构简历,将工作经历与能力图表和精选成果相结合,采用双栏阅读布局,并提供独立的打印版式。

黑客松示例
Maya Rowan 个人品牌网站介绍区

平面设计

创意作品集网站设计

Maya Rowan 来自 OpenDesign

一个虚构作品集,以海报风格的项目卡片串联三阶段创作实践、工作笔记和联系方式。

黑客松示例
寺庙叙事网站设计:月光下的寺庙与开场邀请

网站

寺庙叙事网站设计

建筑叙事 作者:OpenDesign

漫步于 Kage——一座想象中的山间寺庙,通过月光下的建筑、静谧的庭园随笔和木构工艺特写展开叙事。

官方项目
奶油色落地页首屏,配有醒目的黑色与斜体字体、两个操作按钮,以及建筑风格的人像拼贴。

网站

AI 设计工作室网站设计

OpenDesign Atelier Zero 编辑拼贴式落地页 作者:OpenDesign

OpenDesign 的 AI 设计工作室网站设计,将本地优先的工作室概念转化为编辑式落地页,让技能、实验与方法易于快速浏览。

官方模板
浅色 AI 基础设施首屏,带有大型混合字重标题和圆角运行时模拟界面,展示示例状态、支出、任务和一条审计记录。

网站

AI 基础设施网站设计

Halcyon 平静风格的 AI 代理基础设施营销网站 由 OpenDesign 分发

一个柔和的 AI 基础设施落地页概念,包含示例运行时指标、嵌套功能卡片、细微动效,以及单一销售邀请。

官方模板
奶油色编辑海报,配有超大的黑色衬线标题、带删除线的单词、铁锈色斜体强调,以及六个带底色提示词示例的编号工作流章节。

平面设计

AI 工作流编辑海报设计

呈现六种设计工作流的 AI 爱好者编辑海报 作者:OpenDesign

AI 工作流编辑海报设计通过编号章节和具体提示词示例呈现六条工作流主张,并以奶油色背景与铁锈色字体强调组织版面。

官方模板
桃色竖版卡片,包含超大的深色中文标题、红色强调、收藏徽章、页面标记、滑动提示和 HTMLAnything 页脚。

平面设计

AI 工作流社交轮播图设计

介绍 AI 编辑工作流改进方法的七张社交图文卡片 由 OpenDesign 分发

七张竖版卡片以超大中文标题、编号的习惯建议、变化的背景色和收尾文案,讲解 AI 编辑工作流。

官方模板
灰色仪表盘线框,包含左侧导航栏、4 个指标占位符、组合图表和表格行。

仪表盘

分析仪表盘线框设计

Acme 分析仪表盘灰盒线框 作者:OpenDesign

OpenDesign 灰盒仪表盘通过侧边栏、4 个 KPI 占位符、示意图表、5 行表格和蓝色布局注释,勾勒出一个分析工作区。

官方模板
OpenDesign 标志悬浮在紫色蒸汽波网格上方,两侧是棕榈树剪影和金属数字。

动效

艺术史风格 Logo 动态视频设计

艺术史风格 Logo 动态视频设计 作者:OpenDesign

一支 15 秒、16:9 的 OpenDesign 短片,让同一个圆形光标 Logo 在快速切换的艺术史风格中始终可辨,最后落在黑底白色的静态 Logo 上。

官方项目
柔和的绿色与蓝色氛围感着色器场域,左下方叠放粗体白色文字。

平面设计

Aurora Field 着色器设计

自动呈现动画的 WebGL2 Aurora Field 构图 作者:OpenDesign

自动变化的蓝绿色噪声场赋予 WebGL 首屏氛围,而固定标题与小型本地帧率徽章则为场景提供锚点。

官方模板
深藏青色画布上的柔和青绿色和紫罗兰色光幕,叠加在前方的是大号白色极光主题文字。

平面设计

Aurora Veil 着色器设计

原始交互式 Aurora Veil — OpenDesign 着色器构图 作者:OpenDesign

Aurora Veil 是一个交互式着色器构图,将分层光线、星辰和光标动效转化为富有氛围感的 WebGL 首屏。

官方模板
双因素身份验证规格的开篇,包含草稿状态、负责人、摘要、小组元数据和问题陈述。

平面设计

身份验证产品规格设计

Northwind 双因素身份验证产品规格文档 作者:OpenDesign

一份 Northwind 双因素身份验证提案串联了负责人、范围、用户故事、四项目标示例、发布阶段和未决事项。

官方模板
奶油色演示封面,将粗黑字体与斜体排版、雕塑头像和建筑拼贴结合在一起。

演示文稿

品牌故事演示文稿设计

面向合作伙伴与媒体的 OpenDesign 品牌故事演示文稿 作者:OpenDesign

品牌故事演示文稿设计为合作伙伴、媒体和社区受众提供一条以证据为导向的叙事路径,从信念延伸至渠道、日程与验证。

官方模板
米白色编辑首屏,带有超大的黑色期号、红色注册标记和结构紧密的出版物详情。

网站

粗野主义杂志网站设计

Field Unit 04 粗野主义编辑杂志网站 由 OpenDesign 分发

粗野主义杂志网站设计将印刷物形态的刊物转化为清晰易读的网页阅读系统,以大胆字体搭配克制的编辑结构。

官方模板
明亮的青绿色焦散光线形成涟漪状单元,左下方叠加白色文字。

平面设计

Caustic Pool 着色器设计

原始交互式 Caustic Pool——OpenDesign 着色器作品 作者:OpenDesign

青绿色 WebGL 光场将明亮的焦散光丝与固定排版结合,按下鼠标或触点时触发涟漪,让图案短暂弯曲。

官方模板
临床病例报告开篇,包含患者元数据、主诉以及具有说明性质的现病史。

平面设计

临床病例报告设计

包含生命体征、检查和管理内容的虚构急诊医学病例报告 作者:OpenDesign

临床病例报告设计将虚构的急诊就诊过程组织成一条易读路径,从症状和观察结果延伸至检查、评估和管理。

官方模板
浅色代码审查收件箱位于深色顶部栏下方,包含审查请求、红色 CI 警告和问题活动。

应用

代码审查收件箱应用设计

GitHub 审查请求与提及收件箱 作者:OpenDesign

代码审查收件箱应用设计将审查请求、CI 失败、分配的问题和活动汇集到一个便于每日梳理待办、可快速浏览的工作区中。

官方模板
淡雅手绘海岸背景上,巨大的 100K 标题位于 GitHub stars 之上。

动效

社区里程碑动态视频设计

社区里程碑动态视频设计 作者:OpenDesign

一支 30 秒的 OpenDesign 动态视频,从 100K 星标揭晓,依次过渡到贡献者马赛克、产品蒙太奇,并以提示词邀请收尾。

官方项目
完整的深色内容仪表盘首屏,包含 Jerrod Lew 工具栏、X 示例发布标题、持久显示的焦点与区间条、四个平台摘要和四个当前显示的网络 KPI。

仪表盘

内容表现仪表盘设计

跨平台社交内容分析,包含互动热力图和收入图表 作者:OpenDesign

深色内容仪表盘将平台概览与图表查看、草稿规划,以及对受众和转化信号的深入分析连接起来。

官方模板
白色邮件摘要首屏,包含工具栏图标、给 Eli 的中文主题、发件人元数据、问候语和三个相等的优先级数量。

平面设计

每日邮件摘要设计

按优先级分组的 Gmail 每日摘要邮件 作者:OpenDesign

每日邮件摘要设计将一份包含六条消息的 Gmail 简报转化为按优先级排序的阅读路径,帮助决定先处理什么。

官方模板
深色手机框中的 Level 应用欢迎屏,采用奶油色衬线字体、橙色标题强调、原型标签,以及底部的下一步提示。Level 日常任务屏,包含深色示例 XP 进度面板、六张柔和色彩的分类卡片,以及五个底部导航位置,其中包括中央加号控件。

应用

每日任务应用设计

Level 游戏化日常任务移动应用,以三个不同屏幕呈现 作者:OpenDesign

每日任务应用设计将日常目标转化为三屏移动端任务旅程,包含示例 XP、分类卡片和任务详情。

官方模板
Filebase 文档开篇,包含搜索栏、左侧导航、右侧目录、Quickstart 标题和 CLI 安装代码示例。

网站

开发者文档网站设计

Filebase 开发者文档与 CLI 快速入门 作者:OpenDesign

Filebase CLI 快速入门将文档导航与清晰的安装、身份验证和文件夹同步阅读顺序结合起来。

官方模板
奶油色落地页首屏,配有大型衬线字体、一个海军蓝强调词,以及右侧的小型指标徽章。

网站

编辑式产品网站设计

OpenDesign 温暖纸张质感编辑式产品落地页 由 OpenDesign 分发

编辑式产品网站设计以温暖纸张质感、超大字号和基于章节的阅读方式,将本地优先工作室塑造成一份由作者编排的出版物。

官方模板
米白色入职文档,包含深色欢迎横幅、第一天议程、每周卡片和里程碑区域。

平面设计

员工入职指南设计

Northwind 新员工入职计划,包含第一天以及 30/60/90 天里程碑 作者:OpenDesign

这份员工入职指南设计将新员工的第一天、第一周以及 30/60/90 天里程碑转化为一条带有清晰检查点的实用路径。

官方模板
Filebase 工程文章开篇,包含 Rust 迁移标题、作者署名、介绍段落和暖色渐变导语面板。

网站

工程博客网站设计

关于使用 Rust 重写同步引擎的 Filebase 工程文章 作者:OpenDesign

一篇工程文章将窄阅读栏和斜体导语与暖色渐变面板、示例指标带及明确的技术权衡结合起来。

官方模板
白色 SaaS 落地页,包含醒目的黑色大标题、简短说明文案和铁锈色主操作。

网站

文件同步 SaaS 网站设计

Filebase 节省带宽的文件同步 SaaS 落地页 作者:OpenDesign

一个文件同步落地页将聚焦带宽的标题与三列编号优势、示例公司名称以及形成对比的 Solo、Team 和 Enterprise 方案结合起来。

官方模板
中文前端工程师简历,包含全宽姓名和个人简介、蓝色章节标记,左侧为职业经历,右侧为资质信息。

平面设计

前端工程师简历设计

双栏中文高级前端工程师简历 由 OpenDesign 分发

这款双栏中文简历以详实的职业经历时间线,配合紧凑的技能、教育背景和语言栏目。

官方模板
白色编辑风格封面,配有大型衬线标题、斜体强调文字和浅绿色标签。

演示文稿

募资备忘录演示文稿设计

采用克制编辑风格字体的 Quartz A 轮融资备忘录 由 OpenDesign 分发

Quartz 的十页募资备忘录将克制的衬线字体与产品原则、示例性业务进展数据,以及面向少数投资者的融资请求结合起来。

官方模板
蓝色半调背景上的金属质感 Future 字样,下方是 Is already here。

动效

未来感动态视频设计

未来感动态视频设计 作者:OpenDesign

一支渲染完成的电光蓝短片,包含文字隧道、SET 倒计时与铬金属 FUTURE 结尾,以代码在 120 BPM 剪辑网格上重制。了解其节奏与改编方法。

官方模板
浅色报告文档,纵向排列四张 KPI 卡片、配对趋势图、数据表格和三张洞察卡片。

平面设计

增长指标报告设计

包含 KPI、趋势、原始表格和洞察的中文月度增长报告 由 OpenDesign 分发

这款中文报告版式将四张 KPI 卡片、两张并排趋势图、九行月度示例数据和三张洞察卡片整合在一份纵向文档中。

官方模板
深色指标例会封面,包含白色与绿色的 One number, one decision 标题、每周会议徽章、受众说明元数据以及第一页页码。

演示文稿

增长指标例会设计

诊断 Safari 转化损失的运营与增长指标例会演示文稿 作者:OpenDesign

增长指标例会演示文稿设计将 Safari 转化问题组织为聚焦的叙事,并以一项责任明确的决策收束。

官方模板
大幅白色两行标题背后流动着橙色与奶油色抽象带状形态。

平面设计

半色调着色器设计

响应光标的 WebGL2 半色调场构图 作者:OpenDesign

旋转的网点阵列将橙色与奶油色流动场转化为带有印刷质感的纹理,指针的影响经过平滑处理,文字固定在左下方。

官方模板
粗体白色标题和字重较细的第二行文字后方,是多色箔片状轮廓带。

平面设计

全息箔片着色器设计

原始交互式全息箔片——OpenDesign 着色器构图 作者:OpenDesign

多色程序化箔片表面会随时间和指针位置变化,固定的双行标题、小型预览标签与倾斜提示位于其上方。

官方模板
黑色事故封面,带有超大白色 04、红色光标标记、完整的 Incident Telemetry—Operation Halcyon 标题,以及等宽运维元数据。

演示文稿

事故遥测演示文稿设计

Operation Halcyon 事故遥测与解析器重设计决策演示文稿 由 OpenDesign 分发

Incident Telemetry — Operation Halcyon 将一次示例运行时中断转化为有序简报,用于追踪原因、风险与决策。

官方模板
原始 OpenDesign 作品集开场场景,包含反射质感的蓝白三维品牌字样、光标雕塑和细密网格背景。

网站

交互式作品集网站设计

OpenDesign 等宽字体全屏交互式作品集主页 作者:OpenDesign

OpenDesign 的交互式作品集网站设计结合等宽字体界面、立体的 3D 品牌视觉与项目网格,以本地优先的方式呈现作品叙事。

官方模板
洋红色液态轮廓与青色、桃色高光位于左下角白色排版的后方。

平面设计

虹彩液态着色器设计

原创交互式 Liquid Iridescence — OpenDesign 着色器构图 作者:OpenDesign

鲜艳的水面油膜质感在固定文字下方流动,经过平滑处理的指针输入使不使用图像纹理的程序化色彩场发生弯曲。

官方模板
窄型浅色问题简报,带有周期进度条、详细的待关注卡片和较小的问题列表。

应用

问题简报应用设计

带有周期进度和已分配工作的 Linear 风格问题简报 作者:OpenDesign

这款问题简报应用以 Linear 风格的每日摘要组织桌面工作区,集中呈现周期状态、待关注事项和问题历史。

官方模板
奶油色编辑构图,包含精细的线框地球、散布的深色形状、同心环线和稀疏的角落标签。

平面设计

动态地球排版设计

Charlotte & Vine 轨道地球动态排版构图 作者:OpenDesign

旋转的线框地球、嵌套轨道线与带锈色点缀的衬线字体,共同构成一项围绕国际覆盖主题、带有温暖编辑式气质的动态设计研究。

官方模板
Notion 风格摘要开场,包含面包屑导航、纹理棕色封面、中文简报标题、范围提示框和两条文档变更记录。

平面设计

知识工作区摘要设计

包含变更、提及和数据库更新的 Notion 早间摘要文档 作者:OpenDesign

一份标明日期的 Notion 风格早间摘要,将文档编辑、直接提及和项目状态行拆分为紧凑的每日复盘序列。

官方模板
波纹状银色表面带有紫罗兰色反射,衬托着左下方醒目的白色文字。

平面设计

液态金属着色器设计

自动呈现动画的液态金属着色器构图 作者:OpenDesign

固定的左下方文字叠在自动变化的铬金属质感画面上;扭曲噪声、虹彩色彩和扫过表面的高光共同营造液态观感。

官方模板
Velar 奢华房地产网站完成原生加载序列后的画面,包含超大的 Irreplaceable 字体、云层天空背景和所提供的建筑剪影。

网站

奢华房地产网站设计

Velar 奢华房地产营销网站 作者:OpenDesign

Velar 是一款奢华房地产网站设计,将电影感建筑影像与克制的字体设计及经过精心编排的编辑式浏览路径相结合。

官方模板
带注释的桌面端营销线框图,包含浏览器界面、编号导航和页面区块,以及右侧规格说明侧边栏。

网站

营销网站线框图设计

带注释侧边栏的 Acme 营销落地页线框图 作者:OpenDesign

Acme 营销线框图将五个编号页面区域与规格说明侧边栏配对,展示设计说明与已实现布局之间的一致之处和差异。

官方模板
交易平台 欢迎页手机线框图,包含一个大型媒体占位符、一个标题栏、三条辅助文本条、GET STARTED 和 Skip for now 标签。交易平台 浏览页线框图,包含一个静态搜索占位符、四个分类胶囊、四行缩略图与文本,以及四个底部导航位置。

应用

交易平台 结账应用线框图设计

四个不同移动端线框图中的 交易平台 购买流程 作者:OpenDesign

四屏移动端线框图将 交易平台 引导、浏览、商品详情和确认串联为一条聚焦的购买路径。

官方模板
深蓝色研究封面,配有大号白色衬线标题、简短摘要和小型导航控件。

演示文稿

微生物组研究演示文稿设计

关于肠道微生物与深度睡眠的研究实验室会议演示文稿 由 OpenDesign 分发

Raman Lab 的九页研究示例使用海军蓝分隔页、奶油色证据页和因果关系限定语,为一套关于肠道与睡眠的示例性论证安排节奏。

官方模板
Lull 欢迎手机屏幕,包含温暖的圆形插画、衬线标题 Quiet beats noise.、第一个进度胶囊和深色的 Continue 提示。Lull 练习介绍手机屏幕,包含线框卡片插画、橙色圆圈中的白色勾选标记、衬线练习标题和中间的进度胶囊。

应用

正念应用新手引导设计

Lull 正念引导流程,包含三个手机屏幕 作者:OpenDesign

这套正念应用新手引导设计通过三张舒缓的移动端界面介绍 Lull 的练习,说明其预期的适应方式,再呈现账户选项。

官方模板
米白色晨间简报首屏,包含太阳图标、给 Eli 的中文问候语、星期与日期、五张柔和色调的摘要卡片和三个编号优先任务。

仪表盘

晨间简报仪表盘设计

按来源分组通知与任务优先级的个人晨间工作简报 作者:OpenDesign

这款晨间简报仪表盘将繁杂的工作信息组织成清晰、按来源分组的桌面简报,让优先任务与相关项目、消息和文档背景一起呈现。

官方模板
亮绿色身份卡上,黑色大号 OpenDesign 字样与斜体的动态设计师副标题。

动效

动态设计师作品集短片设计

动态设计师作品集短片设计 作者:OpenDesign

一支 15 秒、128 BPM 的作品集短片,用代码重制,包含硬切配色、实时 HUD,以及按小节卡点的七个章节。了解其节奏、字体与配色如何运作。

官方模板
深色背景上展示三张方形社交卡片,分别采用蓝至绿、绿至琥珀色和玫瑰色至紫罗兰色渐变,并配有抽象人物、编号标签、大号衬线短句和静态循环徽章。

平面设计

励志社交卡片设计

三张围绕继续前行与展望未来的协调社交卡片 作者:OpenDesign

三张静态方形卡片将简短的励志短句与渐变场景、抽象剪影、编号标签和统一的衬线字体处理结合在一起。

官方模板
紫色透视网格上方是一轮橙粉相间的大型条纹太阳,左下方配有醒目的白色文字。

平面设计

霓虹网格着色器设计

自动播放的合成波地平线着色器场景 作者:OpenDesign

带水平条纹的复古太阳锚定紫色地平线,霓虹地板网格在其下方滚动,配合固定标题与稀疏的程序化天空细节。

官方模板
奶油色战略封面,配有衬线公司标题、铁锈色斜体强调文字和简短的受众说明。

演示文稿

运营模式演示文稿设计

Meridian Freight 运营模式重设计决策演示文稿 由 OpenDesign 分发

Meridian Freight 将运营模式诊断转化为聚焦决策的演示文稿,将成本压力、战略选择、价值和 18 个月路线图串联起来。

官方模板
简约的米白色运营评审封面,配有大号多行衬线审批标题、短款铁锈色强调条和幻灯片计数器。

演示文稿

运营评审演示文稿设计

围绕降低资金消耗与 BYOK 决策的 OpenDesign 运营评审 作者:OpenDesign

这套运营评审演示文稿设计将一项经营可持续性决策组织成六页董事会叙事,将鲜明的建议与明确的选项及权衡结合起来。

官方模板
一本打开的纸质作品集,在“It starts with your idea.”字样下方展示手机、网站、图表、海报和视频插图。

动效

剪纸动画设计

剪纸动画设计 作者:OpenDesign

一支20秒的剪纸短片,把一句手写提问化为五个设计演示,再收进一本充满可能的书里。

官方模板
深色画布上的明亮绿色粒子场,配有 Compute off the main thread 标题,以及本地粒子数量、传输和渲染标签。

平面设计

粒子场可视化设计

带有本地 Web Worker 和运行时标签的 Canvas 2D 粒子场可视化器 作者:OpenDesign

近黑色画布上的密集绿色粒子场,搭配以脱离主线程计算为主题的标题,以及粒子数量、传输方式和本地渲染标签。

官方模板
近乎黑色的画布上分布着朦胧的绿色螺旋粒子,下方是醒目的白色标题,角落处有小型计数器。

平面设计

粒子星系着色器设计

自动播放动画的 50,000 点 WebGL2 星系构图 作者:OpenDesign

三条朦胧的螺旋臂在深色 WebGL2 画布上、固定排版下方不断演变,并显示由源代码定义的点数、绘制调用次数和本地 FPS 读数。

官方模板
奶油色编辑构图,包含超大的 1889 字样、日文文字、像素艺术花卉纸牌、录制指示器和深色时间线条带。

平面设计

像素精灵动态海报设计

受 Nintendo 启发的 1889 像素精灵编辑式动态海报 作者:OpenDesign

一张奶油色编辑式动态海报将像素艺术花卉纸牌与超大 1889 字样、日文文字动效和滚动时间线并置。

官方模板
完整的 Tomato 网站开场画面,包含紧凑的徽标与导航页眉、居中的二十五分钟专注标题、辅助文案,以及位于浅色次要按钮旁的锈红色主要操作按钮。

网站

番茄钟产品网站设计

Tomato 桌面端番茄钟产品落地页 作者:OpenDesign

Tomato 落地页通过克制的排版、以卖点为核心的分区,以及面向个人与团队的明确行动提示,呈现 25 分钟工作周期。

官方模板
SPORT TEST 邮件开头,包含其品牌页眉、导航和橙色 Axis Pro 运动鞋插图。

平面设计

产品发布邮件设计

产品发布邮件设计 作者:OpenDesign

这款运动鞋发布邮件设计在窄幅奶油色画布上,将橙色产品插图与超大字号、一个购物按钮和四项规格结合起来。

官方模板
绘画感的蓝色与米白色天空上呈现大型白色 OpenDesign MOTION 字样。

动效

产品发布动态视频设计

产品发布动态视频设计 作者:OpenDesign

这部 37 秒的 OpenDesign 发布影片从绘画感开场出发,经过密集的设计样例与动态字体,最终以克制的标志画面收尾。

官方项目
Pennyflow 结账看板,包含课程价格、支付字段、可选产品和吉祥物面板。

动效

产品宣传动效设计

产品宣传动效设计 作者:OpenDesign

一支 15 秒的宣传片,从半色调吉祥物和产品卡片,推进到分阶段展示的结账流程,最终将信息收束为 Pennyflow 字标。

官方模板
桃色候补名单落地页首屏,包含一个小型圆形品牌标志、醒目的黑色大标题和行内电子邮件表单。

网站

产品候补名单网站设计

Meridian 即将上线的候补名单页面,采用几何线圈与网格图形以及动态滚动字幕条 作者:OpenDesign

Meridian 将超大号发布信息、紧凑的登记表单与循环滚动的“Coming Soon”字幕条相结合,为候补名单页面塑造鲜明的发布形象。

官方模板
白色财务报告文档,包含核心指标、蓝色收入图表、损益行和客户表格。

平面设计

季度财务报告设计

包含收入、成本和损益证据的 Northwind Q3 财务报告 作者:OpenDesign

这款季度财务报告设计将示例财务数据组织成单页叙事,串联核心指标、对比数据、客户账户与展望。

官方模板
Northwind OKR 开场视图,带有深蓝色季度横幅、首个由负责人牵头的目标,以及显示季度统计数据、每周变动项和人员配置阻塞项的右侧边栏。

仪表盘

季度 OKR 仪表盘设计

Northwind 季度 OKR 仪表盘,包含关键结果负责人和阻塞项 作者:OpenDesign

这款季度 OKR 仪表盘将目标、负责人、关键结果进度和人员配置阻塞项集中在一起,让团队可以在查看交付状态的同时了解相关决策。

官方模板
深色网格卡片上以白色衬线字体呈现引语,并用黄色强调,搭配暖色角落渐变和作者署名。

平面设计

引语分享卡片设计

带有社交作者身份信息的排版引语卡片 由 OpenDesign 分发

一段包含拉丁字母技术名称、金色强调和清晰作者署名的中文引语,铺陈于深色网格编辑风画布之上。

官方模板
富有光泽的绿色相连圆润形体漂浮在深海军蓝背景上,白色标题位于下方。

平面设计

光线步进雕塑着色器设计

自动播放动画的 WebGL2 有符号距离场雕塑 作者:OpenDesign

五个平滑融合的距离场形体环绕深海军蓝画布运动,搭配柔和阴影、明亮轮廓光、缓慢自动环绕的相机和固定排版。

官方模板
米白色关系仪表盘,配有窄幅导航栏、指标网格以及黑色与铁锈红色活动柱。

仪表盘

关系分析仪表盘设计

包含匹配率趋势的共同联系人关系分析仪表盘 作者:OpenDesign

关系分析仪表盘设计将共同联系人、社群和匹配率等示例信号转化为易于浏览的桌面工作区,用于比较当前状态与近期趋势。

官方模板
仓库仪表盘,包含左侧导航栏、五个示例指标卡片、绿色 star 增长柱、贡献者行、近期活动表和蓝色 fork 趋势柱。

仪表盘

仓库指标仪表盘设计

包含 star、活动和贡献者的 OpenDesign 仓库指标仪表盘 作者:OpenDesign

这款仓库指标仪表盘将示例仓库指标组织成便于快速浏览的桌面工作区,用于比较增长、参与度和近期工作。

官方模板
SaaS 定价页面首屏,包含按月和按年计费切换控件,以及完整的 Solo、Team 和 Enterprise 定价卡片。

网站

SaaS 定价网站设计

Filebase SaaS 定价对比与购买决策页面 作者:OpenDesign

这款 SaaS 定价网站设计将套餐选择组织成清晰的购买决策路径,结合计费选项、套餐详情、对比表和有针对性的常见问题。

官方模板
2026 年四月的 Pulse 仪表盘概览,包含四张示例 KPI 卡片、收入折线图、账户状态行和近期订阅事件。

仪表盘

SaaS 收入仪表盘设计

Pulse SaaS 收入分析概览 作者:OpenDesign

此 SaaS 收入仪表盘设计将订阅指标、30 天收入图表、账户状态和近期事件整合到一个概览中。

官方模板
身份验证服务运行手册开篇,包含归属和版本详情、生产关键状态、服务摘要以及依赖健康指标。

网站

服务运行手册网站设计

Northwind 身份服务运维手册 作者:OpenDesign

这款身份验证服务运行手册设计将服务归属、告警响应、部署流程和事件交接整合为一份便于快速浏览的运维参考。

官方模板
深色 X 分析首屏,包含原始平台页头、每周发布摘要、查询字段、平台卡片和四张示例 KPI 卡片。

仪表盘

社交受众仪表盘设计

包含粉丝增长与受众地理分布的 OpenDesign X 社交分析仪表盘 作者:OpenDesign

社交受众仪表盘设计将 X 增长、受众地理分布、发布信号和社区反馈汇集到一个便于快速浏览的桌面工作区中。

官方模板
一张橙色至紫色渐变的竖版纹理海报,带有超大的白色 HTML 和金色斜体 Anything 字样、四行由图标引导的功能介绍,以及命令文字旁的类二维码页脚。

平面设计

软件发布海报设计

HTML Anything 双语产品发布海报 由 OpenDesign 分发

这张竖版的软件发布海报将超大白色与金色字样、四条功能主张、暖色至紫色渐变和技术感页脚提示结合在一起。

官方模板
浅色冲刺应用,包含四个任务列、柔和色彩的卡片标签、筛选控件和窄型进度侧栏。

应用

冲刺看板应用设计

带有工作量和 Sprint Pulse 侧栏的 Northwind Growth Squad 冲刺看板 作者:OpenDesign

Northwind 冲刺看板应用设计将冲刺状态、工单负责人、估算值和阻塞项整合为一个便于快速浏览的桌面工作区。

官方模板
奶油色草图风格的学生仪表盘,带有静态导航列表、四张示例 KPI 卡片、红色分数趋势线、五个斜线填充的科目条形,以及黄色和粉色注释便签。

仪表盘

学生考试仪表盘线框图设计

采用手绘线框图风格的 Zentou AI 学生考试仪表盘 作者:OpenDesign

学生考试仪表盘线框图设计将示例分数、进度、科目和下一步安排整合为一份草图式桌面学习概览。

官方模板
白色发票,包含开票方和客户详情、明细服务表、深色总额栏和付款说明。

平面设计

工作室发票设计

包含明细项、合计金额和付款说明的 Sable Studio 客户发票 作者:OpenDesign

工作室发票设计将项目范围、明细费用、付款条款、调整项和付款备注整合到一份较长的客户文档中。

官方模板
Growth Squad 会议记录开篇,包含会议日期和地点、参会者姓名首字母,以及带时间安排的议程清单。

平面设计

团队会议记录设计

Growth Squad 周会文档,包含决策和行动项 作者:OpenDesign

团队会议记录设计将 Growth Squad 的每周议程转化为一份易读记录,涵盖时间安排、决策、负责人、待解决问题和下次会议。

官方模板
FlowAI仪表盘,包含主题和导出操作、三个视图标签页、概览指标、成员表格和在线状态图表。

仪表盘

团队运营仪表盘设计

包含成员表格、角色图表和活动标签页的FlowAI团队仪表盘 作者:OpenDesign

FlowAI团队仪表盘设计将成员状态、角色分布、活动趋势和风险信号组织到一个聚焦的桌面工作区中。

官方模板
白色团队工作区仪表盘,包含导航栏、KPI 卡片、蓝色任务图表和任务表格。

仪表盘

团队工作区仪表盘设计

Acme 的 Notion 风格团队工作区仪表盘,包含任务和项目摘要 作者:OpenDesign

团队工作区仪表盘设计将任务状态、活动记录、每周工作量和审核信号整合到一个易于浏览的桌面工作区视图中。

官方模板
白色写作工具落地页首屏,采用大型衬线字体、斜体强调和两个小型操作按钮。

网站

技术写作网站设计

Quartz 技术写作工作区营销网站 由 OpenDesign 分发

Quartz 是一款技术写作网站设计,将编辑工作区概念转化为一条从起草到发布的聚焦路径。

官方模板
深海军蓝色 Prometheus 工作区,包含导航栏、DEMO 控件、四项信号摘要、期权链表格、执行状态、图表,以及部分显示在画面中的桌面版 Risk Cockpit。

仪表盘

交易模拟器仪表盘设计

带有解释性图表的交易风险与执行模拟器仪表盘 作者:OpenDesign

交易模拟器仪表盘设计将信号、期权链上下文、执行状态和风险图表整合到同一审查用模拟工作区中。

官方模板
一张黑色音乐播放器卡片,带有渐变专辑块、进度条和播放图标。

动效

UI 形变动画设计

UI 形变动画设计 作者:OpenDesign

一支14秒的纯代码短片:同一个形状依次形变为播放器、标签页和命令面板,每次变化都由120 BPM下的光标触发。

官方模板
绿色的 Usage reset complete 显示在徽标上方,两条进度条均为 100%。

动效

用量重置动态视频设计

用量重置动态视频设计 作者:OpenDesign

一支六秒的方形 OpenDesign 动态视频,将径向刻度环与两条带标签的进度条结合,最终定格为绿色完成状态。

官方项目
白色文字背后是由浅色边界分隔的大型蓝色、绿色、紫色和橙色多边形单元格。

平面设计

Voronoi 着色器设计

响应光标的 WebGL2 Voronoi 单元格构图 作者:OpenDesign

不规则彩色单元格在 WebGL2 画布上漂移,配合浅色发光边界、经过平滑处理的指针驱动形变和固定的大号排版。

官方模板

我们采用分页而非无限滚动,确保每个项目都能通过键盘访问,也便于爬虫抓取。

社区

重温黑客松,比较模型

社区黑客松刚刚结束;评测系列则让十个模型回答相同的需求。

产品设计黑客松

已结束 · 2026年9月18日
日期
9月9日至18日
奖励对象
前10名 + 最早提交的50名
示例
5

设计师在 X 上发布了使用 OpenDesign 制作的产品作品,每个参赛作品需附一篇帖子和一个社区链接。作品按点赞数排名。

  • Kimi Careers
  • Life System
  • Agent-Native Workspace
  • Tom Goodman
  • Maya Rowan

LLM Arena 2026年9月

系列说明
模型
10
共同的需求
6
设计示例
14

六个需求,每个由两个模型作答。每个页面都会注明模型和任务,方便并排比较答案。

  • Claude Opus 5
  • GPT 5.6 Sol
  • DeepSeek V4.1 Flash
  • Qwen 3.8 Max
  • Grok 4.6
  • GPT Astra
  • GPT 6 Astra
  • Claude Fable 5.1
  • GPT 6 Sol
  • Claude Opus 5.5

如何在 OpenDesign 中创建 AI 设计示例

  1. 下载并安装 OpenDesign

    下载适用于 macOS 或 Windows 的桌面应用,安装并完成设置。连接你已在使用的模型服务提供商;OpenDesign 在你的设备上运行,并使用你自己的密钥。

    下载
  2. 从与你的创意接近的设计示例开始

    按输出类型筛选上方的设计示例,打开一个与你想制作的内容相近的案例。阅读它的需求说明、所用模型和其中解释的布局决策,并记下你想保留和修改的部分。

  3. 先写好需求,再构思视觉效果

    说明输出类型、页面或版块、示例内容,以及最重要的一项交互。标明哪些信息是真实的,哪些是占位内容,避免设计凭空编造事实。

    推荐提示词

    为一家虚构的社区面包店设计网站。加入展示今日烘焙的主视觉区、按上午和下午分类的菜单、营业时间,以及带有清晰占位字段标签的预订表单。导航文字保持直白,所有标题都使用真实文本,并提供易读的移动端布局。

  4. 选择一个模型,或对比两个模型

    选择你信赖的模型来处理布局和文案。若想了解两个模型如何处理同一份需求,可在以下平台运行: LLM Arena 首先,就像本页的 Arena 设计示例那样。

  5. 先完善一个部分,再处理整页

    一次只针对一个部分提出修改:层级、间距、状态和文案。在将效果扩展到整页之前,先检查移动端布局和减少动态效果时的状态。

  6. 导出并获取分享链接

    将完成的设计导出为 HTML,然后在 OpenDesign 中使用分享功能获取链接。在另一个浏览器窗口中打开链接,并在发送前确认目标版本及其资源均已加载。

开始使用

亲自设计下一个示例

免费、开源,可使用你自己的密钥在自己的设备上运行。带上设计需求,选择一个模型,制作并发布可分享的网站、应用、仪表盘或演示文稿。

提供 macOS 和 Windows 桌面版。免费开源,采用 Apache-2.0 许可。

阳光照耀的山坡上,舞者围成一圈的油画,选自 OpenDesign 艺术作品集