Last active
January 21, 2026 21:25
-
-
Save steig/2c906d2908f026122c9730461d2935e8 to your computer and use it in GitHub Desktop.
LDC AI Framework - Vibe Coding Landing Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LDC AI Framework — Vibe Coding With Persistent Memory</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --primary-light: #818cf8; | |
| --secondary: #0ea5e9; | |
| --accent: #f59e0b; | |
| --success: #22c55e; | |
| --coral: #f87171; | |
| --dark: #0f172a; | |
| --dark-soft: #1e293b; | |
| --dark-card: #1a2332; | |
| --gray: #64748b; | |
| --gray-light: #94a3b8; | |
| --white: #ffffff; | |
| --gradient: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%); | |
| --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); | |
| --gradient-success: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--dark); | |
| color: var(--white); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .bg-pattern { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| nav { | |
| padding: 24px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-badge { | |
| background: var(--dark-soft); | |
| padding: 8px 16px; | |
| border-radius: 100px; | |
| font-size: 0.875rem; | |
| color: var(--gray); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| /* Hero */ | |
| .hero { | |
| padding: 80px 0 60px; | |
| text-align: center; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| padding: 8px 20px; | |
| border-radius: 100px; | |
| font-size: 0.875rem; | |
| color: var(--primary-light); | |
| margin-bottom: 32px; | |
| } | |
| h1 { | |
| font-size: clamp(2.5rem, 6vw, 4rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 24px; | |
| letter-spacing: -0.02em; | |
| } | |
| h1 span { | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.25rem; | |
| color: var(--gray); | |
| max-width: 700px; | |
| margin: 0 auto 48px; | |
| line-height: 1.7; | |
| } | |
| .cta-group { | |
| display: flex; | |
| gap: 16px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 16px 32px; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: var(--white); | |
| box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5); | |
| } | |
| .btn-secondary { | |
| background: var(--dark-soft); | |
| color: var(--white); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| /* Stats */ | |
| .stats-banner { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 24px; | |
| padding: 40px; | |
| background: var(--dark-soft); | |
| border-radius: 24px; | |
| margin: 40px 0 80px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .stat { text-align: center; } | |
| .stat-value { | |
| font-size: 2.25rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 0.85rem; | |
| margin-top: 4px; | |
| } | |
| /* Sections */ | |
| .section { | |
| padding: 80px 0; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 56px; | |
| } | |
| .section-label { | |
| color: var(--primary-light); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 16px; | |
| } | |
| .section-title { | |
| font-size: clamp(1.75rem, 4vw, 2.75rem); | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| } | |
| .section-subtitle { | |
| color: var(--gray); | |
| font-size: 1.1rem; | |
| max-width: 650px; | |
| margin: 0 auto; | |
| } | |
| /* Capability Cards */ | |
| .capabilities-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| .capability-card { | |
| background: var(--dark-card); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 20px; | |
| padding: 32px; | |
| transition: all 0.3s ease; | |
| } | |
| .capability-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| } | |
| .capability-icon { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--gradient); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| margin-bottom: 20px; | |
| } | |
| .capability-card h4 { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| } | |
| .capability-card p { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| margin-bottom: 16px; | |
| } | |
| .capability-card ul { | |
| list-style: none; | |
| } | |
| .capability-card li { | |
| color: var(--gray-light); | |
| font-size: 0.8rem; | |
| padding: 4px 0; | |
| padding-left: 16px; | |
| position: relative; | |
| } | |
| .capability-card li::before { | |
| content: "→"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--success); | |
| } | |
| /* Real Examples */ | |
| .examples-section { | |
| background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 50%, transparent 100%); | |
| } | |
| .example-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 24px; | |
| } | |
| .example-card { | |
| background: var(--dark-card); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 28px; | |
| transition: all 0.3s ease; | |
| } | |
| .example-card:hover { | |
| border-color: rgba(99, 102, 241, 0.2); | |
| } | |
| .example-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .example-tag { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-light); | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .example-tag.ux { background: rgba(34, 197, 94, 0.15); color: #4ade80; } | |
| .example-tag.perf { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } | |
| .example-tag.analytics { background: rgba(14, 165, 233, 0.15); color: #38bdf8; } | |
| .example-tag.catalog { background: rgba(168, 85, 247, 0.15); color: #c084fc; } | |
| .example-card h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .example-card p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| line-height: 1.6; | |
| } | |
| .example-metrics { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .metric { | |
| text-align: center; | |
| } | |
| .metric-value { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--success); | |
| } | |
| .metric-label { | |
| font-size: 0.7rem; | |
| color: var(--gray); | |
| text-transform: uppercase; | |
| } | |
| /* Terminal Demo */ | |
| .terminal { | |
| background: var(--dark-card); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| margin: 40px 0; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .terminal-header { | |
| background: var(--dark-soft); | |
| padding: 12px 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .terminal-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .terminal-dot.red { background: #ef4444; } | |
| .terminal-dot.yellow { background: #f59e0b; } | |
| .terminal-dot.green { background: #22c55e; } | |
| .terminal-title { | |
| margin-left: 12px; | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| } | |
| .terminal-body { | |
| padding: 24px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.9; | |
| } | |
| .terminal-body .comment { color: var(--gray); } | |
| .terminal-body .prompt { color: var(--success); } | |
| .terminal-body .command { color: var(--primary-light); } | |
| .terminal-body .output { color: var(--gray-light); } | |
| .terminal-body .success { color: var(--success); } | |
| .terminal-body .number { color: var(--accent); } | |
| /* Process Section */ | |
| .process-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 24px; | |
| } | |
| .process-step { | |
| text-align: center; | |
| padding: 24px; | |
| } | |
| .process-number { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| margin: 0 auto 16px; | |
| } | |
| .process-step h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .process-step p { | |
| color: var(--gray); | |
| font-size: 0.85rem; | |
| line-height: 1.5; | |
| } | |
| /* Feature List */ | |
| .feature-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 16px; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .feature-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| background: var(--dark-soft); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .feature-check { | |
| color: var(--success); | |
| font-size: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| .feature-item p { | |
| color: var(--gray-light); | |
| font-size: 0.9rem; | |
| } | |
| .feature-item strong { | |
| color: var(--white); | |
| } | |
| /* Quote */ | |
| .quote-section { | |
| padding: 80px 0; | |
| text-align: center; | |
| } | |
| .quote { | |
| font-size: clamp(1.25rem, 2.5vw, 1.75rem); | |
| font-weight: 500; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| line-height: 1.6; | |
| color: var(--gray-light); | |
| } | |
| .quote span { | |
| color: var(--white); | |
| font-weight: 600; | |
| } | |
| /* CTA */ | |
| .final-cta { | |
| padding: 80px 0; | |
| } | |
| .cta-card { | |
| background: var(--gradient); | |
| border-radius: 32px; | |
| padding: 80px 40px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .cta-card h2 { | |
| font-size: clamp(1.75rem, 4vw, 2.5rem); | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| position: relative; | |
| } | |
| .cta-card p { | |
| font-size: 1.125rem; | |
| opacity: 0.9; | |
| margin-bottom: 40px; | |
| position: relative; | |
| } | |
| .cta-card .btn { | |
| background: var(--white); | |
| color: var(--primary-dark); | |
| position: relative; | |
| } | |
| footer { | |
| padding: 40px 0; | |
| text-align: center; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| } | |
| footer p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .capabilities-grid { grid-template-columns: repeat(2, 1fr); } | |
| .stats-banner { grid-template-columns: repeat(2, 1fr); } | |
| .process-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .capabilities-grid, | |
| .example-grid, | |
| .feature-list { grid-template-columns: 1fr; } | |
| .process-grid { grid-template-columns: 1fr; gap: 16px; } | |
| .stats-banner { padding: 24px; } | |
| .cta-card { padding: 60px 24px; } | |
| } | |
| /* Platform Section */ | |
| .platform-section { | |
| background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 50%, transparent 100%); | |
| } | |
| .platform-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| margin-bottom: 48px; | |
| } | |
| .platform-card { | |
| background: var(--dark-card); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 24px; | |
| transition: all 0.3s ease; | |
| } | |
| .platform-card:hover { | |
| border-color: rgba(99, 102, 241, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .platform-card.main { | |
| grid-column: span 2; | |
| grid-row: span 2; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%); | |
| border-color: rgba(99, 102, 241, 0.25); | |
| padding: 32px; | |
| } | |
| .platform-number { | |
| font-size: 3.5rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| } | |
| .platform-icon { | |
| font-size: 1.75rem; | |
| margin-bottom: 12px; | |
| } | |
| .platform-card h4 { | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .platform-card p { | |
| color: var(--gray); | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| .platform-stat { | |
| margin-top: 16px; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| } | |
| .stat-num { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-light); | |
| } | |
| .stat-text { | |
| font-size: 0.75rem; | |
| color: var(--gray); | |
| } | |
| .command-list { | |
| margin-top: 24px; | |
| } | |
| .command-group { | |
| margin-bottom: 16px; | |
| } | |
| .command-group:last-child { | |
| margin-bottom: 0; | |
| } | |
| .command-label { | |
| display: block; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--gray); | |
| margin-bottom: 8px; | |
| } | |
| .command-group code { | |
| display: inline-block; | |
| background: rgba(0,0,0,0.3); | |
| color: var(--primary-light); | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| font-size: 0.8rem; | |
| margin-right: 8px; | |
| margin-bottom: 8px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| } | |
| /* Platform Workflow */ | |
| .platform-workflow { | |
| background: var(--dark-card); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| border-radius: 16px; | |
| padding: 32px; | |
| } | |
| .workflow-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--gray); | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .workflow-commands { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .workflow-cmd { | |
| text-align: center; | |
| } | |
| .workflow-cmd code { | |
| display: block; | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-light); | |
| padding: 10px 16px; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| margin-bottom: 6px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| } | |
| .workflow-cmd span { | |
| font-size: 0.7rem; | |
| color: var(--gray); | |
| } | |
| .workflow-arrow { | |
| color: var(--primary-light); | |
| opacity: 0.4; | |
| font-size: 1.25rem; | |
| } | |
| @media (max-width: 1024px) { | |
| .platform-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .platform-card.main { | |
| grid-column: span 2; | |
| grid-row: span 1; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .platform-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .platform-card.main { | |
| grid-column: span 1; | |
| } | |
| .workflow-commands { | |
| flex-direction: column; | |
| } | |
| .workflow-arrow { | |
| transform: rotate(90deg); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| .capability-icon { animation: float 3s ease-in-out infinite; } | |
| .capability-card:nth-child(2) .capability-icon { animation-delay: 0.4s; } | |
| .capability-card:nth-child(3) .capability-icon { animation-delay: 0.8s; } | |
| .capability-card:nth-child(4) .capability-icon { animation-delay: 1.2s; } | |
| .capability-card:nth-child(5) .capability-icon { animation-delay: 1.6s; } | |
| .capability-card:nth-child(6) .capability-icon { animation-delay: 2s; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-pattern"></div> | |
| <div class="container"> | |
| <nav> | |
| <div class="logo">LDC AI</div> | |
| <div class="nav-badge">v2.7.0 • Open Framework</div> | |
| </nav> | |
| <!-- Hero --> | |
| <section class="hero"> | |
| <div class="hero-badge">✨ AI Development Framework</div> | |
| <h1>Vibe Coding With <span>Persistent Memory</span></h1> | |
| <p class="hero-subtitle"> | |
| An AI development framework that remembers your codebase, your decisions, and your preferences—across every session. 35+ commands. 17 tech profiles. Zero re-explaining. | |
| </p> | |
| <div class="cta-group"> | |
| <a href="#platform" class="btn btn-primary">See the Platform</a> | |
| <a href="#examples" class="btn btn-secondary">Real-World Examples</a> | |
| </div> | |
| </section> | |
| <!-- Stats --> | |
| <div class="stats-banner"> | |
| <div class="stat"> | |
| <div class="stat-value">35+</div> | |
| <div class="stat-label">Slash Commands</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">17</div> | |
| <div class="stat-label">Tech Profiles</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">100+</div> | |
| <div class="stat-label">Sessions Logged</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">0</div> | |
| <div class="stat-label">Context Lost Between Sessions</div> | |
| </div> | |
| </div> | |
| <!-- Capabilities --> | |
| <section class="section" id="capabilities"> | |
| <div class="section-header"> | |
| <p class="section-label">Developer Experience</p> | |
| <h2 class="section-title">What Makes This Different</h2> | |
| <p class="section-subtitle">Not just another AI chat—a complete development infrastructure</p> | |
| </div> | |
| <div class="capabilities-grid"> | |
| <div class="capability-card"> | |
| <div class="capability-icon">🧠</div> | |
| <h4>Persistent Memory</h4> | |
| <p>Obsidian Brain integration stores every session. Decisions, gotchas, patterns—all searchable.</p> | |
| <ul> | |
| <li>Session journals auto-logged</li> | |
| <li>Cross-session context recall</li> | |
| <li>Project knowledge graphs</li> | |
| <li>Decision documentation</li> | |
| <li>/pickup resumes instantly</li> | |
| </ul> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="capability-icon">⚡</div> | |
| <h4>Purpose-Built Commands</h4> | |
| <p>35+ slash commands for real workflows. Not generic prompts—specific actions that just work.</p> | |
| <ul> | |
| <li>/commit with smart messages</li> | |
| <li>/code_review runs 3 checks</li> | |
| <li>/create_pr with templates</li> | |
| <li>/do_task from GitHub issues</li> | |
| <li>/spawn parallel sessions</li> | |
| </ul> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="capability-icon">🎯</div> | |
| <h4>Technology Profiles</h4> | |
| <p>17 stack-specific configs. Best practices, commit conventions, anti-patterns—per technology.</p> | |
| <ul> | |
| <li>Shopify/Liquid</li> | |
| <li>React/Next.js/TypeScript</li> | |
| <li>Django/Python</li> | |
| <li>Go/Rust</li> | |
| <li>Custom profiles for your stack</li> | |
| </ul> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="capability-icon">🔗</div> | |
| <h4>GitHub-Native Workflows</h4> | |
| <p>Issues become tasks. Commits link automatically. PRs close issues. Single source of truth.</p> | |
| <ul> | |
| <li>Tasks from GitHub issues</li> | |
| <li>Auto-linked commits</li> | |
| <li>PR templates filled in</li> | |
| <li>Branch conventions enforced</li> | |
| <li>Worktree support for parallel</li> | |
| </ul> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="capability-icon">🛡️</div> | |
| <h4>Safety Rails Built In</h4> | |
| <p>Never auto-commits. Runs tests first. No force push. Git operations require explicit request.</p> | |
| <ul> | |
| <li>No auto-commit/push</li> | |
| <li>Tests before claiming done</li> | |
| <li>No destructive git ops</li> | |
| <li>Hooks for custom checks</li> | |
| <li>Verify before complete</li> | |
| </ul> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="capability-icon">🤖</div> | |
| <h4>Autonomous Modes</h4> | |
| <p>Spawn parallel Claude sessions in tmux. Run autonomous task loops. Ship while you sleep.</p> | |
| <ul> | |
| <li>/spawn for parallel work</li> | |
| <li>/ralph for autonomous loops</li> | |
| <li>Worktree-based isolation</li> | |
| <li>Background task execution</li> | |
| <li>Multi-feature concurrency</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- The Platform --> | |
| <section class="section platform-section"> | |
| <div class="section-header"> | |
| <p class="section-label">The Platform</p> | |
| <h2 class="section-title">Built on LDC AI Framework</h2> | |
| <p class="section-subtitle">A complete development infrastructure—not just AI chat</p> | |
| </div> | |
| <div class="platform-grid"> | |
| <div class="platform-card main"> | |
| <div class="platform-number">35+</div> | |
| <h4>Slash Commands</h4> | |
| <p>Purpose-built commands for every stage of development</p> | |
| <div class="command-list"> | |
| <div class="command-group"> | |
| <span class="command-label">Daily</span> | |
| <code>/pickup</code> <code>/commit</code> <code>/create_pr</code> | |
| </div> | |
| <div class="command-group"> | |
| <span class="command-label">Quality</span> | |
| <code>/code_review</code> <code>/pr_review</code> <code>/security-scan</code> | |
| </div> | |
| <div class="command-group"> | |
| <span class="command-label">Planning</span> | |
| <code>/create_task</code> <code>/do_task</code> <code>/adr</code> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🧠</div> | |
| <h4>Persistent Memory</h4> | |
| <p>Obsidian Brain integration. Every session logged. Decisions, gotchas, patterns—searchable and permanent.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">100+</span> | |
| <span class="stat-text">sessions logged</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">⚡</div> | |
| <h4>Parallel Execution</h4> | |
| <p>Code reviews run security, performance, and quality checks simultaneously. 3 agents working at once.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">3x</span> | |
| <span class="stat-text">faster reviews</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🎯</div> | |
| <h4>17 Tech Profiles</h4> | |
| <p>Shopify, React, Django, Next.js—each knows best practices, commit conventions, and anti-patterns.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">17</span> | |
| <span class="stat-text">stack configs</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🔗</div> | |
| <h4>GitHub-Native</h4> | |
| <p>Tasks in GitHub issues. Commits auto-link. PRs close issues on merge. Single source of truth.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">0</span> | |
| <span class="stat-text">sync issues</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🔄</div> | |
| <h4>Session Continuity</h4> | |
| <p>Work logs committed to repo. Next session picks up exactly where it left off. Zero context lost.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">100%</span> | |
| <span class="stat-text">context kept</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🛡️</div> | |
| <h4>Safety Rails</h4> | |
| <p>Never auto-commits. Runs tests first. No force push. Git operations require explicit request.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">0</span> | |
| <span class="stat-text">accidents</span> | |
| </div> | |
| </div> | |
| <div class="platform-card"> | |
| <div class="platform-icon">🤖</div> | |
| <h4>Autonomous Loops</h4> | |
| <p>Spawn parallel sessions with <code>/spawn</code>. Run autonomously with <code>/ralph</code>. Multiple features at once.</p> | |
| <div class="platform-stat"> | |
| <span class="stat-num">∞</span> | |
| <span class="stat-text">parallel</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-workflow"> | |
| <div class="workflow-label">Typical Workflow</div> | |
| <div class="workflow-commands"> | |
| <div class="workflow-cmd"> | |
| <code>/pickup</code> | |
| <span>Load context</span> | |
| </div> | |
| <span class="workflow-arrow">→</span> | |
| <div class="workflow-cmd"> | |
| <code>/do_task 123</code> | |
| <span>Implement</span> | |
| </div> | |
| <span class="workflow-arrow">→</span> | |
| <div class="workflow-cmd"> | |
| <code>/code_review</code> | |
| <span>Quality check</span> | |
| </div> | |
| <span class="workflow-arrow">→</span> | |
| <div class="workflow-cmd"> | |
| <code>/commit</code> | |
| <span>Smart commit</span> | |
| </div> | |
| <span class="workflow-arrow">→</span> | |
| <div class="workflow-cmd"> | |
| <code>/create_pr</code> | |
| <span>Ship it</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Real Examples --> | |
| <section class="section examples-section" id="examples"> | |
| <div class="section-header"> | |
| <p class="section-label">Built With This Framework</p> | |
| <h2 class="section-title">What Persistent Memory Enables</h2> | |
| <p class="section-subtitle">Real features shipped to production—with full context across 100+ sessions</p> | |
| </div> | |
| <div class="example-grid"> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag ux">UX</span> | |
| </div> | |
| <h4>Variant Selector for 21+ Options</h4> | |
| <p>Ceiling fans with 21 finish options needed a better UI than scrolling buttons. Built hybrid modal pattern: shows 6 popular options inline, "View All" opens searchable modal with live filtering.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">237</div> | |
| <div class="metric-label">Lines CSS</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">154</div> | |
| <div class="metric-label">Lines JS</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">4</div> | |
| <div class="metric-label">Patterns Tested</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag perf">Performance</span> | |
| </div> | |
| <h4>Collection Page LCP: 9.8s → 1.4s</h4> | |
| <p>Root cause: lazy loading the LCP image. Fixed image loading strategy, removed 103KB render-blocking resources, conditional jQuery loading. Hero images now eager-load with fetchpriority="high".</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">85%</div> | |
| <div class="metric-label">Faster LCP</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">103KB</div> | |
| <div class="metric-label">JS Removed</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">0.016</div> | |
| <div class="metric-label">CLS Score</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag analytics">Analytics</span> | |
| </div> | |
| <h4>GA4 Behavioral Tracking (1,648 Lines)</h4> | |
| <p>Complete funnel visibility: menu interactions (open/click/abandon), collection browsing (filters, pagination, scroll depth), PDP engagement (gallery, reviews, purchase intent signals), copy tracking.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">25+</div> | |
| <div class="metric-label">Event Types</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">5</div> | |
| <div class="metric-label">Page Areas</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">v1.13</div> | |
| <div class="metric-label">Release</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag ux">UX</span> | |
| </div> | |
| <h4>Mobile Sticky ATC Redesign</h4> | |
| <p>Compact mobile sticky bar: product image spanning both rows, title + price + cart icon button. CSS Grid layout with display:contents for flexible positioning. Triggers when product images scroll off screen.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">2-row</div> | |
| <div class="metric-label">Grid Layout</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">36px</div> | |
| <div class="metric-label">Touch Target</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">3</div> | |
| <div class="metric-label">Size Options</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag perf">Performance</span> | |
| </div> | |
| <h4>Custom Wishlist: 72% Faster</h4> | |
| <p>Third-party wishlist app caused 268ms forced reflows on every page. Built custom implementation with direct WishlistKing API integration. Header badge, hover animations, zero layout thrashing.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">270→75ms</div> | |
| <div class="metric-label">Reflow Time</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">72%</div> | |
| <div class="metric-label">Improvement</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">3</div> | |
| <div class="metric-label">New Files</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag catalog">Catalog</span> | |
| </div> | |
| <h4>Algolia Conversion Attribution</h4> | |
| <p>Search analytics weren't tracking purchases. Built Web Pixel for checkout attribution, cookie-based queryID storage, revenue data for AOV metrics. Non-search fallbacks for direct traffic.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">7</div> | |
| <div class="metric-label">Event Types</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">✓</div> | |
| <div class="metric-label">Revenue Data</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">✓</div> | |
| <div class="metric-label">Web Pixel</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag ux">UX</span> | |
| </div> | |
| <h4>Firefox Image Flash Fix</h4> | |
| <p>Hero slider images flashed full-screen before CSS loaded in Firefox. Progressive CSS escalation: external → inline style block → inline style attributes. Images now contained from first paint.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">0</div> | |
| <div class="metric-label">Flash Duration</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">3</div> | |
| <div class="metric-label">CSS Layers</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">✓</div> | |
| <div class="metric-label">Cross-Browser</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <div class="example-header"> | |
| <span class="example-tag analytics">Analytics</span> | |
| </div> | |
| <h4>Menu Engagement Tracking</h4> | |
| <p>Understand how customers navigate: menu open/click/abandon events, hover depth tracking, time-to-click measurements, mobile back button and category expansion. Full funnel visibility.</p> | |
| <div class="example-metrics"> | |
| <div class="metric"> | |
| <div class="metric-value">8</div> | |
| <div class="metric-label">Event Types</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">✓</div> | |
| <div class="metric-label">Desktop</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">✓</div> | |
| <div class="metric-label">Mobile</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Demo --> | |
| <div class="terminal"> | |
| <div class="terminal-header"> | |
| <div class="terminal-dot red"></div> | |
| <div class="terminal-dot yellow"></div> | |
| <div class="terminal-dot green"></div> | |
| <span class="terminal-title">Typical development session</span> | |
| </div> | |
| <div class="terminal-body"> | |
| <div class="comment"># Morning: Resume exactly where you left off</div> | |
| <div><span class="prompt">$</span> <span class="command">/pickup</span></div> | |
| <div class="output">🧠 Context loaded: my-project (main), feature in progress</div> | |
| <div class="output">📋 Yesterday: Added API endpoints, need to wire up frontend</div> | |
| <br> | |
| <div class="comment"># Work on a GitHub issue with full context</div> | |
| <div><span class="prompt">$</span> <span class="command">/do_task 47</span></div> | |
| <div class="output">✨ Exploring: Reading issue #47, checking related code...</div> | |
| <div class="output">✨ Planning: API already exists, need React hooks + components</div> | |
| <div class="output">✨ Implementing: UserProfile.tsx, useUser hook, tests...</div> | |
| <br> | |
| <div class="comment"># Automatic code review before shipping</div> | |
| <div><span class="prompt">$</span> <span class="command">/code_review</span></div> | |
| <div class="output">🔍 Security: ✅ Input validated, no XSS vectors</div> | |
| <div class="output">🔍 Performance: ✅ Proper memoization, efficient renders</div> | |
| <div class="output">🔍 Quality: ✅ Follows existing patterns, tests pass</div> | |
| <br> | |
| <div class="comment"># Ship it</div> | |
| <div><span class="prompt">$</span> <span class="command">/commit && /create_pr</span></div> | |
| <div class="success">✅ PR #48 created, closes #47, ready for review</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="section"> | |
| <div class="section-header"> | |
| <p class="section-label">Getting Started</p> | |
| <h2 class="section-title">Your First Session to Shipping</h2> | |
| </div> | |
| <div class="process-grid"> | |
| <div class="process-step"> | |
| <div class="process-number">1</div> | |
| <h4>Install</h4> | |
| <p>Clone the framework, run /initialize, select your tech profile. Brain connects automatically.</p> | |
| </div> | |
| <div class="process-step"> | |
| <div class="process-number">2</div> | |
| <h4>Configure</h4> | |
| <p>Set your project context. The framework learns your conventions, preferences, and codebase structure.</p> | |
| </div> | |
| <div class="process-step"> | |
| <div class="process-number">3</div> | |
| <h4>Build</h4> | |
| <p>Work naturally. /do_task, /code_review, /commit. Context carries between sessions automatically.</p> | |
| </div> | |
| <div class="process-step"> | |
| <div class="process-number">4</div> | |
| <h4>Ship</h4> | |
| <p>/create_pr with auto-generated descriptions. /pickup tomorrow and continue exactly where you stopped.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What's Different --> | |
| <section class="section"> | |
| <div class="section-header"> | |
| <p class="section-label">Why This Works</p> | |
| <h2 class="section-title">AI That Remembers Your Codebase</h2> | |
| <p class="section-subtitle">Not just code generation—a development partner with persistent memory</p> | |
| </div> | |
| <div class="feature-list"> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Context carries over.</strong> Start Monday's session where Friday ended. No re-explaining your architecture, your conventions, your preferences.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Decisions stick.</strong> "We use Tailwind" gets remembered. "Tests go in __tests__" doesn't need repeating.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Gotchas are learned.</strong> "That API requires auth headers" becomes permanent knowledge. Won't make that mistake twice.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Patterns evolve.</strong> The component pattern from Sprint 1 influences the new feature in Sprint 3. Knowledge compounds.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Code reviews happen.</strong> Every feature gets security, performance, and quality checks before shipping. Automatic, not optional.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-check">✓</span> | |
| <p><strong>Documentation exists.</strong> Session journals capture why decisions were made. Your future self (or next developer) will understand.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quote --> | |
| <section class="quote-section"> | |
| <p class="quote"> | |
| "Finally, AI development that <span>compounds over time</span>. Every session builds on the last. Decisions stick. Patterns evolve. It's like having a <span>team member who never forgets</span>." | |
| </p> | |
| </section> | |
| <!-- CTA --> | |
| <section class="final-cta"> | |
| <div class="cta-card"> | |
| <h2>Start Vibe Coding With Memory</h2> | |
| <p>Open framework. Works with Claude Code. Your projects, your Brain, your way.</p> | |
| <a href="https://github.com/steig/ldc-ai" class="btn">View on GitHub</a> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>LDC AI Framework v2.7.0 • Open Source • Built for Claude Code</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment