最近一直在找在学各种前端框架，现在我决定重新复习 HTML+CSS

UI 设计是美工设计的活，跟前端没有关系。自己独立开发的话直接找几个网站抄就行了

找些模版参考参考

https://www.pinterest.com.au/search/pins/?q=%08data%203d&rs=typed&term_meta[]=%08data%7Ctyped&term_meta[]=3d%7Ctyped

https://dribbble.com/search/data-cgi

审美只能多看看别人的产品，多读别人的开源代码

审美这东西没个多年熏陶培养不出来

学习 HTML/CSS 并不能让你写出好看的 UI ，只能让你以更慢的速度写出通常丑的 UI 。

你能意识到自己的 UI 丑，说明你审美还在线。你需要在头脑中把你自己写的界面分解，和你常用的软件/网站/App 比较，找出到底是哪个地方丑。究竟是配色的问题，还是布局的问题，还是结构的问题（当然一般来说都会有问题）。

建议阅读：

《 Refactoring UI 》
https://anthonyhobday.com/sideprojects/saferules/

缘木求鱼呢

@amlee 挺重要的，css 已经忘记很多东西了，很多时候脑子里是有概念的，但是样式一写出来味就不对了

学习 HTML+CSS 不能提高审美啊

@wonderfulcxm 复习，即便是脑子里有完整的页面，忘了 CSS 咋写也不行，问 LLM 没办法理解那么抽象的描述

你不需要复习 html + css ，我建议你去学习 tailwindcss ，然后去看 tailwindcss 相关的 ui 模板，你需要大量的 ui 布局去构建自己对于页面的审美。。。

@karnaugh 谢谢，tailwindcss 有了解过，主要还是需要去多看别人的作品，不太喜欢 tailwindcss 是因为会导致 html 变得好多，当然也可能是我见到的代码太 low 了，感觉都是 dom 后面挂一大串的 class

看看 flowbite 和 tailwind

认识到丑已经属于审美的第一步了，以前我看自己设计的东西的时候都不觉得丑，后面才发觉各种布局不合理，配色离谱的问题

之前做出来的界面也很丑，后面在看了这个设计启示录，里面有一些设计的思考、规则、颜色的一些知识，希望能够帮助到你 https://www.yuque.com/frost/ux

@karnaugh tailwindcss 不还是 css 吗？那和直接看 css 有啥区别？
工具虽好，但是别硬推荐

学 CSS 就行了，但也就是个布局调整大小、位置，高级点的能做特效啥的，核心还是 UI 设计审美好不好看

@maymay5 不理解 tailwindcss 的，阅读《 Refactoring UI 》，这个是 tailwindcss 团队里的人写的，可以让你多少明白 tailwindcss 的意义。

这里面最关键的一点，工具类通过减少你的选择，可以在一定程度上降低选择障碍，加速你在设计上花费的时间。

实际上，对于新手来说，tailwindcss 提供的选择也够多了。我建议使用类似 bootstrap/daisyui 的框架，甚至 ant design ，进一步降低你在样式上的选择。先专注于内容，不要在样式上有过多的想法。

@kneo #17 tailwindcss 提供的选择也 “够多了” => “过多了”

@chanChristin 一句话你就看一半的吗。。。。
更具体的解释，可以参考 #17 楼的朋友的回复

同时我再给你复述一下后半句话：
[然后去看 tailwindcss 相关的 ui 模板，你需要大量的 ui 布局去构建自己对于页面的审美]

@maymay5 tailwindcss 确实会使 html 代码看起来更混乱，但究其根本，是因为以前大家开发时大家的思绪更关注代码，而不在 UI 上边

我干了 8 年前端，最近在研究折腾独立开发，也开始做自己的网站产品，再去单独画 UI 图显然不太划算，而且咱也不太会画图软件，直接上手撸界面，然后问题就全暴露出来了

什么意思呢，就是说咱们以前工作的时候，UI 都是 设计同学 给出来的，画好的，程序员的主要思维都在代码上，研究 UI 图怎么转化为 html 元素，html 元素怎么组合更好，元素的 class 怎么起名，至于 UI 效果，不用动脑子，还原设计图就完事了（甚至蓝湖啥的都能一键复制 css ，再删掉不用的 css 。。。）

而现在的状态呢，当你上手撸代码你会发现，没有 UI 图给你去拆分，你需要先去解决 UI 长什么样子的问题

此时你的关注点就从代码怎么写优雅，变成了 [怎么创造自己想要的 UI 界面] 上去了，这时候你就会发现，原来通过 class 去寻找 dom ，然后修改样式的操作变得繁琐起来：

「先找 html 元素，然后看元素是哪个 class ，然后再去找 class ，再修改 css ，然后看一下效果」

用 tailwindcss 的话，就是「找 html 元素，修改 class ，然后看效果」

这不只是少了几步的区别，更重要的是维护你思维的连贯性，你现在在思考这个 UI 宽一点效果怎么样？间距大一点怎么？然后每次都需要跑去找半天 class 再改个样式，等回来的时候，刚才 UI 的思路都断了。。。

@karnaugh #19
那为什么不直接学 css 去看优秀模板用 css 写呢？非得走 tailwind 绕一下呢？
至于 #17 的观点我不认同，tailwind 的学习曲线刚上手的时候非常陡峭，对于一个 css 熟手来说也要熟悉一段时间，而且工具越复杂问题越难找，看着官方介绍很牛逼，几个类名就行了，真自己上手用就傻眼了。不说别的，就 17px 这个官方没有定义的你准备怎么写？

UI 丑的话，你在复习 10 边也没用，这是 设计的活

@chanChristin 首先你最后一个问题暴露了你就没学过 tailwindcss 的事实，tailwindcss 又不是没有变量，非要用的话 w-[17px] h-[17px] xxx-[17px] 就完事了啊

况且 tailwindcss 和 css 又不冲突，里头的类命名都是取自 css 好吧，有的直接用 css 的值，有的是超级常用的就首字母缩写一下，但凡你学过一点，也不会有这么抗拒的感觉

至于 css 优秀模板，你搜搜就知道了，要不是什么整个网站的模板，要不是什么老掉牙的模板网站

目前我接触到的很多 ai 方向的独立站，都是 tailwindcss 直接一把梭就撸出来了

而且 tailwindcss 的模板网站里都是现代化的风格，分门别类的，方便快速看不同的 ui 有哪些不同的样式，刻意练习懂么

https://css.bqrdh.com CSS 可视化

@karnaugh #23
学会了就感觉理所当然
你怎么知道我没学过呢？你写的时候当然很爽，但是后期维护起来看着一两行的类名就欲哭无泪了。
而且我不觉得这个对提升 css 有什么帮助，知道属性的用 css tailwind 都能写，不知道的换 100 个工具都写不出来。
至于你最后说的优秀模板，用 tailwind 能写，用 css 也能写。

@chanChristin 我看懂了，你就是对 tailwind 有很重的偏见，这很正常，又不丢人，但在这嘴硬就贻笑大方了

还维护起来欲哭无泪，你是用 css 画画呢？还是说你屏幕太小代码折行了？

人家楼主问的是提高审美，谁问你提高 css 了

我说 tailwindcss 那边有很多现代化风格的模板，还有分门别类的 UI 组件，可以快速通过大量的案例构建所谓的审美

谁让你去写优秀模板了？没设计师你写得出来么