Radix Themes
实用的产品界面参考:支持主题切换的颜色、九级字号与间距比例、组件状态,以及完整的 AI Agent 指南。
探索配色方案、字体排印、组件、布局和完整的设计指南。比较视觉方向,了解其规则,并将合适的参考应用到下一个项目中。
实用的产品界面参考:支持主题切换的颜色、九级字号与间距比例、组件状态,以及完整的 AI Agent 指南。

使用 Mozaic 的 16px 魔法单位、尺寸匹配的 48px 控件、实际 SCSS 导入和 BEM 类,构建实用的数量控件组合。货架规划器可直观呈现取值范围、输入错误和本地材料汇总。

通过可选择的创意素材表格和导出预设检查器,了解 React Spectrum v3。掌握 Provider 主题和输入缩放、受支持的样式属性、带键集合,以及 v3 与较新 Spectrum 2 实现之间的界限。

借助 AgDS 具体的间距、响应式属性与 TaskList 状态模型,构建更长的服务流程事务。试用一个准备流程:只有当所有前置条件都完成时,复核步骤才会解锁。

通过真实的语义颜色和字体令牌、基于类的排版以及原生航班组件,探索 Auro 的 Alaska 主题。两条原创航班记录展示了本地筛选和选择功能,但不代表任何航空公司的库存或预订服务。

使用 Alberta 的原生 Web Components 与已发布的设计令牌,构建一份完整的准备清单,具备无障碍选项、派生进度和诚实的审核反馈。

使用 Amsterdam 真实的开源 Switch 契约,搭配完整的中性主题、无障碍标签和即时的阅读偏好设置。

使用 Arco 的受控 Transfer 组件构建报告章节选择器。探索实际的间距和尺寸比例、CSS 变量约定、语义界面表面,以及选择行与移动行之间的区别。

Ariakit 提供无样式的 React 组件,具有明确的共享状态和可组合的无障碍部件。其组合框将输入的文本与提交的选择分离,使其对搜索驱动的选择器很有用;下面的参考查找器通过分组和不可用结果演示了这种区别。

使用语义化的 Atlassian 设计令牌、8 像素间距标尺、真实的 Button、Lozenge 与 Toggle API,以及必需的 Compiled 样式配置,构建一块议题规划看板。检视一条议题、筛选看板,并移动本地工作项,同时不把选中与状态混为一谈。

一份 Cloudscape 配置指南,包含真实的可视化刷新令牌、感知密度的间距、受控表单 API,以及可运行的两步资源向导。

使用 Backbase 的 Angular 模块、语义主题导出和明确的审核状态构建品牌银行审核流程。比较 Web API 与单独记录的原生尺寸。

Bits UI 提供无头 Svelte 组件,通过原生部件和 Svelte 5 状态进行组合。示例将派生的混合状态复选框、可独立展开的手风琴面板和基于 portal 的评审对话框组合在一起,并附上完整的样式配置。

通过实际的间距比例、语义化颜色、响应式网格和组件 API 使用 Bootstrap 5.3.8。体验可用的预约表单、错误摘要、表格筛选器、模态框和色彩模式切换,然后复用文档中的代码。

使用真实的语义令牌、原生 React Aria 控件、条件性联系字段和完整的验证行为,构建一个 B.C. 风格的提醒偏好表单。

使用 Bulma 的实际字段/控件结构、响应式分栏、语义化颜色修饰符和 CSS 变量,构建编辑工作台,并提供完整的校验代码。

通过一份完整的可检索准备指南,探索 GC 设计系统的字体排印、语义化令牌与原生 Web 组件,并涵盖展开收起与空状态行为。

实现 CFPB 的编辑网格、现行排版规范和原生 Expandables,并提供可用的阅读工作表、经过验证的软件包 API,以及明确的品牌标识使用边界。

Chakra UI v3 参考资料,涵盖设计令牌、语义颜色角色、配方和复合表单组件。查看实际的间距与字体比例,然后尝试使用原生组件构建工作区个人资料表单,其中包含验证、保存失败模拟以及浅色/深色外观。

使用带版本的主题变量、真实的 Review 组件 API,以及可正常运行的编辑与审核流程,实现 CMS Core,并保留用户答案和焦点。

一个使用真实 5.9 主题变量构建的 CoreUI 审核队列,包含原生标签页、复选框批量选择,以及可撤销上次本地归档操作的常驻提示框。

一个原生支持 CSS 的邀请函制作工作室,展示 daisyUI 的 5 种语义主题、成对的内容颜色、单选按钮组合、范围控件、浏览器验证以及实际的对话框审核步骤。

使用 DDS v3 构建范围明确的设备搜索:采用语义化颜色、响应式字号比例和令牌间距,并组合 InputGroup;筛选行为由应用负责。

通过完整的资源对比,探索丹麦 DKFDS 主题、实际 Sass 尺度和无障碍表格模式;其中包含数字排序、提交搜索和无结果状态恢复。

使用 Bootstrap Italia 的真实字体排版、响应式 Stepper 结构和可恢复的本地表单状态,实现易于阅读的服务流程。

