@m0xoo/unstyle 1.1.0

package/README.md

@@ -0,0 +1,69 @@
+# UnStyle
+
+An MCP (Model Context Protocol) server designed to help LLMs generate beautiful, non-generic, and consistent UI designs. Instead of default Tailwind styles, this tool provides strict aesthetic guidelines, inspiration, rules, and component specifications for specific design themes.
+
+## Example: Before & After
+With the same prompt "Create a landing page":
+
+**Before using UnStyle (Generic Tailwind)**
+![Before](screenshots/before.png)
+
+**After using UnStyle (Brutal Theme)**
+![After](screenshots/after.png)
+
+## Available Themes
+- `brutal`: Neo-Brutalism (raw, high contrast, thick borders)
+- `pro`: Professional/Enterprise (Linear/Stripe aesthetic, muted, subtle)
+- `fun`: Playful/Consumer (bouncy, rounded, colorful)
+- `cyberpunk`: High-tech (neon, dark mode, glitchy)
+- `minimal`: Bare minimum (whitespace, grayscale, typography focused)
+
+## Setup
+
+1. Install dependencies:
+   ```bash
+   cd c:\Users\Mokhles\ratemy\mcp-theme-generator
+   npm install
+   ```
+2. Build the project:
+   ```bash
+   npx tsc
+   ```
+
+## Usage
+
+### Testing locally with the MCP Inspector
+You can test the server and its tools directly using the official MCP Inspector.
+```bash
+npx @modelcontextprotocol/inspector node build/index.js
+```
+
+### Using with Cursor
+To use this server in Cursor, you need to add it to your Agent config.
+
+1. Open Cursor Settings (`Cmd/Ctrl` + `,`)
+2. Navigate to **Features** -> **MCP Servers**
+3. Click **+ Add new MCP server**
+4. Configure as follows:
+   - **Name**: `unstyle` (or whatever you prefer)
+   - **Type**: `command`
+   - **Command**: `node`
+   - **Args**: `["c:/Users/Mokhles/ratemy/mcp-theme-generator/build/index.js"]` (Make sure to use the absolute path to your cloned/built directory)
+5. Save and ensure the status shows green/connected!
+
+Now, when prompting Cursor's Composer or Agent, you can say:
+> "Build a login page and use the get_theme_guidelines tool with the 'brutal' theme to style it."
+
+### Using with Claude Desktop or Antigravity
+Add the following to your `mcp.json` or equivalent configuration file:
+
+```json
+{
+  "mcpServers": {
+    "unstyle": {
+      "command": "node",
+      "args": ["c:/Users/Mokhles/ratemy/mcp-theme-generator/build/index.js"]
+    }
+  }
+}
+```

package/build/index.d.ts

@@ -0,0 +1 @@
+export {};

package/build/index.js

@@ -0,0 +1,25 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { THEMES, THEME_KEYS } from "./themes/index.js";
+const server = new McpServer({
+    name: "unstyle",
+    version: "1.1.0",
+});
+server.tool("get_theme_guidelines", "Provide UI design guidelines, rules, color palettes, typography, and component specifications based on a specific theme style to help an LLM generate non-generic, high-quality, beautiful UI code.", {
+    theme: z.enum(THEME_KEYS).describe("The target UI theme or aesthetic vibe."),
+}, async ({ theme }) => {
+    const guidelines = THEMES[theme];
+    return {
+        content: [{ type: "text", text: JSON.stringify(guidelines, null, 2) }],
+    };
+});
+async function run() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("UnStyle Server running on stdio");
+}
+run().catch((error) => {
+    console.error("Fatal error running server:", error);
+    process.exit(1);
+});

package/build/themes/brutal.d.ts

@@ -0,0 +1,2 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const brutal: ThemeGuidelines;

package/build/themes/brutal.js

@@ -0,0 +1,31 @@
+export const brutal = {
+    inspiration: "Brutalism focuses on raw, unpolished, and structural elements. It's an intentional departure from modern standard web design, emphasizing huge typography, high contrast, and a 'rough' feel.",
+    examples: ["neo-brutalism.com", "gumroad.com", "figma.com (brand pages)"],
+    rules: [
+        "No rounded corners on structural elements unless exaggerated (e.g., 9999px or 0px).",
+        "Thick, solid, black borders on almost everything.",
+        "Hard, offset shadow blocks instead of soft drop shadows.",
+        "Maximal contrast, jarring color combinations are acceptable."
+    ],
+    what_to_use: ["Monospaced fonts", "Huge sans-serif headers", "Solid colors", "Thick borders (border-4 or border-8)"],
+    what_not_to_use: ["Gradients", "Soft shadows", "Translucency/opacity", "Delicate, thin font weights"],
+    color_palette: {
+        primary: "#FF3366, #00C4FF, #FFE800",
+        background: "#FFFFFF, #EBEBEB",
+        text: "#000000",
+        accent: "#000000"
+    },
+    typography: {
+        headers: "Syncopate, Space Mono, or heavily weighted standard sans (Inter Black)",
+        body: "Space Mono, Courier New, or standard sans",
+        weights: "400 for regular, 800+ for headers"
+    },
+    component_guidelines: {
+        buttons: "border-4 border-black bg-yellow-400 text-black font-bold uppercase py-3 px-6 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none transition-all",
+        cards: "border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
+        inputs: "border-4 border-black bg-white p-3 focus:outline-none focus:bg-pink-200"
+    },
+    animation_specs: "instant, snappy, no easing. Use transform translations for click states.",
+    asset_recommendations: "Pixel art icons, solid stark SVGs with thick stroke widths.",
+    tailwind_config: `theme: { extend: { boxShadow: { 'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', 'brutal-lg': '8px 8px 0px 0px rgba(0,0,0,1)' } } }`
+};

package/build/themes/cyberpunk.d.ts

@@ -0,0 +1,2 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const cyberpunk: ThemeGuidelines;

package/build/themes/cyberpunk.js

@@ -0,0 +1,31 @@
+export const cyberpunk = {
+    inspiration: "High-tech, low-life aesthetic. Dark modes dominated by neon glowing accents, grids, and terminal-inspired UI.",
+    examples: ["cyberpunk.net", "hackthebox.com"],
+    rules: [
+        "Pure black backgrounds (or very dark navy/purple).",
+        "Glowing elements (box-shadow or text-shadow).",
+        "Glitch effects or CRT scanlines.",
+        "Angled cuts or clipped corners (clip-path)."
+    ],
+    what_to_use: ["Neon colors (cyan, magenta, yellow)", "Monospace fonts", "CSS clip-path for structural shapes", "Dark/glass layered panels"],
+    what_not_to_use: ["White backgrounds", "Soft pastel colors", "Rounded buttons (pills)", "Friendly serif fonts"],
+    color_palette: {
+        primary: "#FCEE0A, #00FF41, #FF003C",
+        background: "#080808, #120458",
+        text: "#E0E0E0, #00FF41",
+        accent: "#00E5FF"
+    },
+    typography: {
+        headers: "Oxanium, Orbitron, VT323",
+        body: "Fira Code, JetBrains Mono, Roboto Mono",
+        weights: "400, 700"
+    },
+    component_guidelines: {
+        buttons: "clip-path-polygon-[10%_0,100%_0,100%_70%,90%_100%,0_100%,0_30%] bg-yellow-400 text-black font-bold uppercase px-8 py-3 hover:bg-yellow-300 hover:shadow-[0_0_15px_rgba(252,238,10,0.7)] transition-all",
+        cards: "bg-gray-900 border border-cyan-500/50 p-6 shadow-[0_0_10px_rgba(0,229,255,0.2)]",
+        inputs: "bg-black border border-pink-600 text-pink-500 px-4 py-2 font-mono focus:outline-none focus:shadow-[0_0_10px_rgba(255,0,60,0.5)]"
+    },
+    animation_specs: "Flickering opacities, fast sharp slide-ins, glitch keyframes on hover.",
+    asset_recommendations: "Tech/wireframe style SVGs, minimal thin lined icons with glow.",
+    tailwind_config: `theme: { extend: { colors: { 'neon-pink': '#FF003C', 'neon-cyan': '#00E5FF' } } }`
+};

package/build/themes/fun.d.ts

@@ -0,0 +1,2 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const fun: ThemeGuidelines;

package/build/themes/fun.js

@@ -0,0 +1,31 @@
+export const fun = {
+    inspiration: "Playful, friendly, inviting, and highly engaging. Often used for consumer apps, education, or modern startups that want to stand out from corporate sterility.",
+    examples: ["duolingo.com", "discord.com", "linear.app (marketing illustrations)"],
+    rules: [
+        "Large border radii everywhere (full pills or 16px+ rounded corners).",
+        "Soft, colorful, deep drop shadows.",
+        "Bouncy, spring-based animations.",
+        "Vibrant, saturated primary colors."
+    ],
+    what_to_use: ["Rounded sans-serif fonts", "Bright gradients", "Chunky, soft buttons", "Emojis and 3D illustrations"],
+    what_not_to_use: ["Sharp corners (0px radius)", "Monochrome palettes", "Thin, serious serif fonts", "Strict technical grid lines"],
+    color_palette: {
+        primary: "#FF4B4B, #20D5D2, #FFB020",
+        background: "#F9FAFB, #FFF8F0",
+        text: "#1F2937",
+        accent: "#8B5CF6"
+    },
+    typography: {
+        headers: "Nunito, Quicksand, or Fredoka One",
+        body: "Nunito, Inter, or system-ui",
+        weights: "600, 700, 800"
+    },
+    component_guidelines: {
+        buttons: "bg-violet-500 hover:bg-violet-600 text-white font-bold rounded-full px-6 py-3 shadow-[0_8px_0_rgb(109,40,217)] active:translate-y-[4px] active:shadow-[0_4px_0_rgb(109,40,217)] transition-all",
+        cards: "bg-white rounded-3xl p-8 shadow-xl shadow-violet-100",
+        inputs: "bg-gray-100 rounded-2xl px-4 py-3 border-2 border-transparent focus:border-violet-500 focus:bg-white transition-all outline-none"
+    },
+    animation_specs: "Bouncy CSS springs or Framer Motion (type: 'spring', stiffness: 400, damping: 10). Hover scales (scale: 1.05).",
+    asset_recommendations: "3D emojis, Phosphor icons (duotone or bold), custom whimsical illustrations.",
+    tailwind_config: `theme: { extend: { borderRadius: { 'xl': '1rem', '2xl': '1.5rem', '3xl': '2rem' } } }`
+};

