从零开始使用 Claude 构建 Web 版 macOS 系统

最初在即刻看到这个项目时,我觉得非常有趣,联系了原作者进行探讨。我希望通过分享这个项目,与大家一起探索使用 Claude 3.5 构建复杂项目的能力,逐步将项目从简单到复杂地搭建,就像搭积木一样。

即使是完全的小白用户也可以轻松上手,无需搭建开发环境,只需一个浏览器即可。我还特意录制了视频,帮助大家快速入门,若有疑问欢迎留言讨论。

项目概述

MacAlverse 是一个开源的 macOS 风格桌面环境,完全由 AI 生成的复杂代码构建。这个流程特别适合不会写代码的用户,通过与 Claude 3.5 的互动,用户可以一步步完成从简单组件到复杂功能的搭建。基于这个项目,我还补充了使用 MarsCode 搭建开发环境的内容,小白用户无需自己搭建开发环境即可快速上手开发。详情请查看视频或文章,让你用 AI 成为开发大神。

项目特点

  • 组件化架构:项目采用组件化架构,将各个功能模块抽象为独立组件,灵活地构建整个桌面环境。
  • AI 辅助开发:通过与 Claude 3.5 的多轮对话,用户可以轻松生成所需的功能代码,免去手写 React 代码的烦恼。
  • 高扩展性:基于该架构,用户可以嵌入任何功能,只需将 AI 生成的代码放置到指定位置即可。

使用步骤

  1. 获取代码:将项目的 README 复制到 Claude 3.5 中,说明你想要实现的功能。
  2. 生成功能代码:输入具体需求,如“实现一个雷霆战机游戏功能”,Claude 3.5 会自动生成相应的代码。
  3. 粘贴代码:将 AI 返回的代码粘贴到项目目录的指定文件夹下。
  4. 运行项目:在本地运行项目,即可看到新增的功能。

构建过程回顾

以下是 MacAlverse 项目作者与 Claude 3.5 合作的过程和思路,非常值得借鉴,特别是在需要构建复杂程序时。

  1. 初始开发:作者通过 Claude 3.5 生成初步功能代码,所有功能集中在一个文件中。
  2. 功能拆分:功能完善后,Claude 3.5 协助作者将代码拆分到不同文件夹中,抽象出各个组件和文件夹结构。
  3. 组件抽象:将 macOS 的各个组件抽象出来,如 <Desktop> 下挂载 <MenuBar><Dock><Window> 组件。
  4. 配置载入:将 <Window><Dock> 的数据从 appConfig.js 载入。
  5. 新增功能:将新功能作为一个新的 <Window> 组件载入。

上述过程均通过与 Claude 的沟通得出,你无需自己编写代码。

示例操作

假设你想在 MacAlverse 中嵌入一个贪吃蛇游戏功能,可以按以下步骤操作:

  1. 输入需求:在 Claude 3.5 中输入“实现一个贪吃蛇游戏功能”。
  2. 获取代码:Claude 3.5 返回生成的游戏代码。
  3. 粘贴代码:将代码粘贴到项目的指定文件夹中,如 src/components/SnakeGame.js
  4. 配置载入:在 appConfig.js 中添加新组件的配置项。
  5. 运行项目:启动项目,即可在桌面环境中看到并运行贪吃蛇游戏。

通过以上方法,用户可以利用 AI 的强大能力,轻松构建复杂的桌面应用,享受编程的乐趣与成就感。

额外提示

如果你想调试和测试这个代码,但又不会搭建开发环境,该怎么办呢?我这里有一个方法,不用搭建任何开发环境就可以与 Claude 3.5 一起编写代码,构建复杂程序。

注册 MarsCode

我最近体验了一下 MarsCode,觉得特别好用,推荐给大家。它支持主流的编程语言,并且提供了非常方便的 Web 端 IDE,新手建议直接使用 Web 端的 IDE。

MarsCode

新建项目并导入 GitHub

项目导入界面

