停止 Vibe 编码并轻松构建可用于生产环境的应用程序😎⚡️

人工智能正在改变开发人员的工作方式。

今天，我们拥有令人惊叹的工具，可以比以往更快地设计、编码和发布产品。

从设计助理到编码副驾驶员，人工智能生态系统正在帮助团队快速行动并使原型创意变得简单。

虽然许多工具都注重速度和探索，但也有一个工具更进一步，专为那些认真对待自己的想法并构建真正的应用程序的人而设计，而不仅仅是使用代码。

我说的是Dualite 的 Alpha。

在这篇博客中，我们将探讨 Alpha 的独特之处，以及我们如何使用它来快速构建具有严肃前端工作的真实应用程序。

Alpha 是什么以及它的作用

Dualite 的 Alpha 专为希望快速工作且不牺牲质量和一致性的开发者打造。它是一个专注于前端的平台，可让您在稳定的工作流程中完成设计、编码、连接 API 和部署应用程序。

与使用模板的工具不同，Alpha 不仅为您提供预制块，还帮助您根据自己的想法、设计和真实 API 构建应用程序。

借助 Alpha，我们可以做很多事情，例如：

• 快速 API 集成
• 将 Figma 设计转换为代码
• 部署
• 构建原生应用
• 等等，我们将在接下来的部分中详细探讨。

试用 Alpha

Alpha 的功能和概述

让我们更详细地探索 Alpha。要开始使用 Alpha，请访问此链接。在那里，您需要点击“开始构建” 。

之后，您需要填写基本信息并点击确认。之后，您将在邮件中收到一个访问链接，您可以使用该链接访问 Alpha。

Alpha 看起来是这样的：

• 在左侧，您可以看到所有聊天和消息限制。
• 在中心，有多个选项可供使用。

Dualite 的 Alpha 版提供不同的定价方案。免费用户最多可发送 5 条消息，而订阅用户可以发送无限条消息。您可以点击此处查看价格。

现在，您可以看到我们有多个选项。我们可以选择 React Native、Flutter、React + Tailwind、Shadcn、Angular 等框架。我们还可以在 JavaScript 和 TypeScript 之间进行选择。

接下来，有一个文本区域，用于编写包含四个选项的提示。您可以附加图片和 Figma 设计图，添加 API，甚至添加代码规则。选择一种语言和框架，然后从建议中选择选项，或者使用您的样式、规则和 API 编写提示。

因此，让我们逐一探索这些功能，它们的威力一定会让您感到惊讶。

Figma 的 Alpha 版本

我们将探索的第一个功能是 Figma to Code。作为开发者，我们经常使用原型，而 Figma 设计是我们的基本需求之一。使用 Alpha 版本，您可以附加您的 Figma 设计，它会根据该设计生成应用程序。使用此功能：

• 前往 Alpha。
• 单击此处即可附加您的 Figma 设计。

• 将打开一个对话框。在这里，单击“连接 Figma”。

允许访问

现在已连接。请在此处导入 Figma 链接。 添加设计链接时，请按以下步骤操作：

1. 在 Figma 中打开你的设计文件
2. 选择要转换的特定帧
3. 右键单击 → 复制/粘贴为 → 复制链接至选择
4. 将复制的 URL 粘贴到上面的字段中

我正在使用这个设计。

我已经添加了链接，并且它已导入。

点击“继续”。现在选择“框架”和“语言”。编写一个简短的一次性提示。

它开始生成……👇

并且，它已经完成了。

Alpha 很快就创建了一个与 Figma 设计相匹配的 UI。是的，它仍然需要一些调整，例如在表格和分页之间添加空间，以及调整组件的圆角。我们可以直接在 Alpha 的代码编辑器中修复这些问题，也可以使用其他提示来请求这些更改。

您可以直接从那里请求更多更改或为其他屏幕添加更多 Figma 设计。

Figma 设计是其中之一，但 Alpha 在许多其他方面也表现出色。那么，现在让我们来探索一下这些功能。

带有 API 的 Alpha 版本

Dualite 的 Alpha 提供了以两种方式集成 REST API 的独特功能。

1. 它可以根据前端结构自动创建一个“虚拟”API，以展示如何开发API。
2. 您可以直接复制并粘贴您的 API Swagger 文档或 OpenAPI 规范，它将自动确定哪个 API 端点应该连接到哪个设计元素。

如果您尚未准备好 API，但将来会拥有端点，则可以使用第一种方案。当您的 API 端点已准备好集成时，请使用第二种方案。

目前，我拥有 API，因此我将使用第二种方案。我将使用从 Postman 获取的Lyrics API。由于 Postman 不支持 JSON，您需要将该格式转换为 OpenAPI 规范。您可以在此处进行操作。

那么，请前往Alpha。单击该图标即可附加 API。

现在，请在此处粘贴您的 API。您可以选择 Axios 或 Fetch。我在这里使用了 Axios。