package/build/themes/index.d.ts

@@ -0,0 +1,3 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const THEMES: Record<string, ThemeGuidelines>;
+export declare const THEME_KEYS: [keyof typeof THEMES, ...Array<keyof typeof THEMES>];

package/build/themes/index.js

@@ -0,0 +1,13 @@
+import { brutal } from "./brutal.js";
+import { pro } from "./pro.js";
+import { fun } from "./fun.js";
+import { cyberpunk } from "./cyberpunk.js";
+import { minimal } from "./minimal.js";
+export const THEMES = {
+    brutal,
+    pro,
+    fun,
+    cyberpunk,
+    minimal,
+};
+export const THEME_KEYS = Object.keys(THEMES);

package/build/themes/minimal.d.ts

@@ -0,0 +1,2 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const minimal: ThemeGuidelines;

package/build/themes/minimal.js

@@ -0,0 +1,31 @@
+export const minimal = {
+    inspiration: "Less but better. Focuses purely on typography, whitespace, and essential content. The un-styled aesthetic.",
+    examples: ["read.cv", "apple.com", "notion.so"],
+    rules: [
+        "Maximum whitespace. Double the padding you think you need.",
+        "Extremely limited color palette (usually just black, white, and one muted accent).",
+        "No borders if whitespace can separate elements instead.",
+        "High typographic contrast (huge sizes vs tiny sizes, thin vs bold)."
+    ],
+    what_to_use: ["Premium sans or serif fonts", "Grayscale colors", "Massive margins", "Bare minimum structural elements"],
+    what_not_to_use: ["Drop shadows", "Background colors on cards", "Gradients", "Unnecessary rules or dividers"],
+    color_palette: {
+        primary: "#000000",
+        background: "#FFFFFF, #FAFAFA",
+        text: "#111111, #666666",
+        accent: "#E5E5E5"
+    },
+    typography: {
+        headers: "Newsreader, Playfair Display (Serif) or Helvetica Neue, Inter (Sans)",
+        body: "Inter, Helvetica Neue, or system strings",
+        weights: "300, 400 for structural, 600 for emphasis"
+    },
+    component_guidelines: {
+        buttons: "bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors tracking-wide text-sm",
+        cards: "bg-transparent p-0 (use whitespace to define the card rather than backgrounds)",
+        inputs: "border-b border-gray-300 bg-transparent px-0 py-2 focus:border-black outline-none transition-colors rounded-none"
+    },
+    animation_specs: "Very slow, elegant fades (e.g. 300ms ease-in-out opacity).",
+    asset_recommendations: "Feather icons (very clean, 1px stroke), real high-quality photography, no illustrations.",
+    tailwind_config: `theme: { extend: { spacing: { '18': '4.5rem', '22': '5.5rem' } } }`
+};

package/build/themes/pro.d.ts

@@ -0,0 +1,2 @@
+import { ThemeGuidelines } from "../types.js";
+export declare const pro: ThemeGuidelines;

package/build/themes/pro.js

@@ -0,0 +1,33 @@
+export const pro = {
+    inspiration: "Professional, enterprise-grade, highly polished 'dev-tool' aesthetic. It feels premium, understated, and incredibly fast.",
+    examples: ["linear.app", "stripe.com", "vercel.com"],
+    rules: [
+        "Extremely subtle borders (often just 1px with low opacity white/black).",
+        "Lots of dark mode variations with very subtle mesh gradients or noise backgrounds.",
+        "Muted text colors for secondary information (text-gray-400 or text-zinc-500).",
+        "Perfect alignment and tight, consistent spatial systems (4px/8px grid)."
+    ],
+    what_to_use: ["Inter or Geist typography", "Subtle inset shadows", "Glassmorphic overlays for modals/menus", "Framer motion for buttery smooth transitions"],
+    what_not_to_use: ["Bright, saturated backgrounds", "Thick borders", "Exaggerated corner radii", "Comic fonts"],
+    color_palette: {
+        primary: "#5E6AD2 (Linear purple) or #0070F3 (Vercel blue)",
+        background: "#000000, #0A0A0A, #111111",
+        surface: "#1A1A1A, #222222",
+        text: "#EDEDED, #A1A1AA",
+        border: "rgba(255,255,255,0.1)",
+        accent: "#FFFFFF"
+    },
+    typography: {
+        headers: "Inter, Geist, SF Pro Display",
+        body: "Inter, Geist, SF Pro Text",
+        weights: "400, 500, 600. Avoid 800+ unless very specific."
+    },
+    component_guidelines: {
+        buttons: "bg-white/10 hover:bg-white/20 text-white border border-white/10 rounded-md px-4 py-2 text-sm font-medium transition-colors ring-1 ring-inset ring-white/10",
+        cards: "bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 backdrop-blur-md",
+        inputs: "bg-zinc-950 border border-zinc-800 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-purple-500"
+    },
+    animation_specs: "Subtle fade-ins, spring physics for modals (stiffness 300, damping 30), 150ms ease-out color transitions.",
+    asset_recommendations: "Lucide icons (1.5px stroke), Phosphor icons (light). Keep them small and subtle.",
+    tailwind_config: `theme: { extend: { colors: { border: 'hsl(var(--border))', background: 'hsl(var(--background))' }, borderRadius: { 'pro': '0.5rem' } } }`
+};

