Date:
Author:
Akash Jaggi
Introduction
How I Recreated a Trending Website Using AI (Claude + Framer AI)
If you've been active on social media recently, you've probably noticed a growing trend where creators are recreating popular landing pages and websites. Projects like the Delux Salon landing page, Truck Driver website, and many other beautifully designed interfaces have been appearing everywhere. Instead of simply admiring these projects, I decided to challenge myself and recreate one using AI.
To build my version, I used Claude for code generation and Framer AI to accelerate the design process. The experience was surprisingly smooth and showed me how AI can dramatically speed up web development while also becoming an incredible learning companion.
Why?
Why Recreate Existing Websites?
Recreating a website is one of the best ways to improve your design and development skills. You're not just copying a layout, you are studying how professional designers structure pages, organize content, maintain spacing, use typography, and build responsive interfaces.
When AI assists with the coding, you spend less time writing boilerplate code and more time understanding why certain design decisions work. It's an excellent exercise for developers, UI/UX designers, and students who want to strengthen their portfolios.
My AI Workflow
Here's the exact workflow I followed:
Step 1: Choose a Website
Find a website that inspires you. It could be a landing page, portfolio, startup website, or product page with a clean and modern design.
Step 2: Collect References
Copy the website URL and take a full-page screenshot. Both pieces of information help the AI understand the structure, styling, and visual hierarchy more accurately.
Step 3: Use Claude
Upload both the screenshot and the website URL to Claude and use a prompt like:
"Analyze this website and create a similar website using HTML, CSS, and JavaScript. Match the layout, spacing, typography, responsiveness, and animations while keeping the code clean and well structured."
Claude analyzes the design and generates a complete frontend that closely matches the original.
Step 4: Improve the Output
AI-generated code is a fantastic starting point, but don't stop there. Review the code, optimize the layout, improve responsiveness, refine animations, and replace placeholder content with your own ideas. This is where your creativity makes the project unique.
Step 5: Deploy Your Project
Once you're happy with the result, deploy it on Vercel. Within minutes, you'll have a live project that you can share with friends, recruiters, or potential clients.
Why This Method Works
This workflow offers much more than just generating code quickly.
You learn modern UI patterns by recreating real-world designs.
You improve your frontend development skills.
You understand responsive layouts and component structures.
You build portfolio-ready projects much faster.
You become more comfortable working alongside AI instead of treating it as a replacement.
Think of AI as a mentor that handles repetitive coding while you focus on learning, experimenting, and making better design decisions.
My Experience
My Experience
Building this project reminded me that AI isn't here to replace creativity
Building this project reminded me that AI isn't here to replace creativity, it amplifies it. What once took several days can now be completed in a few hours, allowing more time for experimentation and refinement.
The best part is that every recreated project teaches something new. Whether it's a clever layout, animation technique, or responsive design pattern, each build expands your understanding of modern web development.
If you're learning frontend development, UI design, or simply exploring AI-powered workflows, I highly recommend trying this approach. Pick a website you admire, recreate it with AI, improve it with your own ideas, and publish it. It's one of the fastest ways to build practical skills while creating an impressive portfolio.
I'd love to hear what you think about this workflow. If you've tried something similar or have ideas to improve it, feel free to share your thoughts. Let's keep building, learning, and exploring the future of web development together.
Website Link - https://www.akashjaggi.com/olddelhi
