OpenDesign·你的设计资产库

网页参考

Create

将文字转化为功能性应用、网站与工具的 AI 原生平台。

AIDeveloper Tools
Create 网站截图

01

设计气质 DNA

AI 原生应用构建器创意轻松

一个兼具趣味性与专业性的工作坊，让任何人都能使用 AI 构建数字产品。

02

色彩

#000000Ink
#18191BInk soft
#F9F9F9BG
#FFFFFFBG soft
#F2F2F2BG quiet
#6A6A6CMuted
rgba(187, 187, 187, 1)Line

干净、浅淡的中性色，搭配摄影主视觉图像，并用黑色作为主要操作的对比色。

03

字体

transitional-serif · humanist-sans · monospace

  • display42px · 400
  • heading24px · 400
  • body16px · 400
  • body-large18px · 400

04

间距

4px
8px
12px
16px
20px
24px
30px
40px

以 4px 为基础，保持一致节奏，并在各区块内留有充足内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 8px
md · 12px
lg · 20px
pill · 9999px

1px solid #BBBBBB

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏主视觉区域，后接基于卡片的章节布局。

07

动效与交互

150msmicro
300mssmall
700msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

悬停/点击时平滑过渡 · 透明度变化时的淡入效果

颜色与背景在 0.15 秒内过渡。 · 通过过渡提供即时视觉反馈。

08

组件

  • button 高对比度的药丸形主按钮，搭配尺寸较小的次要按钮。
  • card 大尺寸圆角卡片，突出展示图片，下方配有描述文字。
  • chip 视觉上不明显，可能是简单的圆角元素。
  • input 主视觉区域用于用户提示的大型、圆角白色输入框。
  • hero 全出血摄影背景，居中排列文本与输入框。

09

文案语气与禁用清单

  • 语气 亲切、赋能且略带趣味。
  • 标题风格 简洁、直接的陈述，混用衬线与无衬线字体。
  • 按钮文案 清晰且面向行动（例如“立即开始”）。
  • 避免使用纯白背景——截图显示的是浅灰色（#F9F9F9）背景。
  • 避免使用纯无衬线标志——截图显示品牌名称“Any”使用了衬线字体。
  • 避免使用高饱和度的亮色作为主背景——截图使用了全出血摄影图像。
  • 避免在主要元素上使用尖锐方角——截图显示卡片和输入框的 border-radius 为 20px。
  • 避免使用厚重的深色阴影——截图显示的是非常细微、低透明度的阴影。
  • 避免使用单调统一的字体排印——截图显示衬线展示字体与无衬线正文字体之间存在对比。
  • 避免: 未经解释的技术术语
  • 避免: 过于复杂的布局
  • 避免: 沉闷、企业化的语言

10

包内真实截图

Create — 桌面首屏（hero）
桌面首屏（hero）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Create — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

一个友好、AI 原生的 SaaS 平台，用于通过文字构建应用。使用浅灰色（#F9F9F9）或白色（#FFFFFF）背景，黑色（#000000）作为主要文本和行动号召色，浅灰色（#6A6A6C、#ACADAE）作为次要文本。字体排印混合使用过渡衬线体（用于展示）与人文无衬线体（用于正文）。布局居中、简洁且宽敞。关键禁忌：避免使用尖锐方角（最小 8px 圆角）。避免使用厚重阴影。避免用复杂网格使界面杂乱。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。