輸入文本生成網(wǎng)頁！一個(gè)開源的AI網(wǎng)頁生成項(xiàng)目: OpenUI

軟件開發(fā)中，用戶界面（UI）的構(gòu)建往往是一個(gè)既費(fèi)時(shí)又復(fù)雜的過程。現(xiàn)在有人嘗試用AI來完成頁面的開發(fā)，雖然效果上還是無法代替程序員，但是目前看還是能夠做到輔助減少部分工作量。

今天就介紹一個(gè)開源的AI網(wǎng)頁生成項(xiàng)目：OpenUI

它允許開發(fā)者通過簡單的描述，然后生成UI頁面。你還可以通過選擇不同的語言，來生成對應(yīng)的代碼。

如何使用？

使用OpenUI非常簡單。你只需要描述你想要的UI，OpenUI就可以將其實(shí)時(shí)渲染出來。如果你需要對UI進(jìn)行修改，只需提出更改要求，OpenUI就可以幫你完成。它甚至可以幫助你將HTML轉(zhuǎn)換成React、Svelte或Web Components等格式。

我們先看一下實(shí)際效果

打開官方的演示網(wǎng)站（你也可以自己部署），可以看到整個(gè)頁面如下圖

這時(shí)候在底部的輸入框內(nèi)，可以輸入文字，描述你要生成的頁面。

這時(shí)候生成了初版的效果，看起來不是想要的。那我們可以通過上面提供的修改工具，繼續(xù)讓AI生成。

如果你想常看代碼，可以點(diǎn)擊如下的區(qū)域，選擇你要生成的風(fēng)格

作者點(diǎn)評

作者試過很多AI頁面生成的項(xiàng)目，整體來說效果還都是一般。雖然有的自媒體宣傳如何恐怖，如何替代程序員，但是實(shí)際體驗(yàn)之后覺得目前水平還是無法做到的。

未來看GPT-5或者GPT-6發(fā)布之后，AI推理能力能否上升一個(gè)臺(tái)階。如果提升不了多少推理能力，我覺得大家還是安心睡吧，這個(gè)只是輔助我們的。

體驗(yàn)地址：

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

代碼地址：

https://github.com/wandb/openui

其他頁面生成AI項(xiàng)目：

https://v0.dev/

保存在線文章以便日后查閱，如何實(shí)現(xiàn)？想將網(wǎng)頁內(nèi)容轉(zhuǎn)為PDF保存，如何轉(zhuǎn)換？

今天，小福教大家如何將網(wǎng)頁生成PDF文件，跟著小福一起來看看吧！

首先，我們打開福昕高級PDF編輯器，選擇左上角“文件”>“創(chuàng)建”>“從網(wǎng)頁”，或點(diǎn)擊菜單欄“轉(zhuǎn)換”>“從網(wǎng)頁”；

在彈出的對話框中，粘貼轉(zhuǎn)換的網(wǎng)頁的URL鏈接，點(diǎn)擊“創(chuàng)建”，福昕高級PDF編輯器將開始加載網(wǎng)頁內(nèi)容；

加載完畢后，網(wǎng)頁就被轉(zhuǎn)為PDF啦！此時(shí)，我們就可以對該頁面進(jìn)行進(jìn)一步的編輯和調(diào)整，如文字提取、編輯、添加注釋、劃重點(diǎn)等。完成編輯后，點(diǎn)擊保存即可。

此外，在轉(zhuǎn)換時(shí)，我們可以點(diǎn)擊“設(shè)置”來選擇更多轉(zhuǎn)換選項(xiàng)：

在彈出的“網(wǎng)頁轉(zhuǎn)換設(shè)置”對話框中，有“常規(guī)”和“頁面布局”選項(xiàng)卡。常規(guī)選項(xiàng)卡可以設(shè)置網(wǎng)頁的轉(zhuǎn)換等級和轉(zhuǎn)換內(nèi)容，頁面布局則可設(shè)置生成的PDF的頁面尺寸、頁邊距和方向，以及多媒體類型及縮放比例。

這里給大家說說常用的一些設(shè)置：

在“常規(guī)”選項(xiàng)卡中：

1、轉(zhuǎn)換等級：可以指定網(wǎng)站中要轉(zhuǎn)換的網(wǎng)頁等級，或勾選“轉(zhuǎn)換整個(gè)站點(diǎn)”。