使用 Claude 3.5 创建新功能模块

  1. 复制项目的 README 内容

    GitHub – ssochi/MacAIverse: MacAIverse 是一个完全由 AI 生成代码构建的开源 macOS 风格桌面环境。我们鼓励贡献者利用 AI 工具编写大部分代码,以确保项目的一致性和创新性。欢迎大家加入我们,扩展这个 AI 增强的虚拟生态系统,添加新应用和功能。

  2. 打开 Claude 3.5 并启用插件

Claude 3.5 插件界面

  1. 粘贴 README 内容并输入需求,例如编写一个贪吃蛇游戏。

输入需求示例

  1. 复制生成的代码到 MarsCode 中

代码复制示例

最后,运行代码即可。如果需要安装依赖库,Claude 3.5 会给出安装命令。

安装依赖库命令

npm install

运行项目命令

npm run start

至此,你就可以在这个平台上扩展自己的 macOS 系统和功能了。作者也非常欢迎大家给他提 PR,如果有有趣的想法,可以一起贡献功能。再次感谢作者!

如果大家有什么好玩的 AI 和工作流程的想法,欢迎随时讨论。

希望这篇文章能帮助大家在 AI 和构建产品的路上提供一份微薄之力。如果觉得有用,欢迎点赞、转发和支持!

后记

根据上述项目的思路,我们可以拓展一下,用相应的方法构建不同语言的代码,比如 Python、Go 等都是可以的。

构建复杂的程序也可以借鉴这种思路,在这个场景下,能够创建比较好玩的程序。

👉 野卡 | 一分钟注册,轻松订阅海外线上服务

(0)
上一篇 2025年3月9日
下一篇 2025年3月10日

