HeadlinesBriefing favicon HeadlinesBriefing.com

使用 Claude Code 构建一致性设计指南

Towards Data Science •
×

在整个应用程序中创建一致的设计似乎是一项非常简单的任务,您可以通过编码代理来实现。然而,如果您的大部分代码都是由编码代理编写的,我认为如果您不密切关注编码代理究竟是如何实现功能的,并且不持续地重构和集中代码以遵循 DRY(不要重复自己)原则,这很快就会变成一个包含大量不同设计元素的应用程序。相当长一段时间以来,在开发我的应用程序时,我一直在努力保持设计的一致性。感觉无论我使用 Claude Code 还是 Codex,我的编码代理都在不断地倾向于不遵循我之前使用的设计,或者实施我不想遵循的新标准。

例如:整个应用程序中字体大小不一。按钮在不同位置具有不同的设计。一般来说,UI 元素(如下拉菜单、悬停弹出的模块等)不一致,并且从未在颜色、大小或样式方面遵循相同的模式。这当然至关重要,因为不一致的设计会让您的应用程序看起来不那么专业和整洁。当应用程序中的事物看起来不同,比如 UI 在整个应用程序中看起来不同时,会给您的应用程序留下非常不专业和未打磨的第一印象,这就是为什么您想要避免它。

问题主要源于您如何在整个应用程序中构建 UI。如果您使用编码代理来实现所有内容,而不手动告诉编码代理如何集中代码和构建整个代码中的 UI 元素,它们会自动开始在整个应用程序中使用不同的标准。原因在于,一旦要求编码代理实现新功能,例如实现一项新功能,它们会看到应用程序中其他地方没有设定的标准,因此就会创建自己的设计模式。一般来说,编码代理是模式识别器。它们遵循代码库中已提供的模式并照搬。如果代码库中之前的模式是没有 UI 结构和整体设计标准可循,那么编码代理将继续这种模式,并为它们实现或构建的每个新功能实施自己的设计系统。

考虑到我在这里讨论的内容,您可能开始理解这个问题的解决方案,当然是将所有 UI 元素集中到一个位置。然而,这并非易事,不仅修复它并不简单;我认为这也是您需要持续努力的事情,因为编码代理仍然存在弱点,可能会忽略现有标准或引入新标准。