我使用 Webcrumbs 和 GitHub Copilot 构建了一个照片编辑应用程序🔥

您是否曾花费数小时调整设计、尝试不同的风格或浏览网站寻找灵感？

无论您是试图获得正确外观的开发人员，还是完善颜色和阴影的设计师，UI 设计过程都感觉永无止境。

即使GitHub Copilot能帮你更快地编写代码，更改 UI 仍然是一个手动过程。Copilot 可以提供布局建议，但当你需要快速切换主题或尝试不同样式时，它却无能为力。

如果您可以跳过反复试验，只需单击几下即可立即看到多种设计变化，那会怎样？

不再需要猜测，不再需要为 LLM 编写长篇提示来解释 UI 设计，也不再需要重写样式。

这正是Webcrumbs 前端 AI 的功能所在。它能让你即时生成、调整并应用设计样式，节省大量工作时间。

让我们看看它是如何工作的！

什么是前端人工智能？

Webcrumbs 的 Frontend AI 是一个浏览器工具，它将 AI 与可视化编辑器相结合，帮助开发人员快速轻松地构建网站。

它就像一个智能助手，允许你使用拖放功能进行设计，实时调整组件，并在不同设备上即时预览你的作品，同时在后台创建简洁的代码。AI 提供个性化建议和多种样式选项，并优化布局以提高响应速度。它是一款出色的设计和编码工具，有助于自动化重复性任务，确保你的 UI 精美、用户友好且易于创建。

介绍 Webcrumbs 的“更改设计”工具

Webcrumbs 团队不断更新 Frontend AI，帮助开发人员和设计人员更轻松地构建 UI。

工具Change Design是其中的重要组成部分。有了这项新功能，您只需单击一下即可将设计更改为任何样式。您无需担心颜色、样式的匹配，也无需编写冗长的提示。前端 AI 会处理所有事情，您只需选择最适合您设计的样式即可。

它们提供不同的风格，如非特定、玻璃态、复古、黑暗模式、反设计等等（我们稍后会探索它们）

除了样式之外，您还可以设置主题颜色，它会使用这些颜色来构建设计。最棒的是，前端 AI 现在会为您的设计提供建议。

假设你使用前端 AI 创建了一张卡片。它在大屏幕上显示良好，但在移动设备上却向左移动，这意味着它没有响应。

前端 AI 会立即提出一些建议，例如：您想让这个组件居中还是全屏显示？正如您在下图中看到的，它不仅会要求更改，还会解释为什么会发生此问题，甚至无需输入提示。

是不是很酷？

我们不是在复制粘贴，而是在理解这些概念。就像有人在给我们建议，防止我们犯错。

我们已经在理论上讨论了很多关于这个功能的内容，所以让我们看看它是如何工作的，并进一步探索它。

“变革设计”如何运作

使用这个新功能非常简单。

1. 转到 Webcrumbs登录页面。
2. 点击“开始”。您将被重定向到前端 AI 页面。
3. （可选）登录或注册 Frontend AI 以保存您的创作。

💡 注意：免费用户每日可获得有限量生成，专业用户则可获得无限量生成。点击此处查看套餐。

现在，您将看到有关您可以构建的内容的多个建议，或者您可以编写提示来创建自己的内容。

让我们首先从建议中选择一些内容，然后尝试使用提示。

我们来看看产品卡片。点击“产品卡片”（或任何你想创建的设计）。点击后，它就会开始生成，你可以在模糊的区域看到整个流程。

几秒钟后，您会看到它生成了漂亮的卡片设计。

现在，事情会变得有趣起来。设计稿已经定下来了，但如果我们想尝试其他样式怎么办？是修改样式、编写新的提示，还是添加新的设计图片参考？

嗯，说实话，你不需要全部都做。看看右侧边栏，你会看到一些选项，比如主题、设计风格、颜色等等。

1. 主题：更改整个设计或部分设计的整体外观，如颜色和感觉。
2. 设计风格：更改元素的显示方式，例如使用平面形状或详细图像，为您的设计提供独特的视觉外观。

让我们看看这两个选项的实际效果。

