使用生成式AI快速高效地创建优质用户界面 -- 知识铺
[
](https://.com/@hortfrancis?source=post_page—–aa8da09df2ca——————————–)[
有关如何使用生成式 AI 在网络浏览器中快速高效地创建优质用户界面的教程。
设计网页样式很困难。
很多时候，它们看起来很可怕——尤其是当你刚开始的时候。
体验没有捷径，但有足够好的用户界面的捷径——对我们来说幸运的是！
也许您刚开始担任 Web 开发人员，或者在训练营学习，或者您本身作为设计师并不自信。如果是这样，本文有望通过演示“生成工作流程”来帮助您快速为前端 Web 项目创建非常好的用户界面。
我们所说的“生成”是指：使用人工智能语言模型根据文本提示为我们“生成”代码。我们所说的“工作流程”是指：以一种实际有用的方式整合人工智能的使用，以支持我们可能拥有的其他目标；例如：制作一个 Killa 作品集 ⚡ 来展示您是一名优秀的 Web 开发人员 🔥。
先决条件
-
我们正在使用 React，这是一个前端库，用于使用 JavaScript 在 Web 浏览器中创建用户界面。了解 React 如何将页面块排列成可以在多个位置重用的“组件”，您将受益匪浅。
不过，使用 Tailwind 并不需要了解 React — Tailwind 通常对于设计网页样式很有用。
-
我们将使用 Node.js 的包管理工具 npm 在终端中运行命令。提供了我们将使用的命令，您不需要了解太多有关如何使用终端的知识，除了如何在计算机上访问它以及如何粘贴命令并运行它们（在正确的文件夹中！ ）
-
如果您知道如何使用 HTML 构建网页，并且具备 CSS 样式页面的任何现有知识，那么您将从 Tailwind 中获得更多收益。 CSS（“级联样式表”）是网络浏览器用来决定如何以视觉方式“设计”网页中元素的语言。
然而，如果这些概念对您来说是新的，那么陷入并使用生成式人工智能来支持您的学习是开始学习网络技术的好方法！
-
为了编辑 React 项目中的文件，您将需要一个文本编辑器，例如 Visual Studio Code。在紧要关头，基于浏览器的版本应该可以：vscode.dev
那么，我为什么要关心 Tailwind CSS？
- 在生活中，我们要以“善”为目标。如果我们点击“非常好”，那就太好了——万岁🥳！如果我们点击“确定”，那么……大多数情况下就可以了。就在网络浏览器中生成用户界面而言，Tailwind 可以帮助您更频繁、更轻松地点击“好”。它可以帮助您非常轻松且快速地点击“确定”。它还可以帮助您比其他技术更快、更轻松地实现“非常好”，甚至“优秀”😮的用户界面。我认为这值得花时间学习。
- Tailwind 支持非常快速地进行“敏捷”原型设计。节省时间就是节省金钱💸
- Tailwind 目前非常流行。很多网站都使用它，这意味着很多公司都使用它。您经常在网络开发职位的招聘广告上看到它。
- Tailwind 是“可扩展的”和“可配置的”：如果需要，您可以在它的基础上构建或自定义它。
- 人们在 Tailwind 之上构建了良好的预制 UI 组件；例如：“Tailwind UI”、“Headless UI”、“Flowbite”。
什么是顺风？
Tailwind 是一个“开源 CSS 框架”。
为了解释 Tailwind 的本质作用，我们将解释两种设计网页样式的方法：“语义”CSS 类和“实用”CSS 类。
“语义”CSS 类是一种将多个样式规则捆绑在一起，然后将它们应用到特定 HTML 元素的方法。例如，如果我的网页有一个“介绍”部分，我可能会使用 intro 这样的类名，这样我就可以记住该类的用途，这样其他开发人员也可以看到它的用途:
<span id="9c13" data-selectable-paragraph=""><span><<span>div</span> <span>class</span>=<span>"intro"</span>></span><br> <span><<span>h1</span>></span>Welcome to my website!<span></<span>h1</span>></span><br> <span><<span>p</span>></span>I hope you enjoy visiting! :)<span></<span>p</span>></span><br><span></<span>div</span>></span></span>
<span id="0b6a" data-selectable-paragraph=""><span>.intro</span> {<br> <span>margin</span>: <span>2rem</span>;<br> <span>padding</span>: <span>1rem</span>;<br> <span>text-align</span>: center;<br> <span>color</span>: midnightblue;<br> <span>background-color</span>: floralwhite;<br>}</span>
我们可以非常自信地假设 CSS 类 intro 用于某种介绍性内容，并且我们可以使用 .intro 来定位网页上我们想要以某种方式设置样式的 HTML 元素在一个单独的 CSS 文件中 - 如果我们想要“分离我们的关注点”并保持我们的项目可扩展和可维护，这是一个好主意。
然而，如果我们有一个非常复杂的网页，或者我们正在构建具有大量重复组件的用户界面，我们可能会发现思考好的“语义”类名很困难；如果你不小心的话，你最终会将你的 outer-text-container-wrapper-subdivider 类与你的 primary-nav-listitem-sublist-icon-container 混淆！ 😵💫
如果您也在多个元素中重用同一个类，那么通过添加、删除或更改样式规则来更改语义 CSS 类可能会在站点的其他部分产生不可预见的后果。
“实用”CSS 类是一个非常具体的类，只做一件事。我们可以愉快地在同一个元素上组合多个实用程序类，并且浏览器在加载页面时将应用每个实用程序类的所有样式规则。
<span id="c378" data-selectable-paragraph=""><span><<span>div</span> <span>class</span>=<span>"margin-2rem padding-1rem text-center color-midnightblue background-floralwhite"</span>></span><br> <span><<span>h1</span>></span>Welcome to my website!<span></<span>h1</span>></span><br> <span><<span>p</span>></span>I hope you enjoy visiting! :)<span></<span>p</span>></span><br><span></<span>div</span>></span></span>
<span id="e79b" data-selectable-paragraph=""><span>.margin-2rem</span> {<br> <span>margin</span>: <span>2rem</span>;<br>}<br><br><span>.padding-1rem</span> {<br> <span>padding</span>: <span>1rem</span>;<br>}<br><br><span>.text-center</span> {<br> <span>text-align</span>: center;<br>}<br><br><span>.color-midnightblue</span> {<br> <span>color</span>: midnightblue;<br>}<br><br><span>.background-floralwhite</span> {<br> <span>background-color</span>: floralwhite;<br>}</span>
尽管对于小网页上的简单介绍性元素来说，这看起来要冗长得多，但一旦您开始创建具有许多重复组件的复杂用户界面，将规则拆分为单独的实用程序类并使用实际上会更容易、更易于管理且更易于维护他们根据具体情况进行处理。
然后，您可以在编写 HTML 的同时设置其样式。
Tailwind 本质上是一个预制的 CSS 实用程序类系统，我们可以在我们的项目中使用它。
使用 React 设置 Tailwind
让我们跳到终端并设置一个新的 React 项目。我们可以使用 Vite 为我们创建一个新的 React 应用，其中‘ my-project ’是项目的名称，也是它所在文件夹的名称：
<span id="b5d7" data-selectable-paragraph="">npm create vite@latest my-project -- --template react</span>
（末尾的 -- --template react 标志是可选的；没有它，您只需从菜单中选择您想要的项目类型（“vanilla”HTML、React、Vue 等）。）
使用 cd my-project 移至新创建的项目目录（在本例中为 my-project/ ）。
现在，在 React 项目的根目录（包含 package.json 的文件夹），我们想要使用 Node 安装一些“开发依赖项”：
<span id="8888" data-selectable-paragraph="">npm install -D tailwindcss postcss autoprefixer<br></span>
您实际上并不需要知道这些如何使用 Tailwind，但对于那些感兴趣的人来说， [tailwindcss](http://zshipu.com/t/index.html?url=https://www.npmjs.com/package/tailwindcss) 是实际的 Tailwind 依赖项， [postcss](http://zshipu.com/t/index.html?url=https://postcss.org/) 是一个用于操作和转换 CSS 文本的工具。一种可定制和模块化的方式， [autoprefixer](http://zshipu.com/t/index.html?url=https://www.npmjs.com/package/autoprefixer) 是PostCSS的一个插件，它将“供应商前缀”添加到规则中，以便支持较旧的浏览器。
（这还应该安装 Vite 运行 React 开发服务器所需的所有依赖项，但如果您对此有任何问题，请运行 _npm install_ ，npm 将检查项目的 _package.json_ 文件并安装那里指定的所有依赖项。）
要在我们的项目中“初始化”Tailwind，并在项目的根目录下创建一个 tailwind.config.js 和一个 postcss.config.js ：
<span id="60eb" data-selectable-paragraph="">npx tailwindcss init -p</span>
打开文本编辑器（如果使用 Visual Studio Code，则为 code . 打开当前目录）。要专门为 React 配置 Tailwind，我们需要将 tailwind.config.js 的内容替换为：
<span id="5e78" data-selectable-paragraph=""><br><span>export</span> <span>default</span> {<br> <span>content</span>: [<br> <span>"./index.html"</span>,<br> <span>"./src/**/*.{js,ts,jsx,tsx}"</span>,<br> ],<br> <span>theme</span>: {<br> <span>extend</span>: {},<br> },<br> <span>plugins</span>: [],<br>}</span>
.. 并将 src/index.css 的内容替换为：
<span id="2b02" data-selectable-paragraph=""><span>@tailwind</span> base;<br><span>@tailwind</span> components;<br><span>@tailwind</span> utilities;</span>
您现在应该能够通过运行以下命令在本地使用 Vite 的开发服务器为您的 React 应用程序提供服务：
<span id="6edb" data-selectable-paragraph="">npm run dev</span>
运行后检查终端输出：Vite 应提供一个链接，例如 http://localhost:5173/ ，它将在浏览器中显示您的 React 应用程序。
要检查 Tailwind 是否正常工作，您可以使用我的专利“此文本是红色的吗？”在 src/App.jsx 内测试：
<span id="e432" data-selectable-paragraph=""><span>export</span> <span>default</span> <span>function</span> <span>App</span>() {<br> <span>return</span> (<br> <span><span><<span>h1</span> <span>className</span>=<span>"text-red-500 "</span>></span><br> I am (hopefully) red text! <br> <span></<span>h1</span>></span></span><br> )<br>}</span>
带有 Tailwind CSS 实用程序类的 App.jsx
使用 Tailwind CSS 设计红色文本
恭喜，您现在应该在 React 中拥有一个可以工作的 Tailwind“实现”（最简单的实现）！ 🎉
将 Tailwind 与 React 结合使用
现在我们已经设置了 Tailwind，我们可以开始在 React 组件中使用 Tailwind 类。 React 中的“组件”是可重用的 HTML 块，它可能包含其他组件，并且可能显示或使用作为“props”（属性）传递给它的“动态”数据。
Tailwind 的文档是完全可搜索的；您会发现一个好的工作流程是开始编写您需要的 HTML 元素，然后当您想要添加或更改这些元素的视觉呈现时，您可以在 Tailwind 文档中搜索您需要的特定实用程序类名：
例如，如果我想要红色文本，我只需开始输入“红色文本”，然后查看弹出的页面：
如果您无法立即找到您需要的内容，请搜索页面本身（CMD + F 或 CTRL + F），您应该能够在几秒钟内找到您需要的确切类名。这支持“及时学习”和“足够学习”，使您的工作流程可能非常快速和高效⚡
使用 AI 生成 Tailwind 组件
现在我们已经使用 React 设置了 Tailwind，让我们尝试生成一些有趣的组件！使用人工智能是一种快速学习的好方法，通过查看组件的外观以及哪些类可能有用的示例。
尝试#1：一张简单的博客明信片
以下是一个示例提示（“提示”只是您提交给 AI 语言模型的聊天机器人用户界面的文本的术语）：
<span id="4de3" data-selectable-paragraph="">Context: web development, React.js, Tailwind CSS, Vite. <br><br>Can you generate me a React function component, using Tailwind CSS classes? <br><br>I would like a simple card component that displays information about a blog post.<br><br>The component should contain: <br><span>-</span> image<br><span>-</span> title<br><span>-</span> summary<br><span>-</span> 'Read more' button</span>
我在开头添加了一行，为模型提供了一些“上下文”；大型语言模型是在整个万维网的很大一部分上“训练”的，因此它有助于具体说明我们正在讨论的网络开发技术。我经常在提示中使用 Markdown 语法来构建信息（如上面的项目符号列表）。
提示 ChatGPT (GPT-3.5)
使用此提示与免费版本的 ChatGPT (GPT-3.5)，我们得到：
ChatGPT (GPT-3.5) 的输出
<span id="d021" data-selectable-paragraph=""><span>import</span> <span>React</span> <span>from</span> <span>'react'</span>;<br><br><span>const</span> <span>BlogPostCard</span> = (<span>{ imageUrl, title, summary }</span>) => {<br> <span>return</span> (<br> <span><span><<span>div</span> <span>className</span>=<span>"bg-white rounded-lg shadow-md overflow-hidden"</span>></span><br> <span><<span>img</span> <span>src</span>=<span>{imageUrl}</span> <span>alt</span>=<span>{title}</span> <span>className</span>=<span>"w-full h-48 object-cover"</span> /></span><br> <span><<span>div</span> <span>className</span>=<span>"p-6"</span>></span><br> <span><<span>h2</span> <span>className</span>=<span>"text-xl font-bold mb-2"</span>></span>{title}<span></<span>h2</span>></span><br> <span><<span>p</span> <span>className</span>=<span>"text-gray-600"</span>></span>{summary}<span></<span>p</span>></span><br> <span><<span>button</span> <span>className</span>=<span>"mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"</span>></span><br> Read more<br> <span></<span>button</span>></span><br> <span></<span>div</span>></span><br> <span></<span>div</span>></span></span><br> );<br>};<br><br><span>export</span> <span>default</span> <span>BlogPostCard</span>;</span>
我们可以看到这里有一些 Tailwind 类，ChatGPT 甚至为我们提供了一些“道具”来传递动态数据。该代码假设该组件位于一个单独的文件内，这被认为是 React 中的最佳实践： export default BlogPostCard 将使该组件可在其他文件中使用（例如 App.jsx ）。
（注意：自 React 17（2020 年发布）以来，您实际上不需要行 _import React from 'react';_ ）
我们可以简单地复制此代码并将其粘贴到我们的项目中 - 我已将我的代码添加到 App.jsx 中，位于 App() 函数组件下方，这样我就可以立即测试该组件，但在一个合适的项目我会创建一个 src/components/ 文件夹，每个组件都位于单独的文件或单独的文件夹中，以保持项目的可扩展性。
将生成的功能组件添加到 App.jsx
这里请注意，在页面上使用新的 BlogPostCard 组件的方法是在 App() 的 return 语句中添加 <BlogPostCard /> 。我还添加了一些道具： imageUrl 、 title 和 summary 以及我自己的通用数据。我还添加了一个容器 <div> ，其中包含用于最大宽度的 Tailwind 类以及左侧和右侧的自动居中边距。
让我们看看浏览器中有什么：
在浏览器中生成的 React 组件
还不错，虽然卡片有点宽（它似乎没有最大宽度），而且图像没有很好地居中。但是，请注意格式良好的文本，摘要的颜色较浅，标题的尺寸较小。
该按钮也很好地布局在卡片的左侧，与文本内嵌，并提供良好的“可供性”，具有圆形边缘和蓝色背景 - 它还具有带有较深蓝色阴影的“悬停”效果，这意味着用户将光标悬停在按钮上应该告诉它是可点击的。
该卡片具有漂亮的圆形边缘和轻微的阴影，以将其与页面的其他部分区分开来。
让我们看看我们是否可以改进这一点……
尝试#2：具有特定颜色的网页表单
我们的下一个提示：
<span id="f73c" data-selectable-paragraph="">Context: web development, React.js, Tailwind CSS, Vite. <br><br>Can you generate me a React function component, using Tailwind CSS classes? <br><br>I would like a form with the following fields: <br><span>-</span> Name<br><span>-</span> Email<br><span>-</span> Message<br><br>There should be a button that says "Send!" <br>The form should have maximum width, so it does not spread all the way across the page. <br>The colour scheme is purple, blue, and yellow. </span>
让我们尝试使用另一种语言模型：Gemini，由 Google 提供（也可以免费使用）：
使用 Google Gemini 生成 React 组件
Gemini 生成的 React 组件
再次，我们可以简单地将 Gemini 提供的代码复制并粘贴到代码编辑器中。 Gemini 添加了一些提交表单的功能，因此我们需要在文件顶部添加 import { useState } from 'react'; 来处理“有状态”变量。
使用 VSCode 将生成的组件添加到 React
Gemini 使用 Tailwind 和 React 生成的 Web 表单
我们的形式看起来不错！
请注意，我们已经使用了我们想要的配色方案：当我们与任何表单字段或按钮交互时，会出现一个黄色的“焦点环”，标题和按钮是蓝色的，表单的背景是微妙的浅紫色，这实际上是看起来相当美观。
请记住，我们的目标是如果可以的话达到“好”，如果不行则达到“好”。我以前肯定不得不使用更糟糕的在线表格！
我认为这是一个非常漂亮的网络表单，最重要的是我们只花了大约一分钟就将其放入我们的项目中。 Gemini 添加的表单提交逻辑似乎也有效；我们只需要在函数组件的主体中添加 Fetch 请求，就可以捕获表单提交数据。目前，该表单记录输入到控制台的文本：
捕获表单数据并记录到控制台
尝试#3：更时髦的卡片！
我们的（时髦的）提示：
<span id="6147" data-selectable-paragraph="">Context: web development, React.js, Tailwind CSS, Vite. <br><br>Can you generate me a React function component, using Tailwind CSS classes? <br><br>I would like a snazzy card component that displays information about a blog post.<br><br>The component should contain: <br>- image<br>- title<br>- summary<br>- 'Read more' button<br><br>Component name: `SnazzyCard01`<br><br>Please make the card as exciting and bold as you can! I want to see cool colours, gradients, etc. Be creative! <br><br>There should be a max width of about a third of a laptop screen.<br><br>The image should be on the left and the text & button should be on the right. </span>
让我们尝试一下 Anthropic 的 Claude 聊天机器人（也是免费的）：
与克劳德一起提示
克劳德的输出
使用 Tailwind CSS 样式生成的时尚 React 组件
确实非常时髦！我只会通过将图像垂直居中（或者可能使其成为卡片的整个高度）来改进这一点。悬停时按钮背景颜色较深，卡片后面有微妙的阴影。
我认为这是非常专业的，但又时尚、现代、引人注目——非常有用。干得好，克劳德。
尝试#4：从线框模型生成
我将使用 Figma（在浏览器中运行的免费网页设计程序）来制作用户界面的“低保真”模型：
Figma 中的低保真线框
许多语言模型现在都采用“多模式”输入，这意味着您可以通过文本提示传递图像。让我们尝试一下 ChatGPT Plus，这是使用 GPT-4 的 ChatGPT 付费版本（目前每月 20 美元）。
这次尝试比之前的尝试更加困难，因为我发现 GPT-4 很难准确识别模型中的图像，而且它位于表单的左侧。
经过多次尝试，我最终向 GPT-4 详细解释了它所遇到的问题，并要求它提出一个可能有助于它克服这一困难的提示。它生成的提示是：
请分析 Figma 上传的低保真网页模型图像中显示的布局。提供空间布局和设计元素的详细分解，包括任何标题、图像、文本、按钮和表单输入等。
请注意这些元素如何相对于彼此定位 - 特别是要注意元素之间的对齐方式、比例和任何间距。
分析后，使用此信息使用 Tailwind CSS 创建一个 React 函数组件，该组件尽可能地复制观察到的布局。
布局应该是响应式的，使用 Tailwind CSS 类来确保它适应各种屏幕尺寸，同时保持设计的完整性。
为了清楚起见，您可以要求语言模型为自己编写提示。
这种技术可能被描述为“元提示”，实际上通常相当有效——例如，您可以要求大型语言模型为“图像语言模型”（如 Midjourney 或 DALL·E）生成图像生成提示，它可以包含大量描述性关键字以提高生成图像的质量。
具有多模式输入的元提示 GPT-4
<span id="3fcf" data-selectable-paragraph=""><br><span>const</span> <span>EnquiryForm</span> = () => {<br> <span>return</span> (<br> <span><span><<span>div</span> <span>className</span>=<span>"container mx-auto p-4"</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"text-center"</span>></span><br> <span><<span>h1</span> <span>className</span>=<span>"text-3xl font-bold mb-2"</span>></span>Helpful Household Robotics Inc<span></<span>h1</span>></span><br> <span><<span>p</span> <span>className</span>=<span>"text-xl mb-4"</span>></span>Never get your hands grimy again!<span></<span>p</span>></span><br> <span><<span>h2</span> <span>className</span>=<span>"text-lg font-semibold mb-8"</span>></span>Enquire today!<span></<span>h2</span>></span><br> <span></<span>div</span>></span><br><br> <span><<span>div</span> <span>className</span>=<span>"flex flex-col md:flex-row md:items-start"</span>></span><br> <span><<span>img</span><br> <span>src</span>=<span>"robot-doing-dishes.jpg"</span> // <span>Replace</span> <span>with</span> <span>actual</span> <span>image</span> <span>path</span><br> <span>alt</span>=<span>"A robot washing dishes"</span><br> <span>className</span>=<span>"w-full md:w-1/2 mb-6 md:mb-0 md:mr-6"</span><br> /></span><br> <span><<span>div</span> <span>className</span>=<span>"w-full md:w-1/2"</span>></span><br> <span><<span>form</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"mb-4"</span>></span><br> <span><<span>label</span> <span>htmlFor</span>=<span>"name"</span> <span>className</span>=<span>"block mb-2"</span>></span>Name:<span></<span>label</span>></span><br> <span><<span>input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"name"</span> <span>className</span>=<span>"w-full px-3 py-2 border rounded"</span> /></span><br> <span></<span>div</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"mb-4"</span>></span><br> <span><<span>label</span> <span>htmlFor</span>=<span>"address"</span> <span>className</span>=<span>"block mb-2"</span>></span>Address:<span></<span>label</span>></span><br> <span><<span>input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"address"</span> <span>className</span>=<span>"w-full px-3 py-2 border rounded"</span> /></span><br> <span></<span>div</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"mb-6"</span>></span><br> <span><<span>label</span> <span>htmlFor</span>=<span>"plates"</span> <span>className</span>=<span>"block mb-2"</span>></span>Number of dirty plates to clean:<span></<span>label</span>></span><br> <span><<span>input</span> <span>type</span>=<span>"number"</span> <span>id</span>=<span>"plates"</span> <span>className</span>=<span>"w-full px-3 py-2 border rounded"</span> /></span><br> <span></<span>div</span>></span><br> <span><<span>button</span> <span>type</span>=<span>"submit"</span> <span>className</span>=<span>"w-full bg-blue-500 text-white px-3 py-2 rounded"</span>></span><br> Enquire!<br> <span></<span>button</span>></span><br> <span></<span>form</span>></span><br> <span></<span>div</span>></span><br> <span></<span>div</span>></span><br> <span></<span>div</span>></span></span><br> );<br>};</span>
成功生成网页布局
现在我们有了表单左侧图像的布局，就像在模型中一样。 GPT-4 有助于添加“响应式”Tailwind 类，因此当浏览器窗口太窄而无法容纳两列并排布局时，布局会切换到单列。
尝试#5：从一张纸上的草图生成
这是我用圆珠笔在一张纸上画的图；如您所见，我花了大约 60 秒：
网页的手绘模型
将手绘模型作为多模式输入与我们之前生成的提示一起传递，我进行了几次尝试才取得成功。
我每次都会对提示进行一些调整，例如包括对 GPT-4 一直在努力解决的任务方面的反馈，以鼓励它更加关注这些具体方面。
这是最后的提示（为了本文的目的，我用粗体强调了这一点）：
请分析上传的手绘低保真网页模型图像中显示的布局。提供空间布局和设计元素的详细分解，包括任何标题、图像、文本、按钮和表单输入等。
请注意这些元素如何相对于彼此定位 - 特别是要注意元素之间的对齐方式、比例和任何间距。您将需要推断此快速绘图中绘制的方面是什么，并且您应该在适当的情况下为这些元素生成通用填充文本。您的最佳猜测可能是准确的，并且模型并不是完美的表示。
分析后，使用此信息使用 Tailwind CSS 创建一个 React 函数组件，该组件尽可能地复制观察到的布局。
布局应该是响应式的，使用 Tailwind CSS 类来确保它适应各种屏幕尺寸，同时保持设计的完整性。
之前对此任务的尝试已发现流程中的一个弱点：图像要么未在模型图像中识别，要么未包含在生成的标记中；因此，您应该特别注意此任务中的图像元素。
ChatGPT（GPT-4）演示其推理过程
GPT-4 在生成网页布局之前识别其特定特征
<span id="14df" data-selectable-paragraph=""><span>const</span> <span>WebPageMockup</span> = () => {<br> <span>return</span> (<br> <span><span><<span>div</span> <span>className</span>=<span>"container mx-auto p-4"</span>></span><br> <span><<span>h1</span> <span>className</span>=<span>"text-4xl font-bold mb-4"</span>></span>Heading<span></<span>h1</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"flex flex-col md:flex-row justify-between items-start mb-4"</span>></span><br> <span><<span>h2</span> <span>className</span>=<span>"text-2xl mb-4 md:mb-0"</span>></span>Subheading<span></<span>h2</span>></span><br> <span><<span>img</span> <span>src</span>=<span>"/path-to-your-image.jpg"</span> <span>alt</span>=<span>"Description"</span> <span>className</span>=<span>"w-full md:w-1/4"</span> /></span><br> <span></<span>div</span>></span><br> <span><<span>ul</span> <span>className</span>=<span>"list-disc pl-5 mb-4"</span>></span><br> <span><<span>li</span> <span>className</span>=<span>"mb-2"</span>></span>Bullet point 1<span></<span>li</span>></span><br> <span><<span>li</span> <span>className</span>=<span>"mb-2"</span>></span>Bullet point 2<span></<span>li</span>></span><br> <span><<span>li</span> <span>className</span>=<span>"mb-2"</span>></span>Bullet point 3<span></<span>li</span>></span><br> <span></<span>ul</span>></span><br> <span><<span>p</span> <span>className</span>=<span>"mb-4"</span>></span>This is a paragraph of text that could go into more detail about the bullet points or other information on the webpage. It's separated from the bullet points by a bit of space.<span></<span>p</span>></span><br> <span><<span>div</span> <span>className</span>=<span>"border-t pt-4"</span>></span><br> <span><<span>p</span> <span>className</span>=<span>"text-base"</span>></span>Footer text or links go here.<span></<span>p</span>></span><br> <span></<span>div</span>></span><br> <span></<span>div</span>></span></span><br> );<br>};</span>
从手绘模型生成的网页布局
GPT-4 成功地将我用钢笔绘制的图画变成了网页，布局大致相同。
结论
公开可用的大型语言模型在使用时免费，可以使用 Tailwind CSS 进行样式轻松地为 React 应用程序生成组件。
这些组件的质量总体上很好，超过了缺乏经验的开发人员在不花费大量时间研究 CSS 和浏览器内渲染的情况下可能实现的质量。
Tailwind CSS 代表了创建“足够好”的 Web 用户界面的快速通道，而生成工作流程可以轻松地增强这一点。理论上，创建一个新的工作组件所需的时间可以缩短到几分钟。
GPT-4 很难正确识别多模式输入中的图像和水平布局，但“元提示”在一定程度上弥补了这一问题。
然而，多模式输入成功地完全准确地读取了文本——值得注意的是，GPT-4 现在可以非常轻松地从图像中解析文本，就像 Google Lens 等其他工具一样。在为语言模型构建复杂的提示时，元提示可能是“入门”的好方法：您可以测试生成的提示的输出，并相应地调整它。
文本提示和图像输入的组合可能最有效地实现生成的 UI 布局的准确性。
识别模型能力中的弱点（例如不能很好地识别图像）实际上可以通过在未来的提示中包含有关这些弱点的反馈并要求模型“特别注意”任务的这些特定方面来补救 - 实际上，启动模型本身的盲点减少了这些盲点。
使用更“命令式”而不是“声明性”的提示样式可以有效地说服语言模型首先描述它在图像模型中看到的布局，识别页面上的特定元素及其相对于彼此的布局，然后生成描述此布局的 HTML/JSX 代码。
这种方法可以与“思维链”提示相比较。
☕ 如果您觉得这篇文章有趣或有用，为什么不给我买杯咖啡呢！
ko-fi.com/hortfrancis
[
](https://ko-fi.com/hortfrancis)
别忘了感谢你友好的邻居语言模型😊
用简单的英语🚀
感谢您成为简单英语社区的一员！你走之前：
- 一定要鼓掌并关注作者️👏️️
- 关注我们：X |领英 | YouTube |不和谐 |通讯
- 访问我们的其他平台：Stackademic |共同饲料|创业|立方体
- 更多内容请访问 PlainEnglish.io
- 原文作者：知识铺
- 原文链接：https://index.zshipu.com/gpt/post/20240325/prompt/%E4%BD%BF%E7%94%A8%E7%94%9F%E6%88%90%E5%BC%8FAI%E5%BF%AB%E9%80%9F%E9%AB%98%E6%95%88%E5%9C%B0%E5%88%9B%E5%BB%BA%E4%BC%98%E8%B4%A8%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2--%E7%9F%A5%E8%AF%86%E9%93%BA/
- 版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。
- 免责声明：本页面内容均来源于站内编辑发布，部分信息来源互联网，并不意味着本站赞同其观点或者证实其内容的真实性，如涉及版权等问题，请立即联系客服进行更改或删除，保证您的合法权益。转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com
