精选 · 开放 · 免费

Uizard

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

01

设计气质 DNA

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

02

色彩

高对比度的深色模式，搭配充满活力的紫色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网格系统确保所有UI组件间的间距和谐一致。

05

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

根据场景使用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

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 创新、赋能且直接。
• 标题风格 大胆、以效益为导向的陈述，聚焦速度与AI能力。
• 按钮文案 使用行动导向的动词，如“生成”、“注册”和“探索”。

• 不要使用白色或浅色背景——截图显示深色主题（#0D0D0D）是基础。
• 不要使用暖色、大地色或柔和色调——调色板以黑色、白色和高饱和度紫色为主。
• 不要使用衬线字体——截图显示仅使用简洁、几何化、人文主义无衬线字体类别。
• 不要使用小于4px的圆角——即使是小元素也至少使用4px圆角，许多卡片使用12px或16px。
• 不要在营销材料中使用通用占位文本——截图使用了清晰、指导性的提示词示例。
• 不要使用低对比度文本——截图显示在深色背景上使用高对比度白色（#F5F5F5）以确保最佳可读性。
• 避免: 未经解释的过度技术性术语。
• 避免: 被动或犹豫的语言。
• 避免: 过多的感叹号或夸张表述。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko