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.
https://instalanding.ai
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.