diff --git a/webui/src/web-components/demo/generate-index.ts b/webui/src/web-components/demo/generate-index.ts
new file mode 100644
index 0000000..015ef88
--- /dev/null
+++ b/webui/src/web-components/demo/generate-index.ts
@@ -0,0 +1,198 @@
+/**
+ * Build-time script to auto-generate demo index page
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+interface DemoInfo {
+  name: string;
+  title: string;
+  description?: string;
+  fileName: string;
+}
+
+async function generateIndex() {
+  const demoDir = path.join(__dirname);
+  const files = await fs.promises.readdir(demoDir);
+
+  // Find all .demo.ts files
+  const demoFiles = files.filter((file) => file.endsWith(".demo.ts"));
+
+  const demos: DemoInfo[] = [];
+
+  for (const file of demoFiles) {
+    const componentName = file.replace(".demo.ts", "");
+    const filePath = path.join(demoDir, file);
+
+    try {
+      // Read the file content to extract title and description
+      const content = await fs.promises.readFile(filePath, "utf-8");
+
+      // Extract title from the demo module
+      const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+      const descriptionMatch = content.match(/description:\s*['"]([^'"]+)['"]/);
+
+      demos.push({
+        name: componentName,
+        title: titleMatch ? titleMatch[1] : formatComponentName(componentName),
+        description: descriptionMatch ? descriptionMatch[1] : undefined,
+        fileName: file,
+      });
+    } catch (error) {
+      console.warn(`Failed to process demo file ${file}:`, error);
+    }
+  }
+
+  // Sort demos alphabetically
+  demos.sort((a, b) => a.title.localeCompare(b.title));
+
+  // Generate HTML index
+  const html = generateIndexHTML(demos);
+
+  // Write the generated index
+  const indexPath = path.join(demoDir, "index-generated.html");
+  await fs.promises.writeFile(indexPath, html, "utf-8");
+
+  console.log(`Generated demo index with ${demos.length} components`);
+  console.log("Available demos:", demos.map((d) => d.name).join(", "));
+}
+
+function formatComponentName(name: string): string {
+  return name
+    .replace(/^sketch-/, "")
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+function generateIndexHTML(demos: DemoInfo[]): string {
+  const demoLinks = demos
+    .map((demo) => {
+      const href = `demo-runner.html#${demo.name}`;
+      const description = demo.description ? ` - ${demo.description}` : "";
+
+      return `      <li>
+        <a href="${href}">
+          <strong>${demo.title}</strong>${description}
+        </a>
+      </li>`;
+    })
+    .join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Web Components - Demo Index</title>
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        max-width: 800px;
+        margin: 40px auto;
+        padding: 20px;
+        line-height: 1.6;
+      }
+      
+      h1 {
+        color: #24292f;
+        border-bottom: 1px solid #d1d9e0;
+        padding-bottom: 10px;
+      }
+      
+      .demo-list {
+        list-style: none;
+        padding: 0;
+      }
+      
+      .demo-list li {
+        margin: 15px 0;
+        padding: 15px;
+        border: 1px solid #d1d9e0;
+        border-radius: 6px;
+        background: #f6f8fa;
+        transition: background-color 0.2s;
+      }
+      
+      .demo-list li:hover {
+        background: #ffffff;
+      }
+      
+      .demo-list a {
+        text-decoration: none;
+        color: #0969da;
+        display: block;
+      }
+      
+      .demo-list a:hover {
+        text-decoration: underline;
+      }
+      
+      .demo-list strong {
+        font-size: 16px;
+        display: block;
+        margin-bottom: 5px;
+      }
+      
+      .stats {
+        background: #fff8dc;
+        padding: 15px;
+        border-radius: 6px;
+        margin: 20px 0;
+        border-left: 4px solid #f9c23c;
+      }
+      
+      .runner-link {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #0969da;
+        color: white;
+        text-decoration: none;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+      
+      .runner-link:hover {
+        background: #0860ca;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Web Components Demo Index</h1>
+    
+    <div class="stats">
+      <strong>Auto-generated index</strong><br>
+      Found ${demos.length} demo component${demos.length === 1 ? "" : "s"} • Last updated: ${new Date().toLocaleString()}
+    </div>
+    
+    <p>
+      This page provides an overview of all available component demos.
+      Click on any component below to view its interactive demo.
+    </p>
+    
+    <a href="demo-runner.html" class="runner-link">🚀 Launch Demo Runner</a>
+    
+    <h2>Available Component Demos</h2>
+    
+    <ul class="demo-list">
+${demoLinks}
+    </ul>
+    
+    <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0;">
+    
+    <p>
+      <em>This index is automatically generated from available <code>*.demo.ts</code> files.</em><br>
+      To add a new demo, create a <code>component-name.demo.ts</code> file in this directory.
+    </p>
+  </body>
+</html>
+`;
+}
+
+// Run the generator if this script is executed directly
+if (require.main === module) {
+  generateIndex().catch(console.error);
+}
+
+export { generateIndex };