---
title: "我如何用 AI · 网站设计"
url: "https://lerry.me/post/2026/03/ai-ui-design-with-references"
date: 2026-03-28T17:49:00.000Z
updated: 2026-09-02T09:07:45.819Z
tags:
  - "前端"
  - "AI"
  - "Claude"
  - "Codex"
  - "Design"
language: zh-CN
---

# 我如何用 AI · 网站设计

## 文件管理器

今天在做一个基于 Web 的文件管理系统，支持 WebDAV 协议。整个架构是 Codex 做的，包括后端部分、前端的类型定义和 API 约定，我把 UI 展示部分留给了 Claude Code。Codex 帮我定了一个布局：左侧是数据源列表，右侧顶部是工具栏，中间占大部分的是文件操作区，底部是日志区。

但是代码写完，运行起来一看，距离我的期望差的比较远。首先是没有使用 Tailwind CSS 导致的很多地方的不一致，最主要的是文件操作区的颜色对比太不鲜明了，看起来很费劲。

然后我就说，颜色对比太不明显了，不好看。这次修改之后，确实能看出来好了一点点，但是没有彻底改变。

## 想起上次

上次修改博客主题是经历了好多轮的不满意，这次两轮不满意，我立即就想跳出这个循环了。我就想到了上次经历了一样的事，我是怎么解决的？就是参考。

上次做博客主题，一开始跟 Claude 说想完全重构首页，改得更大气、高级、精致、有品味，具体风格让它看着来。改完发现没啥变化，说了三四轮都没对上。后来我换了个说法：「你是一个欧洲范儿的设计师，知道 CSS 禅意花园吗，最好看不出来是同一个网站。」CSS 禅意花园是我刚做前端时候看的一本书，内容结构完全一样，但是看起来根本不像同一个网站。我告诉它这个之后，它才对页面排版进行了大改，给了 A、B、C 三个方向让我选。看到 C 直接"哇塞"，惊艳，一眼就对了——索引式排版，像印刷杂志的目录页。它当时也说，与其说"更欧范儿"，不如说"参考 Le Monde 的目录页"，比"欧洲风格"有效十倍。Le Monde 是什么我不知道，但它把三个方向摆在我面前，我知道哪个好看。（[详细经过在这篇](/post/2026/02/blog-redesign-one-day-2026)）

## 好的设计师抄，伟大的设计师偷

想到这个，我今天就说：好的设计师抄，伟大的设计师偷。你直接找一个你觉得牛逼的、好用的，我们直接搬过来用。好用，然后好看，也可能是一回事。

Claude Code 说它可以参考 Linear sidebar、Vercel table 和 macOS Finder 文件列表来修改这个界面。改完之后，我的感觉是，就是这个味，对路了。

## 为什么参照物有效

我后来又想到了前几天看到的郭宇的[推文](https://x.com/turingou/status/2034553929036619787)。他虽然退休了，但最近一直在做各种产品，大量使用 AI，效率特别高，短时间内就做一个产品出来，而且每一个都特别好看。下边有人问他是怎么做的，他说要感谢 variant.com，不过他也说，前端和设计都是最后一步，产品做完了再考虑的。

给参照物这件事，对人有效，对 AI 也有效。具体的东西比抽象的词更能收敛。

## 好用和好看是同一件事

我在描述需求的时候，第一反应是得好用。比如文字大小合理、排版布局合理、颜色区别得开，这些才是好用的 UI。但是你实现了这些之后，它肯定也是一个好看的界面，所以我又想到它俩可能是统一的。这些当时可能都是潜意识完成的，但当被问到的时候，我才把它说了出来。

## 没有设计经验怎么办

我没有经过系统的设计训练，但刚学前端的时候看过两本书，一本是《写给大家看的设计书》，一本是《CSS 禅意花园》。《写给大家看的设计书》当时没有完全明白，只记住了一些基本规则，对齐、重复、字体、还有对比。所以我自己做界面的时候会比较关注对齐，我觉得对齐了就好看了。我不知道怎么做出来一个好看的东西，但是你给我三个，我能告诉你哪个好看。