two weeks is all you need
November 21, 2024
I built a website (twoweeksisallyouneed dot com) with just Claude 3.5 Sonnet, zero lines of code written by me.
Why I did this
So a couple weeks back I had a computer vision midterm and i was allowed a single page of notes. I decided to use Claude to generate a cheat sheet in LaTeX. It was crazy lol, I was able to cook up something usable in 15 mins.
claude is the best, this was made in 15 minutes pic.twitter.com/0tvIsdv34d
— ro/nin (@seatedro) October 24, 2024
Someone had asked me to make a similar cheatsheet for ML, but I thought why not get claude to make an entire website instead?
Early days
I didn't really give claude any specific information except what I wanted to build. My plan was as follows:
> build out the UI skeleton first
> populate with some dummy data
> set up a content pipeline
> tie up the ui with the data
> fix bugs
Claude decided to use react (Shocking).
With just a couple of chats I was able to get the retro/hacker/matrix style UI down. (It's going to be hard for frontend engineers to keep up with AI at this rate)
I spent some time building and adding secrets/easter eggs to the website which no one has found yet lmaoooo. If/when all the easter eggs are found, I will open source the repository. Good hunting until then bros.
Frustrations
Things got really annoying, really fast. As soon as I wanted to build some sort of content pipeline, everything went to shit. Claude, no matter how smart of an AI, is not human. It did not think ahead. If I was going to build out this website I would not have started with a barebones react/vite app. I would have probably gone for a full stack framework like sveltekit instead. Generating content for the website was/is a nightmare.
LLMs hallucinate, this is known, but did you also know how incredibly frustrating it is to get them to follow instructions? There were multiple instances where Claude (with all the 40% of project context of javascript code) generated a TypeScript interface and proceeded to spit TypeScript code. This project has 0 TypeScript????
The new edit in place nonsense was getting on my nerves. Half the time the output artifact wouldn't even change, and the other half it would mess up the changes. I have to mention "please use a new artifact" if I wanted any real usable code.
I was enthusiastic about building something with just Claude the first few days, then I started getting weary, and then eventually I wanted to take a sabbatical from using AI.
When the project context grows, (think like 20% or more), Claude seems to have a hard time using that information. Often times I found myself hitting send, and Claude would spit some nonsense, I would hit stop and paste any relevant code directly and then get some useful code. Context is probably the biggest annoyance I've had with LLMs.
Random thoughts
Perplexity (with claude 3.5) is great (to an extent) because it's essentially a RAG search so I was able to get somewhat up to date content for the resources and references sections from it.
I feel like I was able to ship something of decent quality for sure, but I lost a lot of brain cells during the process. Do not take away from the programmer the only thing he wishes to do, program.
Proompting
I didn't particularly do anything unique to get the best out of my prompts/chats. I did do everything in a Project on claude dot ai though, which let me set Project Instructions like so:
BE ENTHUSIASTIC. WE ARE GOING TO CHANGE THE WAY THE WORLD LEARNS WITH THIS WEBSITEππππ
LLMs seem to be much more open to doing anything you ask if you gaslight them, so go ahead and do it.
Here are some prompts that I used while building the website:
PROMPT
------
This is AWESOME:
* For the loading screen add some text that says "you can learn anything in two weeks"
* The ascii text is also weird, it says erain? is that supposed to mean something?
* Where did all my placeholder topics go?
* MOAR scrt scan lines
* The matrix rain needs to fall vertically and it should be subtle. On mouse move it should get a bit brighter (the char under the mouse)
What else do you think you could add? Surprise me
One time I asked Claude to add something and it started changing the existing UI?????
PROMPT:
------
OKAY, we have a beautiful boot sequence now.
let's flesh out the main content screen.
First let's fix some bugs:
* The animations restart everytime i move my mouse instead of continue organically
* What i mean is, when i move my mouse over the windows or around the matrix rain, the matrix rain restarts and so do the typewriter effect on the window title
Work on these
* [REDACTED] Easter eggs:
* Fun Features:
* "Power saving mode" that dims everything except what you're reading
....[REDACTED]
So many times I ended up editing the prompt and adding lines like this:
PLEASE DON'T CHANGE THE EXISTING UI. IT LOOKS GOOD BRO.
I'll just add some random prompts here
PROMPT
------
Broski, we need to make the UI responsive and shit.
Lot of people are reporting issues with it on mobile and smaller screens
PROMPT
------
what sort of content do u think we should add? i was thinking things like formulae, charts (for phd), code blocks (for eng), research papers, youtube video links, blog posts etc.
Let's think out loud how we're gonna do this before we proceed
PROMPT
------
`pasted_code.jsx`
Here is my current dashboard.
Here is some sample concept content i have:
`pasted_data.json`
I need you to render this beautifully in the dashboard.
Make any and all changes needed.
It needs to look beautiful.
And anything else u feel would be good.
List out the things you're adding before adding it okay?
Concluding thoughts
This was a good experiment, a success. If you have a clear vision for what you want your product to be, then AI can help you achieve that vision quite well!
However, I don't think I will be using AI for the foreseeable future. I feel like my learning is stagnating the more i use AI and I want to write my slop code with my own two hands. I might use avante.nvim
to quickly write some duplicated code here and there but by god, I miss coding. Actual coding.