回路 / The Loop：提出有价值的问题，比直接获取答案更重要。
这个专题收集和整理我与 Gemini、ChatGPT、Claude 等 AI 的对话记录。每一篇对应一次完整的提问与回答过程。通过留存这些层层追问，还原日常思考的真实轨迹。
概要
这一期从 Volpe 的一篇短文开始：Slightly reducing the sloppiness of AI generated frontend。
Volpe 想快速生成一些自用软件。他不懂设计，也认为 AI 缺少品味，于是拿同一个单页应用反复试验，让 Agent 套用不同风格。结果可以模仿，挥之不去的 AI 味也一直存在。页面可能像某个设计流派，却总像“这个流派的 AI 生成版”。
唯一让他满意的提示词只有一句：
make it look like a Qt app
他先把这句话用在一个美国选举人团变化可视化工具上，随后让 Codex 把其他个人软件也改成 Qt 风格。结果谈不上精致，却去掉了大部分让他反感的“Slop”。
这带出了一串问题：Qt 应用到底是什么风格？Material Design 和 Apple HIG 属于同一类东西吗？设计模式、设计语言、设计系统、组件库之间有什么区别？如果目标是让 AI 做出稳定、耐用的界面，提示词应该指定什么？
这次追问得到的实用结论是：AI 需要一套带约束的界面范式。成熟的设计系统能告诉它该用哪些控件、如何安排密度、层级和反馈。“现代、简洁、高级”只提供情绪，模型只能用圆角卡片、渐变和大标题填补空白。
Q：Volpe 说的 Slop 是一种具体风格吗？
Volpe 在实验里把 Slop 识别为一层附着物，它可以出现在许多视觉风格上。
你让 AI 模仿极简主义，它会交付带 AI 味的极简主义；让它模仿某个品牌，它会交付“像那个品牌的 SaaS 模板”。配色和字体发生了变化，布局习惯仍然高度相似：巨大的标题、悬浮圆角卡片、药丸按钮、装饰性渐变、平均分配的留白，以及每个模块都要套一层容器。
这些元素单独看没有问题。模型把它们当成“好设计”的通用答案，页面才会失去产品性格。一个文件整理器、数据监控台和播客播放器，最后拥有相似的首页骨架。
Volpe 的试验说明，继续追加审美形容词很难解决这个问题。模型需要能落到组件和布局上的规则。
Q：“make it look like a Qt app”具体指什么？
这句话通常会把模型带向经典的 Qt Widgets 桌面应用：
- 顶部有菜单栏和工具栏
- 主区域使用可调整宽度的分栏
- 左侧常见树形导航，右侧显示详情或编辑器
- 复杂功能通过标签页、属性面板和对话框组织
- 表格、输入框、下拉菜单使用标准控件
- 底部保留状态栏
- 控件尺寸紧凑，边界清晰
- 颜色跟随系统主题，只用少量强调色
- 圆角、阴影和动画控制在较低水平
它看起来像设置工具、文件管理器、IDE 或工程软件。你打开它就能判断哪里用于导航、哪里可以编辑、哪个按钮会提交操作。设计师很少需要发明新的交互语法。
这类界面还保留较高的信息密度。AI 常生成的大面积留白和卡片包装没有机会占据屏幕，Slop 也失去了常用载体。
Q：Qt 本身是一套设计系统吗？
Qt 是 UI 开发框架。它提供窗口、按钮、菜单、表格、布局和事件系统，也提供用于控制控件外观的 QStyle。Qt 应用可以跟随 Windows、macOS 和 Linux 桌面主题，也可以使用 Fusion 等跨平台样式。
因此，“Qt 风格”没有 Material 3 那样统一的品牌视觉。Volpe 指向的是一组共享习惯：桌面原生控件、传统应用结构、紧凑密度和功能优先。
提示 AI 时最好写成 Qt Widgets-style desktop application。Qt Quick/QML 也属于 Qt，它能制作动画丰富、圆润甚至接近移动端的界面，未必产生文章里的效果。
Q：设计模式、设计语言和设计系统怎么区分？
这些词经常混用，可以按覆盖范围整理：
| 概念 | 解决的问题 | 例子 |
|---|---|---|
| 设计模式 | 某类交互问题用什么结构解决 | 主从视图、分步向导、命令面板、渐进披露 |
| 视觉风格 | 产品呈现什么审美气质 | 极简、拟物、玻璃拟态、粗野主义 |
| 设计语言 / 平台指南 | 一个平台希望界面如何表现和响应 | Apple HIG、GNOME HIG |
| 设计系统 | 团队如何稳定产出一致界面 | Material 3、Carbon、Fluent 2 |
| 组件库 | 开发者可以直接调用哪些实现 | MUI、Ant Design React、Fluent UI |
| UI 框架 | 软件用什么技术构建界面 | Qt、SwiftUI、Jetpack Compose |
一套成熟设计系统通常包含设计原则、颜色和字号、间距规则、Design Tokens、组件、交互模式、无障碍规范、代码实现和维护机制。视觉截图只展示了它的一部分。
Apple HIG 主要告诉开发者如何让应用符合 Apple 平台习惯。Material 3 同时提供视觉语言、组件规范和实现资源。Ant Design 兼具设计语言和可直接使用的 React 组件库。玻璃拟态只描述半透明和模糊效果，无法回答表单校验、导航和复杂数据展示该怎么做。
Q：主流平台各自有什么设计体系？
Google Material 3
Material 3 使用清晰的层级、圆润几何、动态色彩和动效组织界面，覆盖 Android 和跨平台消费产品。它的规范完整，AI 也很熟悉。
熟悉同时带来副作用。模型容易把“Material”简化成大圆角、彩色按钮和卡片容器。提示词还需要规定页面结构、组件密度和卡片使用条件。
Apple Human Interface Guidelines
Apple HIG 为 iOS、macOS、watchOS 和 visionOS 提供平台规范。它强调内容、平台一致性、空间层级和直接操作。
半透明、大圆角和灰白配色只覆盖了“苹果风”的表面。一个 macOS 工具还需要标准侧边栏、工具栏、检查器、系统菜单和快捷键。缺少这些结构，模型只会生成带磨砂背景的网页。
Microsoft Fluent 2
Fluent 2 服务于 Microsoft 的跨平台产品。它带有柔和的层次、克制的材质感和生产力工具气质，适合 Windows 应用、办公软件和企业协作产品。
GNOME 与 KDE
GNOME HIG 倾向简洁和聚焦，鼓励开发者收紧功能入口，让主要任务保持清楚。KDE HIG 更能容纳复杂功能、较高信息密度和用户配置。
两者都属于 Linux 桌面应用规范。轻量工具可以参考 GNOME，文件管理器、工程工具和系统设置更接近 KDE 或 Qt Widgets。
Q：复杂后台和专业软件应该参考哪些设计系统？
消费产品需要吸引用户和建立品牌。企业工具需要容纳数据、状态和长流程。下面这些系统更适合后一类任务：
| 设计系统 | 界面气质与强项 | 合适的产品 |
|---|---|---|
| IBM Carbon | 理性、精确、技术感强，擅长数据和复杂层级 | 分析平台、监控系统、B2B 工具 |
| Ant Design | 紧凑，表单、表格和操作组件齐全 | 管理后台、运营系统、企业 Web 应用 |
| SAP Fiori | 围绕业务对象和企业流程组织 | ERP、财务、人力资源、供应链 |
| Salesforce Lightning | 擅长记录详情、工作流和上下文操作 | CRM、客户管理、销售运营 |
| Atlassian Design System | 强调任务、项目和团队协作 | 项目管理、知识库、协作工具 |
| GitHub Primer | 紧凑、直接，适合代码和开发流程 | 开发者平台、代码工具、技术产品 |
| Shopify Polaris | 围绕商家任务设计，设置和表单成熟 | 电商后台、商品与订单管理 |
| Adobe Spectrum | 中性、精密，可以承载复杂创作工具 | 编辑器、媒体工具、专业软件 |
还有一类设计系统值得单独看：GOV.UK Design System 和美国的 USWDS。它们强调无障碍、可读性和任务完成，视觉保持朴素。申请、查询、缴费等公共服务可以直接借鉴这套思路。
Q：极简、玻璃拟态、Bento 这些又属于什么？
它们属于视觉风格。设计系统可以吸收某种风格，但风格本身不会提供完整的产品规则。
| 视觉风格 | 特征 | 使用时需要留意 |
|---|---|---|
| 拟物化 | 模仿真实材质和物体 | 操作含义直观，制作成本也高 |
| 扁平化 | 纯色、简化图形、少装饰 | 控件与普通文本可能缺少区分 |
| 极简主义 | 少量元素、大面积留白 | 复杂工具会损失信息密度 |
| 瑞士风格 | 网格、无衬线字体、强排版 | 依赖字体、比例和留白控制 |
| 编辑风格 | 类似杂志和出版物 | 适合内容网站，不擅长复杂操作 |
| 玻璃拟态 | 半透明、模糊和叠层 | 对比度、性能和可读性容易下降 |
| 新拟态 | 控件从背景凸起或凹下 | 边界不清，无障碍表现较弱 |
| 新粗野主义 | 粗边框、高对比色、硬阴影 | 品牌感强，长时间使用容易疲劳 |
| Bento | 用卡片网格组织模块 | 适合概览，也容易演变成“卡片汤” |
| Retro / Y2K | 像素、金属、霓虹和复古系统元素 | 氛围会压过内容和操作 |
视觉风格适合负责品牌表达，设计系统负责组件与行为。可以采用 Carbon 的信息结构，再加入瑞士风格的排版；也可以使用 Qt Widgets 的桌面布局，再调整配色和字体建立个人气质。
Q：怎么给自己的产品选一套参考？
先看任务和平台：
- iPhone、iPad 或 macOS 原生应用：Apple HIG
- Android 消费应用：Material 3
- Windows 办公与协作工具：Fluent 2
- 个人桌面工具：Qt Widgets、KDE 或 GNOME
- 数据分析与监控平台：Carbon
- 企业管理后台：Ant Design
- 大型业务流程：Fiori 或 Lightning
- 开发者工具：Primer、Qt Widgets 或 KDE
- 电商商家后台：Polaris
- 政务和公共服务：GOV.UK Design System 或 USWDS
- 内容网站：瑞士风格、编辑风格或定制排版系统
产品也可以组合参考，但要指定每套体系负责什么。比如 Carbon 负责信息架构和组件密度，品牌系统负责颜色与字体。把 Material、Apple 和玻璃拟态混成一句提示词，模型会自行猜测优先级。
Q：怎样把设计系统写进 AI 提示词？
“做得现代、简洁、高级”没有给模型足够的信息。提示词至少需要描述以下方面：
- 参考的设计系统或平台规范
- 产品类型和主要任务
- 信息密度
- 页面结构
- 控件形态和状态反馈
- 明确禁止的装饰手法
可以把它写成一个固定模板：
Use [design system] as the reference for information hierarchy and components.
Design a [product type] for [primary task].
Use [density] density with [layout structure].
Prefer [control and visual rules].
Avoid [specific unwanted patterns].
Follow accessible contrast, focus, keyboard, and error-state conventions.
Do not copy brand logos or proprietary product screens.Qt 桌面工具可以这样写：
Design this as a compact Qt Widgets-style desktop application.
Use a native desktop layout with a menu bar, toolbar, status bar,
resizable split panels, tabs, tree navigation, standard form controls,
and high information density.
Use subtle borders, small corner radii, restrained colors, and clear focus states.
Avoid gradients, oversized headings, floating cards, pill buttons,
glass effects, and SaaS dashboard styling.数据分析工具可以这样写：
Use IBM Carbon as the reference for information hierarchy and component density.
Design a data analysis workspace with persistent left navigation,
a compact top toolbar, a central data table, and a right-side detail inspector.
Use small corner radii, clear borders, restrained color, and explicit states
for loading, empty results, validation errors, and keyboard focus.
Avoid decorative charts, gradient backgrounds, floating card grids,
oversized KPI typography, and excessive whitespace.提示词里的禁用项需要和产品目标对应。高密度桌面工具可以禁用大标题和悬浮卡片，品牌落地页未必需要同样限制。
Q：Qt 这个办法为什么值得继续试？
Volpe 没有声称 Qt 能解决所有 AI 设计问题。他只记录了一个主观但可复现的结果：对他的个人软件，Qt 风格比其他尝试更耐看。
这个结果给出了一条可以继续验证的路径。选择一套成熟系统，模型就能调用其中现成的布局习惯和组件关系。你也获得了一组可检查的标准：工具栏是否承担全局操作，表格是否适合当前数据，状态栏是否显示了必要状态，键盘焦点是否清楚。
把抽象的“品味”拆成布局、组件、密度和反馈约束后，模型更容易执行。个人工具也不需要证明自己属于某个流行审美。使用者下一次打开它时，应该仍然知道该点哪里。
参考资料
- Slightly reducing the sloppiness of AI generated frontend，Volpe，2026-06-12。这次追问的起点，记录了作者用 Qt 风格减少 AI 前端 Slop 的实验。
- Material Design 3，Google 的开源设计系统。
- Human Interface Guidelines，Apple 各平台的界面设计指南。
- Fluent 2 Design System，Microsoft 的跨平台设计系统。
- IBM Carbon Design System，面向产品和数字体验的开源设计系统。
- GNOME Human Interface Guidelines 与 KDE Human Interface Guidelines，Linux 桌面应用的两套平台规范。
- Qt Widgets 与 QStyle，Qt 桌面控件和样式系统的官方文档。
- Ant Design、GitHub Primer、Shopify Polaris 与 SAP Fiori，四套面向不同产品场景的设计系统。
- GOV.UK Design System 与 U.S. Web Design System，面向公共服务的设计系统。