介绍

在本文中，我将讨论如何使用 chatgpt 编写一种新的编程语言，以与 figma 竞争 stylo 。

当我在 github repository中写所有内容时，我不会深入研究该项目，您可以在其中找到应用程序，语法和项目的未来。在本文中，我将重点关注我学到的知识。

语境

几个月前，我读了一个tweet，介绍了该行业如何专注于设计对代码而不是 design-as-as-assode 。起初，我听不懂。我认为这就是我们每天要做的。

然后，我开始考虑一种更容易访问的语言，比 html 和 css 更快地写作。我的大脑点击了：“像微软的Bicep一样有效！” 。我拿走了记事本，打开了 vs代码。

那只是一个问题。我以前从未写过一种语言或编译器。

句法

幸运的是， chatgpt 在几天前发布，互联网表示您可以不用付出任何努力来建立新业务。我们将看到如何进行...

披露
我没有关于 OpenAI 更新应用程序的对话屏幕截图，并通过最后一条消息而不是第一条消息订购了聊天。我删除了上面的每次对话，以为它们是最新的对话...对不起，如果我在浏览器中打开了三个以上的选项卡，我会遭受痛苦。

我首先提交理想的语言，二头肌和 angular 的混合。我为自己感到骄傲。 chatgpt ，我们将从现在开始称为 gipi ，回答：“好，哥们！ 。

我将自己的骄傲放在一边，并用更多的消息来完善其语言，直到我感到高兴为止。

随着越来越多的情况，语法在开发过程中不断变化。

品牌

您知道，命名是编程中最具挑战性的部分。而且我不知道我的项目文件夹被称为“设计语言测试”。我需要一个名字。

gipi 在这里也有所帮助。我们来回走了几次。我想要一些简短，易于记住的东西，这很有意义。

我们结束了 stylo 。我后来发现这意味着笔法语。这对我来说已经足够了。现在我可以开始编码。

第一个代码

我对编译器的了解是，我们至少需要三件事：

• lexer：将字符串分为构建块（令牌）
• 解析器：创建代表代码的抽象语法树（AST）
• 渲染器：将AST转换为HTML和CSS

我要求 gipi 在 typescript 中创建一个lexer，我得到了几秒钟。我对它的速度感到惊讶。

不是真的。什么都没有用。实际上，它甚至没有编译。

最低可行产品

现在开始进行任何工作的血腥之旅开始。我想尽可能少地使用大脑，让 gipi 代表我思考。我毕竟要付钱！

我从lexer开始，粘贴代码和聊天中的错误，应用修复程序，运行，重复。直到我自己做的，这一直持续了几个周期。 gipi 无法理解代码，例如，“对不起，现在我明白了，这是解决方案”。但是他们只是谎言。

修复Lexer很容易。修复，又名从划痕的建筑物，解析器是另一回事。在我的业余时间花了几天。

渲染器相对容易。拥有 ast 后，只需将节点转换为 html ，这也是一棵树。

新功能

当然，我对一些基本功能不满意。我希望语法能够支持我需要的任何东西。我自己做了一切。在这一点上，代码是如此复杂，以至于不值得尝试使用 gipi 。

但是，我仍然需要一个Web编辑器来轻松使用渲染器。这里 ai 作为荣耀的搜索引擎有很大帮助。它告诉我要用于 react 的代码编辑器，如何启用语法突出显示并创建锅和缩放框架。

但是，当我要求实际的代码时，又一无所有，它被卡在循环中。我最终再次做了一切。

component Footer(primaryText = "Ok", secondaryText = "Cancel") {
  block(class="p-4 flex justify-end gap-2 border-t-2") { 
    SecondaryButton(secondaryText)
    PrimaryButton(primaryText)
  }
}

结论

如果您读到这么远，您会知道我要说的话。多年来，我们的工作是安全的。 gipi 非常适合样板代码，而 copilot 是一个更快的自动完成，我非常感谢。

但是，我们仍然需要付出努力，知道如何编码以及如何工作。最重要的是，准备好维护未来几年的 ai 。

也要检查 github repository！