生成网页：AI 直接把「低代码」干掉了

冲向超级个体
3,712 阅读4分钟

背景

最近参加了一个社群活动，主题是如何快速制作一个「海外工具站」来实现被动收入。活动里有非常详细和系统的指导手册，从实现网站、部署上线到如何宣传、如何变现写的都非常详细。

这里就把快速用 AI 实现网站的这部分拿出来分享一下，有惊喜，也有坑。

效果展示

网站地址：tradeday.trade/

国内地址：tradingdays.zldlwq.top/

image.png image.png

内容是一个股票市场的交易日历和 API，为了 SEO 友好，所以用了纯静态页面，直接用阿里云的 OSS 部署的，费用可以忽略不计。

从开始到上线，总共用了大概 7 天时间，但是写代码实际上加起来用了不到 2 天。因为好多东西都是第一次尝试，如果让我重新再来一次的话，估计 3 天内就能搞定一切。

用 Claude AI 写网页

活动手册里面推荐的用 Claude AI 写网页。只能说真香，把我第一次对话的效果给大家看下：

问：我想要做一个网页。网页里有一个大大的日历，显示的是当前月份。每个日期的格子里面可以展示一些文字或icon信息。

image.png

不但输出了代码，竟然还能出预览图，着实惊艳到我了。它默认用的 lucide-react，我让它换成我更熟悉的 Antd，结果出了点问题，先来看下效果吧。

问：把组件库换成 Antd，语言换成英文，并且用 TS 写

import React from 'react';
import { Calendar, Badge } from 'antd';
import type { Dayjs } from 'dayjs';
import type { BadgeProps } from 'antd';

interface CalendarEvent {
  type: BadgeProps['status'];
  content: string;
}

interface CalendarData {
  [key: number]: CalendarEvent[];
}

const MonthlyCalendar: React.FC = () => {
  // Simulated calendar data
  const calendarData: CalendarData = {
    1: [{ type: 'warning', content: 'Meeting' }],
    15: [{ type: 'success', content: 'Holiday' }],
    25: [{ type: 'error', content: 'Deadline' }],
  };

  const getListData = (value: Dayjs): CalendarEvent[] => {
    const day = value.date();
    return calendarData[day] || [];
  };

  const dateCellRender = (value: Dayjs): React.ReactNode => {
    const listData = getListData(value);
    return (
      <ul className="events" style={{ listStyle: 'none', padding: 0 }}>
        {listData.map((item, index) => (
          <li key={index}>
            <Badge status={item.type} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <Calendar
        dateCellRender={dateCellRender}
        mode="month"
      />
    </div>
  );
};

export default MonthlyCalendar;

这里碰到了 2 个问题，也算是自己踩的坑吧。

第一个问题还好，就是切换成 Antd 之后，它不能预览了。反正我本地也是要起项目的，所以把代码复制进来也是能够看到效果的。

第二个问题关于 TS。当时我还没有意识到问题的严重性……

因为我用 CRA（create react app）脚手架生成的项目，默认用的 TS。所以我特意让它生成 TS 的代码。这里出了点小问题，那就是我安装的 Antd 版本和它使用的不一致，有一些类型对不上，还得手动修改。这个问题后面再展开，我们先来继续看它的效果。

我又做了进一步修改要求：

问：做以下修改：

  1. 加一个一级标题：Trading Calendar。
  2. 去掉 Month/Year 的选择按钮。
  3. 增加一个多选框，选项就是 calendarData 里面的 type。calendar 里只展示选中的 type 数据。

cbf44b77e71776a1416b8dd0b0344b7.png

这里惊艳的是那个多选框与日历数据的联动，实现的特别好。接下来才是更惊艳我的：

问：换一个高级一点的背景。因为内容是股票交易日历，所以要显得专业一点。

1d5338cddc839abefe4dfef64b382b3.png

这简直是我这种没有设计能力的人的福音！！不得不说，它的审美比我好！！！接下来就是我自己的修修补补了。太细节的就不放上来了，直接给个小结吧。

总结

这是后来阶段性的成果：

image.png

效果我还是很满意的，关键是总共用了不到 2 小时的时间，真的是太香了。不过还是踩了一些坑的，否则还能更快一些，在这里列出来，供大家参考：

  1. 让 AI 生成代码最好用 JS。TS 出幺蛾子的可能性更大。比如我遇到的，组件库版本不一致，导致类型对不上。我还得纠正它的错误，否则后续它生成的代码我都得手动改一遍；
  2. Claude AI 每日有限额。会员每月 $20，这个倒是不出所料，只是最开始我不知道，问了很多低效率的问题。实际上让它生成基础代码（尤其是 UI 样式），然后自己微调，免费的额度是完全够用的；
  3. Claude 的优化功能。如果想让 Claude 在自己写的代码基础上再做修改，其实只要把 JS 文件传给它，然后告诉它需求就可以了。后续我的一些优化也都是这么做的。

总之，用 Claude 写网页的体验真的让我很惊艳。我甚至觉得，前两年特别火的「低代码」产品，直接就被干死了……总之，强烈推荐大家尝试类似的产品，真的特别爽。

好了，网页主体部分完成了，接下来还有 SEO 优化、icon 生成、云产品部署的步骤，各种 AI 工具也都特别惊艳。咱们下回接着说。

avatar
文章
阅读
粉丝