V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oldjohn
V2EX  ›  程序员

求助:运用 AI 技术实现设计稿转换为前端代码

  •  
  •   oldjohn · 37 天前 · 2140 次点击
    这是一个创建于 37 天前的主题,其中的信息可能已经有所发展或是发生改变。

    各位大佬,小弟是一位交互设计师,现在领导分派了任务,要研究下运用 AI 技术实现设计稿转换为前端代码; 小弟毫无前端知识,完全没有方向。 求助各位大佬有没有一些开源的实现方案或者比较容易落地的实现路径啊? 不胜感激!! 不想砸谁的饭碗,也只是想完成任务而已! 真心求解答

    26 条回复    2024-04-27 06:18:31 +08:00
    noahlias
        1
    noahlias  
       37 天前
    你说的是可是这种类型?

    https://github.com/abi/screenshot-to-code
    hxzhouh1
        3
    hxzhouh1  
       37 天前
    tianzx
        4
    tianzx  
       37 天前
    我正在搞这个方向,但是距离商用落地太遥远了。现有开源的 wandb/openui 、screenshot-to-code , 都是基于 GPT4 、Claude3 opus 来去做的。包括不开源的 https://v0.dev/ 。如果仅仅是基于 tailwind css 来去做的话,糊弄一下也能交差吧。
    oldjohn
        5
    oldjohn  
    OP
       37 天前
    @tianzx 大佬方便加个地球号吗? T05ldnNPTkUxMQ==
    oldjohn
        6
    oldjohn  
    OP
       37 天前
    @noahlias 嗯嗯,很像
    oldjohn
        7
    oldjohn  
    OP
       37 天前
    @kaktos 差不多就是这样的
    oldjohn
        8
    oldjohn  
    OP
       37 天前
    @hxzhouh1 感谢大佬啊
    tianzx
        9
    tianzx  
       37 天前
    @oldjohn #5 X 随便聊聊吧。
    tool2dx
        10
    tool2dx  
       37 天前
    AI 可以的,我发一张截图,让他写代码。

    想作为商业落地估计有点难,只是很简单的 CURD 演示站,那么是可行的。
    183387594
        11
    183387594  
       37 天前
    借楼 求一个 ,文字描述生成 设计稿的 网站
    bearbig43
        12
    bearbig43  
       37 天前
    推荐试试这个,我们前不久有调研 https://www.imgcook.com/
    IndieYe
        13
    IndieYe  
       37 天前   ❤️ 2
    ai 生成的代码,只能看看,但几乎不能用,问题比如:
    1. 实际上列表展示我们用的是数组+一个列表项组件 map 出来,ai 则是会把整个列表项都生成
    2. 如果要改动代码,我们要先理解 ai 生成的结构,ai 生成的代码虽然能看,但可能很复杂,尤其是包含了响应式或深色模式的时候
    3. ai 生成的所有组件都堆在一起,我们要手动拆封成一个个单独的组件
    4. 生成的图标需要用实际的图标库替换;生成的 ui (如按钮)需要用实际的 ui 库替换
    5. 修改颜色样式,比如我们可能有全局调色板,但生成的代码里,就直接把颜色代码放上来了
    。。。
    oldjohn
        14
    oldjohn  
    OP
       37 天前
    @tianzx 什么意思啊大佬
    epiphyllum
        15
    epiphyllum  
       37 天前
    这种吗?

    云音乐 D2C 设计稿转代码建设实践
    https://segmentfault.com/a/1190000044514340
    来源:魏慷 网易云音乐技术团队
    https://music.163.com/st/seal
    qingyingwan
        16
    qingyingwan  
       37 天前
    这不是前端团队的活么,这是什么垃圾领导
    badbay
        17
    badbay  
       37 天前
    @oldjohn twitter 吧
    kneo
        18
    kneo  
       37 天前
    加油。搞定之后前端的活也是你的了。
    qsnow6
        19
    qsnow6  
       37 天前
    AI 最多生成 60 分的代码,没法直接使用
    xhawk
        20
    xhawk  
       37 天前 via Android
    v0.dev 还是非常厉害的,其实我想要的是 vue3 的代码,不然我真的会下单买,我试过了,那个图片生成代码质量还是非常高的。
    lujiaosama
        21
    lujiaosama  
       37 天前
    要到能用的程度,得能指定框架(react+nextjs, vue2/vue3 等)+指定 UI 库(antd, elementPlus,vant 等), 有良好的组件拆分和架构设计. 搓个静态页面意义不大.
    题外话, 现在有靠谱的网页 AI 设计稿么.
    oldjohn
        22
    oldjohn  
    OP
       37 天前
    oldjohn
        23
    oldjohn  
    OP
       37 天前
    https://github.com/abi/screenshot-to-code ,这个方案依赖的大模型好像都是要收费的
    happyGuo
        24
    happyGuo  
       37 天前
    @noahlias 这个好炫酷
    dayeye2006199
        25
    dayeye2006199  
       37 天前
    告诉你们领导,这个超纲了
    glouhao
        26
    glouhao  
       28 天前 via Android
    还有没有支持 bootstrap 的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2405 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:36 · PVG 13:36 · LAX 22:36 · JFK 01:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.