fix(ai+overview): AI page polish — install removed, heading styles, raw links, table cleanup

src/components/organisms/ai/FileArchitectureSection.tsx

@@ -1,12 +1,13 @@
 import { ExternalLink } from "lucide-react";
-import { Text } from "@/components/atoms";
+import { Heading, Text } from "@/components/atoms";
 import { Card } from "@/components/ui/card";
 
 interface FileCardData {
   filename: string;
   role: string;
   description: string;
   githubUrl: string;
+  rawUrl: string;
 }
 
 const FILES: FileCardData[] = [
@@ -16,29 +17,30 @@ const FILES: FileCardData[] = [
     description:
       "Project stack, code conventions, architecture rules, common mistakes. Loaded automatically by Claude Code on session start.",
     githubUrl: "https://github.com/mmorerasanchez/democrito/blob/main/CLAUDE.md",
+    rawUrl: "https://raw.githubusercontent.com/mmorerasanchez/democrito/main/CLAUDE.md",
   },
   {
     filename: "DESIGN.md",
     role: "Design Philosophy",
     description:
       "Visual principles, colour system rationale, typography rules, spacing philosophy. The \"taste\" layer that guides aesthetic decisions.",
     githubUrl: "https://github.com/mmorerasanchez/democrito/blob/main/DESIGN.md",
+    rawUrl: "https://raw.githubusercontent.com/mmorerasanchez/democrito/main/DESIGN.md",
   },
   {
     filename: "DESIGN_SYSTEM.md",
     role: "Token Inventory",
     description:
       "Complete reference of CSS custom properties, component inventory, variant specifications. The machine-readable specification.",
     githubUrl: "https://github.com/mmorerasanchez/democrito/blob/main/docs/design-system.md",
+    rawUrl: "https://raw.githubusercontent.com/mmorerasanchez/democrito/main/docs/design-system.md",
   },
 ];
 
 export function FileArchitectureSection() {
   return (
     <section className="space-y-4">
-      <h2 className="font-display text-lg font-medium tracking-tight">
-        Three-File Architecture
-      </h2>
+      <Heading level="h2">Three-file architecture</Heading>
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {FILES.map((file) => (
           <Card
@@ -62,6 +64,16 @@ export function FileArchitectureSection() {
               <ExternalLink className="h-3 w-3" />
               View on GitHub
             </a>
+            <a
+              href={file.rawUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 font-mono text-2xs text-muted-foreground hover:text-accent transition-colors"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ExternalLink className="h-3 w-3" />
+              View raw
+            </a>
           </Card>
         ))}
       </div>

src/pages/AiPage.tsx

@@ -3,10 +3,7 @@ import { Heading } from "@/components/atoms";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "react-router-dom";
 import { ArrowRight, Github, Heart } from "lucide-react";
-import {
-  FileArchitectureSection,
-  HeroSection,
-} from "@/components/organisms/ai";
+import { FileArchitectureSection } from "@/components/organisms/ai";
 
 function ClaudeIcon({ className }: { className?: string }) {
   return (
@@ -71,17 +68,20 @@ export default function AiPage() {
         <Badge variant="outline" className="font-mono text-xs">AI Integration</Badge>
         <Heading level="h1">AI Integration</Heading>
         <p className="max-w-2xl font-body text-base text-muted-foreground">
-          The first open-source design system with structured AI context files.
-          3-file architecture, vibe coding and LLM plugs, and open-sourced, fully customizable.
+          The first open-source design system with structured AI context files: 3-file
+          architecture to plug in your favorite vibe coding tool and LLM — fully customizable.
         </p>
       </div>
 
-      <HeroSection />
       <FileArchitectureSection />
 
       {/* Distribution */}
       <section className="space-y-4">
         <Heading level="h2">Distribution</Heading>
+        <p className="font-body text-base text-muted-foreground max-w-2xl">
+          Claude, vibe coding platforms, and terminal workflows — each
+          path fits a different setup.
+        </p>
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {platforms.map((item) => (
             <Link

src/pages/OverviewPage.tsx

@@ -168,7 +168,7 @@ export default function OverviewPage() {
           </Text>
         </div>
         <QuickStartSection showHeading={false} />
-        <div className="space-y-3">
+        <div className="space-y-4">
           <h3 className="font-display text-base font-medium">Customize with your brand</h3>
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {paths.map((item) => (

src/pages/ai/github.tsx

@@ -59,21 +59,6 @@ export default function GithubPage() {
                 <td className="px-4 py-2 font-body text-sm text-foreground">Codex CLI, Cursor, Gemini CLI, Windsurf, Aider, goose, Devin, Jules, Junie, and 20+ more</td>
                 <td className="px-4 py-2 font-body text-sm text-muted-foreground">Project root + subdirectories (nearest wins)</td>
               </tr>
-              <tr className="border-t border-border">
-                <td className="px-4 py-2"><Code>GEMINI.md</Code></td>
-                <td className="px-4 py-2 font-body text-sm text-foreground">Gemini CLI (primary)</td>
-                <td className="px-4 py-2 font-body text-sm text-muted-foreground">Project root (add this file — not yet in repo)</td>
-              </tr>
-              <tr className="border-t border-border">
-                <td className="px-4 py-2"><Code>.github/copilot-instructions.md</Code></td>
-                <td className="px-4 py-2 font-body text-sm text-foreground">GitHub Copilot</td>
-                <td className="px-4 py-2 font-body text-sm text-muted-foreground">Not yet in repo</td>
-              </tr>
-              <tr className="border-t border-border">
-                <td className="px-4 py-2"><Code>.cursor/rules/*.mdc</Code></td>
-                <td className="px-4 py-2 font-body text-sm text-foreground">Cursor (current format)</td>
-                <td className="px-4 py-2 font-body text-sm text-muted-foreground">Not yet in repo</td>
-              </tr>
               <tr className="border-t border-border">
                 <td className="px-4 py-2"><Code>DESIGN.md</Code></td>
                 <td className="px-4 py-2 font-body text-sm text-foreground">Google Stitch (native), any DESIGN.md-compatible tool</td>