package/build/types.d.ts

@@ -0,0 +1,28 @@
+export interface ThemeGuidelines {
+    inspiration: string;
+    examples: string[];
+    rules: string[];
+    what_to_use: string[];
+    what_not_to_use: string[];
+    color_palette: {
+        primary: string;
+        background: string;
+        text: string;
+        accent: string;
+        surface?: string;
+        border?: string;
+    };
+    typography: {
+        headers: string;
+        body: string;
+        weights: string;
+    };
+    component_guidelines: {
+        buttons: string;
+        cards: string;
+        inputs: string;
+    };
+    animation_specs: string;
+    asset_recommendations: string;
+    tailwind_config: string;
+}

package/build/types.js

@@ -0,0 +1 @@
+export {};

package/examples/with-tool/index.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brutal Landing Page</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syncopate:wght@400;700&display=swap"
+        rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'brutal-pink': '#FF3366',
+                        'brutal-cyan': '#00C4FF',
+                        'brutal-yellow': '#FFE800',
+                        'brutal-bg': '#EBEBEB',
+                    },
+                    fontFamily: {
+                        'mono': ['"Space Mono"', 'monospace'],
+                        'display': ['"Syncopate"', 'sans-serif'],
+                    },
+                    boxShadow: {
+                        'brutal': '4px 4px 0px 0px rgba(0,0,0,1)',
+                        'brutal-lg': '8px 8px 0px 0px rgba(0,0,0,1)',
+                        'brutal-xl': '12px 12px 0px 0px rgba(0,0,0,1)',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Space Mono', monospace;
+            background-color: #EBEBEB;
+            color: #000;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: 'Syncopate', sans-serif;
+        }
+
+        /* Brutalism specific shapes and selection */
+        ::selection {
+            background-color: #FF3366;
+            color: white;
+        }
+    </style>
+</head>
+
+<body class="min-h-screen border-8 border-black m-4 md:m-8 bg-brutal-bg flex flex-col relative overflow-x-hidden">
+
+    <!-- Top Navigation -->
+    <nav class="border-b-8 border-black bg-white flex justify-between items-center p-4 md:p-6 sticky top-0 z-50">
+        <div class="text-2xl font-display font-bold uppercase tracking-tighter">
+            Brut<span class="text-brutal-pink">.</span>
+        </div>
+        <div class="hidden md:flex gap-8 font-bold border-4 border-black p-2 bg-brutal-cyan shadow-brutal">
+            <a href="#features" class="hover:bg-black hover:text-white px-2 transition-colors">Features</a>
+            <a href="#pricing" class="hover:bg-black hover:text-white px-2 transition-colors">Pricing</a>
+            <a href="#about" class="hover:bg-black hover:text-white px-2 transition-colors">About</a>
+        </div>
+        <button
+            class="border-4 border-black bg-brutal-pink text-white font-bold uppercase py-2 px-6 shadow-brutal active:translate-x-1 active:translate-y-1 active:shadow-none transition-all">
+            Login
+        </button>
+    </nav>
+
+    <!-- Hero Section -->
+    <header class="flex-grow flex flex-col lg:flex-row border-b-8 border-black">
+        <div
+            class="flex-1 p-8 md:p-16 lg:p-24 flex flex-col justify-center border-b-8 lg:border-b-0 lg:border-r-8 border-black bg-white">
+            <div
+                class="inline-block border-4 border-black bg-brutal-yellow self-start px-4 py-2 font-bold mb-8 shadow-brutal transform -rotate-2">
+                NO FLUFF. JUST FUNCTION.
+            </div>
+            <h1 class="text-5xl md:text-7xl lg:text-8xl font-black mb-8 leading-tight tracking-tighter uppercase">
+                Raw Power. <br>
+                <span class="bg-black text-white px-4 pb-2 relative top-2">Unleashed.</span>
+            </h1>
+            <p class="text-xl md:text-2xl mb-12 max-w-2xl font-bold leading-relaxed">
+                Break the rules of modern web design. Build something that screams. Stop using boring rounded corners
+                and soft drop shadows.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-6">
+                <button
+                    class="border-4 border-black bg-brutal-yellow text-black text-xl font-bold uppercase py-4 px-8 shadow-brutal-lg active:translate-x-2 active:translate-y-2 active:shadow-none transition-all text-center">
+                    Get Started NOW
+                </button>
+                <button
+                    class="border-4 border-black bg-white text-black text-xl font-bold uppercase py-4 px-8 shadow-brutal-lg hover:bg-brutal-cyan active:translate-x-2 active:translate-y-2 active:shadow-none transition-all text-center">
+                    Read the Docs
+                </button>
+            </div>
+        </div>
+        <div class="flex-1 bg-brutal-cyan relative overflow-hidden flex items-center justify-center p-8 min-h-[400px]">
+            <!-- Brutalist Abstract Art -->
+            <div
+                class="w-full max-w-md aspect-square bg-brutal-pink border-8 border-black shadow-brutal-xl transform rotate-6 flex items-center justify-center relative z-10 hover:rotate-12 transition-transform duration-300">
+                <div
+                    class="w-2/3 h-2/3 bg-brutal-yellow border-8 border-black rounded-full shadow-brutal transform -rotate-12 flex items-center justify-center">
+                    <div class="w-1/2 h-1/2 bg-white border-8 border-black transform rotate-45"></div>
+                </div>
+            </div>
+            <!-- Decorative grid -->
+            <div class="absolute inset-0 opacity-20 pointer-events-none"
+                style="background-image: radial-gradient(#000 2px, transparent 2px); background-size: 30px 30px;"></div>
+        </div>
+    </header>
+
+    <!-- Features Section -->
+    <section id="features" class="p-8 md:p-16 border-b-8 border-black bg-brutal-yellow">
+        <h2 class="text-4xl md:text-6xl font-black mb-16 text-center uppercase tracking-tighter uppercase break-words">
+            <span class="border-b-8 border-black pb-2">Why Brutal?</span>
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-7xl mx-auto">
+            <!-- Feature 1 -->
+            <div class="border-4 border-black bg-white p-8 shadow-brutal-lg hover:-translate-y-2 transition-transform">
+                <div
+                    class="w-16 h-16 bg-brutal-pink border-4 border-black mb-6 shadow-brutal flex items-center justify-center text-white text-2xl font-black">
+                    01
+                </div>
+                <h3 class="text-2xl font-black mb-4 uppercase">Unapologetic</h3>
+                <p class="font-bold">Stand out from the sea of identical, clean, and boring modern websites. Make a
+                    statement.</p>
+            </div>
+
+            <!-- Feature 2 -->
+            <div
+                class="border-4 border-black bg-brutal-cyan p-8 shadow-brutal-lg hover:-translate-y-2 transition-transform md:translate-y-8">
+                <div
+                    class="w-16 h-16 bg-white border-4 border-black mb-6 shadow-brutal flex items-center justify-center text-black text-2xl font-black">
+                    02
+                </div>
+                <h3 class="text-2xl font-black mb-4 uppercase">High Contrast</h3>
+                <p class="font-bold">Maximum visibility. No subtle grays. Black and white pushed to the absolute limits.
+                </p>
+            </div>
+
+            <!-- Feature 3 -->
+            <div class="border-4 border-black bg-white p-8 shadow-brutal-lg hover:-translate-y-2 transition-transform">
+                <div
+                    class="w-16 h-16 bg-brutal-yellow border-4 border-black mb-6 shadow-brutal flex items-center justify-center text-black text-2xl font-black">
+                    03
+                </div>
+                <h3 class="text-2xl font-black mb-4 uppercase">Structural</h3>
+                <p class="font-bold">Expose the grid. Let the boxes be boxes. Thick borders define the space explicitly.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Call to Action -->
+    <section
+        class="p-8 md:p-24 bg-white text-center flex flex-col items-center justify-center border-b-8 border-black relative overflow-hidden">
+        <div class="absolute inset-0 bg-brutal-pink opacity-10"
+            style="background-image: repeating-linear-gradient(45deg, #000 0, #000 2px, transparent 2px, transparent 10px);">
+        </div>
+        <div
+            class="relative z-10 max-w-3xl border-8 border-black bg-brutal-bg p-8 md:p-16 shadow-brutal-xl transform rotate-[-1deg]">
+            <h2 class="text-4xl md:text-6xl font-black mb-8 uppercase tracking-tighter">Ready to Break Things?</h2>
+            <p class="text-xl mb-10 font-bold">Join the brutalist revolution. Stop making things "pretty" and start
+                making them memorable.</p>
+            <form class="flex flex-col sm:flex-row gap-4 w-full">
+                <input type="email" placeholder="ENTER EMAIL ADDRESS"
+                    class="flex-grow border-4 border-black bg-white p-4 font-bold focus:outline-none focus:bg-brutal-cyan transition-colors text-lg placeholder-black/50">
+                <button type="submit"
+                    class="border-4 border-black bg-black text-white text-xl font-bold uppercase py-4 px-8 shadow-brutal hover:bg-brutal-pink hover:text-black transition-all">
+                    Subscribe
+                </button>
+            </form>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-black text-white p-8 md:p-12 flex flex-col md:flex-row justify-between items-center gap-8">
+        <div class="text-3xl font-display font-black tracking-tighter uppercase">
+            Brut<span class="text-brutal-yellow">.</span>
+        </div>
+        <div class="flex gap-6">
+            <a href="#"
+                class="hover:text-brutal-pink hover:-translate-y-1 transition-transform border-b-2 border-transparent hover:border-brutal-pink pb-1">Twitter</a>
+            <a href="#"
+                class="hover:text-brutal-cyan hover:-translate-y-1 transition-transform border-b-2 border-transparent hover:border-brutal-cyan pb-1">GitHub</a>
+            <a href="#"
+                class="hover:text-brutal-yellow hover:-translate-y-1 transition-transform border-b-2 border-transparent hover:border-brutal-yellow pb-1">Dribbble</a>
+        </div>
+        <div class="font-bold">
+            © 2026 BRUTALIST INC.
+        </div>
+    </footer>
+
+</body>
+
+</html>