通过完整的任务说明编辑器,探索 Designsystemet 实际的主题角色、尺寸模式和原生字段行为,并查看字符数反馈及保留的呈现状态。

了解法国国家设计系统在其机构适用范围内的具体字体排印、网格和手风琴组件 API。在清晰、中立的教学示例中,对比相互关联与彼此独立的展开行为。

通过日期范围工作流,研究 Duet 的 LocalTapiola 色彩和间距比例;其中包括 ISO 日期值、明确的范围验证、组件焦点方法,以及独立的开源选择器边界。

构建一个 Elastic UI 日志浏览器,采用经过验证的 Borealis 尺度、原生表格和搜索控件、严重程度筛选、本地保存的事件,以及完整的 React 源代码。

使用 Element Plus 的真实 Transfer 模型、筛选器和禁用选项,构建模块选择工作台,并以经过验证的颜色、字号和控件尺寸为依据。

阅读 Soul 的数据表规范,了解其 6 像素间距、分层配色角色和紧凑的 Inter 字体。比较批量选择、缺失数据表示和汇总行,然后查看经过核实的私有 React 包入口。

Calcite 的实用参考,聚焦于空间工具:语义化界面表面和蓝色操作、紧凑的检查面板、真实的输入 API,以及完整的本地站点审查示例。

通过完整的原生手风琴任务说明,了解 Europa 的 EC 颜色、字体和间距用途,其中包括键盘操作、全部展开行为,以及无 JavaScript 时的易读回退方案。

原生 Flowbite 4 手风琴与抽屉组合,语义主题别名已验证;包含持久化打包清单和便于无障碍访问的本地材料备注流程。

原生 Fomantic UI 阅读书架,包含经过验证的编译主题值、jQuery 下拉菜单和评分模块、明确的键盘支持,以及持久化的本地收藏列表。

可运行的 Foundation proof desk,使用 XY Grid、Abide 自定义验证器、Reveal 确认组件、实际的 Sass 设置以及完整的本地集成代码。

原生 Framework7 速写本,包含可实际使用的滑动操作、明确的 iOS 主题值、支持键盘访问的操作菜单按钮,以及一个筛选列表;已完成的研究项目会保留在列表中,直到重置为止。

面向技术工作流的 Pajamas 指南:真实的语义令牌、流畅的字号与间距、分阶段的流水线检查器、清晰易读的失败输出,以及明确限定在本地的重试模拟。

使用 gluestack 的核心 Button 和 Input 创建器,构建野外装备清单;明确指定 v5 语义颜色,并提供完整的 React Native Web 源码。检查验证、键盘操作、稳定的条目标识,以及在本地计算得出的打包进度。

通过包含六项资源的完整阅读工具包,探索 Gov Design System CE 的实际颜色角色、卡片插槽和原生分页,并明确呈现焦点和页面状态。

使用当前 v6 字号比例、响应式间距、功能色彩、关联校验和具体的 Frontend 集成,构建 GOV.UK 风格的问题填写与答案检查流程。

了解 HarvardSites 如何作为编辑出版平台使用:比较不同的网站风格,选择有文档说明的字体组合,并通过专为特定用途设计的内容组件构建大学页面。

Headless UI 提供未设样式的 React 交互组件,适用于对话框、列表框和开关。本指南以文档共享流程为例,介绍如何将这些组件原生的焦点、选择和弹出行为与常规 CSS 组合使用。

组合使用原生 HDS 选择组、语义反馈颜色和关联的错误摘要,构建完整的本地审核与修正流程。

HeroUI v3 参考,包含实际的语义化 CSS 变量、复合 React 控件、明暗界面表面,以及可用的图像导出方法。

使用 Grommet 的布局基元、受控表单字段和数值仪表来构建容量预留界面。谨慎使用其主题比例,并将 Grommet 基础主题与单独安装的 HPE 主题区分开来。

使用 Rivet 实际的设计令牌比例、HTML 组件结构和原生键盘交互,构建大学页面。探索紧凑型工作坊详情页,其中包含便于访问的访客信息标签页。

使用真实的 IDS 输入状态、主题别名和准确的资源标识符,构建企业级维护表单。查看当前公开的主题令牌、固定版本的 Web Components 软件包,以及包含验证和重置功能的本地草稿工作流。

原生 Ionic 阅读偏好设置界面,包含经过验证的配色角色、iOS 和 Material 范围滑块的几何样式、真实的分段控件与开关行为,以及可根据字体、字号和纸张选项调整的文章。

使用 DADS 文本角色、语义令牌和原生 HTML 组件结构,构建易读的日语公共服务界面。试用可运行的收据查询功能,体验格式错误、无匹配结果和可供审核的状态记录。

构建一个面向创作者的分享面板,清晰呈现课程信息,提供明确的复制操作,并如实反馈剪贴板状态。探索 Sage 的 Rails 组件结构、已发布的字体排印规范,以及较新的外部加载 Pine 令牌层。

使用经验证的字体排印、语义主题、披露组件和可撤销的确认流程,构建原生 KERN 界面。

