输入文本生成网页！一个开源的AI网页生成项目: OpenUI

软件开发中，用户界面（UI）的构建往往是一个既费时又复杂的过程。现在有人尝试用AI来完成页面的开发，虽然效果上还是无法代替程序员，但是目前看还是能够做到辅助减少部分工作量。

今天就介绍一个开源的AI网页生成项目：OpenUI

它允许开发者通过简单的描述，然后生成UI页面。你还可以通过选择不同的语言，来生成对应的代码。

如何使用？

使用OpenUI非常简单。你只需要描述你想要的UI，OpenUI就可以将其实时渲染出来。如果你需要对UI进行修改，只需提出更改要求，OpenUI就可以帮你完成。它甚至可以帮助你将HTML转换成React、Svelte或Web Components等格式。

我们先看一下实际效果

打开官方的演示网站（你也可以自己部署），可以看到整个页面如下图

这时候在底部的输入框内，可以输入文字，描述你要生成的页面。

这时候生成了初版的效果，看起来不是想要的。那我们可以通过上面提供的修改工具，继续让AI生成。

如果你想常看代码，可以点击如下的区域，选择你要生成的风格

作者点评

作者试过很多AI页面生成的项目，整体来说效果还都是一般。虽然有的自媒体宣传如何恐怖，如何替代程序员，但是实际体验之后觉得目前水平还是无法做到的。

未来看GPT-5或者GPT-6发布之后，AI推理能力能否上升一个台阶。如果提升不了多少推理能力，我觉得大家还是安心睡吧，这个只是辅助我们的。

体验地址：

https://openui.fly.dev/ai/new

代码地址：

https://github.com/wandb/openui

其他页面生成AI项目：

https://v0.dev/

保存在线文章以便日后查阅，如何实现？想将网页内容转为PDF保存，如何转换？

今天，小福教大家如何将网页生成PDF文件，跟着小福一起来看看吧！

首先，我们打开福昕高级PDF编辑器，选择左上角“文件”>“创建”>“从网页”，或点击菜单栏“转换”>“从网页”；

在弹出的对话框中，粘贴转换的网页的URL链接，点击“创建”，福昕高级PDF编辑器将开始加载网页内容；

加载完毕后，网页就被转为PDF啦！此时，我们就可以对该页面进行进一步的编辑和调整，如文字提取、编辑、添加注释、划重点等。完成编辑后，点击保存即可。

此外，在转换时，我们可以点击“设置”来选择更多转换选项：

在弹出的“网页转换设置”对话框中，有“常规”和“页面布局”选项卡。常规选项卡可以设置网页的转换等级和转换内容，页面布局则可设置生成的PDF的页面尺寸、页边距和方向，以及多媒体类型及缩放比例。

这里给大家说说常用的一些设置：

在“常规”选项卡中：

1、转换等级：可以指定网站中要转换的网页等级，或勾选“转换整个站点”。

转换同一路径的网页：转换隶属于您输入的网页地址的所有网页；转换同一服务器上的网页：转换储存在同一服务器上的所有网页。

2、PDF设置：设置加载整个页面的超时时间。超过此设置时间，加载进程将自动中止，且仅已加载内容会被转换成PDF。默认值为120秒。

在所生成的PDF文件中禁用所有超链接：勾选该项后，转换生成的PDF中的所有超链接均为无效链接。
将所有的页面内容转换到同一个PDF页面：勾选该项后，所有相关内容将被转换到同一个PDF页面中。
创建书签：勾选该项，转换后将自动生成被转换页面的书签。书签名为网页的域名。当网页域名相同时，将自动创建子书签并以页面的标题作为子书签的名称。若页面没有标题，则使用对应的URL作为子书签的名称。
创建 PDF 标签：勾选该项以创建包含标签和其他辅助信息的PDF文档。
在新建页面放置页眉和页脚：在生成的 PDF 的每一页上放置页眉和页脚。页眉显示您创建PDF的日期和网页标题。页脚显示网页URL（或 HTML 文件的文件路径）和页码。
背景图像：勾选该项以保留页面背景，生成的 PDF 看起来将与原始网页完全一样。有时，网页上的背景可能会影响文本的显示效果，您可以取消勾选该项，这样转换后的页面可能与网页浏览器中显示的不同，但更易于阅读。

3、其他设置：

转换图像：如需在 PDF 转换时转换图像，请勾选此项；反之则取消勾选。
为链接添加下划线：如需在生成的 PDF 中为网页链接文本添加下划线，请勾选此项；反之则取消勾选。

以上就是本期所有内容，我们下期再见啦！

速生成 Html5 骨架

在 Html 文件中输入 html:5 按下回车键，可快速生成 HTML5 页面模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

html:5

父子关系快速构建

在 html 文件中输入 div#id>ul.list>li.item*5 按下回车键，可快速生成父子关系的结构：

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子关系构建

多个相同标签

重复元素: 使用 * 加上数字来创建多个相同的标签。例如，p*3 后按 Tab 会产生三个 <p> 段落标签。

<p></p>
<p></p>
<p></p>

类与 ID 的添加

类: 在标签名后加 . 再加上类名。如 div.container 生成带有类 container 的 <div> 。

<div class="container"></div>

ID: 使用 # 加上 ID 名。如 div#main 生成 ID 为 main 的 <div> 。

<div id="main"></div>

属性快速插入

属性赋值: 在标签后用方括号 [attr=value] 插入属性。例如，a[href=https://example.com]。

<a href="https://example.com"></a>

组合使用

复合示例: 结合上述技巧，可以创建复杂结构。比如，nav>ul>li.item$*4>a[href=#]{Item $} 会生成一个导航栏，包含 4 个列表项，每个列表项都是一个链接，链接文本分别为 "Item 1" 到 "Item 4"，且每个链接的 href 属性指向不同的 ID。

<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>