相关推荐

  • ChatGPT 购买全攻略:快速订阅方法与避坑指南

    摘要:本文详细介绍了ChatGPT的购买流程,帮助用户快速、稳定地完成订阅并避开常见陷阱。访问OpenAI官网并注册或登录账户,确保账户信息准确。选择适合的订阅计划,如ChatGP…

    文章 2025年5月25日
  • 如何注册 ChatGPT?

    在注册 ChatGPT 时,您只需一个海外邮箱和手机号接码。现在,您只需能够科学上网,即可轻松完成注册。 如果您已经有账户并希望快速升级到 Plus 版本,可以参考以下教程。 步骤…

    2025年6月12日
  • OpenAI 与 Azure OpenAI API 的比较

    由于定价和限制会随时间变化,本文仅供撰写当前时间参考。 1. 术语 RPM (每分钟请求次数)每分钟请求次数 RPD (每天请求次数)每天请求次数 TPM (每分钟 Token 数…

    文章 2025年7月19日
  • 如何在土耳其区购买 Adobe Photoshop

    今天我尝试了一下在土耳其区购买 Photoshop,过程非常顺利。本文将详细记录购买的步骤。 准备工作 在开始之前,请确保您具备以下条件: 一个土耳其节点(没有土耳其节点可能会导致…

    2025年8月22日
  • 虚拟信用卡:年费、费用与安全性解析

    招商银行虚拟信用卡是否收取年费? 招商银行的虚拟信用卡是一种便捷的在线支付工具,与传统实体信用卡不同,它仅存在于用户的手机或电脑中,适用于在线购物等支付场景。由于虚拟卡没有实体形式…

    2025年3月24日
  • 不用POS机!教你如何在1分钟内轻松取现虚拟信用卡

    如何轻松搞定工行虚拟信用卡?使用这款APP,让你的手机瞬间变成POS机,资金随时到账! 近年来,“虚拟信用卡”这个概念越来越流行,尤其是工行的虚拟信用卡,成为了追求便捷生活的朋友们…

    文章 2025年7月4日
  • 如何避免 Claude AI 被封号:处理“Your account has been disabled after an automatic review of your recent activities”提示

    “Your account has been disabled after an automatic review of your recent activities.” 是什么意…

    2025年7月17日
  • 我尝试了 X Premium 三个月 — 发生了什么?

    自2022年11月所有权易手以来,X(前称Twitter)经历了许多变化。其中最引人注目的变化之一是其付费层的名称和设计,以及新增了许多功能。 X Premium(前称Twitte…

    文章 2025年6月4日
  • 推荐的美国虚拟信用卡头BIN汇总

    本文将汇总市面上值得推荐的虚拟信用卡开卡平台资源,主要用于跨境电商、网络营销、跨境进口海淘采购等业务。 虚拟信用卡列表 428813 虚拟卡 卡组织:VISA 发行地:美国 卡类型…

    文章 2025年7月29日
  • 【亲测有效】获取AWS云服务器的完整指南:注册与验证

    AWS(Amazon Web Services)为全球用户提供强大的云计算服务,包括免费的云服务器(EC2)和其他云产品。本文将详细讲解如何通过AWS免费套餐获得12个月免费的云服…

    2025年3月17日
  • 代码神器 Cursor:究竟有多惊艳?

    在之前的讨论中,我提到过要介绍各种 agent 框架和 coding agent 的实现,但一直没能抽出时间。最近,我对 AI 辅助编程的产品进行了深入的探索,想和大家分享一下程序…

    2025年4月14日
  • 如何在中国地区注册Claude账号?

    要使用Claude Pro或Claude API等功能,首先需要注册一个Claude账号。Claude是由Anthropic开发的先进AI对话模型,注册后用户可以访问其免费或高级的…

    文章 2025年3月4日
  • Claude 会员支付指南

    我们很抱歉,React 应用在没有启用 JavaScript 的情况下无法正常工作。请启用 JavaScript 以继续使用。 视频教程推荐 以下是一些关于 Claude 会员注册…

    2025年4月4日
  • Claude:高效智能的AI语言模型

    近年来,人工智能技术飞速发展,语言模型作为自然语言处理的核心技术之一,已在多个领域得到了广泛应用。Claude 是一款备受瞩目的人工智能语言模型,以其卓越的性能和灵活的应用能力,在…

    文章 2025年7月10日
  • PayPal虚拟信用卡免开卡费:获取与使用指南

    随着数字支付的普及,越来越多的用户选择使用虚拟信用卡进行网上支付和购物。对于PayPal用户而言,虚拟信用卡不仅能提供额外的安全性,还能便捷地进行跨境支付。更重要的是,许多虚拟信用…

    文章 2025年8月11日
  • OpenAI的控制者:公司结构与董事会解析

    来源:AI范儿 本文将深入探讨OpenAI的发展历程,特别是其融资过程、公司结构的演变及董事会的情况。OpenAI独特的公司结构和董事会安排,正是导致其CEO及总裁突然离职的原因之…

    文章 2025年8月24日
  • 如何取消 Midjourney AI 订阅

    作为家长,您需要确保追踪 MidJourney AI 等订阅和其他费用。如果您正在寻找如何取消 MidJourney 订阅的信息,欢迎您阅读本文。我们将向您展示如何在不同平台上取消…

    文章 2025年6月5日
  • 如何申请免费海外 Visa 虚拟信用卡的详细指南

    海外云服务通常需要通过 Visa 或其他外币卡进行购买,但许多国内用户并没有外币卡,导致无法顺利获取像甲骨文这样的云服务。由于疫情,我曾注销了招商百夫长卡和交通万事达信用卡,最近又…

    文章 2025年7月12日
  • Adobe软件正版价格解析

    在当今数字创意领域,Adobe软件的正版使用成为了许多设计师和创作者的首选。本文将为您详细介绍Adobe软件的正版购买方式及其价格。 Adobe正版软件的购买方式 Adobe软件的…

    文章 2025年7月20日
  • 注册与订阅 _ 从零开始的 Midjourney AI 绘画创作指南

    Midjourney 是一款基于 CLIP 的 AI 绘画工具,能够将输入的文字提示生成图像(文生图)。本文将指导你如何注册 Midjourney,并创作出你的第一幅 AI 绘画作…

    文章 2025年5月30日