面向旅行场景的 Orbit 指南,采用真实的产品颜色和间距,提供原生行李选项、一致的价格明细,以及完整的本地审核流程。

Kobalte 为 Solid 提供无头组件,包括分别处理原始值和格式化值的数值输入框、复合复选框结构,以及带按下状态的按钮。本指南通过配方缩放器将这些基础组件与 Solid 信号结合起来,其中包含派生数量和可重置的食材勾选项。

通过真实的浅色主题角色、标题与正文的字号层级、嵌套圆角和标识符处理方式,了解 Maersk 的运营界面语言。示例货运查询展示精确匹配参考编号及无障碍事件历史,但不声称能够访问实时物流数据。

以原生参与者表格和排期抽屉为核心的 Mantine 9 参考示例。查看实际主题比例,将 useForm 连接到 TextInput、Select、Checkbox 和 DatePickerInput,并在添加本地记录前试用验证功能。

Melt UI 的 store/action 构建器可为你编写的 Svelte 标记添加无障碍行为。本指南使用 @melt-ui/svelte 0.86.6,通过属性、actions 和可写 stores 连接单选项、滑块和开关构建器;它不同于较新的 runes API。

通过一个可运行的角色与研究筛选示例,了解 Forty-Two 支持的 WordPress 工作流程、Web 配色方案和人员目录模式。

构建一个 Fluent UI React v9 工作区,使用真实语义令牌、Web 字体和间距阶梯、受控标签页,以及经过验证的访问权限对话框。比较主题值,查看组件结构,并在使用完整的 React 示例之前尝试本地交互。

使用 Vibe 4 令牌和 React 控件,构建可运行的交付看板。了解语义操作颜色与看板标签的区别、命名间距级别、字体简写,以及新应用所需的显式 CSS 设置。

构建一个让数字对齐、资产颜色保持原有含义、文字清晰易读的研究界面。探索 MDS 常量、Vue 3 集成、Morningstar Intrinsic 迁移,以及一个可排序的虚构资产配置记录簿。

一份编辑式 Protocol 指南,包含真实的字体栈、间距和容器尺度、响应式图文阅读页面,以及完整的原生 CSS 表单示例。

原生 Naive UI 数据表工作台,采用经过验证的主题对象值,支持行选择、展开、排序、分页和本地批量审核操作。

使用 Aksel v8 的真实 ax 令牌、原生表格密度和语义化表头结构。对虚构的后续记录进行排序和选择,并比较浅色与深色主题。

运用 NHS.UK 的字体、响应式间距、分组单选项和情境化详情,打造清晰的预约偏好选择流程。

使用真实的贡献者组件和明确的主题,构建公共服务界面。本参考采用 Utrecht CSS,展示令牌映射、数据列表结构,以及使用相同编辑流程的两种原创主题。

通过房间请求草稿,查看 Nord 的 Therapy 主题令牌和 Web Component 契约:真实的颜色角色、响应式字段尺寸、明确的验证,以及在本地准备的结果。

通过完整的工作坊指南和独立的本地阅读清单,了解 NSW 设计令牌、Public Sans 字体排版,以及支持键盘操作的原生标签页。

使用真实 Vue 组件、语义化主题引用、输入验证和明确的本地草稿行为,构建完整的 Nuxt UI 4.11.3 简报编辑器。

构建一个前后不会矛盾的调查问卷:使用 ONS 原生复选框、互斥选项、准确的字体和颜色引用,以及完整的本地回顾流程。

构建一份安大略风格的长篇指南,采用真实的字体排印、已发布的间距和颜色值、原生手风琴交互,以及与版本完全匹配的完整源代码。

通过一份完整、可编辑且原创的股票审查工作表,研究 Oracle JET 19 Redwood 的实际配色、语义角色、间距和密度边界。

通过完整的响应式对比研究,查看 Orange OUDS 1.4 的实际语义设计令牌、主题软件包和原生 Offcanvas 行为。

原生 Oruga 目录编辑器,支持搜索和移除主题标签、强制执行词汇限制、使用可选主题的真实令牌,并通过实时卡片呈现所选标签。

使用 Blueprint 构建密集的数据工作区:经验证的字体和意图令牌、可选择的数据集表、审核检查器,以及完整的 React 源码。

探索 Bolt 的 Pega 品牌内容系统:流动排版、横向与纵向间距分开设置,以及用于编辑资源页面的 Twig 手风琴式组合布局。

Pico CSS 样式采用语义化 HTML,支持基于 rem 的响应式字号阶梯和主题变量。标准版、无类版和条件版的集成范围各不相同;本指南使用标准构建版本,展示带有原生展开面板和对话框行为的阅读偏好表单。

通过可用的活动目录,查看 Poncho 的 Bootstrap 3 网格、语义操作颜色,以及可通过完整面板区域点击的服务入口。

通过流动式间距、CSS 配色方案、Porsche Next 字体和双选项配置器,探索 Porsche Design System v4。参考内容包含真实的令牌表达式,以及完整的 Vite 入口文件,并采用当前的分段控件事件。

