Using Machine Intelligence To Design And Build This Site

This website in its current form has been a long-term goal of mine. One of the challenges that Common Lisp faces to gain adoption is the lack of "energy": There is an ecosystem, there are users, and there are plenty of resources for learning, but nothing projecting a sense of dynamism, growth, or excitement for the language.

That's not surprising. Common Lisp doesn't typically attract a young audience that cares about the future of a programming language. Young people want to learn useful skills that will be both marketable and socially acceptable. The typical Lisp user is usually either a graybeard or academic getting paid to write CL already or a rouge coder looking to experiment who finds Lisp a good medium. The typical Lisper isn't concerned with social cues or money, only the utility that the language provides. Who cares what Common-Lisp.net looks like?

(common-lisp.net has been redesigned since I wrote this. The design does a good job of demonstrating the necessity for this site.)

And that's fine. The big brains don't need fancy GUIs. Why does a manual for a vital library even need CSS, really? In fact, fancy graphics might even be a counter-indicator of quality for the big brains. What deficiencies in coding skill or code quality are being hidden with all this marketing mumbojumbo, pal?

Of course, even if the typical Common Lisp user would like for every Common Lisp resource to have a website as nice as, say, Elixir's website or Next.js's website or even just PAIP's website, they are almost certainly not the ones with either the skills or motivation to make it happen. Obviously, it's a lot of work--logo designers, web designers, illustration designers, animation designers, front-end and back-end engineers, etc. get paid good money to make those websites look great.

But times are changing. Machine Intelligence empowers the motivated user to actually make great things. It enables users to become Almighty. Selling a language using high-powered propaganda is now within reach of those with the desire to do so.

I believe Lisp is great, other people should use it, and I want to make a resource for Lisp users that feels cool and modern without sacrificing utility to the reader. More and more these days people will simply ask LLMs to do everything for them, and so they may never read this site. But for new people considering Lisp, this website should serve as an important source of both knowledge and energy. When they come to this site, they should leave feeling excited. While the knowledge and help that Almighty Lisp provides will be high quality, the knowledge and help are secondary to the mission of getting people excited to use Lisp.

Lisp already has smart, capable programmers who've already written excellent learning resources (see: Touretzky, Norvig, The Cookbook, etc.). But it's time for a renewal of that knowledge and a source of excitement.

It took some time for me to get to the current design. The original Almighty Lisp landing page was built by me, with only some small LLM generated bits here and there. I built the CSS design system based on the Doom Emacs themes (1 and 2) I made, also by hand, with only a bit of support from LLMs. I originally thought about expanding upon the design, but after creating the eBook and publishing the Hardcover and making a monochrome theme for the Almighty Lisp: Lisp & Emacs Essentials web book, I started to see the aesthetic and utilitarian appeal of black and white and every color in between.

To start with, though, I asked LLMs to brainstorm some different designs right in code. At first, I left the task very broad: Make a magazine design for Almighty Lisp. It reused theme elements from the existing website and made...something. It wasn't very good, though. You can view it here.

I had a few sites that I thought might be good as references: County Highway's newspaper and Time magazine. Time is mostly a source of compositional ideas that I've since abandoned. County Highway is more interesting, though, because of it's tasteful use of typography. It uses 7 (!) fonts that elevate the otherwise plain composition into something really enjoyable to read and look at.

Some other more "designy" inspirations came from the incredible designers at Brass Hands and the amazing work by Mike at Creative Mints. Their use of typography, grids, and lines are phenomenal; their illustrations are badass; their logos are next level; the texture and flavor of their work glows with the reascendant frontier American spirit. Even with the help of LLMs my design couldn't even come close to theirs either in spirit or quality--but I tried to capture as much as possible while keeping the readability of the site intact.

I had LLMs make separate "magazine" prototypes mixing and matching County Highway with Time with a splash of Brass Hands decorative flare and conciseness, using Creative Mint's more spread out grid work + Almighty Lisp, etc. You can see some examples here, here, here, and here.

You can see in the last one the beginnings of the current design, but it's still pretty lame. I had the LLM copy the design into Figma and initially modified it, asking the LLM to create some patterns and components. I messed around with the logo--which I had also been working on separately without LLM help for a while--and logotype. I wanted something big and bold like the typography on the book cover, but something a bit more futuristic and techie.

After iterating on the same frames, I decided it would be better to preserve a history of changes (as I would usually do if I were working by myself anyway), so I started having the LLM duplicate and version each iteration we made.