package/examples/without-tool/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Landing Page</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans">
+    <!-- Navbar -->
+    <nav class="bg-white shadow-sm p-4">
+        <div class="max-w-6xl mx-auto flex justify-between items-center">
+            <div class="text-xl font-bold text-blue-600">BrandLogo</div>
+            <div class="space-x-4 flex items-center">
+                <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
+                <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
+                <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors font-medium">Sign Up</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <header class="max-w-6xl mx-auto px-4 py-24 text-center">
+        <h1 class="text-5xl font-extrabold text-gray-900 mb-6 tracking-tight leading-tight">
+            Build Faster With Our Tools
+        </h1>
+        <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
+            Streamline your workflow and increase productivity with our comprehensive suite of developer tools designed for the modern web.
+        </p>
+        <div class="flex justify-center space-x-4">
+            <a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 shadow-md transition-all">Get Started</a>
+            <a href="#" class="bg-white text-blue-600 border border-blue-600 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-50 transition-all">Learn More</a>
+        </div>
+    </header>
+
+    <!-- Features Section -->
+    <section class="bg-white py-24 border-t border-gray-100">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-16">Why Choose Us?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="p-8 bg-gray-50 rounded-xl shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow">
+                    <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-900">Lightning Fast</h3>
+                    <p class="text-gray-600 leading-relaxed">Optimized for speed and performance, ensuring your users get the best experience possible without any delays.</p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="p-8 bg-gray-50 rounded-xl shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow">
+                    <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-900">Secure By Default</h3>
+                    <p class="text-gray-600 leading-relaxed">Enterprise-grade security built directly into the core, keeping your data safe from modern vulnerabilities.</p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="p-8 bg-gray-50 rounded-xl shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow">
+                    <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-900">Always Updated</h3>
+                    <p class="text-gray-600 leading-relaxed">We continuously push updates and improvements, so you never have to worry about maintenance and legacy software.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-gray-400 py-12 text-center text-sm border-t border-gray-800">
+        <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
+            <div class="font-bold text-gray-300 text-lg mb-4 md:mb-0">BrandLogo</div>
+            <p>&copy; 2026 BrandLogo. All rights reserved.</p>
+            <div class="space-x-4 mt-4 md:mt-0">
+                <a href="#" class="hover:text-white transition-colors">Privacy</a>
+                <a href="#" class="hover:text-white transition-colors">Terms</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@m0xoo/unstyle",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "node build/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "UnStyle: An MCP server for providing AI UI themes.",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+
+import { THEMES, THEME_KEYS } from "./themes/index.js";
+
+const server = new McpServer({
+    name: "unstyle",
+    version: "1.1.0",
+});
+
+server.tool(
+    "get_theme_guidelines",
+    "Provide UI design guidelines, rules, color palettes, typography, and component specifications based on a specific theme style to help an LLM generate non-generic, high-quality, beautiful UI code.",
+    {
+        theme: z.enum(THEME_KEYS).describe("The target UI theme or aesthetic vibe."),
+    },
+    async ({ theme }) => {
+        const guidelines = THEMES[theme as string];
+        return {
+            content: [{ type: "text", text: JSON.stringify(guidelines, null, 2) }],
+        };
+    }
+);
+
+async function run() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("UnStyle Server running on stdio");
+}
+
+run().catch((error) => {
+    console.error("Fatal error running server:", error);
+    process.exit(1);
+});

