Vibe Coding 如何细节控制UI、获得稳定、美观的效果?

一直在探索一种前后端工作流,但因为完全不懂现代化前端的东西所以搞出来东西都丑的很。感谢佬友,至少让我知道了AI容易犯这个问题

这个没办法的,实际上谁也没有问题 只是信息差

所以实际上还是需要人有把控能力

嗯呢,我也没想过自己就能搞出来,都是瞎折腾。不过全栈要学的太多了,平日里工作忙也没时间一一钻研。还得专业人做专业事。

!!错怪Claude了

你看效果图 我嘞个豆 这么棒的

!!!佬友我康康

牛,看到了。确实很现代哇。对不起Claude,是我太菜了

我手机改的,你只要把这里面两个点改一下 重新npm install即可

感谢佬友,这波包解决方案了

顺便多请教一句,如果想按照掌握最低知识借助ai开发全栈应用,需要掌握啥呀..Tailwind css、全栈框架如nextjs、还是组件shadcn/ui 。实在是不想当知识盲流了。

就用现成的 别人预置好的东西就可以了

TailwindCSS就是一堆CSS的预置效果代码片段集合

shadcn是基于叫做radix再度制作的

所以用组件库和tailwindcss之间的区别就是

你想要统一的样式组合还是自由快捷的原子化效果

框不框架啥的都没必要,先把基本的白板如何构建出效果 搞明白后面再进阶就没有什么魔法的东西了

步子迈大了容易扯着蛋 花时间走的弯路就得不偿失了

这边说基本的白板构建效果是指?

你去看我下面发的这个

出来的效果 仅仅只是 古法三大件 没有什么高级框架

https://linux.do/t/topic/791953/22

还有https://synctv.haleclipse.de

这些都是 0框架构建的,只用了基本的html js 甚至css行内直接嵌了

你就回复他: 你这也太丑了, 搞好看点
他就给你搞好看了

受教了,这就去学习 :+1:

嗯嗯,我讲的这些都是刚开始需要补足的基本逻辑 花不了几个时间 但是意义重大

后续实际的信息还得去看对应的官方文档来落实到工具库包的使用上

不错不错

这个字体是 Maple Mono?

对的:check_mark:。

当你让 AI 帮你用 TailwindCSS 的时候,你的页面的档次会瞬间增加很多很多!

虽然现在不用,但是 Maple Mono 这个字体我也算是比较熟悉的,整体有点圆润版 Fira Code 的感觉(但当时最吸引我的是中英文2:1等宽)