使用原生 Preline 设计的行程规划工具,包含关联选项卡、受约束的数字输入插件、已安装的主题别名、实际的 Tailwind 尺度,以及随所选行程更新的本地材料估算。

一个版本固定的 PrimeVue 实现,属于 Prime UI 生态系统:采用 Aura 主题的文档树,包含真实的预设引用、受控展开、筛选、选择和本地固定功能。

Pure CSS 是一款模块化样式表,适用于网格、表单、按钮、菜单和表格,不包含小组件运行时。本指南展示如何将其可选的响应式网格模块与原生语义元素结合,用于可筛选的设备目录,并明确实现排序和选择功能。

一个原生的 Quasar 引导式工作流,采用实际的品牌与间距数值、QForm 验证、三步简报构建器、单选格式选项,以及实时的 45 分钟议程。

通过完整的图解资源选择器,探索 Queensland 的 Bootstrap 实现,其中包含真实的主题角色、原生复选框样式和无障碍答题回顾对话框。

使用 React Native Elements 5.0.0 构建完整的专注计划编辑器:使用真实的主题角色、受控输入和选项、验证、本地确认,并通过测试的 Web 构建。

原生 React Suite 审核日历,使用经验证的 v6 CSS 变量,包含日期单元标记、所选日期日程、模态框验证和明确的本地排期规则。

使用 PatternFly 构建运维工作区:引用语义令牌、可选择的服务卡片、三态批量选择、范围审核,以及完整的原生 React 代码。

构建一个具体的 Cedar 履约方式选择器,采用原生 Vue 磁贴、真实令牌值、完整的键盘导航和响应式产品布局。

通过完整的工作坊时间线,了解 Ripple 实际的色彩用途、14 级间距比例和响应式字体参考;其中还包括渐进式披露、进度提示和用于下一步操作的键盘焦点。

将 Sainsbury’s 的公开设计指南应用于完整的配送时段选择流程:使用真实的配色和尺寸参考、无障碍单选项、动态更新的摘要,以及如实说明的本地操作反馈。

一份 Lightning 蓝图指南,适用于密集的记录处理场景:真实的间距、字体与语义色,一个可编辑的案例工作区、字段验证,以及能反映本地变更的活动历史记录。

通过完整的原创阅读偏好预览,了解 One UI 的浏览与交互结构、24dp 边距建议、200% 文本缩放要求,以及深色外观和明确的重置恢复方式。

通过 UI5 Web Components 使用 SAP Fiori 的 Horizon 主题:采用真实的主题参数、明确的内容密度、语义化的值状态,以及带本地验证的采购申请布局。

通过原生字符计数字段应用苏格兰政府的响应式字号、间距和颜色语义;超出限制的文本仍会保留,并支持后续调整。

通过原创的求职界面设计了解 Braid:按主题作用域划分的变量、四个真实断点、结合上下文的文本、不同色调的按钮,以及会说明验证原因而非禁用操作的受控字段。

一份 Evergreen 参考示例,包含实际主题取值、受控标签输入、实时规则匹配、空状态恢复路径和原生审核对话框。

创建顺序式工作区设置,采用 Semi 推荐的基础 Steps、受控 Input 和 Switch、真实主题令牌,并明确选择使用 React 18 还是 React 19 程序包。

一份星际主题指南,包含当前语义令牌和图表令牌、原生筛选控件、固定比例对比、选中项详情,以及完整的可复现测试样例。

通过完整的本地请求审核流程,探索 Horizon Workspace 精确的间距、圆角和字体排印参考;流程支持保留草稿、校验、状态筛选和错误恢复。

通过三级令牌模型、经过验证的明暗主题角色值,以及完整的服务分配交互,让 Anvil2 更具体:技师、时间和审核状态保持同步。

使用明确的严重程度词汇、适配主题的颜色角色和 iX Event List API 检查工业事件。本指南将构建本地设备记录簿,并清楚区分已审核记录与已解决的机器警报。

使用当前版本的 SGDS Web Components、真实的响应式设计令牌、日间和夜间主题,以及保持本地计划同步的原生范围数量输入控件。

通过完整的阅读桌面体验,比较 Skeleton 5.0.1 的 Cerberus、Mint 和 Rose 真实主题,并实时检查设计令牌、暗色界面表面组合及可逆的本地状态。

通过完整的编辑审核队列,检查 Seeds 实际公开的颜色、间距、产品字体排印和边框令牌;队列支持混合选择、筛选后的空状态和撤销操作。

使用 Decanter 的 Tailwind 预设、响应式字号比例和自适应屏幕边缘,构建学术风格的编辑类页面。探索原创活动卡片,体验可用的主题筛选和可展开的摘要。

一份 Circuit 指南,包含精确的语义令牌、原生校验属性、完整的商家商品编辑器和图示化的客户侧预览。

使用 Source Sans 3、明确的间距令牌和可恢复的文档选择模式,构建易读的芬兰公共服务表单。

