用了 gpt4 已经有一段时间了，特别是 gpt4o 出来之后，简直是给我的开发效率提升上了一个量级。

最近，我一直在使用 TailwindCSS 作为我的 CSS 开发方案。对于像 GPT 这样的大型语言模型（LLM）来说，返回更少的 token 可以更高效地满足需求，而 TailwindCSS 恰好非常适合这一点。因为它提供了预定义和组合好的 CSS 类名，我们只需直接使用这些类名即可，无需编写冗长的样式代码。

应用这一特点，我们再借助 GPT4 所提供文件上传的功能，那我们的开发效率就可以很好的提升了。

借助 GPT 实现生成组件

首先我们先选取一个我们要编写的组件来作为案例，如下：

然后再将你的图片和你的需求直接丢给 GPT，后面等他慢慢生成内容就好了：

emmmm，你会看到它生成了很多废话，但是没关系，我们后面也可以让他生成得简介一点的，直接看他生成的吧，然后黏贴到项目中去：

最后打开浏览器查看效果你是可以看到跟掘金上面的基本差不多的，然后我们还可以让他在这个基础上修改的：

你看现在就是在原来的基础上加上了一些 prompt，它就直接给我们返回代码了，我们再看看具体代码所实现的效果是怎么样的：

哇，真的是太丑了，但是无所谓，我们还可以慢慢修的。

代码优化

除了生成 ui 之外，我们也可以用它对我们刚生成的代码来进行代码优化：

tsx 复制代码

import React from "react";

const NavBar: React.FC = () => {
  return (
    <nav className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 shadow-lg">
      <div className="container mx-auto px-4 flex items-center justify-between h-16">
        {/* 左侧LOGO及导航项 */}
        <div className="flex items-center">
          <div className="flex-shrink-0">
            <img
              src="/logo.png"
              alt="Logo"
              className="h-10 transform hover:scale-110 transition-transform duration-300"
            />
          </div>
          <div className="ml-4 flex space-x-6 text-white font-semibold">
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              首页
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              BOT
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              沸点
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              课程
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              直播
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              活动
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              竞赛
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              商城
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              APP
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              插件
            </a>
          </div>
        </div>

        {/* 中间搜索框 */}
        <div className="flex-1 px-2 lg:px-6">
          <div className="relative">
            <input
              type="text"
              placeholder="搜索稀土掘金"
              className="w-full border border-gray-300 rounded-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-shadow duration-300"
            />
            <button type="submit" className="absolute right-0 top-0 mt-2 mr-2">
              <svg
                className="h-6 w-6 text-gray-500 hover:text-yellow-400 transition-colors duration-300"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M21 21l-4-4m0 0a7 7 0 1110-10 7 7 0 010 10z"
                />
              </svg>
            </button>
          </div>
        </div>

        {/* 右侧用户操作项 */}
        <div className="ml-4 flex items-center">
          <button className="bg-yellow-400 text-white px-4 py-2 rounded-full hover:bg-yellow-500 transform hover:scale-105 transition-transform duration-300">
            创作者中心
          </button>
          <div className="ml-4 flex items-center space-x-6 text-white">
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              会员
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              <svg
                className="h-6 w-6"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15 17h5l-1.405-1.405C18.612 15.237 18 14.42 18 13.5V11c0-2.76-2.24-5-5-5S8 8.24 8 11v2.5c0 .92-.612 1.737-1.595 2.095L5 17h5m2 0v2m0-2H9m4 0h2"
                />
              </svg>
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              <img
                src="/user-avatar.png"
                alt="User Avatar"
                className="h-10 w-10 rounded-full border-2 border-white transform hover:scale-105 transition-transform duration-300"
              />
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default NavBar;

这个时候只需要我们把这些代码然后再把我们的需求附带上即可：

最终生成的效果如下图所示：

tsx 复制代码

import React from "react";

const navLinks = [
  { name: "首页", href: "#" },
  { name: "BOT", href: "#" },
  { name: "沸点", href: "#" },
  { name: "课程", href: "#" },
  { name: "直播", href: "#" },
  { name: "活动", href: "#" },
  { name: "竞赛", href: "#" },
  { name: "商城", href: "#" },
  { name: "APP", href: "#" },
  { name: "插件", href: "#" },
];

const NavBar: React.FC = () => {
  return (
    <nav className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 shadow-lg">
      <div className="container mx-auto px-4 flex items-center justify-between h-16">
        {/* 左侧LOGO及导航项 */}
        <div className="flex items-center">
          <div className="flex-shrink-0">
            <img
              src="/logo.png"
              alt="Logo"
              className="h-10 transform hover:scale-110 transition-transform duration-300"
            />
          </div>
          <div className="ml-4 flex space-x-6 text-white font-semibold">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="hover:text-yellow-400 transition-colors duration-300"
              >
                {link.name}
              </a>
            ))}
          </div>
        </div>

        {/* 中间搜索框 */}
        <div className="flex-1 px-2 lg:px-6">
          <div className="relative">
            <input
              type="text"
              placeholder="搜索稀土掘金"
              className="w-full border border-gray-300 rounded-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-shadow duration-300"
            />
            <button type="submit" className="absolute right-0 top-0 mt-2 mr-2">
              <svg
                className="h-6 w-6 text-gray-500 hover:text-yellow-400 transition-colors duration-300"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M21 21l-4-4m0 0a7 7 0 1110-10 7 7 0 010 10z"
                />
              </svg>
            </button>
          </div>
        </div>

        {/* 右侧用户操作项 */}
        <div className="ml-4 flex items-center">
          <button className="bg-yellow-400 text-white px-4 py-2 rounded-full hover:bg-yellow-500 transform hover:scale-105 transition-transform duration-300">
            创作者中心
          </button>
          <div className="ml-4 flex items-center space-x-6 text-white">
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              会员
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              <svg
                className="h-6 w-6"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15 17h5l-1.405-1.405C18.612 15.237 18 14.42 18 13.5V11c0-2.76-2.24-5-5-5S8 8.24 8 11v2.5c0 .92-.612 1.737-1.595 2.095L5 17h5m2 0v2m0-2H9m4 0h2"
                />
              </svg>
            </a>
            <a
              href="#"
              className="hover:text-yellow-400 transition-colors duration-300"
            >
              <img
                src="/user-avatar.png"
                alt="User Avatar"
                className="h-10 w-10 rounded-full border-2 border-white transform hover:scale-105 transition-transform duration-300"
              />
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default NavBar;

现在这样，它就帮我们优化了近 40 多行的代码，虽然这些栏代码也是它给我们生成的......

除了这些内容之外，我们还可以借助 GPT4o 来帮我们来进行协助开发，例如我们要实现一个暗��主题的，这些主题色就是在 tailwindcss 上做了配置，那么我们就可以完全不担心主题适配的了，等我们把组件编写完成之后，然后将 tailwindcss 的配置和我们所编写的代码一起丢给 GPT 即可，它可以自动帮我们生成主题色的类名，这对于我们的日常开发实在不要太爽了......

最后

如果你没有渠道去购买 GPT4o 账号，但是又想拥有一个这号，那么你可以联系我，价格还可以，合租下来的话一个月也就 30 来块，详情联系微信：yunmz777

自从用了 GPT4o，原来要 20 分钟写完的组件，我 5 分钟就能写完成了

借助 GPT 实现生成组件

代码优化

最后