package/src/themes/brutal.ts

@@ -0,0 +1,33 @@
+import { ThemeGuidelines } from "../types.js";
+
+export const brutal: ThemeGuidelines = {
+    inspiration: "Brutalism focuses on raw, unpolished, and structural elements. It's an intentional departure from modern standard web design, emphasizing huge typography, high contrast, and a 'rough' feel.",
+    examples: ["neo-brutalism.com", "gumroad.com", "figma.com (brand pages)"],
+    rules: [
+        "No rounded corners on structural elements unless exaggerated (e.g., 9999px or 0px).",
+        "Thick, solid, black borders on almost everything.",
+        "Hard, offset shadow blocks instead of soft drop shadows.",
+        "Maximal contrast, jarring color combinations are acceptable."
+    ],
+    what_to_use: ["Monospaced fonts", "Huge sans-serif headers", "Solid colors", "Thick borders (border-4 or border-8)"],
+    what_not_to_use: ["Gradients", "Soft shadows", "Translucency/opacity", "Delicate, thin font weights"],
+    color_palette: {
+        primary: "#FF3366, #00C4FF, #FFE800",
+        background: "#FFFFFF, #EBEBEB",
+        text: "#000000",
+        accent: "#000000"
+    },
+    typography: {
+        headers: "Syncopate, Space Mono, or heavily weighted standard sans (Inter Black)",
+        body: "Space Mono, Courier New, or standard sans",
+        weights: "400 for regular, 800+ for headers"
+    },
+    component_guidelines: {
+        buttons: "border-4 border-black bg-yellow-400 text-black font-bold uppercase py-3 px-6 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none transition-all",
+        cards: "border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
+        inputs: "border-4 border-black bg-white p-3 focus:outline-none focus:bg-pink-200"
+    },
+    animation_specs: "instant, snappy, no easing. Use transform translations for click states.",
+    asset_recommendations: "Pixel art icons, solid stark SVGs with thick stroke widths.",
+    tailwind_config: `theme: { extend: { boxShadow: { 'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', 'brutal-lg': '8px 8px 0px 0px rgba(0,0,0,1)' } } }`
+};

package/src/themes/cyberpunk.ts

