ai 如何写出精致规范好看的前端呢?大佬们

我看站内有很多开源的大佬。他们写的前端都非常好看,感觉很规范。
我让 ai 写的前端感觉一塌糊涂,我也不知道该怎么纠正。
我让他用 shadcn ui 组件,也给他安装了 shadcn mcp 工具。但是写出来也是一塌糊涂。
想问问大佬们,在前端开发上面有没有什么心得。

比如各位佬开源的 api 聚合网站,api 反代项目,还有咱们的积分站。我感觉都非常有质感。该不会大家是手搓的吧!!!

50 个赞

不让用磨砂卡片不让用蓝紫配色不许使用花哨的比如星空要求简约大气等等,设计可以让gemini3pro来,claude执行,我是这么干的,写出来不花哨也没有ai感觉我挺喜欢的

12 个赞

可以考虑使用skill 反重力现在也能用了
github搜“ui-ux-pro-max-skill”,这个现成的

16 个赞

自己有大概思路灌给ai就行了 ai只是工具 创意这块还得靠自己啊

1 个赞

+1,我也想知道 :grinning_face:

蹲评论区学习一波

1 个赞

都要模仿才行 自己创造的不行

1 个赞

学习一波

5 个赞

写之前也会规划的,但是 ai 写出来的太糟糕了,我给他截图参考某个布局,让用 shadcn ui 组件来实现,我想让他给我组装各个部分就好了。但是他就是拼的很差,搜索框非要给我套一个 card ,出来又大又丑,侧边栏抄官网用例都给我抄不明白,好多组件都不给我对齐。几个相似的添加 item 的表单,一会 key 在前,一会 name 在前,一会左右两栏,一会单栏。然后换成手机后,界面也不适配,表单都挤在一起。我调完这个,他给我改乱那个。搞得心都累了。 :smiling_face_with_tear: 我只要没提前想到的问题,他可能都会犯!
以上是让 gpt 5.2 xhigh 来弄的。
opus 感觉要强一点,但界面还是不太美观,规范也还行,没遇到 gpt 那么多的问题。
gemini 我没用过(最开始用 opus 设计方案,然后熔断了,切成 gemini 继续会话,发现 gemini 幻觉太大了,总是胡说八道,就根本没用它写过任何代码)

:face_holding_back_tears:

用反重力的话,个人感觉gemini pro的前端效果要好点,代码质量上还得是opus

gpt 写逻辑还行,前端目前还是看 gemini

我的做法是用 gpt/claude 划分子任务交给 gemini 做,你可以试试 roo code 或者 opencode + oh-my-opencode 这类带有编排器功能的工具,使用多个模型协同工作,效果会好一些

3 个赞

我尝试尝试,我用的 opencode+oh-my-opencode
然后开发过程驱动是 bmad-method。
我之前都是 opus 做主代理驱动 bmad 的 dev agent (用的 opus) 做 story 开发。
我尝试把 bmad 的 dev agent 拷贝一份变成 用 gemini 试试

1 个赞

限定风格和具体的框架,比如使用xx风格的模板,aster,tailwind 的,限定的越具体,得到的效果越好

1 个赞

可以试着v0.app这个网站叫它写一个前端,然后在叫gemini帮你完善。或者直接叫gemini帮你生图生成一个好看的前端UI界面图片,你再叫gemini帮你按照图片帮你写。具体到执行的话可以考虑使用skill来辅助,细分下去看看有没有用

2 个赞

学习下,评论区慢慢看。

我一般说的是:
参考风格

  • Shadcn/UI
  • V0dev APP
  • Apple Style
  • TailwindCss
  • Fontawesome icon
  • 简单黑白配色
    禁止emoji图标
21 个赞

单纯用cli感觉不行,ai味好重,
我是用普通的chat模式,比如cherry studio,然后截图做参考,让gemini3写几个单独的页面,再把这些页面放到cli中作为参考,就好一些

1 个赞

如果用react的话,Vercel整了套skills

8 个赞

居然还有这个,我马上下载 :heart_eyes:

1 个赞

前端厉害的模型应该是Gemini3Pro

1 个赞