微枫

陈在真の老巢

【AI工具】Trae+Claude3.7 工具设计稿生成网页模块


比如想通过 Trae+Claude3.7 生成这个苹果网页对应的模块截图,需要怎么处理呢?

1、下载 Trae,相比 cursor,trae是免费的(白嫖的肯定香啦)
2、打开trae,快捷键command+u



点击上传图片,把图片上传上去

3、输入文案,比如参考这份:

根据图片设计稿,生成一份html,css的html5页面,要求界面按图片设计稿的版式布局精细还原,兼容目前市场主流的手机分辨率,响应式适配,结构尽量简洁,不要有多余的冗余代码

4、选择 Claude3.7大模型



5、发送等生成,然后添加到新文件



6、在左侧command+s保存html,双击打开



图片img src替换掉,基本dom结构、样式,还是简洁明了的,比之前ps sketch生成的代码可用性高很多,有一定的可玩性,甚至可以用它来生成互动特效

发表回复