
Ui
哑光纸上的临床计划
shadcn/ui 是一个创建单色设计系统的工作坊:干净的白色画布、柔和温暖的灰色表面,以及位于极细边框上的大半径卡片。界面几乎完全采用无色——黑色文本、白色表面、灰色辅助色调——只有一个醒目的红色,仅用于错误状态,除此之外别无其他用途。字体采用 Geist 的几何中性设计,屏幕上的字母高度紧凑,营造出一种平静、代码般的感觉,更像是开发者的基础设施,而非消费产品。
极简的图像——整个系统几乎完全由用户界面构成。没有关键照片、插图或装饰性图形。产品演示以组件模型(卡片、输入框、按钮)的形式呈现在网格中,既是文档又是视觉内容。图标是纤细的几何线条(可能借鉴自 Lucide),粗细为 1.5-2 像素,颜色为 #0a0a0a 或 #737373,仅少量使用,作为功能提示。视觉语言就是 UI 组件本身——页面就像一个动态的风格指南,每个可见元素都是一个可见的设计元素。
调色板
中性的
- Canvas
#f5f5f5— 页面背景,柔和的表面填充,附加按钮。 - Paper
#ffffff— 卡片表面、弹出式背景、主按钮填充 - Surface Alt
#fafafa— 侧边栏背景、不显眼的卡片选项、输入字段的空闲状态。 - Ink
#0a0a0a— 正文、标题、按钮标签、图标轮廓。 - Ink Soft
#171717— 按钮背景图片,填充颜色,浅色背景上可添加文字。 - Mid Gray
#737373— 主文本、占位符文本、辅助标签和图标填充在静止状态下均为静音。
排版
从 12 像素到 48 像素 · 8 步
- Geist — 替代品: Inter · 轮廓 400, 500, 600 · 所有界面文本——正文行粗为 14px/400,标题行粗为 24–48px/600,按钮行粗为 13–14px/500。Geist 的几何字形和统一的行粗为开发者工具营造了一种中性的感觉;600 的行粗、48px 的字间距和 -0.05em 的字间距确保了清晰、自信的标题,使其看起来经过深思熟虑而非随意编辑。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8px |
| 按钮半径 | 18px |
| 卡片半径 | 24px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 48-80px |
| 页面宽度 | 1280px |
AI 将按照Ui风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Ventriloc — 一篇关于暖纸数据的编辑观察文章——一颗橙色的余烬凸显了单色的精准性。
- Geniestudio — 一本柔和的日光笔记本——那种页边距宽阔,笔画粗细均匀的笔记本。
- xAI — 暖霜实验室,含黑药丸
- Cal — 黑白配色,实用至上,人性化设计。这套系统以简洁的黑白配色为主,注重清晰度和功能性,同时辅以友好的字体和圆润的造型,营造出柔和舒适的视觉效果。
- Scale — 一个高质量的博物馆级照片冲印实验室,结合一个技术项目
- Contractbook — 在群青天空下,奶油色纸张的合同
- AutoSend — 一间舒适的石头工作室,只有一盏紫色的灯——衬线字体的标题和明亮的靛蓝色行动号召在一个安静、近乎纯白的空间里并存。
- Air — 雕塑作品《透过玻璃的午夜天空》
- SpatialChat — 白色羊皮纸上的紫色脉动
- Squarespace — 电影黑白画廊
- Giga — 午夜的地平线笼罩着结霜的黑曜石
- Supabase — 午夜时分,代码编辑器屏幕上闪烁着一个磷光绿点——如同煤尘海洋中一道独特的色彩脉冲。