原生 Tabler 项目日志,采用实际的 1.6 主题变量、时间线卡片、数据网格上下文、模态框验证,以及可接收本地检查点的明暗主题组合。

通过完整的原生组件习惯追踪板(含验证、进度和空状态恢复),了解 Tamagui 实际的 v5 令牌类别以及浅色/深色蓝色主题。

使用 TDesign React 构建紧凑的 API 政策编辑器:设置具体的主题角色、两像素尺寸比例、Form 字段注册,以及带类型的 Table 组合。
使用 Thumbprint 文档中记录的 v2 基础组件,构建服务发现界面:紧凑的服务提供方卡片、清晰易读的对比详情、明确的选择状态,以及常驻的候选清单。

使用 Paste 的主题与按钮规范撰写通知草稿,采用经过验证的间距比例,并清楚区分编辑、审核和实际发送消息的状态。

UIkit 结合了 CSS 框架、Less 自定义配置和由属性驱动的 JavaScript 组件。下方的工作坊规划器展示了 Switcher、Accordion 和响应式网格如何协同工作,并说明原生组件行为与应用选择状态的边界。

探索 UNDP 已发布的颜色与间距令牌、支持原生键盘操作的标签页,以及完整的工作坊阅读示例,其中包含本地记录的阅读进度。

将 USWDS 间距令牌、主题角色、语义表格和原生折叠面板结合起来,打造可搜索的机会对比体验。

运用 VA 的语义令牌和原生 Process List,打造清晰的服务流程:展示步骤说明和含义明确的状态标签,并提供补充详情,同时保持主要路径清晰易读。

使用 Vant 4 构建移动端地址选择流程:采用真实的 CSS 变量、受控的地址标识、字段验证、主题切换,以及明确的仅本地保存功能。

使用 Visa 的 Nova CSS,通过原生单选控件、替代色标题栏和确认摘要,打造清晰的账单格式偏好设置。查看精确的 1.6.5 主题值、可缩放间距和完整的样式表集成。

通过完整的行李规划示例,检查 Volvo Cars 以 HTML 为先的 Web 基础、实际的浅色模式令牌和原生可选卡片样式;支持独立选择、主题切换和重置。

原生 Vuestic 评价表,采用经来源核实的浅色和深色预设、无障碍评分标签、文本区域验证、自动计算的平均分,以及可保留已完成评估的保存状态。

运用流式字体、语义化颜色角色和原生折叠内容,打造适应力强的阅读界面,即使没有 JavaScript,内容依然清晰易读。

检查 Web Awesome 在原生自定义元素中的实际语义令牌,包括作用域内的圆角和间距调整、Shadow DOM 样式、选择控件行为和输入验证。

运用 Codex 的真实 SearchInput 结构、操作层级和适于阅读的令牌。在本地文章索引中搜索、查看搜索结果,并返回原来的阅读位置。

在完整的反馈阅读工作区中使用 Wanda 的真实主题角色和令牌语法,支持主题筛选、展开查看证据背景,以及持久保存到本地的笔记本。

使用 Canvas Kit 的复合 FormField、受控 TextInput 和 PrimaryButton,制定本地学习计划;同时区分当前语义令牌来源与旧版 space.x4 迁移示例。

