mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Paul Bakaus
1bdb3ea17a
- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design) - Implement tabbed demo navigation for skills with multiple examples - Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js) - Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css) - Redesign commands section with sidebar nav matching skills layout - Replace large download buttons with compact icon buttons - Fix gray-on-pink color clashing throughout UI - Remove frontend-design skill (Anthropic's work, not ours) - Format skill names properly (e.g., 'UX Writing' not 'ux-writing') - Remove redundant 'Combines Well With' from skills - Add 'The Problem' and 'The Solution' sections to homepage - Various CSS fixes for buttons, backgrounds, and spacing
202 lines
8.7 KiB
HTML
202 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>impeccable.style — Design Skills for AI Development Tools</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./css/main.css">
|
|
</head>
|
|
<body>
|
|
<!-- 1. HERO - Hook with the problem statement -->
|
|
<header class="hero">
|
|
<div class="hero-grid">
|
|
<div class="hero-content">
|
|
<h1 class="title">
|
|
<span class="title-main">Impeccable style</span>
|
|
<span class="title-sub">made easy</span>
|
|
</h1>
|
|
<p class="tagline">Your LLM can design beautiful interfaces.<br>It just needs to know what to ask for.</p>
|
|
<p class="providers">Works with Cursor · Claude Code · Gemini CLI · Codex CLI</p>
|
|
</div>
|
|
<div class="hero-decoration" aria-hidden="true">
|
|
<div class="deco-line"></div>
|
|
<div class="deco-circle"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<!-- 2. THE PROBLEM - Show the "AI slop" aesthetic -->
|
|
<section class="problem-section">
|
|
<div class="problem-grid">
|
|
<div class="problem-content">
|
|
<h2 class="section-title">The Problem</h2>
|
|
<p class="problem-lead">LLMs are biased toward safe, generic design choices. Without guidance, you get the same predictable aesthetic every time.</p>
|
|
</div>
|
|
<div class="problem-showcase">
|
|
<div class="ai-slop-demo">
|
|
<div class="slop-card">
|
|
<div class="slop-header">
|
|
<div class="slop-avatar"></div>
|
|
<div class="slop-text">
|
|
<div class="slop-title">Welcome to Our Platform</div>
|
|
<div class="slop-subtitle">The best solution for your needs</div>
|
|
</div>
|
|
</div>
|
|
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text in a card layout.</p>
|
|
<button class="slop-button">Get Started</button>
|
|
</div>
|
|
<div class="slop-labels">
|
|
<span class="slop-label" data-point="font">Inter font</span>
|
|
<span class="slop-label" data-point="gradient">Purple gradient</span>
|
|
<span class="slop-label" data-point="layout">Card layout</span>
|
|
<span class="slop-label" data-point="copy">Generic copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. THE SOLUTION - Brief explanation -->
|
|
<section class="solution-section">
|
|
<div class="solution-grid">
|
|
<div class="solution-content">
|
|
<h2 class="section-title">The Solution</h2>
|
|
<p class="solution-lead">Teach your AI assistant the language of design. <strong>Skills</strong> provide deep design knowledge. <strong>Commands</strong> give you precise control over the creative process.</p>
|
|
</div>
|
|
<div class="solution-cards">
|
|
<div class="solution-card">
|
|
<div class="solution-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
|
|
</svg>
|
|
</div>
|
|
<h3>8 Skills</h3>
|
|
<p>Deep knowledge in typography, color, motion, spatial design, and more. The AI learns <em>how</em> to think about design.</p>
|
|
</div>
|
|
<div class="solution-card">
|
|
<div class="solution-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>15 Commands</h3>
|
|
<p>Precise actions like <code>/bolder</code>, <code>/animate</code>, <code>/audit</code>. Steer the AI through iterative design refinement.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. SKILLS SHOWCASE - Interactive demos -->
|
|
<section class="skills-section" id="skills-section">
|
|
<div class="section-header-sticky">
|
|
<h2 class="section-title">Skills</h2>
|
|
<p class="section-subtitle">Design knowledge that transforms AI output</p>
|
|
</div>
|
|
<div class="skills-layout">
|
|
<nav class="skills-nav" id="skills-nav">
|
|
<div class="loading">Loading...</div>
|
|
</nav>
|
|
<div class="skills-showcase" id="skills-detail">
|
|
<div class="loading">Select a skill to see it in action</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. COMMANDS - Sidebar nav + details (mirrors skills layout) -->
|
|
<section class="commands-section" id="commands-section">
|
|
<div class="section-header-sticky">
|
|
<h2 class="section-title">Commands</h2>
|
|
<p class="section-subtitle">Precise control over the design process</p>
|
|
</div>
|
|
|
|
<div class="commands-layout">
|
|
<!-- Commands nav (left sidebar) -->
|
|
<nav class="commands-nav" id="workflow-diagram">
|
|
<!-- Will be rendered by JS -->
|
|
</nav>
|
|
|
|
<!-- Command detail (right side) -->
|
|
<div class="commands-showcase" id="commands-detail">
|
|
<div class="loading">Select a command to view details</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. DOWNLOAD BUNDLES - After demonstrating value -->
|
|
<section class="downloads-section" id="downloads">
|
|
<div class="downloads-header">
|
|
<h2 class="section-title">Get Started</h2>
|
|
<p class="downloads-lead">Download the complete bundle for your preferred AI tool. Extract into your project root and start creating.</p>
|
|
</div>
|
|
<div class="download-grid">
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Cursor</h3>
|
|
<span class="badge">Rules + Commands</span>
|
|
</div>
|
|
<p>Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
|
|
<button class="btn btn-primary" data-bundle="cursor">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Claude Code</h3>
|
|
<span class="badge">Full Featured</span>
|
|
</div>
|
|
<p>Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
|
|
<button class="btn btn-primary" data-bundle="claude-code">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Gemini CLI</h3>
|
|
<span class="badge">TOML + Modular</span>
|
|
</div>
|
|
<p>TOML-formatted commands with modular skill imports via GEMINI.md.</p>
|
|
<button class="btn btn-primary" data-bundle="gemini">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Codex CLI</h3>
|
|
<span class="badge">Prompts + Routing</span>
|
|
</div>
|
|
<p>Custom prompt format with skill routing through AGENTS.md architecture.</p>
|
|
<button class="btn btn-primary" data-bundle="codex">Download</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. OPEN SOURCE -->
|
|
<section class="contribute">
|
|
<div class="contribute-content">
|
|
<h2>Open Source</h2>
|
|
<p>View the source, contribute skills and commands, or report issues on GitHub.</p>
|
|
<a href="https://github.com/pbakaus/vibe-design-plugins" class="btn btn-secondary">View Repository</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p>impeccable.style</p>
|
|
<p><a href="https://github.com/pbakaus/vibe-design-plugins">GitHub</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|