OpenDesign·你的设计资产库

网页参考

Uizard

借助GenAI,将产品创意瞬间转化为概念。

DesignAI
Uizard 网站截图

01

设计气质 DNA

AI驱动快速原型设计UI设计线框绘制产品概念

UI设计的自动驾驶仪,将文本提示转化为线框图。

02

色彩

#6419FFAccent
#F5F5F5Ink
#AEAEAEInk soft
#0D0D0DBG
#171717BG soft
#080808BG quiet
#232323Muted
rgba(33,33,33,1)Line

高对比度的深色模式,搭配充满活力的紫色AI点缀色,以象征创意与现代科技。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 500
  • h140px · 480
  • body-lg18px · 400
  • body16px · 400
  • caption14px · 400

保持标题行高紧凑(1.1-1.15)。 · 使用负字间距(-1px至-0.2px)营造现代、紧凑的视觉感受。 · 所有展示性字体均优先选择简洁、几何化的字形。

04

间距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
90px

统一的4px网格系统确保所有UI组件间的间距和谐一致。

05

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

sm · 4px
md · 8px
lg · 12px
xl · 16px
pill · 999px

根据场景使用1px实线边框,颜色为rgb(245,245,245)或rgb(33,33,33)。

0px 12px 30px -4px rgba(3,3,3,0.12) · 0px 2px 12px 0px rgba(168,129,254,0.64) · 0px -20px 200px 0px rgba(68,20,187,0.75)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

页面中心采用结构化的网格布局,包含首屏、功能展示和社会证明等明确分区。

07

动效与交互

200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

background-color和opacity的平滑过渡。 · 交互元素上的细微hover效果。 · 增强AI核心感受的动态光晕与渐变。

主操作元素上出现细微的颜色变化和轻微的缩放或光晕效果。 · 通过颜色变化或内阴影提供即时视觉反馈。

08

组件

  • button 高对比度的主操作按钮,采用胶囊形边框和细微的紫色光晕。
  • card 圆角卡片,配有柔和的边框(1px solid #212121)和深色背景。
  • chip 用于界面内状态或标签的小型圆角标签。
  • input 简洁的输入框,采用深色背景和细微边框,常与操作按钮组合使用。
  • hero 一个占据主导地位的居中首屏区域,包含大标题、副标题和醒目的提示词输入框。

09

文案语气与禁用清单

  • 语气 创新、赋能且直接。
  • 标题风格 大胆、以效益为导向的陈述,聚焦速度与AI能力。
  • 按钮文案 使用行动导向的动词,如“生成”、“注册”和“探索”。
  • 不要使用白色或浅色背景——截图显示深色主题(#0D0D0D)是基础。
  • 不要使用暖色、大地色或柔和色调——调色板以黑色、白色和高饱和度紫色为主。
  • 不要使用衬线字体——截图显示仅使用简洁、几何化、人文主义无衬线字体类别。
  • 不要使用小于4px的圆角——即使是小元素也至少使用4px圆角,许多卡片使用12px或16px。
  • 不要在营销材料中使用通用占位文本——截图使用了清晰、指导性的提示词示例。
  • 不要使用低对比度文本——截图显示在深色背景上使用高对比度白色(#F5F5F5)以确保最佳可读性。
  • 避免: 未经解释的过度技术性术语。
  • 避免: 被动或犹豫的语言。
  • 避免: 过多的感叹号或夸张表述。

10

包内真实截图

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

11

System Prompt

Uizard是一款以速度和创新为核心的AI驱动UI设计工具。视觉系统建立在高对比度的深色模式(#0D0D0D背景)和充满活力的紫色点缀色(#6419FF)之上。字体以简洁、几何化的无衬线字体类别(展示与正文)为主。关键约束包括:避免浅色主题、仅使用现代无衬线字体、所有文本保持高对比度。设计采用统一的4px间距网格和圆角(12px-16px),营造柔和而专业的质感。切勿使用衬线字体或暖色、大地色调色板。重点始终应放在AI生成内容的“魔力”上,通过发光点缀和大胆、以效益为导向的标题来突出。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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