好了，我们有了这张卡片，现在我们想更改它的设计样式。具体操作如下：前往右侧边栏，点击“设计样式”下拉菜单，然后选择你喜欢的样式。

我选择了“斯堪的纳维亚”。现在单击“立即应用”以应用此设计风格。

现在您可以看到设计上的差异了。字体样式、填充和边框会根据您选择的设计而变化。

但正如我之前提到的，你当然可以更改主题。你可以从预定义的主题中选择，也可以选择你自己的颜色。

所以我把主色设为绿色，主题设为森林。结果如下。

现在，您可以混合所有这些选项来创建美观、独特的 UI 设计。

是不是很酷？主题快速切换，让您轻松找到最适合您的组件或应用的主题。您可以随时更改设计风格，找到最适合您应用的样式。

此外，您只需单击一下即可将所有代码导出到不同的框架和库中，并使用 Tailwind 和 CSS 等样式选项。

现在我们已经了解了前端 AI 的新功能，接下来我们来构建一个项目来测试这些功能的效率。好了，让我们赶紧进入下一节吧。

我们将构建什么

我们刚刚了解了 Frontend AI 的所有新功能。让我们使用 Frontend AI 快速创建 UI，然后处理逻辑。我们将构建一个照片编辑应用。我们将使用 Frontend AI 来设计 UI，并使用 GitHub Copilot 来辅助处理代码逻辑。

该应用程序将具有图像过滤器、图像上传和导出、叠加、放大和缩小以及重置选项等功能。

我们将使用Vite React、Tailwind CSS和Zustand进行状态管理。Frontend AI 提供了多种 UI 创建框架，因此您可以选择任何其他技术栈。

分步指南

首先，让我们设置文件夹并安装所有依赖项。创建一个新文件夹并使用此命令安装 React。

npm create vite@latest

此命令会要求您输入一些信息，例如您想要使用的框架或语言。我选择了 JavaScript 和 React，但您也可以选择任何您喜欢的语言。

安装完 React 后，我​​们来安装 Tailwind CSS。我们将使用 Tailwind 版本@3.4.11，因为 Frontend AI 的代码是针对版本 3 的。

npm install -D tailwindcss@3.4.11 postcss autoprefixer

然后，生成 Tailwind 配置文件：

npx tailwindcss init -p

现在，使用此命令安装 Zusand

npm install zustand
# Or, use any package manager of your choice.

我们的基本设置已经完成，现在让我们构建 UI。

生成 UI

正如我们从上面的前端 AI 功能中看到的，我们现在知道它将非常快速地生成 UI。所以，请前往你的前端 AI 仪表板并开始编写提示。我使用这个提示来生成 UI。

Generate a  photo editing app where it should have features like Image Upload & Preview, basic image adjustments, crop and resize, filters and effects and rest and undo. Also add a option to export edited image, and add overlay option

点击生成按钮后，它开始生成 UI。

几秒钟后，它就生成了设计图，说实话，它看起来相当令人印象深刻。

您可以随时使用右侧边栏更改原色和设计风格，但我喜欢这个，所以我会坚持使用它。

在继续操作之前，我们先检查一下响应能力。点击标题栏中的图标，如果发现任何漏洞或响应问题，系统会自动建议修复方案。您可以应用修复方案并接受更改，也可以选择忽略。

因此，UI 现在已经完成，单击代码编辑器，然后单击选择框架。

选择你喜欢的样式选项和框架/库。我选择了 React 和 Tailwind CSS。

逻辑部分

UI 生成已完成。现在，打开 VS Code，开始使用我们从 Frontend AI 生成的所有代码。由于代码在一个文件中有点长，我们将其拆分成不同的组件。代码结构如下所示。

一个store文件，一个UI folder用于存储所有三个组件，一个parent file用于显示这些组件。该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 中没有它，您可以查看此文档以在编辑器中安装它。

您还可以选择多个模型进行聊天。PS：它还配备了Sonnet 3.7，您也可以尝试一下。

首先，清理所有App.jsx代码并<PhotoEditor />在其中导入组件。

import { useState } from "react";
import "./App.css";
import PhotoEditor from "./components/PhotoEditor";

function App() {
  return (
    <div className="w-screen flex justify-center">
      <PhotoEditor />
    </div>
  );
}

