diff --git a/docs/superpowers/specs/settings-design-playground.html b/docs/superpowers/specs/settings-design-playground.html
new file mode 100644
index 0000000..7cd8365
--- /dev/null
+++ b/docs/superpowers/specs/settings-design-playground.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Settings UI Design Playground</title>
+  <style>
+    :root {
+      --color-base: #f5f5f5;
+      --color-base-font: #444;
+      --color-base-background: #fff;
+      --color-header-background: #f7f7f7;
+      --color-header-border: #ddd;
+      --color-search-border: #bbb;
+      --color-search-focus: #3498db;
+      --color-link: #3498db;
+      --color-sidebar-background: #f7f7f7;
+      --color-sidebar-border: #ddd;
+      --color-pagination-border: #ddd;
+      --color-suggestion: #666;
+      --color-footer: #888;
+      --color-btn-background: #fff;
+      --color-btn-border: #ddd;
+      --color-btn-hover: #eee;
+      --color-result-border: #eee;
+      --radius: 4px;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-base: #222;
+        --color-base-font: #dcdcdc;
+        --color-base-background: #2b2b2b;
+        --color-header-background: #333;
+        --color-header-border: #444;
+        --color-search-border: #555;
+        --color-search-focus: #5dade2;
+        --color-link: #5dade2;
+        --color-sidebar-background: #333;
+        --color-sidebar-border: #444;
+        --color-pagination-border: #444;
+        --color-suggestion: #999;
+        --color-footer: #666;
+        --color-btn-background: #333;
+        --color-btn-border: #555;
+        --color-btn-hover: #444;
+        --color-result-border: #3a3a3a;
+      }
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html { font-size: 16px; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      color: var(--color-base-font);
+      background: var(--color-base);
+      line-height: 1.6;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .playground { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
+    .controls { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); padding: 1rem; height: fit-content; position: sticky; top: 1rem; }
+    .preview-area { display: flex; flex-direction: column; gap: 1rem; }
+    .prompt-box { background: #1a1a2e; color: #a8dadc; padding: 1rem; border-radius: var(--radius); font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; min-height: 80px; position: relative; }
+    .prompt-box button { position: absolute; top: 0.5rem; right: 0.5rem; background: #3498db; color: white; border: none; padding: 0.3rem 0.7rem; border-radius: 3px; cursor: pointer; font-size: 0.75rem; }
+    .prompt-box button:hover { background: #2980b9; }
+    .control-group { margin-bottom: 1rem; }
+    .control-group:last-child { margin-bottom: 0; }
+    .control-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-base-font); }
+    select, input[type="range"] { width: 100%; }
+    select { padding: 0.4rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-base-background); color: var(--color-base-font); font-size: 0.85rem; }
+    input[type="range"] { -webkit-appearance: none; height: 6px; background: var(--color-pagination-border); border-radius: 3px; outline: none; }
+    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--color-link); border-radius: 50%; cursor: pointer; }
+    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; }
+    .toggle { position: relative; width: 40px; height: 22px; }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-pagination-border); border-radius: 22px; transition: 0.2s; }
+    .toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
+    .toggle input:checked + .toggle-slider { background: var(--color-link); }
+    .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
+    .preset-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
+    .preset-btn { padding: 0.3rem 0.7rem; font-size: 0.75rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); color: var(--color-base-font); cursor: pointer; }
+    .preset-btn:hover { background: var(--color-btn-hover); }
+    .preset-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
+    .mock-page { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; position: relative; }
+    .mock-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-header-border); padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
+    .mock-search-bar { padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-sidebar-border); }
+    .mock-search-bar input { width: 100%; padding: 0.5rem; border: 1px solid var(--color-search-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-base-background); color: var(--color-base-font); }
+    .mock-content { display: flex; min-height: 280px; }
+    .mock-sidebar { width: 160px; background: var(--color-sidebar-background); border-right: 1px solid var(--color-sidebar-border); padding: 1rem; font-size: 0.8rem; }
+    .mock-main { flex: 1; padding: 1rem; }
+    .result-demo { border-bottom: 1px solid var(--color-result-border); padding: 0.5rem 0; }
+    .gear-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 0.3rem; border-radius: 50%; }
+    .gear-btn:hover { background: var(--color-sidebar-background); }
+    .settings-panel { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; }
+    .settings-drawer { position: absolute; bottom: 0.8rem; right: 0.8rem; width: 300px; max-height: 420px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-radius: var(--radius); z-index: 50; }
+    .settings-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); z-index: 50; }
+    .settings-modal-inner { width: 380px; max-height: 480px; overflow-y: auto; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
+    .settings-sidebar-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; background: var(--color-base-background); border-right: 1px solid var(--color-sidebar-border); overflow-y: auto; z-index: 50; }
+    .settings-inline { margin-top: 0.8rem; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); }
+    .settings-inline .panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
+    .panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.75rem 1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
+    .close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-base-font); padding: 0 0.4rem; line-height: 1; }
+    .panel-body { padding: 0.8rem; }
+    .settings-section { margin-bottom: 1rem; }
+    .settings-section:last-child { margin-bottom: 0; }
+    .section-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-suggestion); margin-bottom: 0.6rem; }
+    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--color-result-border); }
+    .setting-row:last-child { border-bottom: none; }
+    .setting-label { font-size: 0.85rem; }
+    .setting-desc { font-size: 0.7rem; color: var(--color-suggestion); }
+    .engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
+    .engine-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.25rem; border-radius: 3px; background: var(--color-sidebar-background); }
+    .engine-toggle input { width: auto; }
+    .engine-toggle span { flex: 1; }
+    .theme-selector { display: flex; gap: 0.4rem; }
+    .theme-btn { padding: 0.3rem 0.6rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); cursor: pointer; font-size: 0.75rem; }
+    .theme-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
+    select.mini { width: 90px; font-size: 0.75rem; padding: 0.2rem 0.3rem; }
+    .btn-save { width: 100%; padding: 0.5rem; background: var(--color-link); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; margin-top: 0.8rem; }
+    .btn-save:hover { opacity: 0.9; }
+    .range-value { font-size: 0.7rem; color: var(--color-suggestion); text-align: right; margin-top: 0.2rem; }
+    .theme-dark { --color-base: #1a1a2e; --color-base-font: #e0e0e0; --color-base-background: #16213e; --color-header-background: #0f3460; --color-header-border: #1a4a7a; --color-search-border: #2a5a8a; --color-search-focus: #5dade2; --color-link: #5dade2; --color-sidebar-background: #0f3460; --color-sidebar-border: #1a4a7a; --color-pagination-border: #2a4a6a; --color-suggestion: #8a8a9a; --color-footer: #6a6a7a; --color-btn-background: #0f3460; --color-btn-border: #2a5a8a; --color-btn-hover: #1a4a7a; --color-result-border: #2a2a3a; }
+  </style>
+</head>
+<body>
+  <div class="playground">
+    <div class="controls">
+      <div class="preset-row">
+        <button class="preset-btn active" data-preset="clean">Clean</button>
+        <button class="preset-btn" data-preset="compact">Compact</button>
+        <button class="preset-btn" data-preset="detailed">Detailed</button>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Access Pattern</div>
+        <select id="accessPattern">
+          <option value="drawer">Slide-out Drawer (bottom-right)</option>
+          <option value="modal">Modal Overlay</option>
+          <option value="sidebar">Sidebar Panel</option>
+          <option value="inline">Inline Expansion</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Theme Preview</div>
+        <select id="themePreview">
+          <option value="light">Light Mode</option>
+          <option value="dark">Dark Mode</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Trigger Button</div>
+        <select id="triggerStyle">
+          <option value="gear">Gear Icon</option>
+          <option value="sliders">Sliders Icon</option>
+          <option value="text">"Preferences" Text</option>
+          <option value="cog-sliders">Combined</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Settings Density</div>
+        <input type="range" id="density" min="0" max="2" value="1">
+        <div class="range-value" id="densityLabel">Normal</div>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Animation</div>
+        <div class="toggle-row">
+          <span style="font-size: 0.85rem;">Enable transitions</span>
+          <label class="toggle">
+            <input type="checkbox" id="animations" checked>
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+      </div>
+      <div class="control-group">
+        <div class="control-label">Sections to Show</div>
+        <div class="toggle-row"><span style="font-size: 0.8rem;">Theme</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="theme" checked><span class="toggle-slider"></span></label></div>
+        <div class="toggle-row"><span style="font-size: 0.8rem;">Engines</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="engines" checked><span class="toggle-slider"></span></label></div>
+        <div class="toggle-row"><span style="font-size: 0.8rem;">Search Defaults</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="search" checked><span class="toggle-slider"></span></label></div>
+      </div>
+      <div style="margin-top: 1rem; padding: 0.7rem; background: var(--color-sidebar-background); border-radius: var(--radius); font-size: 0.75rem; color: var(--color-suggestion);">
+        Click the gear button in the preview to toggle the settings panel.
+      </div>
+    </div>
+    <div class="preview-area">
+      <div class="prompt-box" id="promptBox">Update the settings UI to use a clean, minimal design with a slide-out drawer...</div>
+      <div class="mock-page" id="mockPage">
+        <div class="mock-header">
+          <span>kafka</span>
+          <button class="gear-btn" id="gearBtn">&#9881;</button>
+        </div>
+        <div class="mock-search-bar">
+          <input type="text" value="golang metasearch engine" placeholder="Search…">
+        </div>
+        <div class="mock-content">
+          <div class="mock-sidebar">
+            <p><strong>Results</strong></p>
+            <p style="color: var(--color-suggestion); font-size: 0.75rem; margin-top: 0.3rem;">About 42 results</p>
+            <p style="margin-top: 0.8rem; font-size: 0.75rem;">Powered by kafka</p>
+          </div>
+          <div class="mock-main">
+            <div class="result-demo">
+              <div style="font-size: 1rem; color: var(--color-link);">github.com/golang/go</div>
+              <div style="font-size: 0.8rem; color: var(--color-suggestion);">The Go Programming Language</div>
+            </div>
+            <div class="result-demo">
+              <div style="font-size: 1rem; color: var(--color-link);">go.dev</div>
+              <div style="font-size: 0.8rem; color: var(--color-suggestion);">Go land</div>
+            </div>
+          </div>
+        </div>
+        <div id="settingsContainer" style="position: absolute; inset: 0; pointer-events: none;"></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const state = {
+      accessPattern: 'drawer',
+      themePreview: 'light',
+      triggerStyle: 'gear',
+      density: 1,
+      animations: true,
+      sections: { theme: true, engines: true, search: true },
+      panelOpen: false
+    };
+    const triggerIcons = { gear: '\u2699', sliders: '\uD83D\uDD27', text: 'Preferences', 'cog-sliders': '\u2699\uD83D\uDD27' };
+    const densityLabels = ['Compact', 'Normal', 'Detailed'];
+    const densityPadding = ['0.5rem', '0.8rem', '1rem'];
+    const engineCols = ['1fr 1fr 1fr', '1fr 1fr', '1fr'];
+
+    function updateAll() {
+      renderPreview();
+      updatePrompt();
+      updatePresetButtons();
+    }
+
+    function buildPanelBody() {
+      const d = state.density;
+      const densityFont = ['0.75rem', '0.85rem', '0.9rem'][d];
+      const showDesc = d > 0;
+      const showRPP = d === 2;
+      let html = '';
+      if (state.sections.theme) {
+        html += '<div class="settings-section"><div class="section-title">Appearance</div><div class="setting-row"><div><div style="font-size:'+densityFont+';">Theme</div>'+(showDesc?'<div class="setting-desc">Color scheme</div>':'')+'</div><div class="theme-selector"><button class="theme-btn active" style="padding:0.25rem 0.5rem;">&#9788;</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">&#9790;</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">&#9000;</button></div></div></div>';
+      }
+      if (state.sections.engines) {
+        const engines = ['Wikipedia','ArXiv','Crossref','Brave','Qwant','Duck','GitHub','Reddit','Bing'];
+        let engHtml = '';
+        for (let i = 0; i < engines.length; i++) {
+          engHtml += '<label class="engine-toggle"><input type="checkbox" checked style="width:auto;"><span>'+engines[i]+'</span></label>';
+        }
+        html += '<div class="settings-section"><div class="section-title">Engines</div><div class="engine-grid" style="grid-template-columns:'+engineCols[d]+';gap:0.3rem;">'+engHtml+'</div></div>';
+      }
+      if (state.sections.search) {
+        html += '<div class="settings-section"><div class="section-title">Search Defaults</div>';
+        if (showRPP) html += '<div class="setting-row"><div><div style="font-size:0.85rem;">Results per page</div></div><select class="mini"><option>10</option><option>20</option><option>50</option></select></div>';
+        html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Safe search</div>'+(showDesc?'<div class="setting-desc">Filter adult content</div>':'')+'</div><select class="mini"><option>Moderate</option><option>Strict</option><option>Off</option></select></div>';
+        html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Default format</div>'+(showDesc?'<div class="setting-desc">Response format</div>':'')+'</div><select class="mini"><option>HTML</option><option>JSON</option><option>CSV</option></select></div>';
+        html += '</div>';
+      }
+      html += '<button class="btn-save">Save Preferences</button>';
+      return html;
+    }
+
+    function renderPreview() {
+      const page = document.getElementById('mockPage');
+      const container = document.getElementById('settingsContainer');
+      page.classList.toggle('theme-dark', state.themePreview === 'dark');
+      document.getElementById('gearBtn').textContent = triggerIcons[state.triggerStyle];
+      document.getElementById('densityLabel').textContent = densityLabels[state.density];
+      if (!state.panelOpen) { container.innerHTML = ''; return; }
+      const pad = densityPadding[state.density];
+      let panelClass = 'settings-drawer';
+      let inner = '';
+      if (state.accessPattern === 'modal') { panelClass = 'settings-modal'; inner = '<div class="settings-modal-inner"><div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div></div>'; }
+      else if (state.accessPattern === 'sidebar') { panelClass = 'settings-sidebar-panel'; inner = '<div class="panel-header">Preferences</div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
+      else if (state.accessPattern === 'inline') { container.style.pointerEvents = 'auto'; container.innerHTML = '<div style="padding:0 1rem;"><div class="settings-inline"><div class="panel-header">&#9881; Preferences <span style="font-size:0.8rem;">&#9660;</span></div><div class="panel-body" style="padding:'+pad+';display:none;">'+buildPanelBody()+'</div></div></div>'; return; }
+      else { inner = '<div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
+      container.style.pointerEvents = 'auto';
+      container.innerHTML = '<div class="'+panelClass+'">'+inner+'</div>';
+    }
+
+    function updatePrompt() {
+      const parts = [];
+      const patternNames = { drawer: 'slide-out drawer', modal: 'modal overlay', sidebar: 'sidebar panel', inline: 'inline expansion' };
+      parts.push(patternNames[state.accessPattern] + ' access pattern');
+      if (state.themePreview === 'dark') parts.push('dark mode preview');
+      if (state.density === 0) parts.push('compact density');
+      if (state.density === 2) parts.push('detailed density');
+      if (!state.animations) parts.push('no animations');
+      const secNames = { theme: 'Theme', engines: 'Engines', search: 'Search Defaults' };
+      const activeSections = Object.entries(state.sections).filter(function(e){return e[1]}).map(function(e){return secNames[e[0]]});
+      if (activeSections.length < 3) parts.push('only ' + activeSections.join(' and ') + ' sections');
+      var prompt = 'Implement a settings/preferences UI for kafka with a ' + parts.join(', ') + '. The panel should appear when the user clicks the ' + triggerIcons[state.triggerStyle] + ' button in the header. Store preferences in localStorage.';
+      document.getElementById('promptBox').textContent = prompt;
+    }
+
+    function updatePresetButtons() {
+      document.querySelectorAll('.preset-btn').forEach(function(btn) {
+        var isActive = (btn.dataset.preset === 'clean' && state.accessPattern === 'drawer' && state.density === 1 && state.sections.theme && state.sections.engines && state.sections.search) ||
+                         (btn.dataset.preset === 'compact' && state.accessPattern === 'sidebar' && state.density === 0) ||
+                         (btn.dataset.preset === 'detailed' && state.accessPattern === 'modal' && state.density === 2);
+        btn.classList.toggle('active', isActive);
+      });
+    }
+
+    document.getElementById('accessPattern').addEventListener('change', function(e) { state.accessPattern = e.target.value; updateAll(); });
+    document.getElementById('themePreview').addEventListener('change', function(e) { state.themePreview = e.target.value; updateAll(); });
+    document.getElementById('triggerStyle').addEventListener('change', function(e) { state.triggerStyle = e.target.value; updateAll(); });
+    document.getElementById('density').addEventListener('input', function(e) { state.density = parseInt(e.target.value); updateAll(); });
+    document.getElementById('animations').addEventListener('change', function(e) { state.animations = e.target.checked; updateAll(); });
+    document.querySelectorAll('.section-toggle').forEach(function(toggle) {
+      toggle.addEventListener('change', function(e) { state.sections[e.target.dataset.section] = e.target.checked; updateAll(); });
+    });
+    document.querySelectorAll('.preset-btn').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var p = btn.dataset.preset;
+        if (p === 'clean') { state.accessPattern = 'drawer'; state.density = 1; state.sections = {theme:true, engines:true, search:true}; }
+        if (p === 'compact') { state.accessPattern = 'sidebar'; state.density = 0; state.sections = {theme:true, engines:true, search:true}; }
+        if (p === 'detailed') { state.accessPattern = 'modal'; state.density = 2; state.sections = {theme:true, engines:true, search:true}; }
+        document.getElementById('accessPattern').value = state.accessPattern;
+        document.getElementById('density').value = state.density;
+        updateAll();
+      });
+    });
+    document.getElementById('gearBtn').addEventListener('click', function() { state.panelOpen = !state.panelOpen; updateAll(); });
+    document.getElementById('promptBox').insertAdjacentHTML('beforeend', '<button id="copyBtn">Copy</button>');
+    document.getElementById('copyBtn').addEventListener('click', function() {
+      var text = document.getElementById('promptBox').textContent;
+      navigator.clipboard.writeText(text).then(function() {
+        var btn = document.getElementById('copyBtn');
+        btn.textContent = 'Copied!';
+        setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
+      });
+    });
+    updateAll();
+  </script>
+</body>
+</html>
