Design Prompts：AI 驱动的设计风格探索工具

本文介绍 Design Prompts，一个 AI 驱动的设计风格探索工具，提供 30+ 种精心设计的 UI 风格提示词，帮助开发者快速生成美观一致的界面设计。

Design Prompts 简介

Design Prompts 是一个 AI 设计提示词库，专为帮助开发者和设计师快速创建美观、一致的界面而设计。通过将这些提示词输入到任何 AI 助手（如 Claude、ChatGPT 等），可以在几分钟内生成符合特定设计风格的界面。

网站标语："Drop these prompts into any AI assistant and ship beautiful, consistent interfaces in minutes."

核心功能

30+ 设计风格

Design Prompts 提供 30 多种精心设计的 UI 风格，每种风格都有独特的视觉特征：

编号	风格名称	模式	字体	特点
01	Monochrome	Light	Serif	黑白编辑风格，戏剧性对比
02	Bauhaus	Light	Sans	包豪斯几何风格
03	Modern Dark	Dark	Sans	现代深色模式
04	Newsprint	Light	Serif	报纸印刷风格
05	SaaS	Light	Sans	SaaS 产品风格
06	Luxury	Light	Serif	奢华高端风格
07	Terminal	Dark	Mono	终端/命令行风格
08	Swiss Minimalist	Light	Sans	瑞士极简主义
09	Kinetic	Dark	Sans	动态感设计
10	Flat Design	Light	Sans	扁平化设计
11	Art Deco	Dark	Serif	装饰艺术风格
12	Material Design	Light	Sans	Google 材料设计
13	Neo Brutalism	Light	Sans	新粗野主义
14	Bold Typography	Dark	Sans	大胆排版风格
15	Academia	Light	Serif	学术风格
16	Cyberpunk	Dark	Sans	赛博朋克风格
17	Web3	Dark	Sans	Web3/区块链风格
18	Playful Geometric	Light	Sans	趣味几何风格
19	Minimal Dark	Dark	Sans	极简深色
20	Claymorphism	Light	Sans	粘土形态风格
21	Professional	Light	Sans	专业商务风格
22	Botanical	Light	Serif	植物自然风格
23	Vaporwave	Dark	Sans	蒸汽波风格
24	Enterprise	Light	Sans	企业级风格
25	Sketch	Light	Sans	手绘草图风格
26	Industrial	Light	Sans	工业风格
27	Neumorphism	Light	Sans	新拟态风格
28	Organic	Light	Sans	有机形态风格
29	Maximalism	Light	Serif	极繁主义
30	Retro	Light	Sans	复古风格

风格示例：Monochrome 详解

以 Monochrome（单色）风格为例，展示 Design Prompts 的详细程度：

设计理念

核心原则：Reduction to Essence（还原本质）

仅使用黑白两色
无强调色、无渐变、无阴影
每个设计决策都必须独立成立

情感关键词：

严肃、权威、永恒、编辑感、知性、戏剧性、精致、鲜明、自信、不妥协

参考场景：

高端时尚杂志（Vogue、Harper's Bazaar）
建筑专著和博物馆目录
奢侈品牌（Chanel、Celine、Bottega Veneta）
获奖书籍设计和精美排版
画廊展览物料

设计系统规范

颜色系统：

text

background: #FFFFFF（纯白）
foreground: #000000（纯黑）
muted: #F5F5F5（米白背景）
mutedForeground: #525252（深灰次要文字）
border: #000000（黑色边框）

规则：绝对不使用其他颜色

字体系统：

展示/标题：Playfair Display, Georgia, serif
正文：Source Serif 4, Georgia, serif
等宽/标签：JetBrains Mono, monospace

字号规模（戏剧性范围）：

xs: 12px - 小字印刷、元数据
base: 16px - 正文最小值
xl: 20px - 引导段落
5xl: 56px - 页面标题
8xl: 128px - 展示标题
9xl: 160px - 超大声明

边框圆角：

ALL VALUES: 0px

无例外，所有元素都是尖锐的 90 度角

阴影：

NONE

零阴影，深度通过颜色反转、边框粗细变化、比例对比和负空间创造

组件样式

按钮：

背景：#000000，文字：#FFFFFF
内边距：慷慨的 px-8 py-4
字体：大写、tracking-widest、font-medium、text-sm
悬停：反转为白底黑字黑边框
过渡：瞬间（0-100ms 最大）

卡片：

背景：#FFFFFF
边框：1px solid #000000
内边距：p-6 或 p-8
无阴影、无圆角

输入框：

背景：#FFFFFF
边框：2px solid #000000（仅底部或完整）
无圆角
占位符：#525252 斜体
聚焦：边框加厚到 3px 或 4px

纹理和图案

水平线条纹理（全局）：

css

background-image: repeating-linear-gradient(
  0deg, transparent, transparent 1px, #000 1px, #000 2px
);
background-size: 100% 4px;
opacity: 0.015;

网格纹理（编辑区域）：

css

background-image: linear-gradient(#00000008 1px, transparent 1px),
  linear-gradient(90deg, #00000008 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.015;

噪点纹理（全局纸质质感）：

css

background-image: url("data:image/svg+xml,...");
opacity: 0.02;

动画和交互

运动哲学：极简和瞬间

过渡：0-100ms 最大
状态变化：二进制开关，非渐变

悬停效果：

卡片/功能：完整颜色反转（背景、文字、边框）
按钮：颜色反转，transition-none 实现即时反馈
链接：下划线出现

聚焦状态（无障碍必需）：

按钮：3px 实线轮廓，3px 偏移
输入框：边框从 2px 加厚到 4px
所有聚焦状态使用 focus-visible

使用方法

访问 designprompts.dev
选择喜欢的设计风格
点击 "Get Prompt" 获取完整提示词
复制提示词到 AI 助手
描述你的界面需求
AI 生成符合该风格的界面代码

适用场景

快速原型设计：在几分钟内生成高保真原型
设计系统构建：获取完整的设计 token 和组件规范
风格探索：快速尝试不同的视觉风格
学习参考：了解各种设计风格的特点和实现

总结

Design Prompts 是一个强大的 AI 设计工具，通过提供详细的设计系统提示词，帮助开发者和设计师快速创建专业级界面。其 30+ 种风格覆盖了从极简到极繁、从复古到未来的各种视觉语言，每种风格都包含完整的设计哲学、颜色系统、字体规范、组件样式和交互细节。

对于想要快速启动项目、探索设计风格或学习设计系统的团队来说，Design Prompts 是一个极具价值的资源。

字节笔记本