WithAI.Design

5 min read

借助GPT,让我们Design Code!

借助GPT,让我们Design  Code!

在当今这个多元化的时代,设计界悄然掀起了一场跨界的风潮。今天,我们就来探讨一个引人入胜的话题:Design & Code

你是否注意到,国内外许多设计界的翘楚,不仅设计功底深厚,还精通编程艺术。以Blender的创始人为例,他本是一位艺术指导,曾参与电影制作。在3D创作过程中,因不满现有软件的局限性,他亲手编写了Blender(NeoGeo)的第一版代码,将艺术与技术完美融合。

Blender创始人与他的创作

再看近年来AIGC的热潮中,ComfyUI成为了设计师们的新宠。社区中的佼佼者ZHO,原是一名建筑设计师,却能用Python编写出极具艺术感的ComfyUI插件。他的插件、Github文档、工作流案例,无不展现出与众不同的艺术气息。

ZHO大神的艺术性插件

而对于使用过3D插件Vector to 3D的设计师们,你们可能不知道,其作者Yi Shen,同样是一位3D艺术设计师。他的作品,无疑证明了设计思维在编程世界的独特价值。

Yi Shen的3D艺术插件

不仅如此,许多有远见的前端工程师也开始自学设计,成为能够独当一面的独立开发者。在V2EX等技术社区,这样的讨论早已不是新鲜事。

V2EX上的独立开发者讨论

例子不胜枚举,这世界正变得越来越精彩,设计师们,是时候展现我们的多面才华了!正如古语所云:“技多不压身。”代码,对设计师而言,或许曾是一头雾水,但今天,让我们一起探索这套方法。

Code能为设计师做什么?

  • 快速理解产品交互:深入产品逻辑,理解交互设计的本质。
  • 获取可交互原型:快速搭建原型,直观展示设计概念。
  • UI灵感激发:在代码的世界里,寻找UI设计的无限可能。
  • 验证UIUX想法:在早期阶段,简单验证你的设计思路是否可行。

看看案例

这是我使用这套方法,直接通过code方式,写出来的可交互的网页应用。

简易计算器

01.gif

音乐播放器

黑色部分,可以加载一张黑胶唱片的封面。

02.gif

简易日历

03.gif

相册

这个相册还是自适应的,想的周到了~

04.gif

05.gif

理论上,按照这个方法,只要你想得到,就会给你生成相应的组件,虽然跟真正的UI设计稿比,在美观上还有差距,但是出来的效果,完成度极高,间距、比例等拿捏的也很好。

制作过程

这个过程的核心,是懂得一些前端框架的使用。设计师们,不用担心,一步步来,完全没问题的。 我这里使用其中一个框架,叫nextjs。首先,我们还是需要把环境搭建好。

准备工作

安装nodejs

Windows

  1. 下载 Node.js 安装包

    • 访问 Node.js 官方网站
    • 选择适合你系统的版本(LTS 版本推荐用于生产环境,Current 版本包含最新特性)。
    • 下载适合你操作系统的安装包(通常是 .msi 文件)。
  2. 运行安装程序

    • 双击下载的 .msi 文件以启动安装程序。
    • 按照安装向导的提示进行安装,可以选择默认设置。
  3. 验证安装

    • 打开命令提示符(Cmd)或者 PowerShell。

    • 输入以下命令以验证 Node.js 和 npm 是否安装成功:

      node -v
      npm -v
      
    • 你应该会看到 Node.js 和 npm 的版本号。

macOS

  1. 使用 Homebrew 安装

    • 如果还没有安装 Homebrew,可以在终端中运行以下命令安装 Homebrew:

      sh

      /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
      
    • 使用 Homebrew 安装 Node.js:

      brew install node
      
  2. 直接下载安装包(推荐方法):

    • 访问 Node.js 官方网站
    • 下载适合你操作系统的安装包(通常是 .pkg 文件)。
    • 双击下载的 .pkg 文件并按照提示进行安装。
  3. 验证安装

    • 打开终端。

    • 输入以下命令以验证 Node.js 和 npm 是否安装成功:

      node -v
      npm -v
      
    • 你应该会看到 Node.js 和 npm 的版本号。

安装vscode

在 Windows 和 macOS 上安装 Visual Studio Code (VS Code) 是一个相对简单的过程。以下是详细的安装步骤。

Windows 上安装 VS Code

  1. 下载 VS Code 安装包

  2. 运行安装程序

    • 双击下载的 .exe 文件以启动安装程序。
    • 按照安装向导的提示进行安装,可以选择默认设置。
    • 在安装过程中,你可以选择是否创建桌面快捷方式、添加到 PATH 环境变量等选项。
  3. 启动 VS Code

    • 安装完成后,你可以通过桌面快捷方式或者开始菜单启动 VS Code。

macOS 上安装 VS Code

  1. 下载 VS Code 安装包

  2. 安装 VS Code

    • 打开下载的 .zip 文件,它会自动解压缩。
    • 将解压缩后的 Visual Studio Code.app 拖动到应用程序文件夹中。
  3. 启动 VS Code

    • 打开“应用程序”文件夹,找到 Visual Studio Code.app 并双击启动。

