如何用 AI 做前端界面设计

为什么前端做出来总有一股"AI 感"

界面之所以显得平庸、缺乏记忆点，根源往往在于跳过了设计决策，直接套用默认值。默认字体、随手挑的紫色渐变、千篇一律的圆角卡片堆叠在一起，单看每一处都没错，合起来却毫无语境——它没有回答这个产品是给谁用、想传达什么气质。视觉选择一旦脱离场景，界面就只是功能的容器，而不是产品识别的一部分。这种"模板感"不是技术问题，而是缺少明确美学方向的结果。

这个技能能帮你确定什么

它做的是"先想清楚再下笔"这件事，把视觉决策前置成一套流程。第一步是在编码前确定界面目标、受众、技术约束和美学方向，并选定一种大胆但一致的视觉语气——极简、复古未来、编辑感、奢华、工业或玩具化等。第二步是围绕这个方向，把字体、配色、空间构图、背景和动效组织成一个完整的视觉系统，而非零散的样式。第三步才是落地：生成 HTML、CSS、JS 或 React、Vue 等框架组件这类可运行代码。整个过程会主动规避通用字体、模板卡片、陈词配色和缺乏语境的设计。

怎么用它

用法是把界面的用途、想要的气质和必须保留的约束用自然语言说清楚，由它来定方向、建系统、出代码。例如可以这样对它说：

它适合这些场景：为新产品页面或应用界面建立更鲜明的视觉识别；现有前端过于模板化、希望重做为更有记忆点的设计；组件开发需要兼顾功能、动效、排版和生产级细节；设计评审要求避免常见 AI 风格、形成更明确的创意方向。

大家常问

什么是前端界面设计？为什么有的页面看起来很专业、有的看起来一眼就像模板套出来的？

前端界面设计是用工程化方法组织视觉信息的体系，要求在多种设备、状态和用户身份下保持一致性与可维护性。看起来专业的页面，每一处间距、配色、圆角都来自栅格、设计系统和 Token 的统一约束；模板感强的页面是默认字体配紫色渐变堆出来的，没有从原则层推导样式。

设计系统里的 Design Token 是什么意思？它和直接写颜色字号有什么区别？

Design Token 是设计系统中所有视觉属性的抽象命名变量，把 #0057FF、16px 这类原始值换成 color-brand-primary、spacing-4 这样的语义名称。直接写值时改色要全局搜索替换、容易漏改；用 Token 改一处映射就辐射全系统，还能按浅色/暗黑/不同产品线重新映射，是设计与工程对齐的单一事实来源。

响应式断点为什么不能随便拍脑袋定？背后的判断依据是什么？

断点不是设备分类器，而是内容布局关系发生质变的临界点，应由内容决定。判断依据有三条：单列宽度受 WCAG 44px 触控目标约束、正文行宽要控制在 45-75 字符（约 480-720px）、间距必须对齐栅格基准单位。当 12 列栅格在某宽度下已无法保证最小列宽时，就是必须减少列数的断点位置。

暗黑模式设计的核心原则是什么？为什么直接把白底反相成黑底很容易出问题？

核心原则是用层次化的暗色表面（如 #121212/#1E1E1E/#282828 递增亮度表达 Z 轴深度），并为暗黑模式独立调色板，主文字不用纯白以免眩光，对比度仍要满足 WCAG AA 4.5:1。直接反相会把品牌色变样、留白从积极空间变消极空间、分割线和阴影也会失效，所以不能简单取 RGB 补值。