輸入文本生成網頁！一個開源的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>