Bhagavad Gita · 18.66
सर्वधर्मान्परित्यज्य मामेकं शरणं व्रज
“Abandon all varieties of dharma and simply surrender unto me. I shall deliver you from all sinful reactions; do not fear.”
Claude is great at a lot of things, but getting it to spit out beautiful, consistent UI from scratch is tricky, unless you give it a rock-solid reference. The secret is to start by cloning a real UI you love pixel-for-pixel, then extract a reusable style guide. Once you do that, Claude will nail the same aesthetic for every new component or page you ask for.
Find a webpage whose design you want to mimic. It could be a landing page, dashboard, or component library, anything clean and modern.
Why this matters: Whatever styling you feed Claude first, it will stick to religiously for everything you build later. Choose wisely.
Don’t just send Claude a screenshot. It can’t reliably extract accurate styles from images alone.
The right way:
<html> or <body> element.element.style” and the matched rules).Note: Claude has extension that can do. Then, Kimi 2.5 has can video to website.
Help me rebuild the exact same UI design as the attached screenshot in a single self-contained HTML file (include inline CSS and any required fonts via Google Fonts if needed). I've also attached/pasted the full extracted CSS from the original site, use it as the source of truth for all styling.Note: nothing fu*kin works in first attempt, spend few hours and polish it.
The first version will be solid, but now comes the fun part: polishing it into something truly gorgeous.
How I polish UI:
How to iterate:
Sample prompts that I use:
The hero button feels flat. Replace it with the "Shiny Button" component from Magic UI (magicui.design/components/shiny-button). Keep the same colors from our current design, but add the glassmorphism hover effect.The cards need more depth. Swap them for the "Aceternity Card Stack" component (ui.aceternity.com/components/card-stack). Use our existing color palette and typography.The navigation bar is boring. Upgrade it to the "Animated Dock" from Aceternity UI with subtle hover scaling and our brand colors.Spacing between sections feels tight - add more vertical rhythm. Increase section padding to match the reference more closely, and soften the transitions with ease-in-out 300ms.Keep going, one tweak per prompt until every detail feels buttery smooth and your eyes are happy. This iterative loop turns “good” into “holy shit, this looks premium.”
Once your polished clone is flawless, extract comprehensive style guide, then use it to build anything in the exact same style forever.
prompt:
Analyze the attached perfect HTML clone and generate a comprehensive style guide as a markdown file.
Include:
- Overall aesthetic overview
- Complete color palette (hex + usage)
- Typography system (fonts, weights, sizes, line-heights, hierarchy) - Spacing & layout system
- Component styles (buttons, cards, inputs, nav, etc.)
- Shadows, elevation, border-radius
- Transitions & animations
- Opacity patterns
- Common Tailwind classes (if used)
- Example code snippets for key components Be exhaustively detailed
- capture every nuance.Save this markdown file as your design template.
Now scale it: For any new page, feature, or component, just include the style guide in the conversation and reference it explicitly.
prompt:
Using the attached style guide markdown as our definitive design system, build a clean pricing page with:
- Hero: "Choose your plan"
- Monthly/annual toggle
- Three tier cards (Basic, Pro, Enterprise)
- Matching primary/secondary buttons
- Responsive layout
Output as a complete, self-contained HTML file. Use Tailwind if the guide shows Tailwind patterns.every new piece instantly matches the premium look you spent time perfecting.
The whole point of these tools to work smart and ship faster
Key notes:
If this helped please drop your thoughts or your approach, more article like will drop, so drop a follow.