精选 · 开放 · 免费

Automator Community

用于发现和获取过期域名的专业域名交易平台工具

SaaSFintechProductCleanTooling

↓ 下载设计系统包 (5 MB)在 OpenDesign 中打开

原站: https://automator.community

📦 浏览包内文件 →

设计气质 DNA

域名已过期回购投资金融科技SEO

专为域名投资者设计的清爽、数据丰富的金融仪表盘

色彩

#049FCEAccent

#374151Ink

#4B5563Ink soft

#FFFFFFBG

#FBFBFBBG soft

#DBEEF9BG quiet

#9CA3AFMuted

rgba(209, 213, 219, 1)Line

清爽的数据优先布局，使用青色主强调色在素净白色画布上突出可操作元素与关键指标

字体

humanist-sans

display35px · 700
h224px · 600
body16px · 400
small14px · 400

所有主要界面使用DM Sans字体 · 使用粗体（600-700）建立层级与强调 · 为密集数据表格保持充足的行高

间距

4px

8px

16px

24px

32px

48px

64px

96px

标准4px网格系统，卡片采用16px基础内边距

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

sm · 8px

md · 12px

lg · 16px

pill · 999px

1px solid #D1D5DB

0px 4px 8px 0px rgba(0, 0, 0, 0.06) · 0px 1px 2px 0px rgba(0, 0, 0, 0.06)

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

12列网格，居中容器最大宽度1280px，数据表格采用标准垂直节奏

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的背景色过渡 · 状态变化时的微妙变换动画 · 0.5秒的背景过渡用于大范围状态更新

微妙的背景色加深或柔和阴影提升 · 通过背景变化提供即时视觉反馈

组件

button 圆角胶囊按钮，主按钮使用青紫渐变或纯青色，次按钮为白色带微妙边框
card 圆角容器，配有微妙阴影或浅色背景色调，用于分组数据块
chip 行内徽章用于元数据（如状态标签），采用纯色背景与高对比度文本
input 简洁的带边框输入框，内边距16px，聚焦时有过渡效果
hero 分卡片式布局，结合高对比度横幅（渐变背景）与下方柔和文本内容块

文案语气与禁用清单

语气专业、可信赖且直接
标题风格 清晰、粗体、以数据为导向，聚焦实用性与域名价值
按钮文案 行动导向且醒目，使用高对比度渐变驱动转化

不要使用无边框输入框——截图显示所有交互字段均有清晰的1px边框
不要使用纯单色配色——截图显示关键CTA使用了鲜明的青紫渐变
不要使用暗色模式界面——截图显示以白色背景为主，辅以浅蓝色调
不要使用复杂的衬线字体——截图统一使用简洁的人文主义无衬线字体
不要使用尖锐的元素边角——截图统一使用8px至16px的圆角
不要使用深重的投影——截图使用非常轻淡的rgba(0,0,0,0.06)提升效果
避免: 俏皮或过于随意的语言
避免: 无明确实用性的抽象隐喻
避免: 关键信息使用低对比度文本
避免: 密集、未格式化的文本墙

包内真实截图

Automator Community — 桌面首屏（hero） — 桌面首屏（hero）

Automator Community — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

抓自真实页面 · 真 computed styles

System Prompt

你是一名UI设计师，正在为域名投资者创建专业、数据驱动的SaaS界面。设计必须让人感觉可信赖、高效且清爽，采用浅色模式美学，以白色（#FFFFFF）为基底搭配柔和蓝色色调（#DBEEF9）。主要操作应使用鲜亮的青紫渐变来吸引注意力。所有文本使用人文主义无衬线字体DM Sans，确保密集数据表格的高度可读性。关键规则：所有卡片和按钮保持8px以上的圆角，使用微妙的rgba(0,0,0,0.06)阴影而非厚重边框来营造层次感，并确保所有状态指示器（如“已拦截”或“成人域名”）都以高对比度的青色清晰突出。避免使用暗色模式、过于随意的语言或尖锐、方正的界面元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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