Promptheus
- Promptheus
- docs
index.html•55.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promptheus - AI-Powered Prompt Optimization Tool</title>
<meta name="description" content="Transform raw prompts into polished, effective prompts for LLMs. Multi-provider support with intelligent question-asking and beautiful alchemical interface.">
<!-- Favicon Implementation -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#1a1a1a">
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Distinctive fonts -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;600;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<!-- Critical CSS -->
<style>
/* CSS Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #0A0E1A;
--bg-secondary: #151F2E;
--bg-tertiary: #1E293B;
--accent-gold: #D4A574;
--accent-gold-light: #E5B88A;
--accent-gold-dark: #B8935F;
--accent-emerald: #4ADE80;
--accent-cyan: #06B6D4;
--accent-rose: #F43F5E;
--text-primary: #E2E8F0;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--gradient-primary: linear-gradient(135deg, #0A0E1A 0%, #151F2E 50%, #1E293B 100%);
--gradient-gold: linear-gradient(135deg, #D4A574 0%, #E5B88A 100%);
--shadow-gold: 0 0 30px rgba(212, 165, 116, 0.3);
--shadow-glow: 0 0 60px rgba(212, 165, 116, 0.2);
}
@font-face {
font-family: 'IBM Plex Serif';
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
font-display: swap;
}
body {
font-family: 'IBM Plex Serif', Georgia, serif;
line-height: 1.7;
color: var(--text-primary);
background: var(--bg-primary);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 700;
line-height: 1.1;
margin-bottom: 1rem;
}
h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-top: 3rem;
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}
h4 {
font-size: 1.25rem;
}
p { margin-bottom: 1rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.btn-primary {
background: var(--gradient-gold);
color: var(--bg-primary);
box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 165, 116, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--accent-gold);
border: 2px solid var(--accent-gold);
}
.btn-secondary:hover {
background: var(--accent-gold);
color: var(--bg-primary);
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--text-muted);
}
.btn-ghost:hover {
background: var(--bg-tertiary);
border-color: var(--accent-gold);
color: var(--text-primary);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
background: var(--gradient-primary);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(212, 165, 116, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-text h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
margin-bottom: 1rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
.hero-text .subheadline {
font-size: 1.25rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hero-buttons .btn {
min-width: 180px;
}
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
position: relative;
}
.alchemical-circle {
width: 300px;
height: 300px;
border: 3px solid var(--accent-gold);
border-radius: 50%;
position: relative;
background: radial-gradient(circle, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
will-change: transform;
}
.alchemical-circle::before {
content: '⚗️';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
color: var(--accent-gold);
animation: pulse 2s ease-in-out infinite;
}
.alchemical-circle::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid var(--accent-gold-light);
border-radius: 50%;
opacity: 0.5;
animation: rotate 15s linear infinite reverse;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
/* Features Section */
.features {
padding: 6rem 0;
background: var(--bg-secondary);
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-weight: 800;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-header .description {
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--bg-tertiary);
padding: 2rem;
border-radius: 16px;
border: 1px solid rgba(212, 165, 116, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--accent-gold);
box-shadow: var(--shadow-gold);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--gradient-gold);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-card h3 {
color: var(--accent-gold);
margin-bottom: 1rem;
}
.feature-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Demo Section */
.demo {
padding: 6rem 0;
background: var(--bg-primary);
}
.demo-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.demo-content h3 {
color: var(--accent-gold);
margin-bottom: 1.5rem;
}
.demo-examples {
display: flex;
flex-direction: column;
gap: 2rem;
}
.demo-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 1.5rem;
border-left: 4px solid var(--accent-gold);
}
.demo-card h4 {
color: var(--text-primary);
margin-bottom: 0.5rem;
font-size: 1rem;
}
.demo-card p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
.demo-visual {
background: var(--bg-secondary);
border-radius: 16px;
padding: 2rem;
border: 1px solid rgba(212, 165, 116, 0.2);
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mock-ui {
width: 100%;
max-width: 500px;
background: var(--bg-tertiary);
border-radius: 8px;
padding: 1.5rem;
border: 1px solid var(--accent-gold);
}
.mock-ui-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}
.mock-ui-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-gold);
}
.mock-ui-content {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
/* How It Works Section */
.how-it-works {
padding: 6rem 0;
background: var(--bg-secondary);
}
.workflow-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.workflow-step {
text-align: center;
position: relative;
}
.workflow-step::before {
content: '';
position: absolute;
top: 40px;
left: 50%;
right: -100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-gold), transparent);
z-index: 1;
}
.workflow-step:last-child::before {
display: none;
}
.workflow-number {
width: 80px;
height: 80px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
margin: 0 auto 1rem;
color: var(--bg-primary);
position: relative;
z-index: 2;
}
.workflow-title {
color: var(--accent-gold);
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.workflow-description {
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.95rem;
}
/* Providers Section */
.providers {
padding: 6rem 0;
background: var(--bg-primary);
}
.providers-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
.provider-badge {
background: var(--bg-secondary);
border: 1px solid rgba(212, 165, 116, 0.3);
border-radius: 12px;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.provider-badge:hover {
border-color: var(--accent-gold);
transform: translateY(-2px);
}
.provider-badge span {
font-weight: 600;
color: var(--text-primary);
}
/* Installation Section */
.installation {
padding: 6rem 0;
background: var(--bg-secondary);
}
/* MCP Server Section */
.mcp-server {
padding: 6rem 0;
background: var(--bg-secondary);
}
.mcp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.mcp-card {
background: var(--bg-tertiary);
padding: 2rem;
border-radius: 16px;
border: 1px solid rgba(212, 165, 116, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mcp-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.mcp-card:hover {
transform: translateY(-5px);
border-color: var(--accent-gold);
box-shadow: var(--shadow-gold);
}
.mcp-card:hover::before {
opacity: 1;
}
.mcp-card h3 {
color: var(--accent-gold-light);
margin-bottom: 1rem;
font-size: 1.25rem;
margin-top: 0;
}
.mcp-card ul {
list-style: none;
padding: 0;
}
.mcp-card li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
color: var(--text-secondary);
}
.mcp-card li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-emerald);
}
.mcp-card p {
color: var(--text-secondary);
line-height: 1.6;
}
.mcp-details {
background: var(--bg-tertiary);
padding: 2rem;
border-radius: 16px;
border: 1px solid rgba(212, 165, 116, 0.2);
}
.mcp-details h3 {
color: var(--accent-gold-light);
margin-bottom: 1rem;
margin-top: 0;
}
.mcp-details ol {
margin-left: 1.5rem;
margin-bottom: 2rem;
}
.mcp-details li {
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.mcp-details code {
background: rgba(212, 165, 116, 0.1);
padding: 0.2rem 0.4rem;
border-radius: 4px;
color: var(--accent-emerald);
font-family: 'Fira Code', monospace;
border: 1px solid rgba(212, 165, 116, 0.2);
}
.info-box {
background: linear-gradient(135deg, rgba(212, 165, 116, 0.08) 0%, rgba(212, 165, 116, 0.03) 100%);
border-left: 5px solid var(--accent-gold);
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
border-top: 1px solid rgba(212, 165, 116, 0.2);
border-right: 1px solid rgba(212, 165, 116, 0.1);
border-bottom: 1px solid rgba(212, 165, 116, 0.1);
}
.info-box h4 {
color: var(--accent-gold);
margin: 0 0 0.75rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-box p {
color: var(--text-secondary);
margin: 0.5rem 0;
}
.install-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.install-code {
background: var(--bg-tertiary);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(212, 165, 116, 0.2);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.95rem;
line-height: 1.5;
overflow-x: auto;
}
.install-code code {
color: #E2E8F0;
}
.install-steps {
padding-left: 0;
}
.install-steps li {
background: var(--bg-tertiary);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
border-left: 4px solid var(--accent-gold);
}
.install-steps h4 {
color: var(--accent-gold);
margin-bottom: 0.5rem;
}
/* Footer */
footer {
background: var(--bg-primary);
padding: 3rem 0 2rem;
border-top: 1px solid rgba(212, 165, 116, 0.2);
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
color: var(--accent-gold);
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--accent-gold);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(212, 165, 116, 0.1);
color: var(--text-muted);
}
/* Responsive Design */
/* Mobile - 480px and below */
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.hero-content {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.hero-buttons {
justify-content: center;
flex-direction: column;
}
.hero-buttons .btn {
width: 100%;
}
.features-grid {
grid-template-columns: 1fr;
}
.alchemical-circle {
width: 200px;
height: 200px;
}
}
/* Tablet Portrait - 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
.hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hero-buttons {
justify-content: center;
}
.demo-container,
.install-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
/* Tablet Landscape and below - 1024px and below */
@media (max-width: 1024px) {
.demo-container,
.install-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.providers-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--accent-gold-light);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Visibility Animation */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }
.text-muted { color: var(--text-muted); }
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus styles */
*:focus {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
}
*:focus-visible {
outline: 3px solid var(--accent-gold);
outline-offset: 3px;
border-radius: 4px;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.alchemical-circle,
.fade-in,
.btn,
.feature-card,
.provider-badge,
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Skip to content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--accent-gold);
color: var(--bg-primary);
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
top: 0;
}
/* SVG Icon Styles */
.icon {
width: 1.25em;
height: 1.25em;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
}
.feature-icon .icon {
width: 1.75rem;
height: 1.75rem;
margin: 0;
}
.alchemical-circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4rem;
height: 4rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23D4A574' d='M9 2v5.5L4 17c-.6 1.2.1 2.5 1.5 2.5h13c1.4 0 2.1-1.3 1.5-2.5l-5-9.5V2h-6zm2 1h2v5l.4.8 1.6 3.2H9l1.6-3.2.4-.8V3z'/%3E%3Ccircle cx='9' cy='13' r='1' fill='%23D4A574'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%23D4A574'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
animation: pulse 2s ease-in-out infinite;
}
</style>
</head>
<body>
<!-- SVG Icon Sprite -->
<svg style="display: none;" aria-hidden="true">
<defs>
<!-- Alchemical Flask Icon -->
<symbol id="icon-flask" viewBox="0 0 24 24">
<path fill="currentColor" d="M9 2v5.5L4 17c-.6 1.2.1 2.5 1.5 2.5h13c1.4 0 2.1-1.3 1.5-2.5l-5-9.5V2h-6zm2 1h2v5l.4.8 1.6 3.2H9l1.6-3.2.4-.8V3z"/>
<circle cx="9" cy="13" r="1" fill="currentColor"/>
<circle cx="15" cy="15" r="1" fill="currentColor"/>
</symbol>
<!-- Crystal Ball Icon -->
<symbol id="icon-crystal" viewBox="0 0 24 24">
<circle cx="12" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M6 17.5c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M9 11c.5-1 1.5-2 3-2s2.5 1 3 2" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
</symbol>
<!-- Question Icon -->
<symbol id="icon-question" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M10 9c0-1.1.9-2 2-2s2 .9 2 2c0 .8-.5 1.5-1.2 1.8-.8.3-1.3 1-1.3 1.9" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
<circle cx="12" cy="17" r="1" fill="currentColor"/>
</symbol>
<!-- Mask/Theater Icon -->
<symbol id="icon-mask" viewBox="0 0 24 24">
<path d="M12 2C7 2 3 5.6 3 10c0 3.3 2 6.1 5 7.4V20l4-2 4 2v-2.6c3-1.3 5-4.1 5-7.4 0-4.4-4-8-9-8z" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="9" cy="10" r="1.5" fill="currentColor"/>
<circle cx="15" cy="10" r="1.5" fill="currentColor"/>
<path d="M9 13c.5.8 1.5 1.5 3 1.5s2.5-.7 3-1.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>
</symbol>
<!-- Keyboard Icon -->
<symbol id="icon-keyboard" viewBox="0 0 24 24">
<rect x="2" y="5" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="5" y1="9" x2="7" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="9" y1="9" x2="11" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="13" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="17" y1="9" x2="19" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="7" y1="15" x2="17" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</symbol>
<!-- Monitor/Screen Icon -->
<symbol id="icon-monitor" viewBox="0 0 24 24">
<rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
</symbol>
<!-- Plug/Connection Icon -->
<symbol id="icon-plug" viewBox="0 0 24 24">
<path d="M9 2v3m6-3v3M7 5h10c1.1 0 2 .9 2 2v4c0 3-2 5-5 5h-2c-3 0-5-2-5-5V7c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="11" y1="16" x2="11" y2="22" stroke="currentColor" stroke-width="2"/>
<line x1="13" y1="16" x2="13" y2="22" stroke="currentColor" stroke-width="2"/>
</symbol>
<!-- Chart/History Icon -->
<symbol id="icon-chart" viewBox="0 0 24 24">
<path d="M3 3v18h18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M7 14l4-4 3 3 5-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="7" cy="14" r="1.5" fill="currentColor"/>
<circle cx="11" cy="10" r="1.5" fill="currentColor"/>
<circle cx="14" cy="13" r="1.5" fill="currentColor"/>
<circle cx="19" cy="6" r="1.5" fill="currentColor"/>
</symbol>
<!-- Book/Documentation Icon -->
<symbol id="icon-book" viewBox="0 0 24 24">
<path d="M4 19.5C4 18.1 5.1 17 6.5 17H20" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M6.5 2H20v20H6.5c-1.4 0-2.5-1.1-2.5-2.5v-15C4 3.1 5.1 2 6.5 2z" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="9" y1="7" x2="17" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="9" y1="11" x2="17" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</symbol>
<!-- Code/Terminal Icon -->
<symbol id="icon-terminal" viewBox="0 0 24 24">
<polyline points="4 17 10 11 4 5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="19" x2="20" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</symbol>
<!-- Package/Box Icon -->
<symbol id="icon-package" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" fill="none" stroke-linejoin="round"/>
<path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</defs>
</svg>
<a href="#main-content" class="skip-link">Skip to content</a>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>Transform Raw Prompts into AI Gold</h1>
<p class="subheadline">
Promptheus uses advanced AI to transform your basic prompts into polished,
effective queries that get superior results from any LLM.
From vague ideas to precise instructions.
</p>
<div class="hero-buttons">
<a href="documentation.html" class="btn btn-primary" aria-label="Read Documentation">
<svg class="icon" aria-hidden="true"><use href="#icon-book"></use></svg>
Read Documentation
</a>
<a href="#mcp-server" class="btn btn-secondary" aria-label="MCP Server">
<svg class="icon" aria-hidden="true"><use href="#icon-plug"></use></svg>
MCP Server
</a>
<a href="#installation" class="btn btn-ghost" aria-label="Install CLI">
<svg class="icon" aria-hidden="true"><use href="#icon-terminal"></use></svg>
Install CLI
</a>
<a href="https://github.com/abhichandra21/Promptheus" target="_blank" class="btn btn-ghost" aria-label="View on GitHub">
<svg class="icon" aria-hidden="true"><use href="#icon-package"></use></svg>
View on GitHub
</a>
</div>
</div>
<div class="hero-visual">
<div class="alchemical-circle"></div>
</div>
</div>
</div>
</section>
<main id="main-content">
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<div class="section-header">
<h2>Alchemical Intelligence</h2>
<p class="description">
Just as ancient alchemists transformed base metals into gold,
Promptheus transforms your raw ideas into refined, powerful prompts.
</p>
</div>
<div class="features-grid">
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-crystal"></use></svg>
</div>
<h3>Multi-Provider Support</h3>
<p>
Works with Google Gemini, OpenAI, Anthropic Claude, Groq, Qwen, and GLM.
No vendor lock-in - transform prompts for any AI system.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-question"></use></svg>
</div>
<h3>Intelligent Questioning</h3>
<p>
Automatically asks clarifying questions to understand your intent,
then crafts the perfect prompt with all the right details.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-mask"></use></svg>
</div>
<h3>Multiple Output Styles</h3>
<p>
Choose from bullets, steps, plain text, or concise formats.
Get your refined prompt in the style that best suits your needs.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-keyboard"></use></svg>
</div>
<h3>Powerful CLI Interface</h3>
<p>
Built for developers and power users with keyboard shortcuts,
command history, and seamless pipe integration.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-monitor"></use></svg>
</div>
<h3>Beautiful Web Interface</h3>
<p>
Experience prompt enhancement in a modern, alchemical-themed web UI
with smooth animations and intuitive controls.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-plug"></use></svg>
</div>
<h3>MCP Server Integration</h3>
<p>
Built-in Model Context Protocol server for seamless integration
with AI toolchains and MCP-compatible clients.
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">
<svg class="icon" aria-hidden="true"><use href="#icon-chart"></use></svg>
</div>
<h3>History & Session Management</h3>
<p>
Track your prompt evolution with built-in history.
Load previous refinements and build on your best work.
</p>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section class="demo" id="demo">
<div class="container">
<div class="section-header">
<h2>Witness the Transformation</h2>
<p class="description">
See how Promptheus transforms simple prompts into powerful, detailed instructions.
</p>
</div>
<div class="demo-container">
<div class="demo-content">
<h3>Before & After Examples</h3>
<div class="demo-examples">
<div class="demo-card">
<h4>❌ Basic Prompt</h4>
<p>Write a story about a dragon who loses its fire and has to find it again.</p>
</div>
<div class="demo-card">
<h4>✅ Transformed Prompt</h4>
<p>Create a 1000-word fantasy story about Ember, a young dragon who accidentally loses their fire-breathing ability after a magical storm. Include themes of perseverance, self-discovery, and unlikely friendships. The story should have three distinct acts: 1) The accident and Ember's despair, 2) A journey through the forest to find the lost flame, 3) The emotional climax where Ember realizes true power comes from within.</p>
</div>
</div>
</div>
<div class="demo-visual">
<div class="mock-ui">
<div class="mock-ui-header">
<div class="mock-ui-dot"></div>
<div class="mock-ui-dot"></div>
<div class="mock-ui-dot"></div>
</div>
<div class="mock-ui-content">
<strong>🔮 Promptheus Web Interface</strong><br><br>
Enter your raw prompt:<br>
"Help me write an email to my boss"<br><br>
<span style="color: #D4A574;">✨ AI Analysis:</span><br>
• Purpose: Professional communication<br>
• Audience: Manager/supervisor<br>
• Context: Workplace setting<br><br>
<span style="color: #D4A574;">🎯 Clarifying Questions:</span><br>
• What's the purpose of the email?<br>
• What tone should we use?<br>
• Any specific topics to include?
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="how-it-works" id="how-it-works">
<div class="container">
<div class="section-header">
<h2>The Alchemical Process</h2>
<p class="description">
Four simple steps to transform your raw ideas into AI gold.
</p>
</div>
<div class="workflow-container">
<div class="workflow-step fade-in">
<div class="workflow-number">1</div>
<h3 class="workflow-title">Gather Raw Materials</h3>
<p class="workflow-description">
Start with your basic idea or rough prompt.
No need for perfect phrasing - just your raw intention.
</p>
</div>
<div class="workflow-step fade-in">
<div class="workflow-number">2</div>
<h3 class="workflow-title">Apply AI Heat</h3>
<p class="workflow-description">
Our intelligent AI analyzes your intent and asks clarifying questions
to understand exactly what you want to achieve.
</p>
</div>
<div class="workflow-step fade-in">
<div class="workflow-number">3</div>
<h3 class="workflow-title">Transmutation</h3>
<p class="workflow-description">
The alchemical transformation begins. We refine your concept,
add structure, and craft a precise, effective prompt.
</p>
</div>
<div class="workflow-step fade-in">
<div class="workflow-number">4</div>
<h3 class="workflow-title">Extract the Gold</h3>
<p class="workflow-description">
Receive your polished prompt ready for any AI.
Better clarity, better results - the transformation is complete.
</p>
</div>
</div>
</div>
</section>
<!-- Providers Section -->
<section class="providers" id="providers">
<div class="container">
<div class="section-header">
<h2>Supported AI Providers</h2>
<p class="description">
Transform prompts for any AI system. No vendor lock-in here.
</p>
</div>
<div class="providers-grid">
<div class="provider-badge fade-in">
<span>🔵 Google Gemini</span>
</div>
<div class="provider-badge fade-in">
<span>🟢 OpenAI</span>
</div>
<div class="provider-badge fade-in">
<span>🦉 Anthropic Claude</span>
</div>
<div class="provider-badge fade-in">
<span>⚡ Groq</span>
</div>
<div class="provider-badge fade-in">
<span>🌙 Qwen</span>
</div>
<div class="provider-badge fade-in">
<span>🤖 GLM</span>
</div>
</div>
</div>
</section>
<!-- MCP Server Section -->
<section class="mcp-server" id="mcp-server">
<div class="container">
<div class="section-header">
<h2>MCP Server Integration</h2>
<p class="description">
Built-in Model Context Protocol server for seamless integration with AI toolchains and MCP-compatible clients.
</p>
</div>
<div class="mcp-content">
<div class="mcp-grid">
<div class="mcp-card">
<h3>🚀 Quick Start</h3>
<div class="install-code" style="margin-bottom: 1.5rem;">
<code>promptheus mcp</code>
</div>
<ul>
<li>Start server with single command</li>
<li>Connect via MCP-compatible clients</li>
<li>Call tools using standard MCP protocol</li>
<li>Handle clarifications interactively</li>
<li>Integrate with AI toolchains</li>
</ul>
</div>
<div class="mcp-card">
<h3>🛠 Available Tools</h3>
<ul>
<li><strong>refine_prompt</strong> - Intelligent prompt refinement</li>
<li><strong>tweak_prompt</strong> - Surgical prompt modifications</li>
<li><strong>list_models</strong> - Provider model discovery</li>
<li><strong>list_providers</strong> - Configuration status checking</li>
<li><strong>validate_environment</strong> - Environment validation</li>
</ul>
</div>
<div class="mcp-card">
<h3>🎯 Use Cases</h3>
<ul>
<li>AI toolchain integration</li>
<li>Batch prompt processing</li>
<li>Custom AI workflows</li>
<li>Development automation</li>
<li>Automated prompt optimization pipelines</li>
<li>Multi-model prompt testing</li>
</ul>
</div>
</div>
<div class="mcp-details">
<h3>How It Works</h3>
<ol>
<li><strong>Connect:</strong> Start the MCP server with <code>promptheus mcp</code></li>
<li><strong>Discover:</strong> Use <code>list_providers</code> to check available AI providers</li>
<li><strong>Refine:</strong> Call <code>refine_prompt</code> with your basic prompt</li>
<li><strong>Integrate:</strong> Use the refined prompt with your AI toolchain</li>
</ol>
<div class="info-box">
<h4>🔄 Two Integration Modes</h4>
<p><strong>Interactive Mode:</strong> When AskUserQuestion is available, questions are asked automatically.</p>
<p><strong>Structured Mode:</strong> Returns clarification questions for client-side handling.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section class="installation" id="installation">
<div class="container">
<div class="section-header">
<h2>Get Started in Minutes</h2>
<p class="description">
Install Promptheus and start transforming your prompts today.
</p>
</div>
<div class="install-grid">
<div>
<h3>Quick Installation</h3>
<div class="install-code">
<code>pip install promptheus</code>
</div>
<h3>Usage Examples</h3>
<div class="install-code">
<code># Basic usage
promptheus "Write a poem about AI"
# Skip questions
promptheus -s "Explain quantum computing"
# Interactive mode
promptheus
# Different providers
promptheus --provider gemini "Create a marketing plan"
</code>
</div>
</div>
<div>
<ul class="install-steps">
<li>
<h4>Step 1: Install Python</h4>
<p>Ensure you have Python 3.8+ installed. Check with:</p>
<code>python --version</code>
</li>
<li>
<h4>Step 2: Install Promptheus</h4>
<p>Install the package using pip:</p>
<code>pip install promptheus</code>
</li>
<li>
<h4>Step 3: Set Up API Keys</h4>
<p>Add your API keys to environment variables:</p>
<code>export OPENAI_API_KEY="your-key"</code>
</li>
<li>
<h4>Step 4: Start Transforming</h4>
<p>Run Promptheus and watch your prompts transform:</p>
<code>promptheus "Your prompt here"</code>
</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Product</h4>
<ul class="footer-links">
<li><a href="#features">Features</a></li>
<li><a href="#mcp-server">MCP Server</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="documentation.html">Documentation</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul class="footer-links">
<li><a href="https://github.com/abhichandra21/Promptheus" target="_blank">GitHub</a></li>
<li><a href="https://github.com/abhichandra21/Promptheus/releases" target="_blank">Changelog</a></li>
<li><a href="documentation.html#contributing">Contributing</a></li>
<li><a href="https://github.com/abhichandra21/Promptheus/issues" target="_blank">Issues</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#providers">Providers</a></li>
<li><a href="documentation.html#troubleshooting">Troubleshooting</a></li>
<li><a href="documentation.html#examples">Examples</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Promptheus. Open source project. MIT License.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all fade-in elements
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Smooth scroll for navigation 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'
});
}
});
});
// Parallax effect for hero section with throttling
let ticking = false;
let lastScrollY = 0;
function handleParallax() {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
const heroContent = document.querySelector('.hero-content');
if (hero && heroContent) {
const parallax = scrolled * 0.5;
heroContent.style.transform = `translateY(${parallax}px)`;
}
lastScrollY = scrolled;
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(handleParallax);
ticking = true;
}
});
// Animate counter for GitHub stars (placeholder)
function animateCounter(element, target) {
let current = 0;
const increment = target / 100;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
element.textContent = Math.floor(current);
}, 20);
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
console.log('Promptheus landing page loaded');
});
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/abhichandra21/Promptheus'
If you have feedback or need assistance with the MCP directory API, please join our Discord server