配置 VS Code

  1. 安装扩展

    • 启动 VS Code 后,你可以点击左侧的扩展图标(类似于方块的图标)打开扩展市场。
    • 搜索并安装你需要的扩展,例如 JavaScript、Python、Git 等语言和工具的支持。
  2. 设置主题和界面

    • 你可以通过点击左下角的齿轮图标(设置)并选择“Color Theme”来更改主题。
    • 还可以通过“File” > “Preferences” > “Settings” 进行更多的配置。
  3. 集成终端

    • VS Code 自带集成终端,你可以通过 Ctrl + ``(反引号)(Windows)或 Cmd + ``(反引号)(macOS)打开终端。
    • 你可以在终端中运行命令行工具,例如 Git、npm 等。

验证安装

  1. 创建新文件

    • 启动 VS Code 后,点击“File” > “New File” 创建一个新文件。
    • 输入一些代码,例如 JavaScript 或 Python 代码,保存文件。
  2. 运行代码

    • 安装相关语言的扩展后,你可以直接在 VS Code 中运行代码。
    • 例如,对于 JavaScript 文件,可以在终端中运行 node filename.js

安装完成

至此,你已经成功在你的 Windows 或 macOS 系统上安装了 Visual Studio Code,并进行了基础配置。你现在可以开始使用 VS Code 进行代码编辑和开发了。

安装nextjs框架

一切就绪后,我们就可以开干啦~🙇‍♂️。

我们打开vscode,按照nextjs的官方指引,创建next开发环境。 使用vscode打开我们的目录,例如,我这里是DesignAndCode目录。 打开终端:查看-终端。

在终端依次输入:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

注意,这里会询问是否使用Tailwind CSS,必须选择这个,这是保证美观度的关键!!

其他项目设置,就随意。等完成安装后,我们就可以清楚GPT了。

使用gpt生成代码

现在就可以使用gpt生成代码了,像老板一样,让AI为我们服务。 提示语:

结合nextjs框架,使用tailwindcss,写一个好看的计算器web程序。hover时有自然的交互动画。

这里要注意,必须框定一个开发框架,你可以是其他的vue之类的,然后就是使用tailwindcss,这个前面说了,是保持美观度的一个重要提示语。

然后GPT给我输出一堆东西:

创建一个好看的计算器Web程序,首先需要设置一个HTML框架,并使用Tailwind CSS进行样式设计。下面是一个简单而美观的计算器示例。


将上述计算器代码与Next.js框架结合,可以按照以下步骤进行操作:

styles/globals.css中添加以下内容:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

创建Calculator组件

components文件夹中创建一个新的文件Calculator.js,并添加以下代码:

import { useState } from 'react';

export default function Calculator() {
  const [display, setDisplay] = useState('0');

  const appendToDisplay = (value) => {
    if (display === '0') {
      setDisplay(value);
    } else {
      setDisplay(display + value);
    }
  };

  const clearDisplay = () => {
    setDisplay('0');
  };

  const deleteLast = () => {
    if (display.length > 1) {
      setDisplay(display.slice(0, -1));
    } else {
      setDisplay('0');
    }
  };

  const calculateResult = () => {
    try {
      setDisplay(eval(display).toString());
    } catch {
      setDisplay('Error');
    }
  };

  return (
    <div className="bg-white p-6 rounded-lg shadow-lg w-80">
      <div className="mb-4 text-right text-3xl font-semibold" id="display">{display}</div>
      <div className="grid grid-cols-4 gap-4">
        <button className="bg-gray-200 p-4 rounded-lg text-xl" onClick={clearDisplay}>C</button>
        <button className="bg-gray-200 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('/')}>/</button>
        <button className="bg-gray-200 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('*')}>*</button>
        <button className="bg-red-400 p-4 rounded-lg text-xl text-white" onClick={deleteLast}>DEL</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('7')}>7</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('8')}>8</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('9')}>9</button>
        <button className="bg-gray-200 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('-')}>-</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('4')}>4</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('5')}>5</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('6')}>6</button>
        <button className="bg-gray-200 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('+')}>+</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('1')}>1</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('2')}>2</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('3')}>3</button>
        <button className="row-span-2 bg-blue-500 p-4 rounded-lg text-xl text-white" onClick={calculateResult}>=</button>
        <button className="col-span-2 bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('0')}>0</button>
        <button className="bg-gray-100 p-4 rounded-lg text-xl" onClick={() => appendToDisplay('.')}>.</button>
      </div>
    </div>
  );
}

修改首页

pages/index.js中导入并使用Calculator组件:

import Head from 'next/head';
import Calculator from '../components/Calculator';

export default function Home() {
  return (
    <div className="bg-gray-100 flex items-center justify-center min-h-screen">
      <Head>
        <title>Calculator</title>
        <meta name="description" content="A simple calculator" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Calculator />
    </div>
  );
}

按照gpt给出的指引,依次创建文件,和填入代码。

最后,运行你的Next.js项目:

npm run dev

打开浏览器并访问http://localhost:3000,你应该会看到一个计算器应用。

c1.jpg

增加应用

后续的会简单很多,只要给gpt讲需求,我们只需要关注components组件的代码和在首页添加组件即可。

这套是我认为相对来说,好入门,同时方便后续扩展的方式,希望设计师们都学起来!让我们design & code!

好了,关于的分享介绍就到这里,有什么疑问或者问题,可以留言交流哦~

关注我公众号(设计小站):sjxz00,获取更多AI辅助设计和设计灵感趋势。

标签