seedflip-mcp 0.1.0

package/README.md

@@ -0,0 +1,79 @@
+# SeedFlip MCP Server
+
+Gives AI agents access to 100+ curated design systems. When an agent needs a design direction, it calls SeedFlip instead of guessing colors and fonts.
+
+## Setup
+
+### Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "seedflip": {
+      "command": "npx",
+      "args": ["tsx", "/Users/LUKE/design-shuffle/mcp/src/index.ts"]
+    }
+  }
+}
+```
+
+### Claude Code
+
+Add to `.claude/settings.json` or run:
+
+```bash
+claude mcp add seedflip -- npx tsx /Users/LUKE/design-shuffle/mcp/src/index.ts
+```
+
+### Cursor
+
+Add to `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "seedflip": {
+      "command": "npx",
+      "args": ["tsx", "/Users/LUKE/design-shuffle/mcp/src/index.ts"]
+    }
+  }
+}
+```
+
+## Tools
+
+### `get_design_seed`
+
+Get a curated design system by reference, vibe, or style.
+
+```
+query: "Stripe"           → Returns the Stripe-inspired seed
+query: "dark minimal"     → Returns a dark, minimal seed
+query: "brutalist"        → Returns a brutalist seed
+query: "warm editorial"   → Returns a warm editorial seed
+format: "tailwind"        → Returns a ready-to-use tailwind.config.ts
+format: "css"             → Returns CSS custom properties
+format: "shadcn"          → Returns shadcn/ui theme
+format: "tokens"          → Returns all values with design brief (default)
+count: 3                  → Returns top 3 matches
+```
+
+### `list_design_seeds`
+
+Browse available seeds with optional tag filtering.
+
+```
+tag: "dark"       → All dark mode seeds
+tag: "brutalist"  → All brutalist seeds
+tag: "warm"       → All warm-toned seeds
+```
+
+## Updating Seeds
+
+After adding/changing seeds in `src/lib/seeds.ts`, run:
+
+```bash
+npx tsx mcp/scripts/extract-seeds.mjs
+```

package/dist/exporters.d.ts

@@ -0,0 +1,11 @@
+/**
+ * SeedFlip MCP — Export Generators
+ *
+ * Produces ready-to-use config files directly from DesignSeed data.
+ * All colors are already hex — no conversion needed.
+ */
+import type { DesignSeed } from './search.js';
+export declare function formatTokens(seed: DesignSeed): string;
+export declare function formatTailwind(seed: DesignSeed): string;
+export declare function formatCSS(seed: DesignSeed): string;
+export declare function formatShadcn(seed: DesignSeed): string;

package/dist/exporters.js

@@ -0,0 +1,238 @@
+/**
+ * SeedFlip MCP — Export Generators
+ *
+ * Produces ready-to-use config files directly from DesignSeed data.
+ * All colors are already hex — no conversion needed.
+ */
+// ── Helpers ──────────────────────────────────────────────────────
+function fontFamily(name) {
+    const mono = name.toLowerCase().includes('mono') ||
+        ['JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Iosevka'].includes(name);
+    const serif = [
+        'Playfair Display', 'DM Serif Display', 'Fraunces', 'Lora',
+        'Merriweather', 'Source Serif 4', 'Crimson Text', 'EB Garamond',
+        'Cormorant Garamond', 'Libre Baskerville', 'Bespoke Serif',
+        'Bonny', 'Boska', 'Erode', 'Gambetta', 'Neco', 'Recia',
+        'Rowan', 'Sentient', 'Zodiak', 'Bitter', 'Spectral',
+        'Instrument Serif', 'Noto Serif Display',
+    ].includes(name);
+    const fallback = mono ? 'monospace' : serif ? 'serif' : 'sans-serif';
+    return `'${name}', ${fallback}`;
+}
+function googleFontsUrl(seed) {
+    const fonts = new Set([seed.headingFont, seed.bodyFont]);
+    const families = [...fonts].map((f) => {
+        const weights = f === seed.headingFont ? `wght@${seed.headingWeight}` : 'wght@400;500';
+        return `family=${f.replace(/ /g, '+')}:${weights}`;
+    });
+    return `https://fonts.googleapis.com/css2?${families.join('&')}&display=swap`;
+}
+function hexToHSLString(hex) {
+    const c = hex.replace('#', '');
+    const r = parseInt(c.slice(0, 2), 16) / 255;
+    const g = parseInt(c.slice(2, 4), 16) / 255;
+    const b = parseInt(c.slice(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+        return `0 0% ${Math.round(l * 100)}%`;
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r)
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g)
+        h = ((b - r) / d + 2) / 6;
+    else
+        h = ((r - g) / d + 4) / 6;
+    return `${(h * 360).toFixed(1)} ${(s * 100).toFixed(1)}% ${(l * 100).toFixed(1)}%`;
+}
+function hexLuminance(hex) {
+    const c = hex.replace('#', '');
+    const r = parseInt(c.substring(0, 2), 16);
+    const g = parseInt(c.substring(2, 4), 16);
+    const b = parseInt(c.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+// ── Token summary (default format) ──────────────────────────────
+export function formatTokens(seed) {
+    const isDark = hexLuminance(seed.bg) < 0.5;
+    return `## SeedFlip — ${seed.name}
+
+**${seed.vibe}**
+Mode: ${isDark ? 'Dark' : 'Light'} | Tags: ${seed.tags.join(', ')}
+
+### Fonts
+- Heading: ${seed.headingFont} (weight: ${seed.headingWeight}, spacing: ${seed.letterSpacing})
+- Body: ${seed.bodyFont}
+- CSS: font-family: ${fontFamily(seed.headingFont)}
+- Import: ${googleFontsUrl(seed)}
+
+### Colors
+| Token | Value |
+|-------|-------|
+| Background | ${seed.bg} |
+| Surface | ${seed.surface} |
+| Surface Hover | ${seed.surfaceHover} |
+| Border | ${seed.border} |
+| Text | ${seed.text} |
+| Text Muted | ${seed.textMuted} |
+| Accent | ${seed.accent} |
+| Accent Soft | ${seed.accentSoft} |
+
+### Shape
+- Border Radius: ${seed.radius} (sm: ${seed.radiusSm}, xl: ${seed.radiusXl})
+- Shadow: ${seed.shadow}
+- Shadow Style: ${seed.shadowStyle}
+- Gradient: ${seed.gradient}
+
+### Design Brief
+${seed.aiPromptRules}
+
+#### Typography Notes
+${seed.aiPromptTypography}
+
+#### Color Notes
+${seed.aiPromptColors}
+
+#### Shape Notes
+${seed.aiPromptShape}
+
+#### Depth Notes
+${seed.aiPromptDepth}`;
+}
+// ── Tailwind config ─────────────────────────────────────────────
+export function formatTailwind(seed) {
+    const headingFallback = fontFamily(seed.headingFont).split(', ')[1];
+    const bodyFallback = fontFamily(seed.bodyFont).split(', ')[1];
+    return `// SeedFlip — ${seed.name}
+// ${seed.vibe}
+// https://seedflip.com
+
+import type { Config } from "tailwindcss";
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        background: "${seed.bg}",
+        surface: "${seed.surface}",
+        "surface-hover": "${seed.surfaceHover}",
+        border: "${seed.border}",
+        foreground: "${seed.text}",
+        muted: "${seed.textMuted}",
+        accent: "${seed.accent}",
+        "accent-soft": "${seed.accentSoft}",
+      },
+      borderRadius: {
+        DEFAULT: "${seed.radius}",
+        sm: "${seed.radiusSm}",
+        xl: "${seed.radiusXl}",
+      },
+      fontFamily: {
+        heading: ["${seed.headingFont}", "${headingFallback}"],
+        body: ["${seed.bodyFont}", "${bodyFallback}"],
+      },
+      boxShadow: {
+        DEFAULT: "${seed.shadow}",
+        sm: "${seed.shadowSm}",
+      },
+    },
+  },
+} satisfies Config;
+
+/*
+  Font import — add to your layout or globals.css:
+  @import url('${googleFontsUrl(seed)}');
+
+  Design brief:
+  ${seed.aiPromptRules}
+*/`;
+}
+// ── CSS custom properties ───────────────────────────────────────
+export function formatCSS(seed) {
+    return `/* SeedFlip — ${seed.name} */
+/* ${seed.vibe} */
+@import url('${googleFontsUrl(seed)}');
+
+:root {
+  /* Colors */
+  --sf-bg: ${seed.bg};
+  --sf-surface: ${seed.surface};
+  --sf-surface-hover: ${seed.surfaceHover};
+  --sf-border: ${seed.border};
+  --sf-text: ${seed.text};
+  --sf-text-muted: ${seed.textMuted};
+  --sf-accent: ${seed.accent};
+  --sf-accent-soft: ${seed.accentSoft};
+
+  /* Typography */
+  --sf-font-heading: ${fontFamily(seed.headingFont)};
+  --sf-font-body: ${fontFamily(seed.bodyFont)};
+  --sf-heading-weight: ${seed.headingWeight};
+  --sf-letter-spacing: ${seed.letterSpacing};
+
+  /* Shape */
+  --sf-radius: ${seed.radius};
+  --sf-radius-sm: ${seed.radiusSm};
+  --sf-radius-xl: ${seed.radiusXl};
+
+  /* Depth */
+  --sf-shadow: ${seed.shadow};
+  --sf-shadow-sm: ${seed.shadowSm};
+  --sf-gradient: ${seed.gradient};
+}
+
+/*
+  Design brief:
+  ${seed.aiPromptRules}
+*/`;
+}
+// ── shadcn/ui theme ─────────────────────────────────────────────
+export function formatShadcn(seed) {
+    const bg = hexToHSLString(seed.bg);
+    const surface = hexToHSLString(seed.surface);
+    const text = hexToHSLString(seed.text);
+    const textMuted = hexToHSLString(seed.textMuted);
+    const accent = hexToHSLString(seed.accent);
+    const border = hexToHSLString(seed.border);
+    const primaryFg = hexLuminance(seed.accent) > 0.5 ? '0 0% 9%' : '0 0% 98%';
+    const accentFg = hexLuminance(seed.surface) > 0.5 ? '0 0% 9%' : '0 0% 98%';
+    const radiusRem = (parseFloat(seed.radius) / 16).toFixed(3).replace(/0+$/, '').replace(/\.$/, '') + 'rem';
+    return `/* SeedFlip — ${seed.name} — shadcn/ui theme */
+/* ${seed.vibe} */
+@import url('${googleFontsUrl(seed)}');
+
+@layer base {
+  :root {
+    --background: ${bg};
+    --foreground: ${text};
+    --card: ${surface};
+    --card-foreground: ${text};
+    --popover: ${surface};
+    --popover-foreground: ${text};
+    --primary: ${accent};
+    --primary-foreground: ${primaryFg};
+    --secondary: ${surface};
+    --secondary-foreground: ${textMuted};
+    --muted: ${surface};
+    --muted-foreground: ${textMuted};
+    --accent: ${surface};
+    --accent-foreground: ${accentFg};
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: ${border};
+    --input: ${border};
+    --ring: ${accent};
+    --radius: ${radiusRem};
+    --font-heading: '${seed.headingFont}', sans-serif;
+    --font-body: '${seed.bodyFont}', sans-serif;
+  }
+}
+
+/*
+  Design brief:
+  ${seed.aiPromptRules}
+*/`;
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/**
+ * SeedFlip MCP Server
+ *
+ * Gives AI agents access to 100+ curated design systems.
+ * When an agent needs a design direction, it calls SeedFlip
+ * instead of guessing colors and fonts.
+ *
+ * Tools:
+ *   get_design_seed  — Get a curated design system by reference, vibe, or style
+ *   list_design_seeds — Browse available seeds with filtering
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+/**
+ * SeedFlip MCP Server
+ *
+ * Gives AI agents access to 100+ curated design systems.
+ * When an agent needs a design direction, it calls SeedFlip
+ * instead of guessing colors and fonts.
+ *
+ * Tools:
+ *   get_design_seed  — Get a curated design system by reference, vibe, or style
+ *   list_design_seeds — Browse available seeds with filtering
+ */
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { z } from 'zod';
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { searchSeeds } from './search.js';
+import { formatTokens, formatTailwind, formatCSS, formatShadcn, } from './exporters.js';
+// ── Load seed data ───────────────────────────────────────────────
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const seedsPath = join(__dirname, 'seeds-data.json');
+const seeds = JSON.parse(readFileSync(seedsPath, 'utf-8'));
+// ── Server setup ─────────────────────────────────────────────────
+const server = new McpServer({
+    name: 'seedflip',
+    version: '0.1.0',
+});
+// ── Tool: get_design_seed ────────────────────────────────────────
+server.tool('get_design_seed', `Get a curated design system for your project. Returns production-ready design tokens (fonts, colors, spacing, shadows, border radius) with implementation guidance.
+
+Accepts:
+- Brand references: "Stripe", "Vercel", "Linear", "GitHub", "Notion", "Supabase", "Spotify", "Framer", "Resend", "Superhuman", "Raycast", "Arc", "Railway", "Tailwind"
+- Style descriptors: "dark", "light", "minimal", "brutalist", "warm", "elegant", "editorial", "neon", "cyberpunk", "retro", "professional", "luxury", "developer"
+- Vibes: "dark minimal SaaS", "warm editorial blog", "brutalist portfolio", "neon cyberpunk"
+- Seed names: "Nightfall", "Ivory", "Concrete", etc.
+- Or no query for a random curated seed.
+
+Returns complete design tokens in your requested format (tokens, tailwind, css, or shadcn).`, {
+    query: z
+        .string()
+        .optional()
+        .describe('What kind of design direction you want. Examples: "Stripe", "dark minimal", "warm editorial", "brutalist", "neon developer tool"'),
+    format: z
+        .enum(['tokens', 'tailwind', 'css', 'shadcn'])
+        .optional()
+        .describe('Output format. "tokens" = readable summary with all values and design brief. "tailwind" = tailwind.config.ts. "css" = CSS custom properties. "shadcn" = shadcn/ui theme globals.css. Defaults to tokens.'),
+    count: z
+        .number()
+        .optional()
+        .describe('Number of seeds to return (1-5). Defaults to 1. Use more to give options.'),
+}, async ({ query, format = 'tokens', count = 1 }) => {
+    const results = searchSeeds(seeds, query ?? '');
+    const limit = Math.min(Math.max(count, 1), 5);
+    const topSeeds = results.slice(0, limit);
+    if (topSeeds.length === 0) {
+        // Fallback to random
+        const idx = Math.floor(Math.random() * seeds.length);
+        topSeeds.push({ seed: seeds[idx], score: 0, matchReasons: ['random (no match found)'] });
+    }
+    const formatter = format === 'tailwind'
+        ? formatTailwind
+        : format === 'css'
+            ? formatCSS
+            : format === 'shadcn'
+                ? formatShadcn
+                : formatTokens;
+    const sections = topSeeds.map((result, i) => {
+        const header = limit > 1
+            ? `### Option ${i + 1}: ${result.seed.name} (score: ${result.score}, matched: ${result.matchReasons.join(', ')})\n\n`
+            : '';
+        return header + formatter(result.seed);
+    });
+    return {
+        content: [
+            {
+                type: 'text',
+                text: sections.join('\n\n---\n\n'),
+            },
+        ],
+    };
+});
+// ── Tool: list_design_seeds ──────────────────────────────────────
+server.tool('list_design_seeds', `List available SeedFlip design seeds. Use this to see what's available before picking one, or to filter by tag/style. Returns seed names, vibes, and tags.`, {
+    tag: z
+        .string()
+        .optional()
+        .describe('Filter by tag. Examples: "dark", "light", "brutalist", "warm", "editorial", "developer", "neon"'),
+}, async ({ tag }) => {
+    let filtered = seeds;
+    if (tag) {
+        const tagLower = tag.toLowerCase();
+        filtered = seeds.filter((s) => s.tags.some((t) => t.toLowerCase() === tagLower));
+    }
+    // Skip wayback collection unless specifically asked for
+    if (!tag || !['retro', 'vintage', 'nostalgic', 'wayback'].includes(tag.toLowerCase())) {
+        filtered = filtered.filter((s) => s.collection !== 'wayback');
+    }
+    const isDark = (bg) => {
+        const hex = bg.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5;
+    };
+    const lines = filtered.map((s) => `- **${s.name}** — ${s.vibe} [${isDark(s.bg) ? 'dark' : 'light'}] (${s.tags.join(', ')})`);
+    return {
+        content: [
+            {
+                type: 'text',
+                text: `## SeedFlip — ${filtered.length} seeds${tag ? ` matching "${tag}"` : ''}\n\n${lines.join('\n')}`,
+            },
+        ],
+    };
+});
+// ── Start ────────────────────────────────────────────────────────
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+}
+main().catch(console.error);

package/dist/search.d.ts

@@ -0,0 +1,45 @@
+/**
+ * SeedFlip MCP — Search Engine
+ *
+ * Scores seeds against a natural language query.
+ * Handles brand references ("Stripe"), vibes ("dark minimal"),
+ * and style descriptors ("brutalist", "warm editorial").
+ */
+interface DesignSeed {
+    name: string;
+    fakeUrl: string;
+    vibe: string;
+    tags: string[];
+    headingFont: string;
+    bodyFont: string;
+    headingWeight: number;
+    letterSpacing: string;
+    bg: string;
+    surface: string;
+    surfaceHover: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    accent: string;
+    accentSoft: string;
+    radius: string;
+    radiusSm: string;
+    radiusXl: string;
+    shadow: string;
+    shadowSm: string;
+    shadowStyle: string;
+    gradient: string;
+    aiPromptTypography: string;
+    aiPromptColors: string;
+    aiPromptShape: string;
+    aiPromptDepth: string;
+    aiPromptRules: string;
+    collection?: string;
+}
+export type { DesignSeed };
+export interface ScoredSeed {
+    seed: DesignSeed;
+    score: number;
+    matchReasons: string[];
+}
+export declare function searchSeeds(seeds: DesignSeed[], query: string): ScoredSeed[];