4种方法让你的网站拥有高级感。后两者不用写一行代码。

4 阅读2分钟

Hi, 我是程序员蓝莓,现在开发网站,app就是这4种方式。

第一种 自己画草图、高保真、开发代码。最传统。

第二种 AI设计高保真

第三种 AI生成页面 同时 AI还出代码。

第四种 AI生成页面、代码、部署上线。

今天我分享一些相关好的软件。总结一下,常见的开发流程和用到软件:

1.想要一句话生成并且部署上线的:bolt.new,GitHub Copilot。

2.一句话 就生成网页代码:免费用 v0.dev、aistuido、灵光、 秒搭、各大厂商AICoding。或者有额度的enter.pro,Locofy.ai。

3.逆向工程: Screenshot-to-Code-github、same.new、Builder.io。(注意知识产权事项)

4.生成设计稿图片:基础免费:gpt5 image 、谷歌的香蕉。或者有额度:Uizard 、Galileo Ai、MidJourney,html.to.design。

5.超好看的作品集:Dribbble、Mobbin。UI设计:Figma,墨刀。

1.优秀网站UI灵感 + 设计工具:

Dribbble(设计师作品)、Awwwards(最佳网页设计评选)、collectui(集合参考)、Land-book(设计灵感)、Behance(Adobe旗下的,高质量)、Mobbin(移动端)、

设计工具:Figma(Magician插件 基础版免费)、Sketch(Mac)、即时设计(国产的figma)、墨刀(modao.cc)、MasterGo,Uizard : 一个草图 就可以转为高保真

Excalidraw(在线的手绘)、Canva(手绘)relume.io可以拖拽,我认为很好用。

图标生成: 使用 Recraft.ai。动效生成: 使用 LottieFiles。文案生成: 使用 Relume Ipsum。

苹果设计指南:Design - Apple Developer,谷歌设计指南 Material 3,微软设计指南,fluent2.microsoft.design

这种适合高精度开发。UI设计 + 动画交互。

2.AI生成原型图

gpt5 image 模式。(基础纯免费)

谷歌的香蕉。(额度有限)

Uizard : 草图转为高保真很强。(额度有限)

Galileo Ai: 生成高保真(额度有限)

MidJourney

html.to.design: 输入网址,直接把现成网站变成 Figma 里的图层,连间距和字体都清清楚楚。(页面变成图层 额度有限)

3.AI直接生成代码:

aistuido: 谷歌的一句话可以生成的代码(完全免费)灵光:阿里的产品,一键可以生成代码。秒达等。(完全免费)

v0.dev:输入想法,直接生成代码 (额度有限,有点数限制,vercel旗下的产品)

enter.pro :一句话生成网站(额度有限)

same.new:输入网址,可以将网站还原成react。(有免费额度)

Builder.io: 输入 URL 提取组件,甚至能把别人网站的某个部分直接转成你需要的 React 代码。

Screenshot-to-Code-github:截个图直接生成代码。(自备key)

Locofy.ai:设计稿生成高质量代码。(额度有限)

4.AI生成代码还可以部署 agent。

lovable.dev: bolt.new(全自动开发)

GitHub Copilot.

Dribbble

Behance

Awwwards

Land-book

Mobbin / Screenlane:主要是做APP的。

collectui

enter.pro

v0.dev

Builder.io

same.new

aistuido

lovable.dev

GitHub Copilot.

以上有任何问题,欢迎在评论区指出。

后续我会继续分享关于AI下做产品、运营相关的信息。