平时需要快速开发出来一个项目的前端 UI 时,我通常会选择将项目功能和大致布局告诉 Agent,然后由 Agent 为我自动设计一版 UI

在没有特定要求的情况下,各家模型都有自己的偏好,但通常都会先给你来一份“色彩斑斓”的作业,尤其是 Claude

当时初见时有被这种设计震撼

“哇,真牛逼,搞了这么多渐变”

但是这种并不耐看,久而久之就成了所谓的“一股子 AI 味”

我自己本身并不是设计出身,单独约设计师不太现实,所以我开始逐渐借鉴一些已有的作品和设计理念,并融合到我的一些现有项目中

这篇博客整理了一些大厂里最经典的一批官方设计理念/设计风格和一些其他值得探索的网站

Google Design

https://design.google

该网站是 Google 的设计文化、案例、字体、流程等集合网站

"我们为设计师和对设计感兴趣的人打开了一扇窗,让他们了解产品背后的人物和流程"

Material Design 3

https://m3.material.io

Material Design 3 是谷歌开源的设计系统,包含各种组件、样式等

能够简化设计师与开发者之间的协作,帮助团队快速打造出美丽的产品

Apple

https://developer.apple.com/design/human-interface-guidelines

这是苹果整套平台设计规范,偏“平台体验原则 + 交互规范”

做 App、系统交互、移动端设计时可以参考

Fluent2

https://fluent2.microsoft.design

微软当前设计原则的表达。不仅包含设计原则、组件等,还有相应的开发使用指南

整体风格偏向企业产品,生产力工具风格

Carbon Design

https://carbondesignsystem.com

Carbon 是 IBM 开源的设计设计系统,包括代码、设计工具和资源、人机界面指南以及社区

文档完整,适合面向企业产品设计参考

Shopify Polaris

https://shopify.dev/docs/api/app-home/web-components

Shopify 的设计系统,适合面向商家后台、表格、表单、运营工具等场景参考

包含具体开发文档和 web 组件

WeDesign

https://wechat.design

微信设计理念展示网站,能够参考 logo 设计、风格选用等

原本觉得旧版微信设计的很不错,相比之下新版微信啥玩意啊

V0

https://v0.app

v0 是一个 Agent 驱动的,能够通过对话将你的想法快速落实到代码的平台

不仅如此,还可以在该平台借鉴或直接使用社区中其他用户设计的的网站模板

UI Notes

https://uinotes.com

该平台手机里大量国内 APP 的 UI 截图

虽然全,但是也不可避免地吸收了国内 APP 普遍比较“吵”的特点