从零开始使用 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)
上一篇 5天前
下一篇 5天前

相关推荐

  • 如何在Google Play日区进行支付与切换地区的详细指南

    1. 引言 在移动应用和游戏的世界中,Google Play(谷歌Play商店)日区吸引了众多用户的关注。日本作为全球第三大应用市场,拥有丰富且独特的应用和游戏。本教程将详细介绍如…

    2025年2月3日
  • Movo Cash虚拟信用卡使用指南

    Movo Cash是一款便捷的虚拟信用卡应用,以下是详细的注册和使用流程。 Movo Cash的卡BIN Movo Cash的卡BIN为422803。 注册前的准备工作 在注册Mo…

    文章 2025年2月1日
  • 【2025 年 OnlyFans 充值与订阅全攻略】

    大家好,本文将为您详细介绍如何在 OnlyFans 上进行订阅和支付,帮助您轻松订阅您喜欢的博主(使用虚拟信用卡)。 一、OnlyFans 简介 OnlyFans 是一个日益流行的…

    2025年2月9日
  • ChatGPT 注册指南:详细步骤解析

    01 准备工作 网络代理软件 国外接收验证码的手机号(详见第3部分) Google Gmail邮箱 02 相关地址 OpenAI 官网:openai.com ChatGPT 首页:…

    2025年1月31日
  • 推荐几款支持 ChatGPT Plus 的虚拟信用卡

    随着人工智能(AI)技术的不断发展,越来越多的人在日常工作和学习中利用 AI 来提升效率。其中,ChatGPT 是当前使用较为广泛的 AI 工具之一。然而,在国内开通 ChatGP…

    文章 2025年2月12日
  • 野卡虚拟卡的可靠性分析

    野卡虚拟卡为国内用户提供了一种便捷、安全的跨境支付解决方案。通过简单的注册和充值,用户可以获取虚拟信用卡,轻松订阅国际服务,如OpenAI和GitHub Copilot。其隐私保护…

    3天前
  • 如何免费体验 Google Gemini 2.0 及 Gemini Pro 绑卡升级完整指南

    Google 最近发布了最新的 Gemini 2.0 模型,其多模态能力与 ChatGPT 不相上下,甚至在某些功能上更胜一筹。Gemini 2.0 不仅具备视觉、听觉和语言能力,…

    文章 2025年2月17日
  • ChatGPT 国内会员类型与功能详解

    ChatGPT 在国内备受欢迎,但由于其付费会员服务涉及国际支付,许多用户在购买会员时遇到困难。如果你也在为如何购买 ChatGPT 会员发愁,本文将为你提供完整的解决方案,特别是…

    文章 2025年2月14日
  • 制作自己的 Telegram AI 智能助手:调用 Poe API 的指南

    前言 接到订阅者的投稿,他向我们介绍了自己开发的 Telegram Bot,支持调用 Poe API,目前已在 GitHub 开源。 目前,Poe API 可以无限调用(限个人,禁…

    2025年2月15日
  • ChatGPT Plus 订阅指南:轻松上手!

    OpenAI 最近正式推出了 DALL·E 3,ChatGPT Plus 用户可以直接体验。与 GPT-3 相比,GPT-4 提供了更多功能,包括联网、数据分析和插件等。在使用 G…

    2025年2月4日
  • 如何在国内注册使用Claude?Claude 3.5与GPT 4o的对比

    大家好!最近有很多人提到Claude的封号问题,这主要是因为Claude对网络环境的检测非常严格。不过不用担心,我找到了一些在国内升级到Claude 3.5的步骤,分享给大家! 更…

    2025年2月2日
  • ChatGPT 4.0 苹果礼品卡购买指南及常见问题解答

    随着 ChatGPT 4.0 的流行,越来越多的用户选择使用苹果礼品卡来购买或续订其服务。本文将详细介绍如何使用苹果礼品卡购买 ChatGPT 4.0,并解答一些常见问题。 如何购…

    文章 2025年2月24日
  • Midjourney 优惠码详解

    随着网络购物的普及,优惠码已成为消费者享受购物优惠的重要工具。Midjourney 作为一个知名的在线购物平台,其提供的优惠码备受关注。本文将深入探讨 Midjourney 优惠码…

    文章 2025年2月13日
  • 如何在国内使用 Google Play 支付?添加付款方式及更改地区指南

    1. 引言 本文将为您详细介绍 Google Play 国内支付教程,包括以下内容: 如何借助虚拟卡在 Google Play 使用支付宝支付。 如何更改 Google Play …

    文章 2025年2月19日
  • 如何在敦煌网使用Visa付款?支付方式全解析

    敦煌网支付方式全解析 敦煌网作为国内知名的跨境电商平台,为用户提供了多样化的支付选择。要使用Visa信用卡付款,用户需先登录敦煌网官网或手机应用,选择商品并加入购物车,接着进入结算…

    文章 2025年2月26日
  • 如何在国内顺利使用Midjourney?

    Midjourney是一款备受欢迎的旅行交友应用,旨在为用户提供一个平台,让他们在旅行中结识新朋友或找到当地导游,以更好地了解目的地的文化与景点。然而,在国内使用Midjourne…

    文章 5天前
  • 如何在 Google Play 上申请退款

    在使用 Google Play 时,用户有时可能会错误地购买应用程序或内容。在这种情况下,您可以申请退款,但必须尽快进行,以便应用程序能够直接处理退款。如今,这项服务在全球范围内都…

    3天前
  • ChatGPT Plus 订阅与购买指南

    自从 ChatGPT 发布以来,许多用户已经体验到了其强大的功能,深深被其魅力所吸引。然而,仍有不少用户在注册和升级 ChatGPT 时遇到困难。本文将为您提供详细的解决方案,帮助…

    文章 2025年3月5日
  • Claude订阅指南:2025年国内如何充值购买Claude

    Claude是一款功能强大的AI对话模型,其最新版本Claude Sonnet 3.5在处理复杂指令、理解上下文以及生成自然文本方面表现尤为出色。许多人认为Claude Pro是C…

    3天前
  • 什么是虚拟信用卡?

    什么是虚拟信用卡? 虚拟信用卡(Virtual Credit Card,简称 VCC)是一种用于在线支付的临时信用卡号码。与传统的实体信用卡不同,虚拟信用卡没有实际的塑料卡片,所有…

    2025年2月8日