API: 

{

- swagger: "2.0",
- info: {},
    - version: "1.0",
    - title: "Studio1",
    - contact: { }
- host: "api.lyrics.ovh",
- basePath: "/v1/beatles",
- securityDefinitions: { },
- schemes: [],
    - "https"
- consumes: [],
    - "application/json"
- produces: [],
    - "application/json"
- paths: {},
    - /{title}: {}
        - get: {}
            - description: "Searches for the lyrics of an artist and song title.",
            - summary: "Lyrics Search",
            - tags: [],
                - "Music"
            - operationId: "LyricsSearch",
            - deprecated: false,
            - produces: [],
                - "application/json"
            - parameters: [],
                - {}
                    - name: "title",
                    - in: "path",
                    - required: true,
                    - type: "string",
                    - description: ""
            - responses: {}
                - 200: {}
                    - description: "",
                    - headers: { }
- tags: []
    - {}
        - name: "Music",
        - description: "These are public API endpoints for music."

}

点击继续。

可以看到API已经添加好了，选择框架和语言，然后写个简短的提示就可以了。

不到一秒钟，它就开始建造了。

几秒钟之内，它就构建好了完整的应用程序。它运行完了所有命令，现在我们可以使用它了。

在测试之前，我会请求再做一项修改。这项修改是添加一个艺术家姓名字段，并将其集成到端点中。因此，我使用了以下提示。

Allow user to enter the artist name as well. Do not make Beatles static. Ask for artist name and sonng name for lyrics.

现在可以使用了。

现在我已经搜索了这首歌，我们开始吧！

你看，这有多简单！我不需要阅读任何文档或 API 接口。我只需要对想要构建的内容有一个清晰的愿景，就这么简单。剩下的就交给 Alpha 了。

现在你也可以检查响应速度了。该应用已经完全响应了。

您可以查看代码、编辑代码、在终端中运行命令、将代码下载为 zip 文件，甚至可以直接从这里部署它 [我们将在此之后立即检查部署情况]。

我们的应用程序已经准备就绪，现在是时候检查部署部分了。

Alpha 部署版

Alpha 可让您立即直接部署您的应用并与全世界分享。您可以将 Alpha 与Netlify连接，然后只需单击一下即可部署您的应用。点击此处的部署按钮。 然后，将 Netlify 与 Alpha 连接。 点击确认部署。然后，它就开始部署了。

正在部署 我们的应用已部署。您可以从这里访问它。

现在，我们已经了解了 Figma 部分、API 集成部分，甚至部署部分，但所有这些都是针对 Web 的。那么，移动端呢？是的，正如我之前提到的，Alpha 版本支持 React Native 和 Flutter 等原生框架。这意味着你可以直接从这里构建一个完整的原生应用。

原生应用的 Alpha 版本

使用 Alpha，构建原生应用变得更加轻松。您只需选择 React Native 或 Flutter 框架，选择语言，然后输入提示即可。就这样。Alpha 将处理整个流程，为您构建原生应用。

正如您在此处看到的，我使用了这个提示并在此处选择了框架和语言。

Build a clean, minimal app with daily guided sessions, a caming tmier, streak traker, and soothing background visuals.

我没有附加任何设计或 API，因为我目前没有。那么，让我们看看结果如何。按回车键。

它开始建造它。

现在，它正在构建中。如果您想在移动设备上查看预览，可以下载 ExpoGo 应用程序。如果您想了解更多关于 Expo 的信息，可以访问他们的官方网站。

现在完成了。但是，正如你所看到的，由于图像文件的原因，我们得到了一个错误。

现在，让我们给出一个小提示来修复所有错误。我使用了这个提示。

Fix all errors and make it work

现在它已经完成并完成了。

您可以通过 ExpoGo 应用程序查看应用程序的预览或扫描此二维码（位于终端中）以在您的移动设备上查看它。

看看 Alpha 如何出色地构建了一款在原生设备上完美运行的原生应用。您也可以点击此处查看预览。

由于它是原生应用，所以无法在 Web 上部署。目前，所有显示的数据都是静态的，但一旦您将 API 提供给 Alpha，它就会与我们的应用集成。

安全阿尔法

我们用 Alpha 构建了很多东西，但现在我们担心的是隐私问题。

在构建 AI 应用时，隐私和数据安全始终是重中之重。正因如此，Alpha 采取了一种截然不同的方法，一切都在浏览器中本地进行。

任何提示、代码或配置都不会发送到 Alpha 的服务器。任何内容都不会到达 Alpha 的服务器。您的所有提示、消息和代码都安全地存储在浏览器的本地 IndexedDB 中。

即使你通过 Alpha 的 API 集成意外添加了 API 密钥，它们也会立即检测到，并要求你使用自己的方法（例如环境变量）重置密钥。这可以防止你的密钥因 AI 错误而泄露。

