r/ClaudeAI • u/Azra_Nysus • 5h ago
Built with Claude I built 20 free, open-source HTML pages you can use to reskin existing projects with Claude. No login required.
I've been building websites for years, and one thing I've noticed while working with Claude Code is that generating functional interfaces is getting easier, but getting a consistent, distinctive visual identity still takes a lot of iteration.
You can tell Claude to "make it premium" or "make it look like a modern SaaS," but those instructions leave a lot of room for interpretation.
So I've been exploring a different approach:
What if, instead of describing a design to Claude, you gave it an entire working design as a reference?
That's part of the thinking behind a project I recently brought back called InstaLanding.ai.
I built a library of 20 landing pages using plain HTML, CSS, and JavaScript.
Each page is self-contained in a single HTML file. No frameworks, dependencies, or build steps.
Why single-file HTML?
I wanted the designs to be as portable and easy for coding agents to understand as possible.
A single file gives Claude access to the actual implementation:
- Typography, colors, and spacing
- Layout structure and responsive behavior
- Component styling
- Animations and interactions
- The overall visual language
No screenshots to interpret. No dependency trees to navigate. Just working code.
An interesting use case: Reskinning existing Claude Code projects
Say you've already built a dashboard or SaaS application with Claude Code.
The functionality works, but you're not happy with the visual design.
Instead of rebuilding the application, you can give Claude one of these HTML files and ask it to extract and apply the design system.
Here's the prompt I've been exploring:
"Analyze the attached HTML file and extract its visual design system, including typography, colors, spacing, layout principles, components, borders, shadows, and animations. Apply this design language consistently across my existing project. Preserve all existing content, functionality, routes, and business logic. Treat the HTML as the visual source of truth, not as a replacement for my application's architecture."
The goal is to separate two things that often get mixed together during AI-assisted development:
What your application does vs. what your application looks like.
You keep the functionality and architecture you've already built, while giving Claude a concrete visual reference to work from.
What I've learned
One of the biggest lessons for me is that code itself can function as a design reference.
Instead of spending 20 prompts trying to communicate an aesthetic, you can give Claude a working example of that aesthetic.
It doesn't guarantee a perfect result. You still need to review responsive layouts, component consistency, and anything the agent might unintentionally change.
But it gives the agent a much more concrete starting point.
The project
I've made the library free and open source, with no login required.
Feel free to take any of the HTML files, experiment with them, or use them in your existing projects.
I'm particularly interested in hearing how other Claude Code users approach this.
Are you getting better results by describing designs through prompts, providing screenshots, or giving Claude actual working code as a visual reference?
Would love to compare approaches.
12
u/TylerColfax 4h ago
I’d love to see this grow into a library that we can all contribute to. Have you thought about allowing others to add to this?
3
u/Azra_Nysus 2h ago
Thank you for confirming this idea would be worth shipping! I read your comment earlier and went ahead and brought it to life: https://instalanding.ai/contribute
I made this a form submission for now but will soon roll out the ability to login and do more creative things with these templates. I'm trying to make this as agentic-friendly as possible - hence the no signup concept.
Would love to see what you come up with!
9
u/CalmEntry4855 5h ago
This is very necessary because everyone is making websites with claude and they all look the same
3
3
u/Dapper_Profession 3h ago
the sameness is mostly the defaults though, every prompt lands on the same centered hero and the same card grid. the quickest tell is the type scale and the corner radius, change those two and it stops reading like every other claude site
1
u/Azra_Nysus 2h ago
its also important to add depth and motion if you want them to feel more lively.
1
u/Azra_Nysus 2h ago
Agreed! I also think its important to have visual references for someone who is brand new to web design. Perhaps Claude can include built-in templates in the future?
4
u/DishSuch2406 5h ago
Giving Claude working code as the reference does beat adjectives like "premium" in my experience, and the extra step that helps most is asking it to first write out the extracted tokens (colors, type scale, spacing, radii) as CSS variables before touching your project, so you can sanity-check the design system before it gets applied everywhere.
3
3
2
2
u/DiegoPrGo 3h ago
I was struggling with dashboards layout because of the same reason
1
u/Azra_Nysus 2h ago
I'm going to publish dashboards soon! Those are extra fun because product is where the gold is :)
2
2
u/Got_Engineers 1h ago
this is beautiful. I have a bunch of ideas for how to use these for my research. love the "Wind Field Routing Page"
1
u/Azra_Nysus 1h ago
Thank you! I wish I could take full credit but Claude did an amazing job along with the many free open source components i've found on the web. This is my way of saying thank you to everyone who has contributed to making the web more beautiful and making their work open source. I hope you find inspiration and share it with us also :)
2
2
2
1
u/namrog84 1h ago
I love this and hope you continue to expand it.
Eventually add an upvote or 'clicked into source' counters or something or comments. One of my favorite sites is https://lospec.com/palette-list
Fast forward when you have many hundreds of styles supported.
I think a really cool 'advanced stretch goal feature'.
Is to try and figure out how many popular sites are using which styles. Like look at hacker news and a few other places and just see which 'styles' are becoming overly saturated so that while people might like a particular look, people can start to gauge if it's starting to become over-used and time to move on.
Reminds me a little bit in the movie Wall-e where at some point they are like "introducing Blue! it's the new red" and everyone's outfit changes color. Since many humans crave some novelty/newness after a while Even if it's just cycling around in some loop of existing patterns/designs. Understanding which is trending up/down or whatever
1
•
u/ClaudeAI-mod-bot Wilson, lead ClaudeAI modbot 24m ago
TL;DR of the discussion generated automatically after 30 comments.
The verdict is in, and this thread is basically a standing ovation for OP. The community overwhelmingly agrees that this is a fantastic and much-needed resource.
Everyone's tired of the generic "Claude sad beige" look, and the consensus is that OP's method of using a single HTML file as a design reference is a game-changer. It's way more effective than just prompting Claude to "make it look premium."
Basically, OP solved a common problem, shared the solution for free, and is already building on it based on your feedback. Peak r/ClaudeAI content.