@@ -0,0 +1,33 @@
+import { ThemeGuidelines } from "../types.js";
+
+export const cyberpunk: ThemeGuidelines = {
+    inspiration: "High-tech, low-life aesthetic. Dark modes dominated by neon glowing accents, grids, and terminal-inspired UI.",
+    examples: ["cyberpunk.net", "hackthebox.com"],
+    rules: [
+        "Pure black backgrounds (or very dark navy/purple).",
+        "Glowing elements (box-shadow or text-shadow).",
+        "Glitch effects or CRT scanlines.",
+        "Angled cuts or clipped corners (clip-path)."
+    ],
+    what_to_use: ["Neon colors (cyan, magenta, yellow)", "Monospace fonts", "CSS clip-path for structural shapes", "Dark/glass layered panels"],
+    what_not_to_use: ["White backgrounds", "Soft pastel colors", "Rounded buttons (pills)", "Friendly serif fonts"],
+    color_palette: {
+        primary: "#FCEE0A, #00FF41, #FF003C",
+        background: "#080808, #120458",
+        text: "#E0E0E0, #00FF41",
+        accent: "#00E5FF"
+    },
+    typography: {
+        headers: "Oxanium, Orbitron, VT323",
+        body: "Fira Code, JetBrains Mono, Roboto Mono",
+        weights: "400, 700"
+    },
+    component_guidelines: {
+        buttons: "clip-path-polygon-[10%_0,100%_0,100%_70%,90%_100%,0_100%,0_30%] bg-yellow-400 text-black font-bold uppercase px-8 py-3 hover:bg-yellow-300 hover:shadow-[0_0_15px_rgba(252,238,10,0.7)] transition-all",
+        cards: "bg-gray-900 border border-cyan-500/50 p-6 shadow-[0_0_10px_rgba(0,229,255,0.2)]",
+        inputs: "bg-black border border-pink-600 text-pink-500 px-4 py-2 font-mono focus:outline-none focus:shadow-[0_0_10px_rgba(255,0,60,0.5)]"
+    },
+    animation_specs: "Flickering opacities, fast sharp slide-ins, glitch keyframes on hover.",
+    asset_recommendations: "Tech/wireframe style SVGs, minimal thin lined icons with glow.",
+    tailwind_config: `theme: { extend: { colors: { 'neon-pink': '#FF003C', 'neon-cyan': '#00E5FF' } } }`
+};

package/src/themes/fun.ts

@@ -0,0 +1,33 @@
+import { ThemeGuidelines } from "../types.js";
+
+export const fun: ThemeGuidelines = {
+    inspiration: "Playful, friendly, inviting, and highly engaging. Often used for consumer apps, education, or modern startups that want to stand out from corporate sterility.",
+    examples: ["duolingo.com", "discord.com", "linear.app (marketing illustrations)"],
+    rules: [
+        "Large border radii everywhere (full pills or 16px+ rounded corners).",
+        "Soft, colorful, deep drop shadows.",
+        "Bouncy, spring-based animations.",
+        "Vibrant, saturated primary colors."
+    ],
+    what_to_use: ["Rounded sans-serif fonts", "Bright gradients", "Chunky, soft buttons", "Emojis and 3D illustrations"],
+    what_not_to_use: ["Sharp corners (0px radius)", "Monochrome palettes", "Thin, serious serif fonts", "Strict technical grid lines"],
+    color_palette: {
+        primary: "#FF4B4B, #20D5D2, #FFB020",
+        background: "#F9FAFB, #FFF8F0",
+        text: "#1F2937",
+        accent: "#8B5CF6"
+    },
+    typography: {
+        headers: "Nunito, Quicksand, or Fredoka One",
+        body: "Nunito, Inter, or system-ui",
+        weights: "600, 700, 800"
+    },
+    component_guidelines: {
+        buttons: "bg-violet-500 hover:bg-violet-600 text-white font-bold rounded-full px-6 py-3 shadow-[0_8px_0_rgb(109,40,217)] active:translate-y-[4px] active:shadow-[0_4px_0_rgb(109,40,217)] transition-all",
+        cards: "bg-white rounded-3xl p-8 shadow-xl shadow-violet-100",
+        inputs: "bg-gray-100 rounded-2xl px-4 py-3 border-2 border-transparent focus:border-violet-500 focus:bg-white transition-all outline-none"
+    },
+    animation_specs: "Bouncy CSS springs or Framer Motion (type: 'spring', stiffness: 400, damping: 10). Hover scales (scale: 1.05).",
+    asset_recommendations: "3D emojis, Phosphor icons (duotone or bold), custom whimsical illustrations.",
+    tailwind_config: `theme: { extend: { borderRadius: { 'xl': '1rem', '2xl': '1.5rem', '3xl': '2rem' } } }`
+};

package/src/themes/index.ts

@@ -0,0 +1,16 @@
+import { brutal } from "./brutal.js";
+import { pro } from "./pro.js";
+import { fun } from "./fun.js";
+import { cyberpunk } from "./cyberpunk.js";
+import { minimal } from "./minimal.js";
+import { ThemeGuidelines } from "../types.js";
+
+export const THEMES: Record<string, ThemeGuidelines> = {
+    brutal,
+    pro,
+    fun,
+    cyberpunk,
+    minimal,
+};
+
+export const THEME_KEYS = Object.keys(THEMES) as [keyof typeof THEMES, ...Array<keyof typeof THEMES>];