面向支持工作的 Garden 指南,采用真实的主题别名、字体和圆角比例,配备完整的回复编辑器、根据可见状态保存的本地草稿,以及字段恢复功能。
旅行平台。暖珊瑚色点缀,以摄影为主,界面采用圆角设计。
项目管理。极简精炼、精准利落,搭配紫色强调色。
平和克制的近单色系统,以深青黑为基调,留白充裕,采用编辑式排版。
消费电子产品。高端留白、SF Pro 字体与电影感影像。
支付基础设施。标志性的紫色渐变,搭配轻盈优雅的 300 字重。
数字银行。简洁利落的深色界面、渐变卡片与精准的金融科技风格。
磨砂玻璃效果,以半透明层、细腻模糊和发光边框营造层次感与现代优雅气质。
转账。明亮的绿色点缀,亲切清晰。
电动汽车。极致化繁为简、全视口摄影,界面元素近乎为零。
语言学习平台。鲜亮的猫头鹰绿、厚重的阴影与游戏化乐趣。
以代码为核心的平台。高效的信息密度、蓝白配色的精准呈现,以及 Primer 基础设计。
以对话式 AI 为先的界面,控件精简、结果清晰,并通过委派任务流程支持 Agent 工作流。
融合电子表格与数据库的设计。色彩丰富、亲和友好,呈现结构化数据美学。
面向企业应用的结构化设计系统,强调清晰、一致与高效,适用于数据密集型 Web 应用。
紫色主题的应用仪表盘,采用顶部导航栏和卡片式布局,工作流程以开发者为先。
“为你浏览的浏览器。”半透明界面表面、温暖的渐变色,以及以侧边栏为核心的布局。
高对比、富有表现力的风格,以创意字体和大胆配色打造醒目的界面。
具有杂志级质感、以拼贴为主导的视觉系统:温暖的纸感画布、超现实的石膏与建筑图像、超大展示字体、极细分隔线、罗马数字章节标记,以及细小的编辑批注。汲取 Monocle、Apartamento、IDEA 等高端印刷杂志的制作水准,并将其转化为可实际使用的网站。
模块化网格布局,采用卡片式区块、清晰的层级、宽松的间距和微妙的视觉对比,让界面井然有序、一目了然。
加密货币交易所。以单色为基调,搭配醒目的黄色强调色,营造交易大厅般的紧迫感。
豪华汽车品牌。深色高端界面表面,彰显精准的德国工程美学。
赛车运动高性能子品牌。近乎纯黑的驾驶舱式界面表面、BMW M 三色点缀,以及锐利的工程几何线条。
以厚重字体、高对比色彩和气势鲜明的布局,塑造强烈的视觉存在感。
灵感源自混凝土建筑的原始反设计美学,采用不加修饰的元素、突兀的布局和功能主义极简风格。
超跑品牌。影院般的黑色画布、克制的单色风格,以及恢弘的展示字体。
受舒适咖啡馆启发的界面,采用温暖色调、柔和字体和简洁布局,带来轻松的浏览体验。
开源日程安排平台。简洁中性的界面,秉持面向开发者的简约理念。
视觉创作平台。鲜明的紫蓝渐变、宽松的间距和亲切的几何造型。
企业基础设施品牌。沉稳可靠的深色界面表面、Cisco Blue 品牌色,以及清晰明了的技术风格。
Anthropic 的 AI 助手。温暖的陶土色点缀,简洁的编辑风格布局。
创意代理机构。自然有机的形状、柔和渐变,以及经过艺术指导的布局。
柔和圆润、仿似 3D 的形状,模仿可塑黏土的质感;搭配俏皮饱满的元素和色彩丰富的界面表面。
注重简约的设计,采用充足留白、清晰易读的字体和精简配色,减少视觉杂乱。
高速分析数据库。黄色点缀,技术文档风格。
为现代 Web 应用打造的精简语义化组件语言:层次分明的中性色界面表面、精准的 Inter 字体、无障碍控件、自动适配明暗模式的色彩角色,以及适合不同任务的图表配色。
企业级 AI 平台。鲜明渐变色,数据丰富的仪表盘美学。
加密货币交易所。简洁的蓝色品牌形象,强调信任,呈现机构级质感。
运用鲜明、高对比的配色与渐变,打造引人入胜、令人难忘的现代用户体验。
工具集成平台。现代深色风格,搭配色彩丰富的集成图标。
贴合当代审美的极简设计,采用 Bento 网格,支持深色模式,并提供高性能、无障碍布局。
专业且贴合品牌的设计,采用结构化网格、极简布局和一致的企业级设计模式。
未来科幻美学,以深色主题、鲜明霓虹点缀和沉浸式空间元素营造体验。
富有表现力的字体与大胆图形相结合,打造活泼且角色鲜明的设计,适用于落地页和创意项目。
AI 优先的代码编辑器。深色界面简洁利落,点缀渐变色彩。
深色云平台风格,采用模块化网格、玻璃质感面板和清晰的数据层级,适用于效率仪表盘。
语音与聊天平台。深邃的蓝紫色、深色优先的界面表面,并点缀活泼的强调色。
一种点阵渲染技术,通过有限的调色板模拟不同明暗,营造怀旧复古、高对比度的视觉效果。
手绘素描般的风格,搭配涂鸦、手写字体和不规则线条,营造活泼随性的氛围。
高对比度的戏剧化设计,采用大胆布局、沉浸式视觉效果和非常规构图,令人瞩目。
杂志风格的编辑版式,采用精致的衬线字体、规整的网格和优雅的阅读体验。
从容精致的美学风格,以细腻的字体、简约的配色和考究的版式彰显格调。
AI 语音平台。深色电影感界面,融入音频波形美学。
动感鲜明的风格,以粗边框、几何图形、高对比度配色和富有表现力的字体传递动势与活力。
简洁明快的企业级设计,适用于数据驱动的工作流程,采用直观的拖放交互和规整的版式。
React原生平台。深色主题、紧凑的字距、以代码为核心。
鲜明且个性十足的设计,以大胆配色、活泼图形和灵动布局平衡创意与秩序。
游戏风格的奇幻美学,采用大胆考究的视觉效果、丰富的配色和沉浸式主题元素。
豪华汽车品牌。明暗对照的编辑风格,点缀 Ferrari 红,搭配电影感黑色。
协作式设计工具。多彩鲜明,兼具活泼与专业。
二维极简风格,采用鲜明配色和清晰字体,不使用 3D 效果,打造快速易用的界面。
网站构建工具。大胆运用黑色与蓝色,以动效为先、以设计为核心。
亲切直观的设计,采用圆润元素、充足留白和柔和的粉彩配色。
面向未来的设计,采用科技感字体和现代版式,呈现简洁利落、以创新为导向的美学风格。
以平滑的色彩过渡和丰富的渐变界面表面,为现代活泼的界面营造视觉层次。
基础设施自动化。简洁的企业风格,黑白配色。
战斗机与直升机的平视显示器风格。近黑背景上的磷光绿、大写数据叠加层和棱角分明的几何形状。在高速飞行和高空环境下也清晰明确。
机器学习社区平台。以明快的黄色为强调色,配合等宽字体风格,活泼而信息密集。
企业技术。采用 Carbon 设计系统和规整的蓝色调色板。
客户消息平台。友好的蓝色调与对话式界面模式。
编辑风纸本文档系统:温暖的羊皮纸画布、墨蓝色强调色和以衬线字体为主的层级结构。适用于简历、单页文档、白皮书、作品集、演示文稿等各类需要呈现优质印刷质感而非 UI 风格的内容。为多语言而设计(EN · zh-CN · ja)。
加密货币交易。深色 UI 搭配紫色强调色,仪表盘信息密集。
超级跑车品牌。纯黑界面表面、金色点缀和富有戏剧感的大写字体。
以转化为导向的设计,通过清晰、可信和高效的体验消除阻碍,引导用户采取行动。
以明亮配色、圆润造型、富有触感的 3D 边框和亲切插画,打造轻松友好的简约界面。
Loom 异步视频。以紫色为主色,界面表面亲切友好,布局以视频为中心。简洁专业,但不显得刻板。
AI 全栈构建工具。采用活泼渐变色和亲切的开发者风格。
深色高端风格,搭配醒目的标题、单色调配色和高级质感,适用于奢侈品牌体验。
全球支付网络。以温暖的奶油色为底,搭配环绕式胶囊造型,营造富有编辑感的温度。
Google 的 Material Design,采用分层界面表面、动态主题、内置动效,以及适用于跨平台的响应式模式。
科技零售商店。以摄影为主,采用明暗两种界面表面,搭配 Meta Blue 行动号召按钮。
去除繁复装饰,强调留白、简洁字体和克制的配色,确保界面清晰聚焦。
AI 模型提供商。大胆的深色界面搭配霓虹点缀。
文档平台。界面简洁,以绿色点缀,并针对阅读体验进行优化。
视觉协作。以明亮的黄色为强调色,营造无限画布的感觉。
航天与航空任务监控。采用深色指挥中心风格、琥珀色遥测数据和精准的等宽字体。功能清晰至上。
开放权重 LLM 提供商。融合法式设计的简约风格与紫色调。
当代编辑风格,采用衬线字体、简约配色和清爽布局,为数字产品营造精致质感。
文档数据库。采用绿色叶片品牌形象,专注开发者文档。
以等宽字体和矩阵风格为主,采用高对比度元素、紧凑布局和别具一格的黑客美学。
以现代手法演绎粗野主义,在温暖的界面表面上采用醒目的边框、鲜艳的强调色和质朴、高对比度的布局。
运用电光霓虹辉光效果和高对比度配色,打造醒目、引人注目的界面。
在单色调界面表面上,通过内外阴影打造柔和、凸起的 UI 元素,呈现触感十足的嵌入式效果。
简洁、以产品为导向的默认风格。若需求没有指定特定氛围,可用于 B2B 工具、仪表板和实用型页面。
运动零售。采用单色调 UI、超大号大写字体和铺满版面的摄影图像。
一体化工作空间。温暖而简约,采用衬线标题和柔和的界面表面。
GPU 计算。以绿黑配色展现充沛活力和技术力量感。
在本地运行 LLM。以终端为先,采用简洁的单色风格。
AI 编程平台。面向开发者的深色主题。
复古街机风格,采用像素字体、点状边框、活泼的高对比度配色和 8 位游戏美学。
纸张纹理与印刷风格,配色简约,衬线和无衬线字体清晰,并呈现出触感十足的表面质感。
对话式 AI 搜索引擎。采用深色底、利落的字体、单一紫罗兰色点缀和紧凑的信息层级。
以空间纵深为特色的设计,运用等距视图、消失点和分层元素,通过近似 3D 的真实感引导视线。
视觉发现。以红色为强调色,采用瀑布流网格和以图像为先的布局。
游戏主机零售。采用三层界面布局、克制而有力的展示字体,以及悬停时缩放的青色效果。
产品分析。采用俏皮的刺猬品牌形象和对开发者友好的深色 UI。
受 Apple 启发的高端风格,采用精准的间距、现代字体和精致 polished 的视觉语言。
精致专业、适用于商业场景的设计,采用现代字体、结构化布局和令人信赖的视觉形象。
为书籍、杂志和报告打造的印刷风格视觉语言,融合编辑网格与富有表现力的字体。
效率启动器。深色金属质感简洁利落,搭配鲜明的渐变点缀。
精心打磨的现代简约风格,搭配优雅的衬线字体和含蓄而考究的配色。
法国汽车品牌。鲜活的极光渐变、NouvelR 字体,风格大胆有力。
通过 API 运行机器学习模型。简洁的白色画布,突出代码内容。
邮件 API。极简深色主题,点缀等宽字体。
怀旧风格设计,融合复古字体、高对比度配色和怀旧视觉元素。
AI 视频生成。电影感深色界面,布局以媒体内容为主。
无头 CMS。红色点缀,以内容为先的编辑式布局。
错误监控。深色仪表板,数据密集,以粉紫色为点缀。
灵感源自 Shadcn/ui 的设计,采用简洁清爽的组件、单色调配色和实用优先的模式。
电商平台。以深色为主的电影感视觉,搭配霓虹绿点缀和极细字体。
直观朴实、不加修饰的设计,采用清晰的字体、中性色彩和易用的布局,不喧宾夺主。
通过带纹理的界面表面、3D 效果和熟悉的实体隐喻,还原现实世界的质感,打造直观的数字界面。
职场沟通平台。以茄紫色为主色,多彩的 Logo 配色,浅色界面表面搭配深色侧边栏,温暖亲切。
现代极简美学,线条干净,配色有明确用途,交互微妙,间距统一。
太空科技。鲜明的黑白对比、大幅铺满的图像,充满未来感。
充足的留白、统一的内边距和基于网格的布局,让界面简洁、易读、通透。
音乐流媒体。深色背景上的鲜绿、醒目字体,以专辑封面为核心。
全球咖啡零售品牌。四层级绿色体系、暖奶油色画布和全圆角按钮。
以叙事为核心的设计,通过视觉、文案和交互引导用户踏上引人入胜、触动情感的旅程。
开源的 Firebase 替代方案。深翡翠绿主题,以代码为先。
快速邮件客户端。高端深色界面,以键盘操作为先,紫色光晕点缀。
灵感源自经典方块游戏的设计,采用活泼配色、醒目的展示字体和紧凑有力的高能布局。
科技编辑媒体。酸性薄荷绿与紫外色点缀,Manuka 展示字体,搭配狂欢传单风格的故事卡片。
开源 AI 基础设施。采用技术感十足的蓝图式设计。
编辑与技术融合的设计系统。中性色画布、单一朱红色点缀、锐利转角、Geist 字体、硬朗阴影和结构化构图。
界面表面:网页。宇宙感与高级质感兼具的玻璃拟态深色系统,捕捉日食令人震撼的直观体验——黑曜石般的界面表面、琥珀色“日冕”高光和青色氛围点缀。
Bloomberg 风格的金融交易终端。仅采用深色主题,数据密集,青色和珊瑚色分别表示买入与卖出信号。确保用户在两米之外也能一眼读清所有内容。
移动出行平台。黑白大胆鲜明,字体紧凑,充满都市活力。
前端部署。黑白配色精准利落,采用 Geist 字体。
生动多彩的设计,搭配大胆俏皮的字体、温暖的点缀和充满活力的视觉效果。
重现 1950 至 1990 年代的怀旧风格,融入拟物化细节、颗粒质感、复古配色和像素风字体。
全球电信品牌。醒目的大写展示字体,搭配 Vodafone Red 章节色带。
AI Agent 框架。纯黑画布、翡翠绿点缀,原生终端风格。
以衬线字体为主的杂志美学。暖白纸张底色搭配陶土色点缀,适合长篇内容、编辑类页面和以品牌为主导的营销页面。
现代终端风格。深色 IDE 风格界面,采用区块式命令 UI。
协作平台。动感字体、蓝色操作体系,以及多用户强调色谱。
可视化网页构建工具。蓝色点缀,呈现精致的营销网站风格。
适用于微信小程序、公众号和开放生态扩展的品牌视觉语言。
科技杂志。采用纸白色报纸版式的紧凑布局、定制衬线展示字体、等宽字体引导语和墨蓝色链接。
埃隆·马斯克的 AI 实验室。冷峻的黑白配色,未来感极简主义。
生活方式 UGC 社交平台。标志性的品牌红、宽松圆角,以内容为先。
自动化平台。温暖的橙色,搭配亲切的插画风格。
没有匹配的系统。请尝试其他名称或类别。
从参考到界面
不要只看强调色。还要根据你正在构建的界面类型,比较字体、间距、组件和布局。
为 AI Agent 提供设计规则和明确的任务说明。将源文件与项目现有约束放在一起。
在整个项目中采用这一设计方向前,请检查真实内容、组件状态、键盘操作和窄屏表现。
形成自己的设计语言
从喜欢的网站,或已经完成的设计出发。把其中的视觉选择整理成可查看、可调整、可反复使用的设计系统。

在设计系统中添加网站链接。OpenDesign 会读取可获取的页面样式与素材,整理配色、字体和可复用的设计规范。查看提取结果,再和 Agent 一起完善。
在项目的「更多」菜单中选择「创建设计系统」。OpenDesign 会基于现有文件新建设计系统项目,再由 Agent 归纳其中的视觉规则、组件与设计模式。
查看设计规范、样式 Token 与 UI 预览。完善生成的资源包,再把它作为下一次设计的起点。
衔接你的工作流
使用 OpenDesign 构建
选择一份指南,为 AI Agent 提供清晰的任务说明,然后使用 OpenDesign 构建下一个界面。