如何让ai写一个好的前端(悬赏300ldc)

xianxianzi 2026-09-11 23:58 1

不知道为什么别人一句话就生成一个高端大气的网页


但是我不管一句话还是用geill提前规划好


ai写出来的前端还是一坨,交互性很差


很多功能也都不够人性化整个都堆在一起


看了很多大佬的开源项目


很想问问大佬们怎么从零开始给一个网站或者软件做一个界面简洁功能便利的前端


和ai对话有什么需要特别注意的吗?


有没有什么值得推荐的skills和mcp


给解决方案的佬打赏300ldc,多个解决方案平分ldc

最新回复 (18)
  • iswinnime 09-11 23:59
    1

    chatgpt 生图模型,给项目大概介绍,不要说太详细不要加太多限制规则,然后抽卡一堆出来,挑出自己看着对眼的再让AI复刻,不要迷信什么skills之类的,提升很小,还有一个小技巧,可以让生图模型多生成一些图片元素放进去,能明显降低AI味

  • 真诚才是必杀技 09-12 00:00
    2

    一般来讲,你喜欢什么样的风格,你直接截图发给他就行了,因为他是看不懂的,他没有人的眼睛。所以说,每次我都随随便给他一个模板,就是我可能都不是网页,我只要发给他看,他基本都能写得出来。我觉得这是AI很厉害的地方,所以这个前端,你不要让AI去分辨,很牛逼,他的牛逼和我们的牛逼是不一样的,所以说,自己去看合适的,你就直接截个图,哪怕是你觉得好看的PPT,你截个图给他,他给你写写出来就是那样的

  • LPK 09-12 00:01
    3

    我现在写前端统一使用workbuddy中的网站设计功能,就是他有 多种模式 比如说日常模式 办公模式 设计模式或者有一个什么编码模式 反正你在它的这个编码模式中可以选择一个网站设计的功能 类似于加载了一些skills技能规范


    你如果直接给他设定一个主题的话 或者让他根据你的功能设置样式的话 他会先使用一种画布的功能把这个结构发给你 你可以跟他对话 调整各种细节都可以 然后最终调好之后 让他根据这个样式直接生成代码和你的后端连接起来,他也会先用虚拟的数据进行测试 让你直接通过 这种虚假的数据去提前体验一遍功能到底怎么样,


    我现在都这样干,无论是让他美化 还是让他根据需求生成样式结构或者根据功能进行独特的设计都很方便 效果也都很不错,这会电脑不在身边 也不太方便 把之前做的这些页面展示出来 你可以去试一下,它里面有免费的额度可以用,随便给他设定一个主题 看他设计的怎么样以及交互的过程中的这个体验真的很不错的


    我之前会使用一些前端样式设计的skills,现在我都不会用了 全部都使用上面的这种方式解决我所有的前端需求

  • LPK 09-12 00:02
    4

    workbuddy,有国内版和国际版,国内版生态比较丰富,国际版功能比较少,腾讯出品

  • crawlerV 09-12 00:03
    5

    可以让GoogleAiStudio试试先生成前端,然后把前端内容下载下来让GPT慢慢改

  • Junglecola 09-12 00:07
    6

    stitch 谷歌的网站 很好用

    (能否给个解决方案捏)

  • Pisces123 09-12 00:08
    7

    我这段时间也在想办法解决,尝试了各种办法,比如图片生成抽卡/各种skill/opendesign/html原型,效果都很一般(可能是我的方法不对),个人感受是让AI快速写一个满意的前端还是非常难的,还是得一步步引导优化

  • aliu 09-12 00:09
    8

    有那种网页风格收集的网站,还包含提示词,你可以去了解一下。

  • Leopoldo Rath 09-12 00:09
    9

    https://dribbble.com/


    https://www.behance.net/

    去这些设计网站“借鉴”一个,然后截图发给AI,让AI复刻,然后就是微调修改

  • 易小川 09-12 00:10
    10

    如果UI是figma,可以用它的mcp,特别好用。

  • 美味的布丁 09-12 00:10
    11

    先找想要的风格的网站,直接下载或者截图给agent,让他对照复刻,或者gpt生成图片让他照着复刻。还有就是直接用sota模型

  • Armstrong💪 09-12 00:10
    12

    我问过这个问题,佬们回复的很详细,也比较靠谱,供参考


    佬们一般怎么让agent设计前端界面呢,我的agent设计出来的功能是正常的,就是界面紫色风格,设计也简单,具有很强的AI风格,怎么能设计的更好看呢,如果没有设计好的figma的资源的前提下,怎么能让我的AI审美能力在线点?
  • lin ye 09-12 00:17
    13

    提示词要定制的。不过我最近打算用AI做一套主题 UI 库,我的简易提示词你可以先试试:


    使用柔和的简洁的主题化新粗野主义风格开发前端。“柔和的”是指:在保留新粗野主义风格的基础上,加入圆角和柔和配色,去掉新粗野主义的直角和点阵之类的刺激性元素。主题化是指不要像原始新粗野主义那样使用多种颜色,而采用一个系列的主题色,在少量关键元素上才使用其他系列原色。简洁是指页面元素不做多余描述。标题不要带英文或者拼音,标题下面不要写描述。小标题下面不要写描述性文字。如果某个地方确实需要用一行字来提示用户,那么请在小标题旁边加上问号图标,使用 Tooltip 来进行提示。页面卡片嵌套不要过深。页面动效柔软顺畅。

    (顺便求个反馈,如果试了的话?)

    有我个人偏好在吧。其他佬友说的用工具也是个不错的选择,但归根结底还是要你自己去了解一下前端的设计语言和设计体系,形成自己的一套审美。

    如果可以的话,给个解决方案呗?话说 GPT 老降智,我都不知道我的 UI 库要啥时候才能上线

  • xianxianzi 楼主 09-12 00:18
    14

    佬们交互问题怎么解决呢?其实很多时候就是zi没有考虑到人类的真实交互,但是我看很多大佬设计出来就很好,不管是用肥波5还是gpt6我都做的不太好

  • woyaoqudaye 09-12 00:21
    15

    你先把你的需求对ai对话几轮让它把需求文档和开发文档整理出来,然后在让ai判断你这是什么类型的项目。你在让它去参考成熟的同类型的ui设计,然后让它把设计整理成文档。当然最重要的是要用gpt6或者fable5。

  • Yiyuan Liu 09-12 00:22
    16

    所以最终您是怎么解决的,有得出满意的结果吗。

  • 心雨 09-12 00:32
    17

    我自己做了个ui-redesign工作流,但是还不完善,主要思想就是需求对齐,让ai知道想做个啥样的,做到多细。gpt6还是比较听指令的

  • Llliao 09-12 00:44
    18

    感觉想让AI直接做出来比较费劲,我都是去那些网页设计 UI组件的参考网站找自己要的素材,然后花了一段时间让AI把我要的源码都下下来做成自己的素材库,让AI把整体页面做好,然后再往里面加或者改每个板块改成自己想要的,跟搭积木一样,一个素材也能根据你的需求让AI衍生出其他变种,交互方面就看自己想要啥的效果,能描述清楚AI基本都能实现

* 帖子来源Linux.do
返回