After getting to a design that I basically liked, I asked the LLM to implement the design, taking into account the different features that were depicted in the design: A hero with integrated book advertisement or article TOC, three column article view with notes, series labels with part numbers and planned future series articles, series codes/labels/logos, etc. We iterated a lot on the core features as I was writing the first few articles.

I asked specifically that we make a static site generator so that I could write in Org files, upload them, and have them up and lightning fast to load. I'm still considering making a backend system with a GUI for doing bulk editing (project-level search and replace in Emacs is good but not so elegant for the purpose of editing multiple articles the way I want), but I'm going to flex the current system for a while before adding such features.

I built this site using a web framework I built with LLMs I call Shiso. It's a framework inspired by Django. I'll talk about it in a later article, but the point is that in addition to the functionality on this site, I've also built the more foundational structure that it sits in.

Once the design was 80% complete, it was time to start getting ambitious with the polish. I dug in, made edits to the code to play around with design elements and content, played with the design in Figma and had the LLM add my changes to the live site, etc.

One decision I made with the design was to eschew color and embrace my black and white period, but I couldn't help myself--I needed just a teeny tiny bit of color. But how and where?

I've seen people making very elaborate animations with Opus 5.5, and it had so far served me well in the creation of this design, so I decided to try something I've never considered before because it would have been too beyond my skill set: I asked Opus to add a chromatic aberration shader animation when clicking on certain links on the site. It's short, covers up some of the loading time, and adds just a tiny bit of color.

Additionally, I added the same scanlines and noise effects I used for the Lisp & Emacs Essentials book, with the noise tuned up a bit. The noise is really only visible where there are large blocks of black, meaning anything I want to bring attention to just needs to have a lot of black surrounding it. Readers right now won't even notice the noise because the text is too small. It adds a bit of life and texture without distracting the reader.

As I was adding polish to the design, I wanted to add a bit more character with some Japanese characters. I realized that I actually want to use several more fonts in the future, but fonts are huge (especially Japanese ones), so I wanted to find some way to gracefully load fonts while also letting readers get reading right away. I wondered if we could play that chromatic aberration animation between the time the font loads and the time it's rendered.

While testing the font-load animation, I opened the site in Safari and found that the animation was broken--the FPS close to 5FPS. So I got the LLM to make a new animation for Safari, but it was inferior to the original. The original uses an SVG filter to create a wavy effect. The first Safari iteration had bad colors and still had poor performance. However, I essentially followed its suggestions for continuing to increase the animation's performance. After we got the performance better, we worked on the colors and finally got something that looks good. I also discovered that the scanline and noise animations were causing some stuttering on weaker hardware (my phone), so we optimized those animations as well.

I could not have done the animation work myself. I would have been satisfied with just the scanlines and noise (which I could have figured out on my own). But the LLM was a force multiplier that I believe I have used tastefully to add character to the site while also making it feel better (hiding page load times and acknowledging the long font load times explicitly).

About those Japanese fonts: Opus 5.5 one-shot an upgrade of the free fonts I downloaded--adding the ability of the fonts to properly render when text-orientation: upright in CSS was set. Something I wouldn't have even considered until I saw the model's capabilities with animation. It also trimmed the character set to just the ones I use, saving significant space (since I use three different Japanese fonts, this is a huge savings).

This is how we go from average to Almighty--ambitious, thoughtful use of LLMs with an eye for quality over quantity. We test to ensure that not only the software works, but it feels good.

Just to summarize:

• I made a professional, design-studio-level design--iterated via a hybrid by-hand-by-prompt method in both code and Figma.
• I made a static site generator catered to my needs.
• I made a cool animation--conducting performance checks and refactoring to ensure it worked properly for as many users as possible.
• I modified a Japanese font to suit my design's needs.

I think the most important lesson is to be more ambitious much earlier in a project. Machine Intelligence can trivially create tools to help in the design and implementation process--exploration and iteration with those tools is powerful. When using ready-made assets of any kind, we should start with the knowledge that we can likely modify them trivially for our needs.

To enable ambition, we need to be able to imagine what is possible. To expand the range of possibilities we can imagine, I think playing with Machine Intelligence to explore both its capabilities, but more importantly, to explore ourselves and upgrade ourselves will be essential.

I also think increasing our familiarity with a wider range of human activities, beyond just our immediate interests, will be an important part of our continued education and the education we give to our children. Humans are copying machines, just like the models. But while they need to train their weights, we need to train our souls.

The man who can imagine more will have more.