package/src/themes/minimal.ts

@@ -0,0 +1,33 @@
+import { ThemeGuidelines } from "../types.js";
+
+export const minimal: ThemeGuidelines = {
+    inspiration: "Less but better. Focuses purely on typography, whitespace, and essential content. The un-styled aesthetic.",
+    examples: ["read.cv", "apple.com", "notion.so"],
+    rules: [
+        "Maximum whitespace. Double the padding you think you need.",
+        "Extremely limited color palette (usually just black, white, and one muted accent).",
+        "No borders if whitespace can separate elements instead.",
+        "High typographic contrast (huge sizes vs tiny sizes, thin vs bold)."
+    ],
+    what_to_use: ["Premium sans or serif fonts", "Grayscale colors", "Massive margins", "Bare minimum structural elements"],
+    what_not_to_use: ["Drop shadows", "Background colors on cards", "Gradients", "Unnecessary rules or dividers"],
+    color_palette: {
+        primary: "#000000",
+        background: "#FFFFFF, #FAFAFA",
+        text: "#111111, #666666",
+        accent: "#E5E5E5"
+    },
+    typography: {
+        headers: "Newsreader, Playfair Display (Serif) or Helvetica Neue, Inter (Sans)",
+        body: "Inter, Helvetica Neue, or system strings",
+        weights: "300, 400 for structural, 600 for emphasis"
+    },
+    component_guidelines: {
+        buttons: "bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors tracking-wide text-sm",
+        cards: "bg-transparent p-0 (use whitespace to define the card rather than backgrounds)",
+        inputs: "border-b border-gray-300 bg-transparent px-0 py-2 focus:border-black outline-none transition-colors rounded-none"
+    },
+    animation_specs: "Very slow, elegant fades (e.g. 300ms ease-in-out opacity).",
+    asset_recommendations: "Feather icons (very clean, 1px stroke), real high-quality photography, no illustrations.",
+    tailwind_config: `theme: { extend: { spacing: { '18': '4.5rem', '22': '5.5rem' } } }`
+};

package/src/themes/pro.ts

@@ -0,0 +1,35 @@
+import { ThemeGuidelines } from "../types.js";
+
+export const pro: ThemeGuidelines = {
+    inspiration: "Professional, enterprise-grade, highly polished 'dev-tool' aesthetic. It feels premium, understated, and incredibly fast.",
+    examples: ["linear.app", "stripe.com", "vercel.com"],
+    rules: [
+        "Extremely subtle borders (often just 1px with low opacity white/black).",
+        "Lots of dark mode variations with very subtle mesh gradients or noise backgrounds.",
+        "Muted text colors for secondary information (text-gray-400 or text-zinc-500).",
+        "Perfect alignment and tight, consistent spatial systems (4px/8px grid)."
+    ],
+    what_to_use: ["Inter or Geist typography", "Subtle inset shadows", "Glassmorphic overlays for modals/menus", "Framer motion for buttery smooth transitions"],
+    what_not_to_use: ["Bright, saturated backgrounds", "Thick borders", "Exaggerated corner radii", "Comic fonts"],
+    color_palette: {
+        primary: "#5E6AD2 (Linear purple) or #0070F3 (Vercel blue)",
+        background: "#000000, #0A0A0A, #111111",
+        surface: "#1A1A1A, #222222",
+        text: "#EDEDED, #A1A1AA",
+        border: "rgba(255,255,255,0.1)",
+        accent: "#FFFFFF"
+    },
+    typography: {
+        headers: "Inter, Geist, SF Pro Display",
+        body: "Inter, Geist, SF Pro Text",
+        weights: "400, 500, 600. Avoid 800+ unless very specific."
+    },
+    component_guidelines: {
+        buttons: "bg-white/10 hover:bg-white/20 text-white border border-white/10 rounded-md px-4 py-2 text-sm font-medium transition-colors ring-1 ring-inset ring-white/10",
+        cards: "bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 backdrop-blur-md",
+        inputs: "bg-zinc-950 border border-zinc-800 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-purple-500"
+    },
+    animation_specs: "Subtle fade-ins, spring physics for modals (stiffness 300, damping 30), 150ms ease-out color transitions.",
+    asset_recommendations: "Lucide icons (1.5px stroke), Phosphor icons (light). Keep them small and subtle.",
+    tailwind_config: `theme: { extend: { colors: { border: 'hsl(var(--border))', background: 'hsl(var(--background))' }, borderRadius: { 'pro': '0.5rem' } } }`
+};

package/src/types.ts

@@ -0,0 +1,28 @@
+export interface ThemeGuidelines {
+    inspiration: string;
+    examples: string[];
+    rules: string[];
+    what_to_use: string[];
+    what_not_to_use: string[];
+    color_palette: {
+        primary: string;
+        background: string;
+        text: string;
+        accent: string;
+        surface?: string;
+        border?: string;
+    };
+    typography: {
+        headers: string;
+        body: string;
+        weights: string;
+    };
+    component_guidelines: {
+        buttons: string;
+        cards: string;
+        inputs: string;
+    };
+    animation_specs: string;
+    asset_recommendations: string;
+    tailwind_config: string;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "rootDir": "./src",
+    "outDir": "./build",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}