轉(zhuǎn)換同一路徑的網(wǎng)頁：轉(zhuǎn)換隸屬于您輸入的網(wǎng)頁地址的所有網(wǎng)頁；轉(zhuǎn)換同一服務(wù)器上的網(wǎng)頁：轉(zhuǎn)換儲(chǔ)存在同一服務(wù)器上的所有網(wǎng)頁。

2、PDF設(shè)置：設(shè)置加載整個(gè)頁面的超時(shí)時(shí)間。超過此設(shè)置時(shí)間，加載進(jìn)程將自動(dòng)中止，且僅已加載內(nèi)容會(huì)被轉(zhuǎn)換成PDF。默認(rèn)值為120秒。

在所生成的PDF文件中禁用所有超鏈接：勾選該項(xiàng)后，轉(zhuǎn)換生成的PDF中的所有超鏈接均為無效鏈接。
將所有的頁面內(nèi)容轉(zhuǎn)換到同一個(gè)PDF頁面：勾選該項(xiàng)后，所有相關(guān)內(nèi)容將被轉(zhuǎn)換到同一個(gè)PDF頁面中。
創(chuàng)建書簽：勾選該項(xiàng)，轉(zhuǎn)換后將自動(dòng)生成被轉(zhuǎn)換頁面的書簽。書簽名為網(wǎng)頁的域名。當(dāng)網(wǎng)頁域名相同時(shí)，將自動(dòng)創(chuàng)建子書簽并以頁面的標(biāo)題作為子書簽的名稱。若頁面沒有標(biāo)題，則使用對應(yīng)的URL作為子書簽的名稱。
創(chuàng)建 PDF 標(biāo)簽：勾選該項(xiàng)以創(chuàng)建包含標(biāo)簽和其他輔助信息的PDF文檔。
在新建頁面放置頁眉和頁腳：在生成的 PDF 的每一頁上放置頁眉和頁腳。頁眉顯示您創(chuàng)建PDF的日期和網(wǎng)頁標(biāo)題。頁腳顯示網(wǎng)頁URL（或 HTML 文件的文件路徑）和頁碼。
背景圖像：勾選該項(xiàng)以保留頁面背景，生成的 PDF 看起來將與原始網(wǎng)頁完全一樣。有時(shí)，網(wǎng)頁上的背景可能會(huì)影響文本的顯示效果，您可以取消勾選該項(xiàng)，這樣轉(zhuǎn)換后的頁面可能與網(wǎng)頁瀏覽器中顯示的不同，但更易于閱讀。

3、其他設(shè)置：

轉(zhuǎn)換圖像：如需在 PDF 轉(zhuǎn)換時(shí)轉(zhuǎn)換圖像，請勾選此項(xiàng)；反之則取消勾選。
為鏈接添加下劃線：如需在生成的 PDF 中為網(wǎng)頁鏈接文本添加下劃線，請勾選此項(xiàng)；反之則取消勾選。

以上就是本期所有內(nèi)容，我們下期再見啦！

速生成 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

父子關(guān)系快速構(gòu)建

在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：

<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>

父子關(guān)系構(gòu)建

多個(gè)相同標(biāo)簽

重復(fù)元素: 使用 * 加上數(shù)字來創(chuàng)建多個(gè)相同的標(biāo)簽。例如，p*3 后按 Tab 會(huì)產(chǎn)生三個(gè) <p> 段落標(biāo)簽。

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

類與 ID 的添加

類: 在標(biāo)簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。

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

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

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

屬性快速插入

屬性賦值: 在標(biāo)簽后用方括號 [attr=value] 插入屬性。例如，a[href=https://example.com]。

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

組合使用

復(fù)合示例: 結(jié)合上述技巧，可以創(chuàng)建復(fù)雜結(jié)構(gòu)。比如，nav>ul>li.item$*4>a[href=#]{Item $} 會(huì)生成一個(gè)導(dǎo)航欄，包含 4 個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)都是一個(gè)鏈接，鏈接文本分別為 "Item 1" 到 "Item 4"，且每個(gè)鏈接的 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>

自定義 snippets（代碼片段）

高級結(jié)構(gòu): 如果有特定的復(fù)雜結(jié)構(gòu)經(jīng)常使用，可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項(xiàng)" > "用戶代碼片段"，選擇或創(chuàng)建 HTML 片段文件，定義自己的縮寫和展開結(jié)構(gòu)。

Emmet 命令

Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后，使用此命令（通過命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ），可以快速將選中內(nèi)容包裹在指定標(biāo)簽內(nèi)。

在線咨詢

上一篇：JavaScript日期與時(shí)間組件 layDate
下一篇：W3C 決定使用 CSS 嵌套語法，你怎么看

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商