web前端制作网页代码模板(web前端网页制作的代码) 收藏 0

一张网页截图，AI帮你写前端代码，前端窃喜，终于不用干体力活了

众所周知，作为一个前端开发来说，尤其是比较偏营销和页面频繁改版的项目，大部分的时间都在”套模板“，根本没有精力学习前端技术，那么这个项目可谓是让前端的小伙伴们看到了一丝丝的曙光。

将屏幕截图转换为代码（HTML/Tailwind CSS、React、Vue 或 Bootstrap）。它使用 GPT-4 Vision 生成代码，并使用 DALL-E 3 生成外观相似的图像。还可以输入 URL 来克隆实时网站！

Tips:带上您自己的 OpenAI 密钥 –您的密钥必须有权访问 GPT-4 Vision

项目地址：https://github.com/abi/screenshot-to-code

仿制的INS博主页面

1：拉取代码

2：该应用程序有一个 React/Vite 前端和一个 FastAPI 后端。您将需要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。

运行后端（我使用 Poetry 进行包管理 -pip install poetry如果你没有它）：

3：前端启动

4：运行

打开http://localhost:5173以使用该应用程序。

如果您希望在不同端口上运行后端，请更新 VITE_WS_BACKEND_URLfrontend/.env.local

出于调试目的，如果您不想浪费 GPT4-Vision 积分，您可以在模拟模式下运行后端（该模式会传输预先录制的响应）：

感兴趣的小伙伴们，可以操练起来啦！

aardio + AI 大模型自动编写 Python 代码、网页前端代码的经验与技巧

在 AI 时代，老式的编程习惯完全被颠覆。原来可能要一大堆插件或工具辛苦堆出来的程序，现在只要把 AI 调教好了就行。

aardio 支持调用十几种编程语言，这很适合发挥 AI 大模型的优势。对于 AI 来说，你就是让它 100 种编程语言左右手换着耍它也不会怯场。

在 aardio 新版中，我们按 F1 键可以调出 AI 编码助手，AI 不但可以写 aardio 代码，也可以写其他编程语言的代码。

实际上这个功能不仅仅可以用于 aardio，利用 ImTip 的超级热键，几句代码就可以写一个可以用于其他程序的 AI 续写与补全助手（参考 aardio 自带 AI 范例）。

下面现场演示令人惊讶的效果。

▶ 在 aardio 里调用 AI 自动写 Python 代码。

在 aardio 代码里需要写 Python 代码的位置，按下 F1 键，AI 麻利地生成了正确的 Python 代码：

AI 掌握了 aardio 如何与 Python 代码交互的技巧，自动生成了 aardio 需要的 Python 函数。完整的代码可以按 F5 键直接运行，完美无错。

▶ 在 aardio 里调用 AI 自动写网页前端代码

下面再演示一下在 aardio 里调用 AI 自动写前端代码。

aardio 通过自带 web.view 库可以调用系统自带的 WebView2 浏览器控件加载网页前端，开发简单，接互方便，在网页里可以直接调用本地代码写的函数，生成的程序体积也很小。

下面我找了一个 aardio 调用 web.view 用网页写界面的例子，我们直接把网页部分的代码全部清空。

然后按 F1 键调出 AI 编码助手，让我惊讶的是 AI 迅速生成了完美无误的网页界面代码，并编写了与 aardio 交互的 JavaScript 代码，生成的代码完美无误，可以直接运行。

▶ 要点

以上演示调用的是最近很火的 DeepSeek V3 。DeepSeek 扣费很少，。建议大家去申请一个 key , 充十块钱估计能用上一整年了。这种按量计费的方式更能完全释放 AI 的全部能力，对双方都公平。

那些不需要调用 API 直接就可以使用的聊天助手表面上看似乎省了事，实际上可能优化你的输入降智你的回复，有一定动手能力就不要去当这种韭菜了。

另外有条件的朋友也可以试试 Claude 3.5 Sonnet ，效果很好。

使用 AI 续写与补全代码时，清楚的注释语句有利于 AI 更好地生成代码。写注释语句实际上也等于是写 AI 提示词。

『 F1 编码助手 』与 『 工具 / 问 AI 』 共享配置，选择或切换配置对这两个工具都有效。

