Adil Mhira

-_-

[Adil Mhira @nachos_z]

My website was entirely coded by AI.

And no, it doesn't look like an AI-generated site.

Vanilla JS. Three.js. 3D character. Draggable post-its. Interactive diagnostic tools. Zero templates. Zero lines of code written by me. 400+ prompts with Claude.

400+ prompts. That's a lot. I won't pretend it was effortless. There were dead ends, rollbacks, moments where I had to rethink the whole approach. Some features took 30 prompts to get right. Others clicked on the first try.

But the result is there. A fully custom site that does exactly what I wanted. Not a generic output. Not a "good enough for AI" compromise. The real thing.

People think generative AI is all or nothing. Either the AI decides, or you code it yourself.

There's a powerful middle ground: full creative control, delegated execution. Like an art director working with a production studio. Except the studio fits in a browser tab.

Design is not pushing pixels. It's making decisions. No AI does that for you.

https://t.co/Ml1nfSHdfJ

#Claude #Anthropic #AI #PromptEngineering #UXDesign #WebDev #ThreeJS

[Adil Mhira @nachos_z]

@agispas @cursor_ai Nice shot ! I’ve used cursor too to do mine ! https://t.co/oJDMjsTw4m

[Adil Mhira @nachos_z]

@ohmymoonstein you're using fossflow give credit ! -> https://t.co/xSCcyJlH1I

[Paul Graham @paulg]

Prediction: In the AI age, taste will become even more important. When anyone can make anything, the big differentiator is what you choose to make.

https://t.co/3GQUlfH58t

[Adil Mhira @nachos_z]

No https://t.co/Ml1nfSHdfJ template. ~400 prompts with Claude as copilot. Vanilla JS, zero framework, zero dependency. A 3D character that tracks your mouse and dances, draggable post-its connected by SVG wires, a voice-powered diagnostic with ElevenLabs. Not your typical vibecoded website.

[Adil Mhira @nachos_z]

@arturitu @GoogleAIStudio brilliant ! @arturitu keep up the good work !

[Arturo Paracuellos @arturitu]

Iteration 04: Barista Time! ☕️ Giving agency to AI

Agents with @GoogleAIStudio Implementing world mechanics to pick & drop items, leveraging AI Agent function callings to manipulate the 3D based on the conversation flow.

The truth behind the clip: it’s far from perfect. 👇

[Adil Mhira @nachos_z]

@stakpak_dev @AustenMakers not yet ;-) let me enjoy my weekend with my kids ! ^^

[Adil Mhira @nachos_z]

My website was entirely coded by AI.

And no, it doesn't look like an AI-generated site.

Vanilla JS. Three.js. 3D character. Draggable post-its. Interactive diagnostic tools. Zero templates. Zero lines of code written by me. 400+ prompts with Claude.

400+ prompts. That's a lot. I won't pretend it was effortless. There were dead ends, rollbacks, moments where I had to rethink the whole approach. Some features took 30 prompts to get right. Others clicked on the first try.

But the result is there. A fully custom site that does exactly what I wanted. Not a generic output. Not a "good enough for AI" compromise. The real thing.

People think generative AI is all or nothing. Either the AI decides, or you code it yourself.

There's a powerful middle ground: full creative control, delegated execution. Like an art director working with a production studio. Except the studio fits in a browser tab.

Design is not pushing pixels. It's making decisions. No AI does that for you.

https://t.co/Ml1nfSHdfJ

#Claude #Anthropic #AI #PromptEngineering #UXDesign #WebDev #ThreeJS

[Adil Mhira @nachos_z]

The key is in planning complex tasks, managing tokens for budget if you don't have much cash, and keeping the big picture in mind because you still need a direction. As for the 400 prompts, some were massive and others very short when it came to fixing a position or a simple gesture. I lost a lot of time, and I'd say someone starting from a Figma file or looking to replicate something could easily cut that in half.

[Adil Mhira @nachos_z]

You're absolutely right! I was discussing with a dev friend. He told me that he was using Stack Overflow 90% of his time, copy-pasting stuff he knows how to articulate to build & solve his issue. We're all in the same "stay & pray" position before we see the result. And we iterate each time until we reach our goal.

[Adil Mhira @nachos_z]

It has always been the same. Bootstrap made every site look identical in 2012. Dribbble created a monoculture of gradients and card UIs around 2015. Material Design turned half the web into a Google product. Squarespace and Webflow templates did the rest. Vibecoding just accelerates the cycle. The real question has never been the tool, it's whether the designer has something specific to say. by the way check my portfolio and tell me if it has a soul ;-) https://t.co/iqtkp0TJAj

[Adil Mhira @nachos_z]

@mmuxdesign Thanks for the feedback @mmuxdesign ! definitely a valid point.
I already have a WCAG checklist in place. At this stage, I’m mainly exploring the experience, micro-interactions, and technical boundaries, before moving into optimization.

[Adil Mhira @nachos_z]

@Drdrecrd Around 18 hours. And yeah, writing prompts is real effort. A big chunk of the time goes into iterating, debugging, re-prompting, switching models when one gets stuck. The coding itself is fast. Getting the AI to do exactly what you want is the actual job.

[Adil Mhira @nachos_z]

@riish_me Beautiful! What was your biggest challenge in building it?

[Riish @riish_me]

@nachos_z Adil its soo clean loved it , 3d website are really fun to build i recently tried builiding one

[Adil Mhira @nachos_z]

@stakpak_dev I will try it for another project and get back to you ;)) is it compatible with all Providers ?

[Adil Mhira @nachos_z]

@Nagaraj_Dev143 Thanks a lot @Nagaraj_Dev143 ! I'm no longer just a product guy, but I'm still a geeky nerd ;-)

[Adil Mhira @nachos_z]

@stakpak_dev GitHub Pages + Vercel. It works, but I'm looking to move to something else. I find it limiting and .env variables are a pain to configure.

[Adil Mhira @nachos_z]

@Nagaraj_Dev143 Around 18 hours of work, budget around $500. But you could definitely do better on the cost side if you have a real plan in your head from the start. On my end it was a full exploration project, I was trying out Claude CLI, Claude Cowork, Claude + Cursor all at once.

[Adil Mhira @nachos_z]

I have a solid frontend background on top of my design experience, so I know how to make UI, UX and frontend decisions challenge each other.

My process: I'd scout popular and cool stuff out there, reproduce it on Gemini which is better than Claude for frontend work, then re-challenge the code on Claude, write my PRD on top of it to plan all the tasks, and implement. If the LLM couldn't handle it, I'd switch to a more powerful model. Great way to save money too.

For the Three.js parts, I had already shipped 3D projects with developers before, so I knew the key steps. Things like Draco compression to load GLB files faster for instance.

As for keeping the vision alive: design discipline. I always have a clear picture of the end result. The AI executes, but the direction stays mine.

[Adil Mhira @nachos_z]

@OWilson_bee A lot of back and forth to achieve what I have in mind, actually! Always trying to push the boundaries. But the most striking thing is the further I went, the more I wanted to add, and the more ideas it gave me. As if the AI was co-creating hand in hand with me.