你有没有花好几个小时来调整设计方案，尝试各种风格，或者在网上找灵感？
无论你是想要达到完美外观的开发人员，还是不断调整颜色和阴影的设计人员，UI 设计过程都会让人感觉无穷无尽。
即使有了GitHub Copilot的帮助，让你编写代码更快，更改用户界面依然是一个手动的过程。Copilot可以给出布局建议，但当需要快速切换主题或尝试不同风格时，Copilot就帮不上忙了。
那会怎样，如果你能跳过试错阶段，只需轻轻点击几下就能立刻看到多种设计选择？
不再猜测，不再编写长提示给LLM解释UI设计，也不再调整样式。
这正是Webcrumbs的前端AI的功能所在。它让你可以即刻生成、调整和应用设计风格，节省大量时间。
我们来看看它怎么运作吧！
点击观看 GIF 动图
Webcrumbs的前端AI工具是一款浏览器工具，它结合了AI技术与视觉编辑器，帮助开发者快速轻松地搭建网站。
它就像一个智能小助手，允许你使用拖拽设计，实时调整组件，并在创建过程中在不同设备上即时预览你的工作，同时在后台自动生成干净的代码。AI 提供个性化的建议和多种样式选项，优化布局，使其更加响应。它不仅是一个设计和编码的绝佳工具，帮助自动执行重复任务，还确保你的界面既精致又用户友好，轻松创建。
介绍 Webcrumbs 的 "设计更改" 工具Webcrumbs团队一直不断更新前端AI工具，帮助开发人员和设计师们更轻松地构建UI界面。
更改设计工具是这一功能的关键部分。使用这项新功能，你可以单击一下就把设计改成任何风格。你无需担心颜色、风格搭配或写长篇说明。前端 AI 会帮你搞定所有事情，你只需要选择最喜欢的设计就可以了。
他们提供不同的风格，比如无特定风格、玻璃拟物风格、复古风、暗模式、反向设计等等（一会儿我们再深入探讨）
除了样式设置外，你还可以设置主题颜色，它会用这些颜色来构建设计。你知道最棒的地方在哪里就是？前端AI现在还会给你设计建议。
所以，假如你用Frontend AI做了一张卡片。它在大屏幕上运行得很顺畅，但在移动设备上却向左偏移，这意味着它在移动设备上不是响应式的。
前端 AI 系统会立即提出几个选项，例如：您是要将此组件居中显示还是全屏显示呢？ 如下面的图片所示，即使没有输入提示，它不仅询问是否需要更改，还会解释这个问题为什么会发生。
挺酷的，不是吗？
我们不仅照搬照抄，而是在理解这些概念。这就像有人给我们提建议，防止我们出错。
我们已经在这个功能的理论方面讨论了很多，所以让我们看看它实际工作如何，并进一步探索它。
设计变更的工作原理:使用这个新功能相当简单。
- 访问 Webcrumbs 主页。
- 点击“开始使用”。您将会被引导到 Frontend AI 页面。
- （可选）登录或注册 Frontend AI 或登录以节省步骤，以便保存您的创作。
💡 注意： 免费用户每天只能生成有限次数的内容，而付费用户则可以享受无限生成次数的特权。更多详情请查看 这里。
现在，你会看到多个你可以构建的建议选项，或者你可以自己写个提示。
我们先从建议里选一个，然后试试用提示词。
我们先从产品卡片开始吧。点击产品卡片（或你想要创建的任何其他设计），你会看到生成过程在模糊区域里进行。
几秒钟后，你就会看到它生成一个美丽的卡片。
现在，事情就要变得有趣了。我们已经有了设计，但如果我们想要尝试一些其他的样式呢？我们是该改样式，写新提示，还是加新设计图参考呢？
说实话，其实你不用做这么多。你可以看看右边的侧边栏，可以看到一些选项，比如主题、设计风格、颜色等。
<!-- 前端的人工智能 -->
- 主题: 改变整体外观，如颜色和感觉，可以应用于整个设计或只是部分区域。
- 设计风格: 更改元素的显示方式，例如使用平面设计或详细图像，以赋予设计独特的视觉效果。
让我们来看看这两个选项。
所以，我们有了这张卡片，现在我们想要改变它的设计样式。然后，去右边的侧栏，点击 设计样式 下拉菜单，选择你喜欢的样式。
…
我选择了北欧风格. 现在点击“应用”来使用这个设计风格。
"Webcrumbs 前端智能插图"
现在你可以看到设计的不同之处了。字体、内边距和边框样式都已经根据你的选择做了相应的调整。
但是正如我之前说过的，你可以改变主题样式。你可以选择预设的主题，或者自定义颜色。
所以我把主颜色设成了绿色，主题是森林风格，这就是结果。
现在呢，你可以把这些不同的选项混合，设计出美丽独特的用户界面（UI）设计。
这不是很酷吗？主题更换很快，你可以轻松看出哪种最适合你的组件或应用程序。你可以经常调整设计样式，找到最适合你的应用程序。
除此之外，您只需轻轻一点即可将所有代码导出至不同的框架和库，并选择样式，例如使用 Tailwind 和 CSS。
现在我们已经看到了前端AI的新特性，让我们创建一个项目来测试一下这些特性的效果。所以，我们直接进入下一节的内容，别浪费时间。
我们要建的东西我们刚刚看了前端AI的所有新功能。让我们用前端AI快速创建UI，然后处理逻辑。我们将做一个照片编辑器。我们将用前端AI来创建UI，用GitHub Copilot来帮忙搞定代码逻辑。
该应用将提供图片滤镜、上传和导出图片、缩放、图层以及重置等功能。
我们将使用Vite和Tailwind CSS的React，并采用Zustand进行状态管理。你也可以选择其他任何技术栈，因为前端AI提供了多种框架选项来构建UI界面。
一步一步指南首先，让我们设置文件夹并安装所有依赖项。创建一个新的文件夹，运行此命令来安装 React 框架。
在命令行中运行以下命令来创建一个新的 Vite 项目：
npm create vite@latest全屏，退出全屏
这个命令会让你输入一些信息，比如你想用哪个框架或语言。我选择了JavaScript和React这两个，但是你可以选择你最喜欢的任何框架或语言。
安装完 React 后，让我们安装 Tailwind CSS。我们将使用 Tailwind 的 3.4.11 版本，因为 Frontend AI 的代码是基于此版本写的。
``
npm install -D tailwindcss@3.4.11 postcss autoprefixer
这将安装tailwindcss 3.4.11、postcss和autoprefixer作为开发依赖项。
切换到全屏/退出全屏
接着，创建这些 Tailwind 配置文件：
npx tailwindcss init -p
使用npx tailwindcss初始化项目并安装依赖
切换到全屏 / 退出全屏
现在，请运行这个命令来安装Zustand（一种状态管理库）。
npm install zustand
或者你可以用你熟悉的任何包管理器
切换到全屏模式/退出全屏模式
我们已经完成了基本设置，现在构建界面。
### 我们来生成用户界面吧
wǒmen lái shēnghànhùyùnjmiànxiàn ba
从上面提到的前端 AI 功能，我们现在知道它能很快生成 UI。所以，去你的[前端 AI 控制面板](https://app.webcrumbs.ai/frontend-ai)开始编写提示吧。我就是用这个提示生成了 UI。
创建一个照片编辑应用，应具备图片上传和预览、简单的图片调整、裁剪和缩放、滤镜和特效等功能，并允许用户导出编辑后的图片和使用叠加选项。并允许用户撤销操作。
切换到全屏模式 退出全屏
点击生成按钮后，就开始生成用户界面了。
几秒后，它生成了设计方案，挺酷的。
你可以随时通过侧边栏调整主色和设计风格，不过我喜欢这种设计风格，所以我打算一直用这种设计风格。
在继续前进之前，让我们先检查一下响应性。点击顶部栏的图标，如果发现问题，会自动给出修复建议。你可以应用修复并接受更改，或者忽略这些修复建议。
所以，用户界面现在已经完成了，点击代码编辑器按钮，接着选择一个框架。
选择你喜欢的样式和框架/库。我用上了 React 搭配 Tailwind CSS。
### 逻辑篇
UI生成已经完成。现在，请打开你的VS Code并开始使用我们生成的所有代码。因为代码有点长，我们把它分成几个部分。我们会把它分成不同的组件。结构大概如下。
一个 `store` 文件（或文件夹），一个 `UI 文件夹` 用来存放所有这三个组件，以及一个 `父文件` 来显示这些组件。`PhotoEditor` 组件是这些组件的父组件，然后我们将这个 `PhotoEditor` 组件导入到 `App.jsx` 文件中。
import React from "react";
import Sidebar from "./ui/Sidebar";
import EditorCanvas from "./ui/EditorCanvas";
import ElementsGallery from "./ui/ElementsGallery";
function PhotoEditor() {
return (
<>
<div id="webcrumbs" className="w-full flex justify-center">
<div className="w-full h-screen flex justify-center items-center">
<div className="w-[1200px] bg-gray-50 font-sans rounded-lg shadow-xl overflow-hidden lg:h-[700px] md:h-[700px]">
<div className="flex h-full">
<Sidebar />
<EditorCanvas />
<ElementsGallery />
</div>
</div>
</div>
</div>
</>
);
}
export default PhotoEditor;
请点击全屏模式, 退出全屏
在 VS Code 的顶部栏中，你会看到一个 GitHub 图标。点击它，侧边栏就会打开，在那里你可以和 GitHub Copilot 交流。现在 Copilot 是免费的，如果你的 VS Code 里还没有 Copilot，你可以参考这份文档在你的编辑器中安装它。
您还可以选择不同的聊天模型。附注：它还提供了 _[Sonnet 3.7](https://www.anthropic.com/news/claude-3-7-sonnet)_ ，所以您也可以试试它。
首先，先清除所有 `App.jsx` 代码之后，然后导入 `<PhotoEditor />` 组件。
import { useState } from "react";
import "./App.css";
import 图片编辑器 from "./components/PhotoEditor";
function App() {
return (
<div className="w-screen flex justify-center">
<图片编辑器 />
</div>
);
}
export default App;
切换到全屏查看 退出全屏
现在，你可以用这个命令启动服务器。
运行开发脚本: **`npm run dev`**
全屏播放 退出全屏
服务器已经运行正常。让我们开始用副驾助手。
[](https://imgapi.imooc.com/49c9e26708d3871608000580.jpg)
你有兩個使用 Copilot 的選項，可以使用**对话模式**（這是默認選項），或者使用另一种模式，让 Copilot 可以直接修改你的文件内容，你可以接受或拒絕这些修改。我们现在开始使用的是第二种模式。
打开Copilot聊天窗口，点击左上角的第一个选项（或相应的图标），然后输入Copilot需要处理的文件数。
写一个提示语。我写了这个提示👇（如下所示）
我正在做一个照片编辑应用，当用户点击上传按钮并选择图片时，照片编辑功能就会启动，选择的图片应该在编辑画布上可见并被添加到编辑器的画布中。使用Zustand Store来进行全局变量和状态的管理。创建一个用于状态管理的store文件。
全屏切换
它开始生成文件和代码，正如你所见。
**提示:** 在接受之前，请先检查一下代码。
[](https://imgapi.imooc.com/7691496708d3871808000450.jpg)
生成的代码会像这样，显示所做的修改，你可以先仔细检查再决定是否接受。
[](https://imgapi.imooc.com/acb46a6708d3871908000450.jpg)
代码现在看起来挺好的，打开浏览器试试看，测试一下功能是否正常。
现在可以用了，我可以把图片添加到画布上了。太好了。接下来我们试试别的。我们用助手试试添加放大和缩小功能。我已经添加了文件，并用这个提示👇
好的，现在添加一个功能，当我点击这些图标时，图片应该能够放大和缩小。
切换到全屏 退出全屏
确保你理解了代码再接受Copilot的代码。例如，对于缩放功能，你只需要在store中创建一个状态即可。
import { create } from "zustand";
export const usePhotoStore = create((set) => ({
image: null,
zoom: 1, // 这是一个新的缩放值
setImage: (image) => set({ image }), //
setZoom: (zoom) => set({ zoom }), // 用于设置缩放的函数
}));
全屏 退出全屏
你可以在这里使用这些状态。在我们的情况下，它是 `<EditorCanvas />`。在这里，我们利用这些状态和一个更新它们的函数。
import React from "react";
import { usePhotoStore } from "../../store/usePhotoStore";
function EditorCanvas() {
const image = usePhotoStore((state) => state.image);
const zoom = usePhotoStore((state) => state.zoom);
const setZoom = usePhotoStore((state) => state.setZoom);
const handleZoomIn = () => {
setZoom(zoom + 0.1);
};
const handleZoomOut = () => {
setZoom(zoom - 0.1);
};
return (
<div className="flex-1 flex flex-col">
<div className="bg-gray-800 p-4 flex justify-between items-center">
// 组件的其余部分
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex flex-col space-y-2">
<button
className="p-2 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-colors"
onClick={handleZoomIn}
>
<span className="material-symbols-outlined">zoom_in</span>
</button>
<button
className="p-2 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-colors"
onClick={handleZoomOut}
>
<span className="material-symbols-outlined">zoom_out</span>
</button>
</div>
</div>
</div>
</div>
);
}
全屏模式 退出全屏
所以，一定要打好基础，因为对基础知识的良好理解会让你在使用任何类型的AI时更加灵活。现在，我们已经添加了这一功能，并且我们可以放大和缩小我们的图像。
同样，我们也可以添加更多功能并移除不需要的部分。例如，可以移除**_Elements Section_**，因为右侧已经有了**_Element Gallery_**。移除固定宽高，使其自适应屏幕大小，覆盖整个屏幕区域。
import React from "react";
import Sidebar from "./ui/Sidebar";
import EditorCanvas from "./ui/EditorCanvas";
import ElementsGallery from "./ui/ElementsGallery";
function PhotoEditor() {
return (
<>
<div id="webcrumbs" className="w-full flex justify-center">
<div className="w-full flex justify-center items-center">
<div className="w-full bg-gray-50 font-sans rounded-lg shadow-xl overflow-hidden">
<div className="flex h-full">
<Sidebar />
<EditorCanvas />
<ElementsGallery />
</div>
</div>
</div>
</div>
</>
);
}
export default PhotoEditor;
全屏 / 退出全屏
它现在看起来会是这样。
你现在可以写更多的提示，让它更完善，并加入更多特性。你的想法越有创意，你的创作也会越有创意，没有任何借口了。
使用 Webcrumbs 前端 AI 来生成任何 UI，并使用 GitHub Copilot 帮助编写逻辑代码，你将总能准备好构建出色的应用程序。
## **来看看结果吧...**
我已经用了一些额外的提示，经过几次尝试和调整，最后得到了这些功能特性。
🎥 **在这里观看视频:** [视频](https://www.canva.com/design/DAGghC14M64/K5FCK5p5-CtxQXYD7vi_xg/watch)
下载的图片是这样的👇，请看下面。
你可以在这里查看完整的代码：[这里](https://github.com/Shivam-Katare/pixo)
看看我们是如何轻松地使用前端AI构建UI并用GitHub Copilot开始实现的。我只花了不到一个小时就完成了这个照片编辑应用的搭建。前端AI让设计部分变得简单得多。我不需要为测试设计写多个CSS样式，也不需要从多个网站上参考或写详细的说明来解释UI。几秒钟内我就得到了一个全新的、简洁干净的UI。
使用 Webcrumbs 前端 AI 和 Copilot 能大大节省时间，因为你现在可以专注于实现。目前我们构建的应用是一款小型照片编辑应用，我们可以在其中添加更多的功能和特性。但现在我们知道不会陷入 UI 迭代循环，如果我们在逻辑方面遇到难题，GitHub Copilot 会在这里帮助我们。
总体来说，**Copilot + Webcrumbs** 在用户界面和逻辑开发上节省时间，并帮助你创建更强大、更易于用户操作且更具创意性的应用程序。
## 结尾
这就是这篇博客的全部内容呢。在这篇博客中，我们使用 Webcrumbs 和 GitHub Copilot 构建了一个照片编辑应用，这说明了使用合适的工具可以让前端开发变得多么简单。
不用花费数小时从零开始创建界面，Webcrumbs给了我们一个我可以快速修改的结构。
通过一起使用这些工具，我们不仅节省了设置和调试的时间，还使将想法变为现实变得更加容易，无需额外的繁琐。
觉得这篇文章有用的话，就与你的 DevOps 同僚们分享。
也请关注我，了解更多这样的内容:
\[  \](/arindam_1729)
## Arindam Majumder 关注一下
[https://dev.to/arindam_1729]
[开发者倡导 | 技术作家 | 超过50万的阅读量 | Mail for Coll](https://dev.to/arindam_1729)
如果有付费合作的需求，请发邮件至 [arindammajumder2020@gmail.com](//mailto:arindammajumder2020@gmail.com)。谢谢
谢谢你的阅读！
这是一张动态图。共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