export default App;

现在，使用此命令启动服务器。

npm run dev

我们的服务器已启动并运行。现在，让我们开始使用 copilot。

您有两种使用 Copilot 的选项：使用聊天模式（默认选项）；或者使用 Copilot 可以直接修改您的文件并允许您接受或拒绝更改的模式。我们将从第二种模式开始。

打开 Copilot 聊天，点击左上角的第一个选项，然后添加您希望 Copilot 处理的文件数量。

写一个提示。我写了这个提示👇

I am making an photo editing app where, start with photo editing feature when user click on upload button and selects the image, the selected image should be visible and added to the editor canvas. Use Zustand Store for global variables and state management. Create a store file for the state management.

如您所见，它开始生成文件和所有代码。

注意：接受代码之前请务必检查一次。

生成的代码将如下所示，其中显示了它所改变的内容，因此您可以在接受它之前进行适当的检查。

目前，代码看起来不错。请打开浏览器检查一下功能。

现在一切正常了。我可以把图片添加到画布上了。太棒了。现在，我们来试试别的。让我们用 Copilot 添加放大和缩小功能。我添加了文件，并使用了这个提示 👇

Great, now add a functionality of zoom-in and zoom-out when I click on the icons, it should zoom the image

在接受 Copilot 代码之前，请务必确保您理解它。例如，对于缩放功能，您只需在商店中创建一个状态即可。

import { create } from "zustand";

export const usePhotoStore = create((set) => ({
  image: null,
  zoom: 1, // this is the new state for zoom
  setImage: (image) => set({ image }), //
  setZoom: (zoom) => set({ zoom }), // function to change the zoom state 
 }));

在组件内部使用这些状态。在我们的例子中是<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">
            // rest of the component
          <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。现在，我们添加了这项功能，可以放大和缩小图像。

同样，我们可以添加更多功能并删除任何不需要的 UI 代码。例如，我们可以删除“元素部分”，因为我们不需要它，因为右侧已经有“元素库”了。我们还可以删除固定的宽度和高度，使其完全覆盖屏幕区域。

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 Frontend AI 生成任何 UI，并使用 GitHub Copilot 帮助处理逻辑，您将随时准备好构建伟大的东西。

结果

我使用了更多的提示，经过一些尝试和修复后，我最终获得了这些功能。

🎥点击此处观看视频： 结果视频

下载的图像如下所示。👇

您可以在 Github 上查看完整的代码。

看看我们多么轻松地使用前端 AI 创建了 UI，并使用 GitHub Copilot 开始实施。我花了一个小时就构建了这个照片编辑应用。前端 AI 让设计部分变得更容易。我不需要编写多个 CSS 样式来测试设计，也不需要从多个网站获取参考，也不需要编写冗长的提示来解释 UI。几秒钟内，我就得到了一个全新、简洁的 UI。

将 Webcrumbs Frontend AI 与 Copilot 结合使用可以节省大量时间，因为您现在可以专注于实现部分。目前，我们构建的应用是一个小型照片编辑应用，我们可以在其中添加更多功能和特性。但现在我们知道我们不会陷入 UI 迭代循环，如果我们在逻辑部分遇到挑战，GitHub Copilot 可以提供帮助。

总的来说，Copilot + Webcrumbs节省了 UI 和逻辑开发的时间，并帮助您构建更先进、更用户友好、更有创意的应用程序。

结论

这篇博客就到这里。在这篇博客中，我们使用 Webcrumbs 和 GitHub Copilot 构建了一个照片编辑应用，展示了使用正确的工具可以简化前端开发。

我们不需要花费数小时从头开始创建 UI，Webcrumbs 为我们提供了一个可以快速调整的结构。

通过结合使用这些工具，我们可以节省设置和调试的时间，从而更轻松地将想法变为现实，而无需额外的麻烦。

如果您发现本文有用，请与您的 DevOps 爱好者分享。

另外，关注我以获取更多类似内容：

阿林达姆·马宗德跟随

开发倡导者 | 技术作家 | 60 万+ 阅读量 | 合作邮件

如需付费合作，请发送电子邮件至：arindammajumder2020@gmail.com。

感谢您的阅读！

动图