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. # **1. Pick a Killer Reference UI** Find a webpage whose design you want to mimic. It could be a landing page, dashboard, or component library, anything clean and modern. ![Retool\[dot\]com has the crazy design, look for good inspiration like these](https://prod-files-secure.s3.us-west-2.amazonaws.com/4ce5980e-ec00-425c-9a63-cd0a031307fa/bb02945d-fdf1-49df-bc75-e7d500328384/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RIASCEIW%2F20260902%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20260902T163137Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEP%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQDJx7oK%2FjcYjph0Czrid%2BFMvwJDpy7XTNMXKxabt3lTZgIhAOPKwiibtnOu6jqILsNl5LjBNAM7%2B%2FXzx4dCZ8i3fLHFKogECMj%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igz2WYqI96EI8PAGqmsq3AP9whLRPH6MK3vRBoRFFC2DycnW5%2FWi0GTQy6FdLMx9HmgTDHpBR7lERuj2T7oFjBjYtB%2FPUugDPJZoJ5VsBz3K92COluz3uPTpMYVmftX8v8y2aRWVpWlkMcN4Mr22%2FUkm67ui63pipohxrYfqMY3eBpAEJQ69W8WXSO5CShWgw3nh%2BVxakIAbLP%2FvKPuZRLO3yy26cK6Zztynvg2PtWAgGw4%2BUwd82J4rUPc4lTjJ92TBKfh92GipGYDLvI9z%2FFAuH%2Blebq7XFKJabHntTELprYLgFReyLH3XzFgMMh2kYEUpg2horxxODojxzIE7ZY0D9UMMk%2BdICU%2BlDDkBdOlcf%2F1FOwYBRcaPgc1Kl%2B0RlCd2BAhx%2Fk5UpP3Kv3wKj8uwihPC%2FiaWypn10g9o4%2F%2FwmWZj1ekSSEuTRIb9aLVJ51F6n552hGhSeIwSn1GFaBd3c4njf1hLkZ66hkYRQ26RcYRXQK%2FkYaFIsBXLAVtobjDhYXiIi1BpXfoxlErX2Gm5koO08PzsRjA%2B346GY0oVz3S8QcyWsgTnme7qItqUSn9yf8DCPjmijqFomGCM%2Bv7ei4fETWxaYem2ktB7OCHdQBrB7rBTvov9SAtK3XoIunCK0MQOsI9KMDjkuTDg9uDUBjqkAcuVWR6Ehhg32gwci4%2BFDIDsicrMvMPdRTVbAFW57KX53hboGmvYVIZM8MkGroEXoSQiy1FlEOsLI6v7yhfvI%2FC0pvcvbcK2Imu5NRQMxAmrhRKgTTKIuBZWLVjnd4DFDCC6G8n7cD6rv7pge7Ro%2FaIEYEfGMAkbsvHI%2BobiYgbqfnAuC9smhpfKzK90n0jI1VauhdqceuiaykW0JAfAmDQqhSog&X-Amz-Signature=59ad51948bc1cf30b49cf3417e2223cca6dde93f3fbe63ed4007d58fd677789d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) **Why this matters**: Whatever styling you feed Claude first, it will stick to religiously for everything you build later. Choose wisely. # **2. Clone the Reference Page Perfectly** Don’t just send Claude a screenshot. It can’t reliably extract accurate styles from images alone. **The right way**: - Open the site in Chrome → right-click → Inspect. - Select the `` or `` element. - In the Styles pane, copy *all* the computed/applied CSS (usually everything under “`element.style`” and the matched rules). - Take a full-page screenshot for visual reference. > Note: Claude has extension that can do. Then, Kimi 2.5 has can video to website. ```plain text 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.* ### 3. Iterate until it feels “wow” The first version will be solid, but now comes the fun part: polishing it into something truly gorgeous. **How I polish UI:** - Change one element at a time via targeted prompts. - Lean heavily on modern UI component libraries (Aceternity UI, Magic UI, shadcn/ui, or gems from [ui.aceternity.com](https://ui.aceternity.com/) , [magicui.design](https://magicui.design/) , [21st.dev](https://21st.dev/) , etc.) to instantly elevate the look. - If your reference is Tailwind-based (most good ones are), ask Claude to convert/replace vanilla CSS with Tailwind + these components. **How to iterate**: 1. Spot something off (button hover, card shadow, animation, spacing). 2. Describe the fix clearly or better, reference a specific component from a library. 3. Prompt Claude to update just that part. **Sample prompts that I use**: ```plain text 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. ``` ```plain text 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. ``` ```plain text The navigation bar is boring. Upgrade it to the "Animated Dock" from Aceternity UI with subtle hover scaling and our brand colors. ``` ```plain text 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.” ![Something that I have built using this approach. ](https://prod-files-secure.s3.us-west-2.amazonaws.com/4ce5980e-ec00-425c-9a63-cd0a031307fa/ab0435aa-d055-4f35-b9c7-5ca4d23c616f/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RIASCEIW%2F20260902%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20260902T163137Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEP%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQDJx7oK%2FjcYjph0Czrid%2BFMvwJDpy7XTNMXKxabt3lTZgIhAOPKwiibtnOu6jqILsNl5LjBNAM7%2B%2FXzx4dCZ8i3fLHFKogECMj%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igz2WYqI96EI8PAGqmsq3AP9whLRPH6MK3vRBoRFFC2DycnW5%2FWi0GTQy6FdLMx9HmgTDHpBR7lERuj2T7oFjBjYtB%2FPUugDPJZoJ5VsBz3K92COluz3uPTpMYVmftX8v8y2aRWVpWlkMcN4Mr22%2FUkm67ui63pipohxrYfqMY3eBpAEJQ69W8WXSO5CShWgw3nh%2BVxakIAbLP%2FvKPuZRLO3yy26cK6Zztynvg2PtWAgGw4%2BUwd82J4rUPc4lTjJ92TBKfh92GipGYDLvI9z%2FFAuH%2Blebq7XFKJabHntTELprYLgFReyLH3XzFgMMh2kYEUpg2horxxODojxzIE7ZY0D9UMMk%2BdICU%2BlDDkBdOlcf%2F1FOwYBRcaPgc1Kl%2B0RlCd2BAhx%2Fk5UpP3Kv3wKj8uwihPC%2FiaWypn10g9o4%2F%2FwmWZj1ekSSEuTRIb9aLVJ51F6n552hGhSeIwSn1GFaBd3c4njf1hLkZ66hkYRQ26RcYRXQK%2FkYaFIsBXLAVtobjDhYXiIi1BpXfoxlErX2Gm5koO08PzsRjA%2B346GY0oVz3S8QcyWsgTnme7qItqUSn9yf8DCPjmijqFomGCM%2Bv7ei4fETWxaYem2ktB7OCHdQBrB7rBTvov9SAtK3XoIunCK0MQOsI9KMDjkuTDg9uDUBjqkAcuVWR6Ehhg32gwci4%2BFDIDsicrMvMPdRTVbAFW57KX53hboGmvYVIZM8MkGroEXoSQiy1FlEOsLI6v7yhfvI%2FC0pvcvbcK2Imu5NRQMxAmrhRKgTTKIuBZWLVjnd4DFDCC6G8n7cD6rv7pge7Ro%2FaIEYEfGMAkbsvHI%2BobiYgbqfnAuC9smhpfKzK90n0jI1VauhdqceuiaykW0JAfAmDQqhSog&X-Amz-Signature=f95706a075a6db50dd8f3bd62ab9d44b6438c275a445a3953ae048ec0c5d002b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) # **Finallly!!! Extract the Style Guide & Scale Infinitely** Once your polished clone is flawless, extract comprehensive style guide, then use it to build anything in the exact same style forever. prompt: ```plain text 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: ```plain text 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: - Use “ChatGPT” for modify prompts. - Use “Claude” with skills to polish ui. - Kimi 2.5 use that for extracting or cloning your design inspiration. If this helped please drop your thoughts or your approach, more article like will drop, so drop a follow.