如何提升 UI/UX 技能

多年来，精通 UI/UX 设计的最大障碍并非缺乏工具，而是“反馈的速度”。当你在调整版面配置、微调字体层级或修复尴尬的空间边距（Padding）时，通常只有两种选择：等待数小时（甚至数天）让资深设计师给予点评，或者依赖自己未受过专业训练的眼光并祈祷结果顺利。

最近，我通过将开放设计工具（例如 Penpot，其原生依赖 CSS Grid、Flexbox 和 SVG 等开放 Web 标准）与大型语言模型（LLM）结合，大幅缩短了 UI/UX 的学习曲线。通过将开放标准作为设计画布与 LLM 之间的通用语言，我建立了一个实时且自动化的设计审查引擎，能够找出 UX 缺陷、修正空间问题，并实时教导我设计理论。

以下是这套配置的运作原理、为什么开放设计格式对 AI 辅助设计至关重要，以及你如何利用它来提升你的 UI/UX 技能。

为什么开放设计工具改变了 AI 的方程式

如果你尝试将专有格式的设计文件输入给 AI，你会碰到瓶颈：其底层数据结构被锁在不透明的二进制格式中。

开放设计工具则完全颠覆了这一点。基于开放 Web 标准构建的工具，会使用干净的 SVG 路径、CSS Flexbox 属性、CSS Grid 规则以及可访问的 DOM 结构来渲染版面配置。由于 LLM 对 HTML、CSS、SVG 和设计系统有着深入的训练，它们“读取”开放设计版面的能力，就跟开发者阅读代码一样轻松。

这带来了三大巨大优势：

• 机器可读的版面配置：从开放设计工具导出的 SVG 或组件树（Component Tree），包含明确的空间坐标、CSS Flex 属性、字体大小和颜色十六进制码（Hex Code），LLM 可以对其进行定量分析。

• 双向编辑：你可以用自然语言描述版面配置，要求 LLM 生成或修改 SVG/CSS 代码，然后直接将其贴回你的开放设计工具中，成为完全可编辑的矢量节点或 Web 版面。

• 确定性的规则引擎：你不需要向 AI 寻求模糊的主观意见，而是可以要求它审计具体属性：WCAG 色彩对比度、8pt 空间网格遵循度，以及字体阶层的一致性。

我用于快速修正 UI/UX 的 4 步工作流程

为了将这套工具链转化为个人设计导师，每次建立新页面时，我都遵循一套严格的四步迭代循环：

• 步骤 1：在画布中绘制结构草图

  我首先在开放设计画布中，使用原生 Web 版面引擎（Flexbox/Grid）拉出核心用户流程的模型。在这个阶段，我纯粹专注于视觉层级——用户的目光首先应该落在哪里、主要操作按钮的摆放位置，以及导航模式。

• 步骤 2：导出上下文以供 LLM 审计

  当粗略线框图（Wireframe）或高保真框架完成后，我会截取原始版面结构（通过 SVG 代码、CSS 属性或结构化的 JSON 组件树），并附上一张简单的屏幕截图传给 LLM。

  我会提示模型扮演“资深 UX 策略师与无障碍审计师”，并给予具体的点评指南：

  “分析这个弹出式对话框（Modal Dialog）组件。检查是否符合 WCAG AA 对比度标准、评估移动设备的触控目标大小、检查垂直空间韵律是否遵循 8px 网格，并指出 UX 文案中是否有任何认知负载过重的问题。”

• 步骤 3：实时点评与基于代码的修正

  短短数秒内，LLM 就会提供精确的逐项点评，并附带实时的 CSS/SVG 修正代码：

  • 视觉层级：“你的次要按钮‘取消’与主要按钮‘保存’具有相同的视觉权重。请将次要按钮的填充透明度降低至 10%，或将其转换为外框样式。”

  • 空间韵律：“标题与正文之间的 Padding 为 19px。请调整为 24px（3x 8px 基准网格），以建立干净的空间韵律。”

  • UX 微文案（Micro-Copy）：“按钮标签‘提交表单’过于模糊。请改为‘确认订阅’，以明确传达该操作的结果。”

• 步骤 4：直接修补与视觉验证

  与其手动重新计算每个像素偏移量，我直接采纳 LLM 提供的更新版 CSS Grid 属性或 SVG 代码片段，并将应用回设计画布。版面会实时更新，让我可以视觉化地比较“修改前”与“修改后”，并深刻理解为什么修正后的版本感觉更加平衡。