让 AI 搓网页太丑！如何培养自己的审美？或者让 AI 先产出设计再产出页面？

审美是靠累积的，很难速成。

你急着做出好看的页面的话，直接找点好看的网站模板，截图发给 ai ，然后让它总结设计风格。你觉得没问题，再让他开始做就行了。

推荐几个网站：
https://www.framer.com/marketplace/templates/?sort=popular&period=all
https://www.inspo.page/
https://www.awwwards.com/inspiration_search/?text=template

在提示词中让 ai 使用 tailwind css ，设计高端大气时尚的某某网页试试。交互没辙，都自己慢慢让它改…

我大学是学环境设计的，我也觉得 ai 排版很丑，但有时候也出乎意料，可以在自己卡住的时候快速出方案，这对我帮助很大，网上的设计素材很多，我就是多翻看同行的网站设计，有序的拼接到一起，我的网站参考了野卡、奈飞小铺、gamsgo 、appstore ；设计能力和技术都有限，用最小的技术去满足自己能接受的排版，没有推广的意思，地址： https://ipinpin.store

还有 surfsharkvpn

都是有现成的 abc 让你选的，自己不需要审美。

## 方式一
1 、打开 https://v0.app/ 这个网站
2 、拉动滚动条 From the Community 这个栏目
3 、学习别人是怎么写提示词的

## 方式二
1 、打开 https://ui.shadcn.com/ 这个网站
1 、AI 生成的时候提示词加入 Shadcn UI 风格

@CHTuring 请问 v0.app community template 的提示词在哪里可以看到呢？看了几个模板，简介里面只有介绍没有提示词，而模板详情对话记录里也看不到模板的历史会话记录。

@Danswerme #7 同问

@CHTuring 同问啊

用苹果全家桶

我的个站前段时间刚用 AI 重构了所有 UI ，感觉还行吧，可能是提示词需要优化一下？可以多了解一些绘图的提示词

@walterggg #3 你这个确实是设计能力有限

一样，后端 ai 写的还可以，就是页面确实难绷

用 Claude ，先让大模型写设计需求，会包含 UI 设计和细节，再用设计需求让大模型写前端。

豆包写的 ui 默认用了 TailWindCSS

@lyon95 分享下你的设计

上一次写前端还是在七八年前，对现在前端技术栈基本脑袋空空，最近刚好在用 cursor 从 0 到 1 写一个前端应用，我的一些经验

0. 准备工作，找个喜欢的项目，把连接丢给它让它分析下技术栈，用作参考，提出项目的使用场景等基础信息让它推荐技术栈，在这个基础上

1. 设计依赖库和原则，可以写入.mdc 文件设置为 always

2.1. 指定核心依赖库（需要指定版本，AI 的记忆没那么新）
- CSS 框架，比如 TailWindCSS
- UI 库及主题，比如 heroui （基于 TailWindCSS 的 UI 库），主题会帮你设计好全局的颜色，圆角，边框宽度，不透明度等，能省很多事
https://www.heroui.com/themes
- 字体
- icons ，比如 heroicons
2.2. 开发原则
```
禁止使用原生 HTML CSS JS 开发布局、样式、交互、组件，必须使用 tailwindcss 及 heroui ，heroicons 依赖库
UI 组件必须考虑复用性、样式一致性，确保风格统一
```

设定好开发规范之后
在提示词中指定好用 UI 库的什么组件做什么功能，组件的开发文档连接丢给它让它写代码之前看下文档，基本的提示词就可以保证样式统一，还方便维护
另外，heroui 文档也有 ai ，找不到合适的组件，可以问文档的 ai ，拿着答案和文档连接再丢给 cursor 让它自己去看

本质上思路就是管理好注意力和上下文，提高提示词的信息密度