Jokes aside, I'm not mentioning who, but right on the front page of a popular vibe coding platform you can see a bunch of promoted real-world projects and almost all of them have some gaping security hole - and I'm not referring to the click-jacking kind.
/s
(Would it be too much to have a randomized password generated for each session/cookie?)
Also, kudos to you on the (realisticly accurate) advertising consent form!
Referencing https://news.ycombinator.com/item?id=45624294 , add a joke cookie banner.
Still happy to take credit.
On the one hand - I'm actually psyched that mostly nontechnical people have successfully launched their ideas into the world. This would have eaten up time and at least several $thousand previously.
On the other hand, they are both super blah projects.
Date I say it: The AI Slop Web App era has arrived in full force.
For some reason they gravitate to this style (and chern out reams of slop CSS to get there).
They really don't like the current trend of large hero graphics across the page so, as others have said, it feels like they're stuck in the last decade.
On the plus site, maybe websites will get faster when they're not weighted down with megabytes of component and JS libraries.
Also makes me wonder... will self-driving car training data be less and less based on human driving, and more based on how all the other self-driving cars behave?
Cars have a clear goal that one can test for.
The text content is largely hand written but the style/structures/etc are vibes.
Codex CLI on the $20 plus plan
The first shot was remarkably similar to the end result, but there was lots of tweaking and testing.
I have used Weebly in the past, just type in the text, choose pictures and you're done.
I do, for my pages. But when I write a Word document, I have absolutely no fucking clue what any of the underlying formatting code means. I feel like people forget that for ordinary desktop publishing, HTML/JS is a gigantic step backwards. Getting us back to the status quo of the 1990s, whether it's LLMs or Weebly, would be a very good thing.
I vibe coded a non-serious website for my vibe coded OSS project. But I had fun. :)
Wait, Not Enough Tailwind?
Someone said "Not enough tailwind. 6/10." So here's a literal tail in the wind.
[picture of cat, no tail visible, with alt text "Dog with tail blowing in wind"]
This is as close to Tailwind CSS as we're getting on a pure HTML site. But hey, we added rounded corners and shadows, so basically the same thing.
We offer this as our "Mini" package at a very affordable price ($99/mo, no setup fee) for clients who don't want (or need) a fully custom design.
I'm not sure you can call this "vibe coding" as much as "vibe engineering" because the resulting code closely models the heavily customized components and styling patterns of our other 60+ custom websites, but the following website designs were very heavily "vibe-derived", from a design sense:
Some people tried showing me a website called Google. It sounded like it should be a fun game, but it was really boring. Terrible graphics.
And, sure, that was valid. However, eventually everyone started figuring out how to get a unique look out of Bootstrap while still enjoying the benefits. All our modern frontend component frameworks can trace their lineage back to Bootstrap.
We'll see something similar with vibe UIs. Just a matter of time.
(also I think you can get far more variety from LLM-designed website with just a tiny bit of inspiration in your prompts)
it's honestly be best hack for using llms, just write precisely what you want in the language you want it in, and the response is instant and perfect every time.
Or just search around; my contact info is very easy to find.
index.html
index-working.html
index-revised.html
index-revised-2.html
debug-site-on-mobile-issue.sh
index-backup-2.html
DEBUGGING-RESULTS.md
CLAUDE.md
INSTALLATION-INSTRUCTIONS.md
(No I am not sharing the link as I was downvoted for it before - search for it. Hint: built with vibe)
I think the system prompt or training data probably focuses on marketing websites, it didnt manage to make a settings page or a canvas game, but did make a site telling me how to make a canvas game :)
How does it interpolate the path to make the prompt? (Havent checked the code yet…)
Interpolation happens in two steps. First, there's a prompt for an outline (below). Then, a prompt with the same construction rules but says like "given the outline..." and puts the outline into the context.
You are a professional web designer. Create a concise outline in markdown format of a site for the topic "{{slug}}".
Construction rules:
- Do **not** reference any external resources (fonts, CDNs, embeds, etc.).
- No JavaScript or SVG.
- All images must be JPG.
- All <img> tags must have a width and height.
- In CSS any image use must include object-fit: cover.
- All links must be relative to the root and be a long, descriptive slug of the content (like company-owner-with-hat.jpg
or goat-facts-continued.html).
- The site must display well on both desktop and mobile devices.
- Never use position: sticky;
The outline should include the following sections:
- **Site Name And Paragraph Summary** - a short description of the site and its purpose
- **Style guide** – typography (built-in font classes only), spacing, imagery tone, theme
- **Color scheme** – primary, secondary, accent, neutrals (name + hex)
- **Layout** – grid/flex description, breakpoints, reusable components
- **Site map** – unordered list of important pages with slug filenames
- **Key features** – bullet list
- **Reusable CSS/HTML snippet** – fenced code blocks showing the skeleton for nav, hero, article, and footer
Write clearly enough that different teammates could each build a page and the finished site will remain cohesive and
on-brand.Make sure you capture the essence of the topic in the design, be creative!
The best designed sites I use are those cookie-cutter illegal sports steaming sites because their design is so similar I can navigate them all the same way.
People like unique designs because those designs (ideally) exist to cater to the ever-so-slightly different needs, different things that different websites are meant to convey or do. It's not just about being pretty or looking not like everyone else, though some users and designers can mistake it for that.
Even something like video streaming can have lots of variations because there's so many different types of video content to serve. Optimizing for these needs will require making design choices, which will eventually compound in a unique UX. I enjoy websites that are fine-tuned for serving their purpose, and that manage to do so in a simple and performant way. Generic boilerplate designs can work fine on most 'average' websites, but going further requires putting more thought into it.
Take video streaming, like what you mentioned. Say, you have livestreaming available. How do you let the user go back and watch back old recordings? Split up the stream by days? Hours? Separate events? Have a video player with infinite seek? Be able to type in the date of the recording? A sports streaming site would answer these differently from a gaming site or your indoor camera's website. What about offering episodic content? Should it play back-to-back? Do you want fancy lists with thumbnails or will "Episode 1", "Episode 2" do just fine? Okay, now what about ad types? Should there be recommendations? Do you want a way to expand the player and dim the rest of the UI? And thousands more questions like these.
You need to make design decisions, it's inherent in the job. Being "average" just means relegating these decisions to something someone else has done before. And this can be done well, but it can also be done out of laziness that leads to obtuse GUIs that bother themselves more with current trends or eye candy than thinking about what it's made for.
Convince me a human can actually do better than this. It’s unclear what more is actually required from a website other than this. They point out things like not understanding authentication is bad, but at least the AI won’t develop a fundamentally incorrect idea about it like a human would.
Nobody ever got fired for checking ChatGPT for something that they didn’t know, but plenty of people without it have just made mistakes carefully read documentation and misinterpreting it.
Vibe coding is just the next dreamweaver....
I would rather have the web be somewhat boring than go back to geocities and myspace style atrocities.
Some blurb about how we are passionate a about startups, love our customers etc. No business name, human names or contact info though.
It was actually always there; you just missed it. Claude is so smart that it both predicted this comment and linked to it before you made it.
Aha, a todsacerdoti post. The rule continues to hold!
By clicking "Accept All" you agree to let us sell your data. By clicking "Reject All" you agree to let us sell your data anyway.
This website uses cookies, localStorage, sessionStorage, IndexedDB, WebSQL, browser fingerprinting, canvas fingerprinting, and probably your mom's maiden name to track literally everything you do. We share this data with 847 trusted partners including but not limited to: advertisers, data brokers, that sketchy startup in the Caymans, and anyone willing to pay $0.003 per record.
By clicking "Accept All" you agree to let us sell your data. By clicking "Reject All" you agree to let us sell your data anyway. By clicking "Customize" you get to pretend you have a choice while we still sell your data.
Someone asked where the cookie banner was. Here you go.
aaronSong•3mo ago
Darmani•3mo ago
I gave it dagusa.com as a reference, which helped a lot, but also gave it a bit of a Bootstrap feel.
cube00•3mo ago