[_alternator_]

Cool idea!

Not sure if this was created with LLM help, but I suspect so? Not because the page is buggy (it is, though, crashed on my iPhone), but because they make data visualization so accessible. This type of presentation used to take days of work; now, if you find a unique piece of data, it's only a few hours of work to create a beautiful animated visualization.

I do think this would be more compelling with some additional context or data integration. Zoom, the ability to click and see the full details about each station, which company (my guess is that it's all JR?).

Ok final note: the intersection of Japan and trains is basically HN crack, and I love it.

[zzleeper]

I created pages with Claude before and it's very very obvious when you see one. From the font choice to the color palette, and the style of the boxes. In fact if anyone has an effective prompt that says "please don't make this look like the average Claude page" please post it!

[Multicomp]

I've had some luck giving either an example website to ape or listing out a particular era, monkey see monkey do seems to help a bunch.

I've done each of the 3 for side projects below to pretty good effects.

> This website will be run by IE6 and Windows Mobile 6, so use no dependencies, semantic HTML, a 3-pane layout, and only use JS (es3!) where absolutely necessary (and where necessary, put the script at the end of the body).

When I'm not specifically targeting support for retrocomputers I do something like this, then iterate until it looks right.

> Go look at Dokuwiki, django defaults, and common web 2.0 color schemes, use those for UI inspiration. Keep a 3-pane desktop-first layout, but enable mobile responsiveness with media queries. Use semantic html5 and prefer older boring solutions like surgical jquery or htmx-style islands of interactivity where needed, otherwise do not bring in dependencies without my say so.

And finally, if I'm doing a web app that I'm vibing out with the web stack because I want it one-shotted and not trying to do a good rust core with strong ports/adapters API surface for web or native client callers, I do something like this:

> This is a local web app, the frontend, backend, and desktop are all on the same machine. Use naive and simple development patterns that you document the style as you go, pick a boring web framework and use it idiomatically, but remember that some tricks that are intended to keep network round trips down are not as necessary because network penalties are not as bad as real traffic.

Granted, the above I don't like as much, but it does produce more 'modern' looking sites by default.

[ageitgey]

Anthropic's own frontend-design skill attempts to do that. You can install it in Claude Code, or you can tweak it to be closer to your own style:

https://github.com/anthropics/claude-code/blob/main/plugins/...

But what I find works best is to point Claude at a design system documentation website (your own company's or another public source) and tell it to use that design style. It usually does OK, and the results are usually much more in line with that style and not as Claude-y.

[rlorenzo]

That skill has not been updated since its release.

I would suggest checking out this project for a boost in design skills:

https://impeccable.style

[emodendroket]

Not sure that's necessarily any bigger a deal than when every Web site had the "Bootstrap look."

[dannyw]

Fable is really, really good at this. My workflow involves giving it a bit of human inspiration, through asking it to generate a few different design templates/scaffolds (without building the whole frontend first).

Then I iterative and give it feedback, point out all the parts I don’t like, sometimes mixing and matching.

I’m sure you can do this with Opus too, but Fable is a better designer.

[esikich]

Just give it actual ideas of what you want instead of "make me a web page". Garbage in garbage out.

[KellyCriterion]

Though it standard look & feel is not that bad, IMHO.

[TylerE]

If I may pimp my own similar, also railway related project...

https://tylereaves.github.io/uk-rail-map/

Not animated, but it's fully zoomable (with variable LOD at different levels), searchable (with fuzzy matching), info popups on not just stations, but things like track speed limits, and tunnels. What I do that's really different is that I'm VERY heavily manipulating the underlying data (The pre-processing pipeline is currently at something like 12k lines of python and counting, most of it doing things like advanced network topology, so that we show the actual track layouts, which if drawn at truly geographically accurate scale would just collapse to a single line.

I'm showing tons of detail..... 3.5k+ stations, and every single track - not just the main running lines, but every siding and yard track.

Yea, it's beige though, thought in my case I'm trying to emulate (without directly copying) the feel of Ordinance Survey maps like this: https://www.muchbetteradventures.com/magazine/content/images...

[ruszki]

It’s obvious on how much information is unnecessarily repeated. One of the main give away of AI is that the text is like an Atlantic article but worse, with very-very-very low information density. Full with sentences, paragraphs, pages which add absolutely nothing.

[csomar]

The Claude style (colors/fonts) give it right away. The website did also crash for me too with the famous nextjs death screen.

[boxed]

> Not because the page is buggy (it is, though, crashed on my iPhone),

Maybe you meant Safari is buggy and crashed? I can easily get Safari to crash by zooming in and out a bit. Reports to Apple go ignored...

[_alternator_]

I get the sentiment. I don't love that different browsers have different behavior even on standards compliant code. But I've also done enough web development to know that if your page crashes safari in the main user flow (in this case, just hitting 'play'), the dev owns the bug.

[jorisw]

Safari didn't crash. The web app did, for abusing the browser history API.

> SecurityError: Attempt to use history.replaceState() more than 100 times per 10 seconds

[nekooooo]

it's so easy to tell it's claude. nonsense oblique text. beige bg. noise texture. 'crafted' eyebrows.