修复视觉AI缺陷
我想回答一个实际问题：当你不是设计师时，如何从AI编码代理获得良好的界面设计？
AI模型价格对比 | AI工具导航 | ONNX模型库 | Vibe Coding教程 | PLC在线仿真器 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo
在最近的Trilogy AI卓越中心办公时间研讨会上，我想回答一个实际问题：当你不是设计师时，如何从AI编码代理获得良好的界面设计？
这个问题很重要，因为很多AI生成的网页界面过去都有相同的特征：紫色渐变、玻璃面板、重复的卡片网格和空洞的英雄区域。这相当于视觉上的填充文字：可识别、过度使用，且与正在构建的产品联系薄弱。
我演示了代理技能和设计标准的组合。技能赋予代理设计习惯。DESIGN.md文件赋予代理设计记忆。两者结合，使UI工作更容易概述、更容易审查，且不太可能在会话间发生偏移。
研讨会的演示网站位于design.trilogyai.co，源代码位于github.com/trilogy-group/design。
研讨会录音的摘录嵌入此处，供想要在阅读分析之前观看演示的读者参考：
1、技能赋予代理更好的默认设置
代理技能是本地指令包，代理可以在任务需要时发现并加载。它们可以包括工作流规则、审查清单、示例、反模式、脚本和命令。
重要的是，技能不必仅通过显式命令使用。如果技能已安装且可发现，代理可以隐式使用它。你可以要求一个页面、一个React组件、一个设计审查或一个优化过程，代理可以通过渐进式披露获取正确的技能指导。
在研讨会中，我使用了一小堆设计和质量技能：
- Impeccable 提供品味、产品上下文加载、寄存器选择和前端工作的反模式检查。
- frontend-design 有助于将简报转化为视觉上具体的界面，而不是中性模板。
- make-interfaces-feel-better 涵盖光学对齐、文字换行、按钮触感和运动感觉等工艺细节。
- web-design-guidelines 检查实际实施细节，如语义HTML、焦点状态、图像尺寸和可避免的前端错误。
- userinterface-wiki 带来运动、排版、交互和内容处理的界面原则。
- accessibility 应用WCAG检查，使界面能够与辅助技术配合使用。
- core-web-vitals 专注于LCP、INP和CLS，分别衡量主要内容渲染时间、输入响应和意外布局移动。
- react-best-practices 有助于避免不必要的重新渲染、繁重的客户端工作和减慢小型SPA的包选择。
- imagegen 让代理创建真正的视觉资产，而不是留下占位符。
结果是一个单页React演示，从一个提示在几分钟内构建完成。该页面具有生成的英雄图像、语义地标、显式图像尺寸、焦点状态、简短的教学部分，以及感觉像印刷设计工作台而非通用SaaS模板的视觉系统。
这就是技能堆栈的意义所在。它让非专家能够访问专家设计默认设置。你仍然需要品味和审查，但代理从一个好得多的地方开始。
2、DESIGN.md赋予代理设计记忆
技能帮助代理更好地行为。设计标准给代理一些稳定的东西来阅读。
Google Stitch 是Google Labs的AI界面设计工具。在Stitch中，DESIGN.md允许项目导入和导出设计规则，以便工具可以生成与品牌匹配的UI，而不是猜测。Google后来开源了草案DESIGN.md标准，因此同一个文件可以由编码代理和Stitch之外的其他工具使用。
DESIGN.md文件描述存储库中的设计系统。该文件以前置YAML开头，包含设计事实：颜色、排版、间距、半径和组件令牌。下面是Markdown解释原理：设计应该给人什么感觉，颜色如何使用，排版角色意味着什么，以及要避免什么。
这种分离很有用。令牌给代理确切的值。原理给代理判断力。
设计令牌是命名的设计决策。一个令牌可能说主要操作颜色是粘土，基础背景是纸张，或者小半径是4px。代理可以重用带有意图的名称，而不是复制一次性的CSS值。一个令牌实际上说："这个值属于这个角色。"
研讨会还介绍了OKLCH，一种现代CSS颜色格式，分离亮度、色度和色调。OKLCH使创建调色板更容易，其中亮度在颜色之间可预测地表现。这对于对比度、层次结构和可访问性很重要。
更新：你现在可以在DESIGN.md前置中使用OKLCH，并且它可以被Google的工具检查！
3、代码检查使设计可审查
DESIGN.md最有趣的部分之一是它可以被检查。
研讨会演示使用了这个命令：
npx @google/design.md lint DESIGN.md
这使设计上下文更接近工程师已经理解的工作流类型。设计文件可能因为无效的令牌值、缺失的基础、损坏的引用、节顺序问题或对比度问题而无法通过检查。有用的检查很简单：代理和人类能否在设计上下文通过产品传播之前检查它？当技能启用时，代码检查命令隐式运行，但它也可以在AGENTS.md中提及，甚至添加到CI中。
一旦存储库有了DESIGN.md，设计选择就变得可比较。如果强调色发生变化，变化是可见的。如果组件令牌消失，检查可以捕获它。如果后来的代理开始发明新颜色，设计文件为下一个代理提供了将工作拉回系统的原因。
这就是Impeccable和DESIGN.md很好地结合在一起的地方。Impeccable可以创建和读取PRODUCT.md和DESIGN.md，拒绝常见的UI反模式，并运行批评、审计、适应、优化和性能检查。DESIGN.md存储这些检查应该尊重的事实和原理。
4、自动默认设置，显式控制
这个设置有两个层次。
第一层是正常工作流。安装技能，然后用普通语言请求页面、组件、审查或修复。如果请求与设计相关，Impeccable的一般调用会运行其设置门控：加载PRODUCT.md和DESIGN.md，识别正确的寄存器，应用共享设计法则，并拉入正在更改表面的品牌或产品参考。
如果PRODUCT.md缺失或为空，Impeccable将其视为阻碍并在继续之前运行教学。该流程探索存储库，仅询问它无法推断的战略事实，编写产品上下文，刷新加载器，然后恢复原始任务。如果DESIGN.md缺失，技能会提示一次运行文档，该文档可以扫描现有代码库以获取颜色、排版、间距、半径和组件，或在实现之前种子一个入门设计文件。
这就是演示中的行为：支持文件和检查作为代理工作的一部分出现，而不是因为我手动编写了设置序列。
安装提示可以很简单：
安装并使用以下技能：
impeccable skill from https://github.com/pbakaus/impeccable
make-interfaces-feel-better from https://github.com/jakubkrehel/make-interfaces-feel-better
web-design-guidelines from https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
userinterface-wiki from https://github.com/raphaelsalaja/userinterface-wiki
accessibility, best-practices, core-web-vitals, performance, and seo from https://github.com/addyosmani/web-quality-skills/tree/main/skills
react-best-practices
imagegen from https://github.com/openai/codex/tree/main/codex-rs/skills/src/assets/samples/imagegen
Google's DESIGN.md standard https://github.com/google-labs-code/design.md
(can be aligned with impeccable's DESIGN.md)
自动层使这些技能特别有用。你不需要记住每个命令。你不需要知道哪个清单提到焦点状态或哪个技能涵盖图像尺寸。你不需要在工作流调用之前显式请求上下文文件、设计文档、代码检查、批评或优化。代理可以在任务指向那个方向时加载相关指导并选择正确的支持操作。
第二层是显式控制。Impeccable还公开命名命令：teach、document、shape、craft、critique、audit、polish、adapt、optimize、typeset、layout等。如果请求的第一个词与命令匹配，代理会加载该命令参考并遵循其工作流。例如，craft需要确认的形状简介、图像生成可用时的视觉方向、浏览器检查，以及至少一个批评和修复循环，除非第一次通过没有实质性缺陷。
那个显式层对于控制和可重复性很有用。团队可以引导Impeccable的寄存器选择，要求命名审计，请求有针对性的优化过程，检查生成的PRODUCT.md和DESIGN.md。它不是获得价值的前提条件。
5、什么可以变得可代理化
如果代理可以吸收如此多的专家设计知识，团队还需要设计师吗？
前端实现正在变得可代理化。CSS、HTML、React结构、图像处理、可访问性检查、核心网络原则和许多工艺细节现在可以由具有正确技能和标准的代理处理。
设计判断仍然很重要。强大的设计师对于产品品味、研究、品牌、艰难的权衡和选择体验应该是什么仍然很重要。团队应该期望代理处理更多从意图到界面的翻译，特别是当存储库包含正确的设计记忆时。
同样的模式开始出现在Web UI之外。在研讨会上，我以一个刚刚推出的AI辅助建筑设计的简短演示结束：勾勒一个想法，描述变化，并观看代理将该意图转化为可编辑的3D结构。细节不同，但方向相似。用户花费更少的精力操作工具，更多精力指定期望的结果。
6、实用的起点
对于产品团队来说，最小的起点几乎是无聊的：
- 在你的代理可以找到的地方安装设计和质量技能。
- 继续用普通语言请求页面、组件和审查。
- 让安装的技能运行其设置门控，在需要时询问缺失的上下文，在工作流调用时创建或刷新支持文件，并应用其默认设置。
- 像往常一样审查输出和生成的工件，代理已经携带比裸提示更多的设计上下文。
这就足够开始了。你不必在技能开始帮助之前手动添加PRODUCT.md、编写DESIGN.md、运行代码检查器，或记住critique、polish、audit、adapt或性能命令的确切名称。默认设置是价值的一部分。
高级工作流稍后出现。一旦产品或团队需要跨会话的设计记忆，检查代理引入的文件和检查，收紧它们，并决定哪些部分应该成为团队策略。这可能包括在审查下保留PRODUCT.md和DESIGN.md，并将DESIGN.md与Google的标准对齐。
在那时，显式的Impeccable流程对于塑造寄存器、批评设计、适应现有界面、优化细节和检查性能变得有用。团队可以从自动帮助开始，并在工作值得时发展到交互式设计工作流。
这就是我想在研讨会上展示的转变。来自代理的更好UI来自于赋予代理具有更好默认设置、更好记忆和更好检查的技能。
原文链接: Fixing Visual AI Slop: Front-End Design Standards and Skills for AI Coding Agents
汇智网翻译整理，转载请标明出处