不同的 AI 助手配置里可以添加不同的系统提示词。例如程序主要使用的是 web.view 那么可以加个 web.view 指南。注意要添加对 AI 友好的 Markdown 格式（ aardio 所有文档在本地都是 Markdown 格式，在线文档底部也都有 Markdown 文件链接 ）。

大模型的 token 计数通常小于文件大小或字数，例如 web.view 入门指南有 18KB，但 token 数只有 4KB 左右。

aardio 范例里提供了一个 token 估算工具：

服务端基本都能缓存重复提交的提示词，命中缓存的输入扣费会少很多。

在聊天助手里，问完全不相关的问题最好先清除上下文以避免降低 AI 生成回复的质量，或者不必要地扣除费用。

▶ 调用大模型

有朋友问我这些 AI 功能是怎么实现的。

其实非常简单，aardio 里的 AI 工具全都是开源的。

首先，在 aardio 或者 ImTip 的超级热键里，我们写几句代码就可以创建一个热键，在超级热里里如下获取输入光标前后的文本作为 AI 的上下文：

至于在 aardio 埋在调用大模型的 API 接口那就更简单了，示例：

还在从头开发Web项目？这些模板请收下！

在过去的日子里，从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员，可以用很少的精力创建一个不错的网页，然后把它放在网络服务器上，就搞定了。比如：

当然，你可以选择这种创建方式，但有一些不错的改变，你可以试试。随着互联网的速度要求越来越快，浏览器变得越来越标准化和强大，网站的规模和复杂性也越来越多，即便是有经验的设计师都会使用具有高级功能的设计工具和代码编辑器来使开发过程更顺利。

如今，很少有程序员从头开始设计web网页了。大多数程序员都使用预制模板设计，自定义适合其内容管理系统的选择。即使是构建复杂Web应用程序的程序员也依赖于模板库。

但是，如果要为内容管理系统或静态站点生成器构建新模板，该怎么办？如果想使用单个目标网页或少量不太可能经常更改的静态网页构建简单网站，该怎么办？如果要编写JavaScript应用程序但不想使用复杂的框架或库来构建最终输出怎么办？

对我来说，最重要的是控制。随着时间的推移，网页越来越肥胖。程序员进行web开发时，应该以内容为重。问问自己，真的需要加载这个页面时显示这样的网络字体吗？必须用jQuery，还是可以用几行Vanilla JS完成同样的事情？

使用HTML模板和框架可以帮助程序员实现标准化，易于使用的布局网格，以及现代化的功能。与此同时，它们还很简单。这里有三个开源的HTML5模板以供参考。

1、Bootstrap

Twitter的Bootstrap也许是创建新网页最著名的模板框架之一。它的无所不在已经导致了网页设计界的反弹，Bootstrap很简单，几乎完全没有定制的实现。

Bootstrap可以轻松创建响应式设计，并具有许多开箱即用的功能：从图标到样式输入，并将标准化带到许多常见的页面元素，从breadcrumbs到警报到分页，同时还有大量现成的主题。

2、HTML5 Boilerplate

HTML5 Boilerplate包括大部分程序员会用到的元素，对很多项目开箱即用：分析片段以及一些默认的CSS和JavaScript模板。

HTML5 Boilerplate相当轻便，如果你不需要某个特定组件，很容易就可以剪掉。如果你在追求极简主义和功能全面之间的平衡，HTML5 Boilerplate可能是最佳选择。

3、Skeleton

Skeleton是一堆框架中最轻的。如果曾经使用过Web框架，并且发现它们太笨重，或者只是为了满足需要，可以考虑使用Skeleton来处理：一个简单的网格，格式很好的表单，列表，排版等基本要素，跨浏览器支持。

使用一些不错的模板和编辑器，程序员不需要复杂的JavaScript框架来构建一个简单的前端，无论是传统的页面还是轻量级Web应用程序。如果这三个都不满意，还可以考虑Initializr，一个可以预配置HTML5 Boilerplate的开源Web应用程序。

你最喜欢的web设计模板或框架是什么呢？你有哪些很棒的web设计方法呢？欢迎评论区交流

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com