mailchamp
🥈SilverMailchamp is a front-end web project that clones core UI pages of a marketing email platform, including landing, login, pricing, and payment pages.
440Updated 6mo ago
Intermediate30min to implementmarketing
Saves ~45 min per use
Quick InstallView Source
git clone https://github.com/rajeshdeo/mailchamp.gitWorks with:
Claude
Overview
About This Skill
Mailchamp is an open-source frontend project built with HTML, CSS, and JavaScript that replicates the user interface of an email marketing platform. The repository includes multiple pages such as a landing page, login page, pricing page, and payment page, along with modular navbar components and associated stylesheets. It is structured with separate components, scripts, and styles directories, reflecting a multi-page web application layout. This project is useful for developers learning to build and structure marketing-style web interfaces or looking to reference a multi-page HTML/CSS/JS project.
How to Use
[{"step":"Define your requirements: Decide which Mailchamp page type you need (landing, login, pricing, or payment) and gather your brand details including [BRAND_NAME], [PRIMARY_COLOR], and any specific content or features you want included.","tip":"Use the prompt template as-is for quick results, or modify the placeholders to match your exact needs. For example, if you're creating a pricing page, focus on the pricing grid section and adjust the plan details to reflect your actual offerings."},{"step":"Generate the UI code: Paste the prompt into your AI tool (Claude, ChatGPT, etc.) and let it generate the HTML/CSS code. Review the output to ensure it matches your requirements and makes sense for your use case.","tip":"If the AI generates placeholder content, replace it with your actual copy, brand colors, and specific features. For example, update the pricing plans to reflect your real pricing tiers and feature lists."},{"step":"Customize and test: Take the generated code and customize it further in your preferred code editor. Test the interactive elements (buttons, forms, toggles) to ensure they work as expected. Add any additional JavaScript functionality if needed.","tip":"Use browser developer tools to test responsiveness on different screen sizes. Ensure all interactive elements are accessible and follow web accessibility best practices."},{"step":"Deploy and iterate: Deploy the page to your hosting environment or integrate it into your existing marketing funnel. Monitor performance metrics (conversion rates, bounce rates) and gather user feedback to make iterative improvements.","tip":"Consider A/B testing different versions of the page to optimize for your specific conversion goals. Use tools like Google Analytics to track user behavior and identify areas for improvement."}]
Use Cases
Reference implementation for building multi-page marketing website UIs
Learning project for HTML, CSS, and JavaScript page structure
Starting template for a login and payment page flow
Study example for modular navbar component design
Tags
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/rajeshdeo/mailchampRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a fully functional Mailchamp-inspired marketing email platform UI page for [PAGE_TYPE: landing/login/pricing/payment]. Include realistic copy, modern design elements, and interactive components like buttons, forms, or pricing toggles. Use [BRAND_NAME] as the company name and [PRIMARY_COLOR] for the color scheme. Ensure the page follows best practices for [CONVERSION_GOAL: lead capture/signup/purchase] and includes a responsive layout.
Example Output
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mailchamp - Email Marketing Made Simple</title>
<style>
:root {
--primary-color: #FF6B35;
--secondary-color: #2B2D42;
--light-gray: #F8F9FA;
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: var(--light-gray);
color: var(--secondary-color);
}
.header {
background-color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: var(--secondary-color);
font-weight: 500;
}
.hero {
background: linear-gradient(135deg, #FF6B35, #F7931E);
color: white;
padding: 4rem 2rem;
text-align: center;
border-radius: 0 0 20px 20px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 2rem;
}
.cta-button {
background-color: white;
color: var(--primary-color);
border: none;
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 4rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.pricing-card {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card.featured {
border: 2px solid var(--primary-color);
transform: scale(1.05);
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.plan-price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.plan-features {
list-style: none;
padding: 0;
}
.plan-features li {
padding: 0.5rem 0;
display: flex;
align-items: center;
}
.plan-features li::before {
content: "✓";
color: var(--primary-color);
font-weight: bold;
margin-right: 0.5rem;
}
.payment-form {
background-color: white;
padding: 2rem;
border-radius: 12px;
max-width: 500px;
margin: 2rem auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
}
.submit-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
width: 100%;
}
.footer {
background-color: var(--secondary-color);
color: white;
padding: 3rem 2rem 1rem;
text-align: center;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.social-links a {
color: white;
font-size: 1.5rem;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">Mailchamp</div>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#login">Login</a>
<a href="#signup" class="cta-button">Get Started Free</a>
</nav>
</header>
<section class="hero">
<h1>Grow Your Business with Email Marketing</h1>
<p>Mailchamp helps small businesses and startups create beautiful email campaigns that convert. Join 50,000+ happy customers who trust us to deliver their messages.</p>
<button class="cta-button">Start Your Free Trial</button>
</section>
<section id="pricing" class="pricing-grid">
<div class="pricing-card">
<h3 class="plan-name">Starter</h3>
<div class="plan-price">$9<span style="font-size: 1rem; font-weight: 400; color: #666;">/month</span></div>
<ul class="plan-features">
<li>Up to 500 contacts</li>
<li>1,000 emails/month</li>
<li>Basic templates</li>
<li>Email support</li>
</ul>
<button class="cta-button" style="margin-top: 1.5rem; width: 100%;">Choose Plan</button>
</div>
<div class="pricing-card featured">
<h3 class="plan-name">Pro</h3>
<div class="plan-price">$29<span style="font-size: 1rem; font-weight: 400; color: #666;">/month</span></div>
<ul class="plan-features">
<li>Up to 5,000 contacts</li>
<li>10,000 emails/month</li>
<li>Advanced templates</li>
<li>Priority support</li>
<li>Automation features</li>
</ul>
<button class="cta-button" style="margin-top: 1.5rem; width: 100%;">Choose Plan</button>
</div>
<div class="pricing-card">
<h3 class="plan-name">Enterprise</h3>
<div class="plan-price">$99<span style="font-size: 1rem; font-weight: 400; color: #666;">/month</span></div>
<ul class="plan-features">
<li>Unlimited contacts</li>
<li>Unlimited emails</li>
<li>Custom templates</li>
<li>24/7 support</li>
<li>Dedicated account manager</li>
</ul>
<button class="cta-button" style="margin-top: 1.5rem; width: 100%;">Choose Plan</button>
</div>
</section>
<section class="payment-form">
<h2>Complete Your Purchase</h2>
<form>
<div class="form-group">
<label for="card-number">Card Number</label>
<input type="text" id="card-number" placeholder="1234 5678 9012 3456" maxlength="19">
</div>
<div class="form-group">
<label for="expiry">Expiry Date</label>
<input type="text" id="expiry" placeholder="MM/YY" maxlength="5">
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input type="text" id="cvv" placeholder="123" maxlength="3">
</div>
<button type="submit" class="submit-button">Complete Payment</button>
</form>
</section>
<footer class="footer">
<div class="social-links">
<a href="#">📘</a>
<a href="#">🐦</a>
<a href="#">📷</a>
</div>
<p>© 2023 Mailchamp. All rights reserved.</p>
<p><a href="#" style="color: white;">Terms of Service</a> | <a href="#" style="color: white;">Privacy Policy</a></p>
</footer>
</body>
</html>
```Apply to these tools
Browse all toolsCompatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan