seedflip-mcp 0.1.4 → 0.1.5

package/README.md

@@ -77,7 +77,7 @@ Get a curated design system by reference, vibe, or style.
 
 - **Brand references:** "Stripe", "Vercel", "Linear", "GitHub", "Notion", "Supabase", "Spotify", "Framer", "Resend", "Superhuman", "Raycast", "Arc"
 - **Style descriptors:** "dark minimal", "brutalist", "warm editorial", "neon cyberpunk", "elegant luxury"
-- **Export formats:** `tokens` (default), `tailwind`, `css`, `shadcn`
+- **Export formats:** `tokens` (default), `tailwind`, `css`, `shadcn`, `openclaw`
 - **Multiple results:** Set `count: 3` to get top 3 matches
 
 ```
@@ -107,6 +107,23 @@ Each seed includes production-ready values for:
 - **Depth:** Box shadows
 - **Design brief:** AI-ready prompt describing the full aesthetic
 
+## OpenClaw Dashboard Theming
+
+SeedFlip includes a ready-made OpenClaw skill. Use the `openclaw` format to get CSS variables mapped directly to OpenClaw's dashboard:
+
+```
+"theme my dashboard like Stripe" → format: "openclaw"
+"dark cyberpunk dashboard" → format: "openclaw"
+```
+
+The output includes:
+- **CSS variables** ready to inject into `:root`
+- **themes.json entry** for saving as a named theme
+- **Console snippet** for instant preview
+- **Google Fonts import** for the typography
+
+See `SKILL.md` for the full OpenClaw skill definition.
+
 ## Why
 
 Every vibe-coded app looks the same because AI agents don't have design vocabulary. They default to the same zinc palette, the same rounded corners, the same "modern minimalist" output. SeedFlip gives them 100+ curated design directions pulled from real, proven brands.

package/dist/exporters.d.ts

@@ -8,4 +8,5 @@ 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 formatOpenClaw(seed: DesignSeed): string;
 export declare function formatShadcn(seed: DesignSeed): string;

package/dist/exporters.js

@@ -189,6 +189,126 @@ export function formatCSS(seed) {
   ${seed.aiPromptRules}
 */`;
 }
+// ── OpenClaw dashboard theme ────────────────────────────────────
+export function formatOpenClaw(seed) {
+    const isDark = hexLuminance(seed.bg) < 0.5;
+    const headingFF = fontFamily(seed.headingFont);
+    const bodyFF = fontFamily(seed.bodyFont);
+    // Derive shadow scale from seed's shadow tokens
+    const shadowSm = seed.shadowSm;
+    const shadowMd = seed.shadow;
+    // Scale up for lg/xl
+    const shadowLg = shadowMd.replace(/(\d+)px/g, (_, n) => `${Math.round(Number(n) * 1.5)}px`);
+    const shadowXl = shadowMd.replace(/(\d+)px/g, (_, n) => `${Math.round(Number(n) * 2.5)}px`);
+    // Derive radius scale
+    const rSm = seed.radiusSm;
+    const rMd = seed.radius;
+    const rLg = seed.radiusXl;
+    const rXl = `${Math.round(parseFloat(seed.radiusXl) * 1.5)}px`;
+    const cssBlock = `:root {
+  /* SeedFlip — ${seed.name} */
+  /* ${seed.vibe} */
+
+  /* Colors */
+  --bg: ${seed.bg};
+  --card: ${seed.surface};
+  --bg-elevated: ${seed.surfaceHover};
+  --accent: ${seed.accent};
+  --primary: ${seed.accent};
+  --text: ${seed.text};
+  --text-secondary: ${seed.textMuted};
+  --muted: ${seed.textMuted};
+  --border: ${seed.border};
+
+  /* Typography */
+  --font-body: ${bodyFF};
+  --font-heading: ${headingFF};
+  --mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Shape */
+  --radius-sm: ${rSm};
+  --radius-md: ${rMd};
+  --radius-lg: ${rLg};
+  --radius-xl: ${rXl};
+
+  /* Depth */
+  --shadow-sm: ${shadowSm};
+  --shadow-md: ${shadowMd};
+  --shadow-lg: ${shadowLg};
+  --shadow-xl: ${shadowXl};
+}`;
+    const themeJson = JSON.stringify({
+        name: seed.name,
+        vibe: seed.vibe,
+        mode: isDark ? 'dark' : 'light',
+        bg: seed.bg,
+        card: seed.surface,
+        'bg-elevated': seed.surfaceHover,
+        accent: seed.accent,
+        primary: seed.accent,
+        text: seed.text,
+        'text-secondary': seed.textMuted,
+        muted: seed.textMuted,
+        border: seed.border,
+        'font-body': bodyFF,
+        'font-heading': headingFF,
+        'radius-sm': rSm,
+        'radius-md': rMd,
+        'radius-lg': rLg,
+        'radius-xl': rXl,
+        'shadow-sm': shadowSm,
+        'shadow-md': shadowMd,
+        'shadow-lg': shadowLg,
+        'shadow-xl': shadowXl,
+    }, null, 2);
+    return `## SeedFlip — ${seed.name} (OpenClaw Theme)
+
+**${seed.vibe}**
+Mode: ${isDark ? 'Dark' : 'Light'} | Tags: ${seed.tags.join(', ')}
+
+### CSS Variables — paste into your OpenClaw dashboard
+
+\`\`\`css
+@import url('${googleFontsUrl(seed)}');
+
+${cssBlock}
+\`\`\`
+
+### themes.json entry
+
+\`\`\`json
+${themeJson}
+\`\`\`
+
+### Quick inject (browser console)
+
+\`\`\`js
+// Paste this into your browser console to preview the theme instantly
+const s = document.documentElement.style;
+s.setProperty('--bg', '${seed.bg}');
+s.setProperty('--card', '${seed.surface}');
+s.setProperty('--bg-elevated', '${seed.surfaceHover}');
+s.setProperty('--accent', '${seed.accent}');
+s.setProperty('--primary', '${seed.accent}');
+s.setProperty('--text', '${seed.text}');
+s.setProperty('--text-secondary', '${seed.textMuted}');
+s.setProperty('--muted', '${seed.textMuted}');
+s.setProperty('--border', '${seed.border}');
+s.setProperty('--font-body', "${bodyFF}");
+s.setProperty('--font-heading', "${headingFF}");
+s.setProperty('--radius-sm', '${rSm}');
+s.setProperty('--radius-md', '${rMd}');
+s.setProperty('--radius-lg', '${rLg}');
+s.setProperty('--radius-xl', '${rXl}');
+s.setProperty('--shadow-sm', '${shadowSm}');
+s.setProperty('--shadow-md', '${shadowMd}');
+document.body.style.background = '${seed.bg}';
+document.body.style.color = '${seed.text}';
+\`\`\`
+
+### Design Brief
+${seed.aiPromptRules}`;
+}
 // ── shadcn/ui theme ─────────────────────────────────────────────
 export function formatShadcn(seed) {
     const bg = hexToHSLString(seed.bg);

package/dist/index.js

@@ -15,7 +15,7 @@ import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { z } from 'zod';
 import { createRequire } from 'module';
 import { searchSeeds } from './search.js';
-import { formatTokens, formatTailwind, formatCSS, formatShadcn, } from './exporters.js';
+import { formatTokens, formatTailwind, formatCSS, formatShadcn, formatOpenClaw, } from './exporters.js';
 // ── Load seed data ───────────────────────────────────────────────
 // Dual ESM/CJS: createRequire works in ESM (normal usage).
 // Bare require() is the fallback for CJS (Smithery's esbuild scan)
@@ -44,15 +44,15 @@ Accepts:
 - 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).`, {
+Returns complete design tokens in your requested format (tokens, tailwind, css, shadcn, or openclaw).`, {
     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'])
+        .enum(['tokens', 'tailwind', 'css', 'shadcn', 'openclaw'])
         .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.'),
+        .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. "openclaw" = OpenClaw dashboard theme. Defaults to tokens.'),
     count: z
         .number()
         .optional()
@@ -72,7 +72,9 @@ Returns complete design tokens in your requested format (tokens, tailwind, css,
             ? formatCSS
             : format === 'shadcn'
                 ? formatShadcn
-                : formatTokens;
+                : format === 'openclaw'
+                    ? formatOpenClaw
+                    : 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`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seedflip-mcp",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "mcpName": "io.github.bockenstette1/seedflip",
   "description": "MCP server for SeedFlip — 100+ curated design systems for AI agents. When your agent needs a design direction, it calls SeedFlip instead of guessing.",
   "type": "module",