您上传的任何资产？它们会通过您自己的 S3 URL传输，而不是他们的。Alpha 绝不会触碰您的文件或凭证。

这让您在享受 AI 的强大功能和速度的同时，还能安心享受真正的本地开发。

Github 导入 Alpha 版

到目前为止，我们都是使用 Alpha 从零开始构建所有内容的。但是，如果我们已经有了一个项目，并想在其中添加特定功能，该怎么办呢？为了解决这个问题，Alpha 引入了导入功能。

您可以将任何现有的前端项目从 GitHub 直接导入到 Alpha 版本。只需通过 GitHub 进行身份验证并粘贴代码库链接，即可导入所有 GitHub 代码。

Alpha 将导入整个代码库、安装依赖项并设置好一切，以便可以在平台上运行。

Alpha 可以处理复杂的导入操作，因此您可以导入各种规模的项目，无论规模大小。它也能与 Angular 等传统框架兼容。

这样，如果您已经构建了某些东西，则无需重新开始，您可以继续进行您的项目或在 Alpha 内部添加新功能。

观看视频了解更多详情。在这里，您将了解导入的工作原理以及项目加载后发生的情况。

现在我们已经了解了所有功能，并对 Alpha 版本进行了概述，也了解了它的功能。接下来，让我们构建一个应用程序来一起测试一下。

我们正在构建什么

我们将开发一款习惯追踪应用，用户可以在其中添加日常习惯、将其标记为已完成、在日历中查看进度以及追踪连续习惯。因此，为了开发这款应用，我们将首先进行 Alpha 测试。

我有一张设计图像，所以我将使用这张设计图像。

在 Alpha 中附加图片并写一个提示。我正在使用这个提示。

Build a habit tracker app where users can add daily habits, mark them as complete, view progress in a calendar, and track streaks.

另外，由于我目前没有任何 API 但将来可能会添加一个，所以我单击了附加 API 图标，选择了第一个选项，然后检查了 YAML 选项。

一切就绪。只需按 Enter 键。 它就开始构建了。

现在完成了。生成的 UI 看起来与原始 UI 非常相似，但仍有一些细微的差异，可能需要进行一些调整。例如，我们需要对日历进行一些更改。

主要功能（例如添加习惯和将习惯标记为已完成）正常运行。但是，“进度”和“最高连胜”部分未更新，因为我们尚未添加 API 或在提示中指定动态行为。

除此之外，Alpha 还创建了一个完整的habit-tracker-api.yaml文件。该文件作为所有 API 端点的单一真实来源，包含其预期的有效负载、方法和响应。

这种结构化的 YAML 简化了未来的集成，无论您是模拟 API 进行前端开发，还是稍后连接真实的后端逻辑。您还可以将此文件与 Swagger UI 或 Postman 等工具结合使用，快速测试或记录您的 API。

现在，您可以根据需要下载代码或直接从这里部署。此外，要测试此 YAML 文件，您可以转到 Swagger 编辑器并粘贴所有 YAML 代码来试用该 API。

因此，您会看到 Alpha 不仅帮助编码，而且还专注于构建随时可以部署并向世界展示的真实应用程序。

为什么它不仅仅是 Vibe 编码

如今，许多 AI 工具都能在几秒钟内创建 UI。你输入一个提示符，突然间就会出现大量代码。但任何真正的开发者都知道，快并不一定意味着好。这些工具通常会创造出我们所说的“氛围编码”。这种编码在演示中可能看起来很棒，但它很混乱，难以维护，在严肃的代码库中肯定不受欢迎。

Dualite 的 Alpha 与众不同。它不是另一个“AI 游乐场”。它是一个专注于前端的严肃平台，专为那些注重编写优质代码的人打造。这些人希望自己的业余项目能够扩展规模，将 MVP 转化为产品，并让他们的工具尊重工程工艺。

Alpha 始终鼓励：

• 可重复使用和模块化的组件
• 干净的代码架构
• 正确的 API 处理
• 以及可投入生产的输出

结论

在这篇博客中，我们探讨了 Alpha 如何简化全栈应用的创建，从 Figma 的设计到 API 的集成，再到移动应用的构建，所有这些都在一个平台上完成。我们了解到：

• Alpha 自动生成干净、可编辑的代码
• 您可以集成零样板的 API
• 您可以轻松创建和预览本机应用程序。
• 并且，通过 Netlify 轻松部署您的 Web 应用程序。

对于那些厌倦了一次性 AI 生成代码的开发人员来说，Alpha 提供了一些真正的东西。在这个过程中，您的想法可以在几分钟内变成可运行的应用程序，并且拥有您可以依赖和发展的代码库。

告别氛围编码。立即使用 Alpha 版本构建实用的生产级应用。本篇博文就到这里，我们下篇再见。

重要链接：

• 阿尔法
• Alpha 文档
• 音乐应用的实时 URL
• Figma 链接
• Swagger 编辑器