Intro

In this article, I'll talk about how I used ChatGPT to write a new programming language to compete with Figma called Stylo.

I'll not go deep into the project as I wrote everything in the GitHub repository where you can find the app, the syntax, and the project's future. In this article, I'll focus on what I learned instead.

Context

A few months ago, I read a tweet on how the industry focuses on design-to-code instead of design-as-code. At first, I couldn't understand. That's what we do every day, I thought.

Then I started thinking of a more accessible language, faster to write than HTML and CSS. My brain clicked: "Somethinging like Microsoft's Bicep could work!". I took my notepad and opened VS Code.

That was only one problem. I never wrote a language or a compiler before.

Syntax

Luckily, ChatGPT was released a few days prior, and the internet said you can build new business without effort. We'll see how that went...

Disclosure
I don't have conversation screenshots as OpenAI updated the app and ordered chats by the last message instead of the first one. I deleted every conversation on top, thinking they were the newest ones... Sorry, I suffer if I see more than three tabs opened in a browser.

I started by submitting my ideal language, a mix of Bicep and Angular. I was proud of myself. ChatGPT, whom we'll call Gipi from now on, replied, "Great job, buddy! You are awesome! But here's a completely different language that's much better than yours".

I took my pride aside and refined its language with a few more messages until I was happy.

The syntax changes constantly during development as more cases arise.

Branding

As you know, naming is the most challenging part of programming. And I couldn't live knowing my project folder was called something like "design-language-test". I needed a name.

Gipi helped here too. We went back and forth a few times. I wanted something short, easy to remember, and that made sense.

We ended up with Stylo. Which I later found means pen in French. That is good enough for me. Now I can start coding.

First code

What I knew about compilers was that we needed at least three things:

• A lexer: to split the string into building blocks (tokens)
• A parser: to create an Abstract Syntax Tree (AST) representing the code
• A renderer: to converte the AST to HTML and CSS

I asked Gipi to create a lexer in Typescript, and few seconds I got it. I was amazed by how fast it was.

I then asked it to write the parser and, finally, the renderer. Job done. Ready to get rich.

Not really. Nothing was working. Actually, it was not even compiling.

Minimum Viable Product

Now the gory journey to make anything work starts. I wanted to use as less brain as possible, letting Gipi think on my behalf. I pay for it after all!

I started with the lexer, pasting the code and the error in the chat, applying the fix, running, repeat. This went on for several cycles until I did it myself. Gipi couldn't understand the code, like, "I am sorry, now I get it, here's the solution". But they were just lies.

Fixing the lexer was easy. Fixing, aka building-from-scratch, the parser was a different story. That took a couple of days in my spare time.

The renderer was relatively easy. Once you have the AST, you just convert the nodes to HTML, which is also a tree.

New features

Of course, I was unhappy with some basic features. I wanted the syntax to support anything I needed. I did everything on my own. At this point, the code was so complex that it was not worth trying with Gipi.

However, I still needed a web editor to use easily use the renderer. Here AI helped a lot as a glorified search engine. It told me which code editor to use for React, how to enable syntax highlight and create a pan and zoom frame.

However, when I asked for the actual code, again, nothing was working, and it was stuck in a loop. I ended up doing everything myself again.

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

Conclusions

If you read this far, you know what I am going to say. For a few more years, our jobs are safe. Gipi is great for boilerplate code, while Copilot is a faster autocomplete that I greatly appreciate.

However, we still need to put effort into what we do, know how to code and how things work. Most importantly, be ready to maintain what AI wrote for years to come.

Check the GitHub repository too!