I Gave the Same Prompt to Perplexity and OpenAI - Here's What You Need to Know
Ever wondered how different AI models handle the same creative task? I decided to put this to the test by giving an identical, unstructured prompt to both Perplexity (powered by Claude Sonnet 4.0) and OpenAI's ChatGPT for website design. The results were eye-opening and revealed some fascinating differences in how these AI systems approach creative problem-solving.
The Experiment Setup
I intentionally crafted an unstructured prompt without any engineering or specific guidelines - the kind of casual request most people would naturally type. The task was simple: design a website layout. No detailed specifications, no technical jargon, just a basic request that mimics how regular users interact with AI tools.
This approach was deliberate. While prompt engineering can dramatically improve AI outputs, most users don't have the time or knowledge to craft perfect prompts. I wanted to see how each model performed with real-world, everyday interactions.
The Striking Difference
The contrast in responses was remarkable. Claude Sonnet 4.0 through Perplexity approached the task like an experienced web designer would - asking clarifying questions, considering user experience principles, and providing structured, actionable advice. The response felt consultative and professional.
ChatGPT, while still helpful, delivered a more generic response that lacked the depth and practical insight I was expecting. It felt more like a template answer rather than personalized design guidance.
Why Claude Sonnet Excelled
Professional Approach
Claude Sonnet demonstrated what felt like genuine design thinking. It considered factors like target audience, brand identity, and user journey - elements that experienced designers naturally incorporate into their process.
Structured Methodology
Instead of jumping straight into code or layout suggestions, it outlined a logical approach to website design, breaking down the process into manageable phases.
Contextual Understanding
The model seemed to grasp the broader implications of design decisions, suggesting considerations that went beyond just visual elements to include functionality and user experience.
What This Means for Content Creators and Businesses
If you're building digital products, creating content, or running marketing campaigns, the choice of AI tool can significantly impact your output quality. This experiment highlighted that not all AI models are created equal, especially for creative and strategic tasks.
For entrepreneurs and digital marketers working with limited budgets - like many of us starting with small investments - getting maximum value from AI tools becomes crucial. The right model can mean the difference between professional-grade output and generic responses.
The Broader Implications
This comparison reveals something important about AI development. Different models excel in different areas, and understanding these strengths can help you choose the right tool for specific tasks. While ChatGPT might excel in other areas, Claude Sonnet's approach to design thinking and structured problem-solving stood out significantly.
For anyone involved in web development, digital marketing, or content creation, this insight could influence which AI assistant you turn to for creative projects.
Here is your prompt
Un-Structured Prompt (Non Engineered Prompt)
Create a Responsive Website with Gentle CSS, Icons and optimized SEO, | Color Theme - Dark Red & White, Everything should be set with Icons and Margin padding balanced Header > Logo left Alignment, Font Awesome Social Media Icons Right Alignment Body> Banner Image with Slider Founder Image (Square) left side, | Heading, > sub heading> p > Footer> Company Info > name > Address (Right Side) | social Media Icons, Contact Information
OPEN AI [CHAT-GPT CODE]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Official website of our company. Learn about our founder, services, and connect with us." />
<title>Company Website</title>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
}
header {
background-color: #8b0000;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
}
header .logo {
font-size: 22px;
font-weight: bold;
}
header .social-icons a {
color: #fff;
margin-left: 15px;
font-size: 18px;
transition: 0.3s;
}
header .social-icons a:hover {
color: #ddd;
}
/* Banner */
.banner {
position: relative;
overflow: hidden;
}
.banner img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
/* Founder Section */
.founder-section {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 50px;
background: #fff;
}
.founder-section img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-right: 30px;
}
.founder-section h2 {
color: #8b0000;
margin: 0 0 10px;
}
.founder-section h4 {
margin: 0 0 15px;
color: #444;
}
.founder-section p {
line-height: 1.6;
}
/* Footer */
footer {
background-color: #8b0000;
color: #fff;
padding: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .company-info h3 {
margin: 0 0 10px;
}
footer .company-info p {
margin: 5px 0;
}
footer .footer-social a {
color: #fff;
margin-right: 15px;
font-size: 18px;
transition: 0.3s;
}
footer .footer-social a:hover {
color: #ddd;
}
@media(max-width: 768px){
header, footer {
flex-direction: column;
text-align: center;
}
.founder-section {
flex-direction: column;
text-align: center;
}
.founder-section img {
margin: 0 0 20px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">My Company</div>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</header>
<!-- Banner Slider (Simple Example with 1 Image, can extend with JS) -->
<div class="banner">
<img src="https://via.placeholder.com/1500x400/8b0000/ffffff?text=Banner+Slider" alt="Banner Image" />
</div>
<!-- Founder Section -->
<section class="founder-section">
<img src="https://via.placeholder.com/250" alt="Founder Image">
<div>
<h2>John Doe</h2>
<h4>Founder & CEO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nisl nec sapien consectetur auctor. Cras suscipit, justo a elementum viverra, elit justo malesuada risus, in interdum quam nunc a ligula.</p>
</div>
</section>
<!-- Footer -->
<footer>
<div class="company-info">
<h3>My Company</h3>
<p>123 Business Street</p>
<p>City, Country - 123456</p>
</div>
<div>
<p><i class="fas fa-phone"></i> +91 9876543210</p>
<p><i class="fas fa-envelope"></i> info@company.com</p>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
</body>
</html>
Perplexity [Claude, Sonet 4.0] Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Professional media company providing innovative digital solutions and services">
<meta name="keywords" content="media, digital, services, company, professional">
<meta name="author" content="Your Company Name">
<meta property="og:title" content="Your Company - Professional Digital Media Services">
<meta property="og:description" content="Leading digital media company providing innovative solutions">
<meta property="og:type" content="website">
<title>Your Company - Professional Digital Media Services</title>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
.header {
background: linear-gradient(135deg, #8B0000, #DC143C);
color: white;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 28px;
font-weight: bold;
text-decoration: none;
color: white;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
color: #FFD700;
}
.social-icons {
display: flex;
gap: 20px;
}
.social-icons a {
color: white;
font-size: 20px;
transition: all 0.3s ease;
}
.social-icons a:hover {
color: #FFD700;
transform: translateY(-2px);
}
/* Banner Slider Styles */
.banner-slider {
position: relative;
height: 500px;
overflow: hidden;
margin-bottom: 60px;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.slide.active {
opacity: 1;
}
.slide1 {
background: linear-gradient(rgba(139,0,0,0.7), rgba(220,20,60,0.7)),
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%23f0f0f0" width="1200" height="500"/><text x="600" y="250" font-family="Arial" font-size="48" text-anchor="middle" fill="%23666">Professional Banner 1</text></svg>');
}
.slide2 {
background: linear-gradient(rgba(139,0,0,0.7), rgba(220,20,60,0.7)),
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%23e8e8e8" width="1200" height="500"/><text x="600" y="250" font-family="Arial" font-size="48" text-anchor="middle" fill="%23555">Innovation & Excellence</text></svg>');
}
.slide3 {
background: linear-gradient(rgba(139,0,0,0.7), rgba(220,20,60,0.7)),
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%23ddd" width="1200" height="500"/><text x="600" y="250" font-family="Arial" font-size="48" text-anchor="middle" fill="%23444">Digital Solutions</text></svg>');
}
.banner-content {
text-align: center;
color: white;
z-index: 2;
}
.banner-content h1 {
font-size: 48px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.banner-content p {
font-size: 20px;
margin-bottom: 30px;
}
.btn-primary {
background: linear-gradient(45deg, #FFD700, #FFA500);
color: #8B0000;
padding: 15px 30px;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,215,0,0.3);
}
/* About Section */
.about-section {
padding: 80px 0;
background: #f8f9fa;
}
.about-content {
display: grid;
grid-template-columns: 300px 1fr;
gap: 60px;
align-items: center;
}
.founder-image {
width: 300px;
height: 300px;
border-radius: 20px;
background: linear-gradient(135deg, #8B0000, #DC143C);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
box-shadow: 0 15px 30px rgba(139,0,0,0.3);
transition: transform 0.3s ease;
position: relative;
overflow: hidden;
}
.founder-image:hover {
transform: translateY(-5px);
}
.founder-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><rect fill="%23f0f0f0" width="300" height="300"/><text x="150" y="150" font-family="Arial" font-size="24" text-anchor="middle" fill="%23666">Founder Photo</text></svg>');
background-size: cover;
background-position: center;
opacity: 0.1;
}
.about-text {
padding: 20px;
}
.about-text h2 {
font-size: 42px;
color: #8B0000;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.about-text h3 {
font-size: 24px;
color: #DC143C;
margin-bottom: 20px;
font-weight: 300;
}
.about-text p {
font-size: 18px;
line-height: 1.8;
color: #555;
margin-bottom: 30px;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.feature {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease;
}
.feature:hover {
transform: translateY(-5px);
}
.feature i {
font-size: 30px;
color: #8B0000;
margin-bottom: 15px;
}
.feature h4 {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.feature p {
font-size: 14px;
color: #666;
margin: 0;
}
/* Footer Styles */
.footer {
background: linear-gradient(135deg, #8B0000, #DC143C);
color: white;
padding: 50px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-bottom: 30px;
}
.company-info h3 {
font-size: 28px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.company-info h3 i {
color: #FFD700;
}
.company-info p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.company-info i {
width: 20px;
color: #FFD700;
}
.contact-info h3 {
font-size: 24px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.contact-info h3 i {
color: #FFD700;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
font-size: 16px;
}
.contact-item i {
width: 20px;
color: #FFD700;
}
.footer-social {
display: flex;
gap: 20px;
margin-top: 20px;
}
.footer-social a {
color: white;
font-size: 24px;
width: 50px;
height: 50px;
border: 2px solid #FFD700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.footer-social a:hover {
background: #FFD700;
color: #8B0000;
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 20px;
text-align: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
gap: 15px;
}
.social-icons {
gap: 15px;
}
.banner-content h1 {
font-size: 32px;
}
.banner-content p {
font-size: 16px;
}
.about-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.founder-image {
width: 250px;
height: 250px;
margin: 0 auto;
}
.about-text h2 {
font-size: 32px;
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.features {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.banner-slider {
height: 400px;
}
.founder-image {
width: 200px;
height: 200px;
}
.about-text h2 {
font-size: 28px;
}
.footer-social {
justify-content: center;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<nav class="nav-container">
<a href="#" class="logo">
<i class="fas fa-rocket"></i>
Your Company
</a>
<div class="social-icons">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</nav>
</div>
</header>
<!-- Banner Slider -->
<section class="banner-slider">
<div class="slide slide1 active">
<div class="banner-content">
<h1>Welcome to Excellence</h1>
<p>Innovative Digital Media Solutions for Modern Business</p>
<a href="#about" class="btn-primary">
<i class="fas fa-arrow-down"></i>
Explore More
</a>
</div>
</div>
<div class="slide slide2">
<div class="banner-content">
<h1>Innovation & Creativity</h1>
<p>Transforming Ideas into Digital Reality</p>
<a href="#contact" class="btn-primary">
<i class="fas fa-phone"></i>
Get Started
</a>
</div>
</div>
<div class="slide slide3">
<div class="banner-content">
<h1>Professional Services</h1>
<p>Your Success is Our Priority</p>
<a href="#about" class="btn-primary">
<i class="fas fa-star"></i>
Learn More
</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="about-content">
<div class="founder-image">
<i class="fas fa-user-tie"></i>
</div>
<div class="about-text">
<h2>
<i class="fas fa-crown"></i>
Meet Our Founder
</h2>
<h3>Leading Innovation in Digital Media</h3>
<p>
With years of experience in digital innovation and media solutions, our founder has built this company on the principles of excellence, creativity, and client success. We believe in transforming businesses through cutting-edge digital strategies and personalized service.
</p>
<div class="features">
<div class="feature">
<i class="fas fa-lightbulb"></i>
<h4>Innovation</h4>
<p>Creative solutions for modern challenges</p>
</div>
<div class="feature">
<i class="fas fa-users"></i>
<h4>Team Work</h4>
<p>Collaborative approach to success</p>
</div>
<div class="feature">
<i class="fas fa-trophy"></i>
<h4>Excellence</h4>
<p>Committed to delivering the best</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="footer">
<div class="container">
<div class="footer-content">
<div class="company-info">
<h3>
<i class="fas fa-building"></i>
Your Company Name
</h3>
<p>
<i class="fas fa-map-marker-alt"></i>
123 Business Street, Professional District
</p>
<p>
<i class="fas fa-city"></i>
Mumbai, Maharashtra 400001, India
</p>
<p>
<i class="fas fa-globe"></i>
Leading provider of innovative digital media solutions and professional services.
</p>
</div>
<div class="contact-info">
<h3>
<i class="fas fa-address-card"></i>
Contact Information
</h3>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>+91 98765 43210</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>contact@yourcompany.com</span>
</div>
<div class="contact-item">
<i class="fas fa-clock"></i>
<span>Mon - Fri: 9:00 AM - 6:00 PM</span>
</div>
<div class="contact-item">
<i class="fas fa-calendar"></i>
<span>Saturday: 10:00 AM - 4:00 PM</span>
</div>
<div class="footer-social">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Your Company Name. All rights reserved. | Designed with <i class="fas fa-heart" style="color: #FFD700;"></i> for excellence</p>
</div>
</div>
</footer>
<script>
// Banner Slider Functionality
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(index) {
slides.forEach(slide => slide.classList.remove('active'));
slides[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
// Auto-play slider
setInterval(nextSlide, 4000);
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animations
document.querySelectorAll('.feature, .founder-image, .about-text').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>
Have you noticed similar differences when comparing AI models for your projects? What's been your experience with using AI for creative tasks versus analytical work?
