@higinio/design-mcp 0.1.0

package/dist/slop.js

@@ -0,0 +1,257 @@
+const AI_FONTS = /font-family\s*:[^;}]*\b(inter|roboto|geist|plus jakarta|montserrat|poppins)\b/;
+const AI_PALETTE = /#(7c3aed|8b5cf6|a855f7|6d28d9|06b6d4|22d3ee|faf9f6|fefce8)\b/;
+const BUZZWORDS = /\b(seamless(?:ly)?|revolutionary|cutting-edge|unlock|leverage|supercharge|effortless(?:ly)?|game-?changer|world-class|easy|simply|just|revoluciona|de vanguardia|siguiente nivel|fácil(?:es|mente)?|simplemente|solo tienes que|sin esfuerzo)\b/;
+const EMOJI = /[\u{1F000}-\u{1FAFF}\u{1F1E6}-\u{1F1FF}]/u;
+// Cadencia aforística: "No es X. Es Y." / "It's not X. It's Y."
+const CADENCIA_ES = /\bno\s+(?:es|son)\s+[^.!?,;:]{2,60}\.\s+(?:es|son)\s+\S/i;
+const CADENCIA_EN = /\b(?:it|this)(?:['’]s|\s+is)\s+not\s+[^.!?,;:]{2,60}\.\s+(?:it|this)(?:['’]s|\s+is)\s+\S/i;
+// Marcador numerado de eyebrow: "01 · Capacidades", "02 / Proceso", "03." o "01" solo.
+const EYEBROW_NUM = /^\s*0\d\s*(?:[·/.\-–—]|$)/;
+/** ¿La firma de eyebrow (uppercase + tracking positivo) está en este bloque/estilo? */
+function hasEyebrowSignature(style) {
+    if (!/text-transform\s*:\s*uppercase/.test(style))
+        return false;
+    const ls = style.match(/letter-spacing\s*:\s*(-?\d*\.?\d+)\s*(?:em|px)/);
+    return ls !== null && parseFloat(ls[1]) > 0;
+}
+/** ¿La declaración box-shadow es un glow (var --glow/--accent, o blur ≥12px con color visible)? */
+function isGlowShadow(value) {
+    if (/var\(--(?:glow|accent)/.test(value))
+        return true;
+    let maxBlur = 0;
+    for (const m of value.matchAll(/(?:-?\d*\.?\d+(?:px)?\s+){2}(\d*\.?\d+)px/g)) {
+        maxBlur = Math.max(maxBlur, parseFloat(m[1]));
+    }
+    if (maxBlur < 12)
+        return false;
+    for (const m of value.matchAll(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/g)) {
+        if (Math.max(+m[1], +m[2], +m[3]) >= 80)
+            return true;
+    }
+    for (const m of value.matchAll(/#([0-9a-f]{6}|[0-9a-f]{3})\b/g)) {
+        const h = m[1].length === 3 ? m[1].split("").map((c) => c + c).join("") : m[1];
+        if (Math.max(...[0, 2, 4].map((o) => parseInt(h.slice(o, o + 2), 16))) >= 80)
+            return true;
+    }
+    return false;
+}
+/** ¿border-left / border-inline-start ≥2px sólido con color no neutro? */
+function accentSideBorder(body) {
+    const bm = body.match(/border-(?:left|inline-start)\s*:\s*(\d*\.?\d+)px\s+solid\s+([^;}"]+)/);
+    if (!bm || parseFloat(bm[1]) < 2)
+        return false;
+    const color = bm[2].trim();
+    if (/var\(--(?:accent|primary|success|warning|danger|info)/.test(color))
+        return true;
+    if (/var\(/.test(color))
+        return false; // otras variables: no concluyente, no marcar
+    if (/\b(?:red|blue|green|orange|purple|violet|teal|cyan|magenta|pink|yellow|crimson|coral)\b/.test(color))
+        return true;
+    const rgb = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgb) {
+        const c = [+rgb[1], +rgb[2], +rgb[3]];
+        return Math.max(...c) - Math.min(...c) >= 30;
+    }
+    const hex = color.match(/#([0-9a-f]{6}|[0-9a-f]{3})\b/);
+    if (hex) {
+        const h = hex[1].length === 3 ? hex[1].split("").map((ch) => ch + ch).join("") : hex[1];
+        const chans = [0, 2, 4].map((o) => parseInt(h.slice(o, o + 2), 16));
+        return Math.max(...chans) - Math.min(...chans) >= 30;
+    }
+    return false;
+}
+/** Detecta tells de diseño genérico ("AI slop") en CSS/HTML, adaptado a las reglas de Higinio. */
+export function checkSlop(code, lang, mode = "light") {
+    const out = [];
+    const lines = code.split("\n");
+    // Reglas por línea (aplican a CSS y a estilos inline de HTML).
+    lines.forEach((line, i) => {
+        const ln = i + 1;
+        const l = line.toLowerCase();
+        if (/(linear|radial|conic)-gradient\(/.test(l)) {
+            out.push({ level: "warn", rule: "gradiente", line: ln,
+                message: "Gradiente detectado; la marca usa fondos planos.",
+                fix: "Usa un fondo sólido (--bg); sin gradientes." });
+        }
+        if (/(?:-webkit-)?background-clip\s*:\s*text/.test(l)) {
+            out.push({ level: "warn", rule: "gradient-text", line: ln,
+                message: "Texto con relleno recortado (background-clip: text), típico de gradient-text.",
+                fix: "Usa color sólido (--text-primary)." });
+        }
+        if (/(?:-webkit-)?backdrop-filter\s*:[^;}]*blur\(/.test(l) || /filter\s*:[^;}]*blur\(/.test(l)) {
+            out.push({ level: "warn", rule: "glassmorphism", line: ln,
+                message: "Glassmorphism (blur en superficie); la marca usa superficies planas.",
+                fix: "Superficie plana + sombra teñida de tinta." });
+        }
+        if (mode === "light" && /box-shadow\s*:[^;}]*(#000(\b|000)|\bblack\b|rgba\(\s*0\s*,\s*0\s*,\s*0)/.test(l)) {
+            out.push({ level: "warn", rule: "sombra-negro-puro", line: ln,
+                message: "Sombra de negro puro; la marca tiñe las sombras de tinta.",
+                fix: "En modo claro, usa una sombra teñida de tinta en lugar de negro puro." });
+        }
+        if (AI_FONTS.test(l)) {
+            out.push({ level: "warn", rule: "fuente-generica", line: ln,
+                message: "Fuente genérica de IA (Inter/Roboto/Geist…).",
+                fix: "Usa las fuentes de marca del sistema activo." });
+        }
+        if (/text-align\s*:\s*justify/.test(l)) {
+            out.push({ level: "warn", rule: "texto-justificado", line: ln,
+                message: "Texto justificado; crea ríos y daña la legibilidad.",
+                fix: "Alinea a la izquierda." });
+        }
+        const ls = l.match(/letter-spacing\s*:\s*(-?\d*\.?\d+)\s*(em|px)/);
+        if (ls) {
+            const em = ls[2] === "px" ? parseFloat(ls[1]) / 16 : parseFloat(ls[1]);
+            if (em > 0.05) {
+                out.push({ level: "info", rule: "tracking-amplio", line: ln,
+                    message: `letter-spacing ${ls[1]}${ls[2]} es amplio; la marca topa en +0.04em (solo labels).`,
+                    fix: "Máx. +0.04em, y solo en labels uppercase." });
+            }
+        }
+        if (AI_PALETTE.test(l)) {
+            out.push({ level: "info", rule: "paleta-ia", line: ln,
+                message: "Color de paleta genérica de IA (violeta/cyan/crema).",
+                fix: "Usa la paleta del sistema." });
+        }
+        const fs = l.match(/font-size\s*:\s*(\d*\.?\d+)px/);
+        if (fs && parseFloat(fs[1]) < 12) {
+            out.push({ level: "warn", rule: "texto-diminuto", line: ln,
+                message: `Texto de ${fs[1]}px; el mínimo de la marca es 12px.`,
+                fix: "Usa ≥12px con line-height 1.5." });
+        }
+    });
+    // Reglas a nivel de bloque CSS (emparejan font-size con line-height / text-transform).
+    for (const b of code.match(/\{[^}]*\}/g) ?? []) {
+        const bl = b.toLowerCase();
+        const fsM = bl.match(/font-size\s*:\s*(\d*\.?\d+)px/);
+        const fontSize = fsM ? parseFloat(fsM[1]) : null;
+        const lhM = bl.match(/line-height\s*:\s*(\d*\.?\d+)(px|em|%|rem)?/);
+        if (lhM && !lhM[2] && fontSize !== null && fontSize <= 18 && parseFloat(lhM[1]) < 1.4) {
+            out.push({ level: "warn", rule: "interlineado-apretado", line: 0,
+                message: `Interlineado ${lhM[1]} en texto de cuerpo (${fontSize}px); apretado.`,
+                fix: "Usa 1.5–1.6 en cuerpo (los headings pueden ir más ajustados)." });
+        }
+        if (/text-transform\s*:\s*uppercase/.test(bl) && fontSize !== null && (fontSize > 14 || !/letter-spacing/.test(bl))) {
+            out.push({ level: "info", rule: "mayusculas-cuerpo", line: 0,
+                message: `Mayúsculas en texto de ${fontSize}px; reserva uppercase para labels pequeños.`,
+                fix: "Solo en labels ≤14px con tracking +0.04em." });
+        }
+    }
+    // Glow duplicado (solo modo oscuro): la regla de Nocturna es "glow máximo uno por pantalla" (§7).
+    if (mode === "dark") {
+        const glowLines = [];
+        lines.forEach((line, i) => {
+            for (const m of line.toLowerCase().matchAll(/box-shadow\s*:\s*([^;}]*)/g)) {
+                if (isGlowShadow(m[1]))
+                    glowLines.push(i + 1);
+            }
+        });
+        if (glowLines.length >= 2) {
+            out.push({ level: "warn", rule: "glow-budget", line: glowLines[1],
+                message: `${glowLines.length} sombras con glow de acento en la misma vista; el glow se raciona.`,
+                fix: "El glow es del elemento hero/CTA; máximo uno por pantalla." });
+        }
+    }
+    // Borde lateral de acento en tarjetas. Exención: Toast y Alert usan border-left semántico de 3px por spec (§10.17).
+    for (const m of code.matchAll(/([^{}]*)\{([^}]*)\}/g)) {
+        if (/toast|alert/i.test(m[1]))
+            continue;
+        if (accentSideBorder(m[2].toLowerCase())) {
+            out.push({ level: "info", rule: "borde-acento-lateral", line: 0,
+                message: "Borde lateral de acento en una superficie; tell de tarjeta de IA.",
+                fix: "Reserva el border-left semántico para Toast y Alert (3px, §10.17); las tarjetas usan borde neutro completo." });
+        }
+    }
+    lines.forEach((line, i) => {
+        for (const m of line.matchAll(/<[a-z][^>]*\bstyle\s*=\s*"([^"]*)"/gi)) {
+            if (/toast|alert/i.test(m[0]))
+                continue;
+            if (accentSideBorder(m[1].toLowerCase())) {
+                out.push({ level: "info", rule: "borde-acento-lateral", line: i + 1,
+                    message: "Borde lateral de acento en una superficie; tell de tarjeta de IA.",
+                    fix: "Reserva el border-left semántico para Toast y Alert (3px, §10.17); las tarjetas usan borde neutro completo." });
+            }
+        }
+    });
+    // Reglas de copy sobre nodos de texto HTML (fuera de <style>/<script>).
+    if (lang === "html") {
+        let inBlock = false;
+        let numberedEyebrows = 0;
+        lines.forEach((line, i) => {
+            const ln = i + 1;
+            const low = line.toLowerCase();
+            const opens = /<(style|script)[\s>]/.test(low);
+            if (opens)
+                inBlock = true;
+            if (!inBlock) {
+                for (const m of line.matchAll(/>([^<]+)</g)) {
+                    const t = m[1];
+                    if (/[!¡]/.test(t) && !/!\s*=/.test(t)) {
+                        out.push({ level: "warn", rule: "exclamacion", line: ln,
+                            message: "Signo de exclamación en el texto; la voz de la marca no los usa.",
+                            fix: "Reescribe sin signos de exclamación (§2)." });
+                    }
+                    if (EMOJI.test(t)) {
+                        out.push({ level: "warn", rule: "emoji", line: ln,
+                            message: "Emoji en el texto; la marca comunica con color + icono + texto.",
+                            fix: "Quita el emoji." });
+                    }
+                    if ((t.match(/—/g) ?? []).length > 2) {
+                        out.push({ level: "info", rule: "em-dash-abuso", line: ln,
+                            message: "Más de 2 guiones largos en un bloque (cadence aforístico de IA).",
+                            fix: "Máx. 2 em-dash por bloque." });
+                    }
+                    if (BUZZWORDS.test(t.toLowerCase())) {
+                        out.push({ level: "info", rule: "jerga-marketing", line: ln,
+                            message: "Jerga de marketing detectada.",
+                            fix: "Usa lenguaje directo, sin jerga." });
+                    }
+                    if (CADENCIA_ES.test(t) || CADENCIA_EN.test(t)) {
+                        out.push({ level: "info", rule: "cadencia-aforistica", line: ln,
+                            message: "Cadencia aforística (\"No es X. Es Y.\"); tell de copy de IA.",
+                            fix: "Di lo que es directamente, sin la negación previa." });
+                    }
+                    if (EYEBROW_NUM.test(t))
+                        numberedEyebrows++;
+                }
+                const hM = line.match(/<h[1-6][^>]*>([^<]+)</i);
+                if (hM) {
+                    const words = hM[1].trim().split(/\s+/).filter(Boolean);
+                    const caps = words.slice(1).filter((w) => /^[A-ZÁÉÍÓÚÑ]/.test(w)).length;
+                    if (words.length >= 2 && caps >= 1) {
+                        out.push({ level: "info", rule: "title-case-heading", line: ln,
+                            message: "Posible Title Case en un heading; la marca usa sentence case.",
+                            fix: "Solo la primera palabra en mayúscula (salvo nombres propios)." });
+                    }
+                }
+            }
+            if (/<\/(style|script)>/.test(low))
+                inBlock = false;
+        });
+        // Eyebrow spam: la página raciona los labels uppercase+tracking (máx. 1 por cada 3 secciones).
+        const eyebrowClasses = new Set();
+        for (const m of code.matchAll(/\.([a-zA-Z][\w-]*)\s*\{([^}]*)\}/g)) {
+            if (hasEyebrowSignature(m[2].toLowerCase()))
+                eyebrowClasses.add(m[1].toLowerCase());
+        }
+        let eyebrowCount = 0;
+        for (const m of code.matchAll(/<[a-z][^>]*\bclass\s*=\s*"([^"]*)"/gi)) {
+            if (m[1].toLowerCase().split(/\s+/).some((c) => eyebrowClasses.has(c)))
+                eyebrowCount++;
+        }
+        for (const m of code.matchAll(/<[a-z][^>]*\bstyle\s*=\s*"([^"]*)"/gi)) {
+            if (hasEyebrowSignature(m[1].toLowerCase()))
+                eyebrowCount++;
+        }
+        if (eyebrowCount >= 3) {
+            out.push({ level: "info", rule: "eyebrow-spam", line: 0,
+                message: `${eyebrowCount} labels uppercase con tracking en la misma página; ritmo templado de eyebrows de IA.`,
+                fix: "Máximo 1 eyebrow por cada 3 secciones; el headline solo suele bastar." });
+        }
+        if (numberedEyebrows >= 2) {
+            out.push({ level: "info", rule: "eyebrow-spam", line: 0,
+                message: `${numberedEyebrows} marcadores numerados tipo "01 ·"; enumerar secciones es un tell de IA.`,
+                fix: "El eyebrow nombra el tema en lenguaje plano, no lo enumera; mejor aún, quítalo." });
+        }
+    }
+    return out;
+}

package/dist/snippet.js

@@ -0,0 +1,54 @@
+const CSS = {
+    button: `.btn-primary {
+  background: var(--accent);
+  color: var(--on-accent, #fff);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 10px);
+  padding: 10px 16px;
+  font-family: var(--font-body);
+}
+.btn-primary:hover { background: var(--accent-hover); }`,
+    card: `.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg, 14px);
+  padding: 20px;
+  color: var(--text-primary);
+}`,
+    input: `.input {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md, 10px);
+  padding: 10px 12px;
+  color: var(--text-primary);
+}
+.input:focus { outline: 2px solid var(--accent); }`,
+};
+const REACT = {
+    button: `export function Button({ children, ...props }) {
+  return <button className="btn-primary" {...props}>{children}</button>;
+}`,
+    card: `export function Card({ children }) {
+  return <div className="card">{children}</div>;
+}`,
+    input: `export function Input(props) {
+  return <input className="input" {...props} />;
+}`,
+};
+function tailwindFor(component) {
+    const map = {
+        button: `<button class="bg-[var(--accent)] text-[var(--on-accent)] rounded-[10px] px-4 py-2.5 font-[var(--font-body)] hover:bg-[var(--accent-hover)]">Acción</button>`,
+        card: `<div class="bg-[var(--surface)] border border-[var(--border)] rounded-[14px] p-5 text-[var(--text-primary)]">…</div>`,
+        input: `<input class="bg-[var(--surface)] border border-[var(--border)] rounded-[10px] px-3 py-2.5 text-[var(--text-primary)] focus:outline-2 focus:outline-[var(--accent)]" />`,
+    };
+    return map[component] ?? `<div class="bg-[var(--surface)] text-[var(--text-primary)] p-4">${component}</div>`;
+}
+export function generateSnippet(sys, component, stack) {
+    const key = component.toLowerCase();
+    const header = `/* ${sys.meta.name} — ${component} (${stack}). Usa solo aliases semánticos. */\n`;
+    if (stack === "css")
+        return header + (CSS[key] ?? `.${key} {\n  background: var(--surface);\n  color: var(--text-primary);\n}`);
+    if (stack === "react")
+        return header + (REACT[key] ?? `export function ${key.replace(/(^.|-.)/g, (m) => m.replace("-", "").toUpperCase())}() {\n  return <div className="${key}">…</div>;\n}`);
+    return header + tailwindFor(key);
+}

package/dist/systems.js

@@ -0,0 +1,21 @@
+export const SYSTEMS = {
+    celeste: {
+        id: "celeste",
+        dir: "celeste-clasica",
+        name: "Celeste Clásica",
+        mode: "light",
+        philosophy: "Light-first, sereno y profesional. Banca privada boutique, no startup ruidosa.",
+        palette: ["#a0c0d4", "#7192ba", "#31343e"],
+        fonts: { display: "Fraunces", body: "Public Sans", mono: "IBM Plex Mono" },
+    },
+    nocturna: {
+        id: "nocturna",
+        dir: "nocturna-electrica",
+        name: "Nocturna Eléctrica",
+        mode: "dark",
+        philosophy: "Dark-first, técnico y de alto contraste.",
+        palette: ["#52baed", "#353d7c", "#010203"],
+        fonts: { display: "Space Grotesk", body: "Manrope", mono: "JetBrains Mono" },
+    },
+};
+export const SYSTEM_IDS = ["celeste", "nocturna"];

package/dist/tokens.js

@@ -0,0 +1,76 @@
+function valueToString(value) {
+    if (value && typeof value === "object" && "hex" in value) {
+        return String(value.hex);
+    }
+    return String(value);
+}
+/** Aplana un árbol de tokens W3C DTCG a una lista plana. */
+export function parseDtcgTokens(json) {
+    const out = [];
+    const walk = (node, path, inheritedType) => {
+        if (!node || typeof node !== "object")
+            return;
+        const obj = node;
+        const type = typeof obj.$type === "string" ? obj.$type : inheritedType;
+        if ("$value" in obj) {
+            out.push({
+                path: path.join("."),
+                value: valueToString(obj.$value),
+                type,
+                description: typeof obj.$description === "string" ? obj.$description : undefined,
+            });
+            return;
+        }
+        for (const [key, child] of Object.entries(obj)) {
+            if (key.startsWith("$"))
+                continue;
+            walk(child, [...path, key], type);
+        }
+    };
+    walk(json, [], "unknown");
+    return out;
+}
+/** Extrae variables CSS `--nombre: valor;` del bloque :root canónico (ignora overrides de tema). */
+export function parseCssAliases(css) {
+    const map = new Map();
+    const rootMatch = css.match(/:root\s*\{([^}]*)\}/);
+    const scope = rootMatch ? rootMatch[1] : css;
+    const re = /(--[\w-]+)\s*:\s*([^;]+);/g;
+    let m;
+    while ((m = re.exec(scope)) !== null) {
+        map.set(m[1], m[2].trim());
+    }
+    return map;
+}
+/** Resuelve un alias (siguiendo var()) o un token DTCG por path. */
+export function resolveToken(aliases, tokenIndex, name) {
+    if (name.startsWith("--")) {
+        if (!aliases.has(name))
+            return null;
+        const chain = [name];
+        let current = name;
+        for (let i = 0; i < 10; i++) {
+            const raw = aliases.get(current);
+            if (raw === undefined)
+                break;
+            const varMatch = raw.match(/^var\((--[\w-]+)\)$/);
+            if (varMatch) {
+                current = varMatch[1];
+                chain.push(current);
+                continue;
+            }
+            chain.push(raw);
+            return { name, value: raw, chain };
+        }
+        return null;
+    }
+    const token = tokenIndex.get(name);
+    if (!token)
+        return null;
+    return { name, value: token.value, chain: [name, token.value], type: token.type, description: token.description };
+}
+/** Busca tokens cuyo path o valor contenga la query (case-insensitive). */
+export function searchTokens(tokens, query) {
+    const q = query.toLowerCase();
+    return tokens.filter((t) => t.path.toLowerCase().includes(q) || t.value.toLowerCase().includes(q));
+}

package/dist/types.js

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

package/dist/validate.js

@@ -0,0 +1,135 @@
+function relLuminance(hex) {
+    const h = hex.replace("#", "");
+    const n = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const rgb = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255);
+    const lin = rgb.map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+    return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+export function contrastRatio(a, b) {
+    const la = relLuminance(a);
+    const lb = relLuminance(b);
+    const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** Mapa hex(lowercase) → alias sugerido, a partir de los tokens del sistema. */
+function hexToAlias(sys) {
+    const byHex = new Map();
+    for (const [alias, raw] of sys.aliases) {
+        const m = raw.match(/^#([0-9a-fA-F]{3,6})$/);
+        if (m)
+            byHex.set(("#" + m[1]).toLowerCase(), alias);
+    }
+    return byHex;
+}
+export function validateCode(sys, code, lang) {
+    const out = [];
+    const lines = code.split("\n");
+    const paletteHex = new Set(sys.tokens.filter((t) => t.type === "color").map((t) => t.value.toLowerCase()));
+    const aliasByHex = hexToAlias(sys);
+    lines.forEach((line, i) => {
+        const ln = i + 1;
+        const lower = line.toLowerCase();
+        const primary300AsText = sys.meta.id === "celeste" && /(?<![\w-])color\s*:\s*#a0c0d4/.test(lower);
+        for (const hex of lower.match(/#[0-9a-f]{6}\b/g) ?? []) {
+            if (hex === "#a0c0d4" && primary300AsText) {
+                out.push({ level: "error", rule: "primary-300-no-texto", line: ln,
+                    message: "primary-300 (#a0c0d4) no debe usarse como color de texto.",
+                    fix: "Usa --text-primary o --link; reserva #a0c0d4 para decoración." });
+            }
+            else if (aliasByHex.has(hex)) {
+                out.push({ level: "warn", rule: "hex-directo", line: ln,
+                    message: `Hex directo ${hex} equivale al alias ${aliasByHex.get(hex)}.`,
+                    fix: `Reemplaza ${hex} por var(${aliasByHex.get(hex)}).` });
+            }
+            else if (!paletteHex.has(hex)) {
+                out.push({ level: "warn", rule: "color-fuera-de-sistema", line: ln,
+                    message: `El color ${hex} no pertenece a la paleta del sistema.`,
+                    fix: "Usa un token/alias del sistema en lugar de un hex arbitrario." });
+            }
+        }
+    });
+    if (lang === "css") {
+        const blocks = code.match(/\{[^}]*\}/g) ?? [];
+        for (const block of blocks) {
+            const color = block.match(/(?<![\w-])color\s*:\s*(#[0-9a-fA-F]{6})/);
+            const bg = block.match(/background(?:-color)?\s*:\s*(#[0-9a-fA-F]{6})/);
+            if (color && bg && contrastRatio(color[1], bg[1]) < 4.5) {
+                out.push({ level: "warn", rule: "contraste-aa", line: 0,
+                    message: `Contraste ${contrastRatio(color[1], bg[1]).toFixed(2)}:1 entre ${color[1]} y ${bg[1]} (< 4.5 AA).`,
+                    fix: "Aumenta el contraste texto/fondo hasta al menos 4.5:1." });
+            }
+        }
+        if (/outline\s*:\s*(none|0)\b/.test(code) && !/:focus-visible/.test(code)) {
+            out.push({ level: "warn", rule: "outline-none", line: 0,
+                message: "outline: none sin reemplazo de foco visible.",
+                fix: "Provee foco con :focus-visible (nunca quites el foco sin alternativa)." });
+        }
+        const allowedRadii = new Set([0]);
+        for (const [alias, val] of sys.aliases) {
+            if (/^--radius-/.test(alias)) {
+                const mm = val.match(/(\d+)px/);
+                if (mm)
+                    allowedRadii.add(parseInt(mm[1], 10));
+            }
+        }
+        for (const m of code.matchAll(/border-radius\s*:\s*([^;}]+)/g)) {
+            for (const px of m[1].matchAll(/(\d+)px/g)) {
+                const v = parseInt(px[1], 10);
+                if (v < 999 && !allowedRadii.has(v)) {
+                    out.push({ level: "info", rule: "drift-radio", line: 0,
+                        message: `border-radius ${v}px fuera de la escala de radios del sistema.`,
+                        fix: "Usa la escala de radios del sistema (--radius-sm/md/lg/xl) o 50%/9999px para píldoras." });
+                }
+            }
+        }
+        // Escala tipográfica derivada de los aliases --text-* en rem (mismo enfoque que drift-radio con
+        // --radius-*). Si los tokens no la expusieran, cae a {12,14,16,18,20,25,31,39,49}: la escala 1.25
+        // base 16 de §4.2, idéntica en ambos sistemas. Solo se evalúan px; rem/em y 0 quedan exentos.
+        const allowedFontPx = new Set([0]);
+        for (const [alias, val] of sys.aliases) {
+            if (!/^--text-/.test(alias))
+                continue;
+            const rem = val.match(/^(\d*\.?\d+)rem$/);
+            if (rem)
+                allowedFontPx.add(Math.round(parseFloat(rem[1]) * 16));
+        }
+        if (allowedFontPx.size === 1)
+            for (const v of [12, 14, 16, 18, 20, 25, 31, 39, 49])
+                allowedFontPx.add(v);
+        for (const m of code.matchAll(/font-size\s*:\s*(\d*\.?\d+)px/g)) {
+            const v = parseFloat(m[1]);
+            if (!allowedFontPx.has(v)) {
+                out.push({ level: "info", rule: "drift-font-size", line: 0,
+                    message: `font-size ${v}px fuera de la escala tipográfica del sistema.`,
+                    fix: "Usa la escala del sistema (--text-xs…--text-5xl: 12/14/16/18/20/25/31/39/49px)." });
+            }
+        }
+        for (const m of code.matchAll(/letter-spacing\s*:\s*(-\d*\.?\d+)em/g)) {
+            const v = parseFloat(m[1]);
+            if (v <= -0.04) {
+                out.push({ level: "warn", rule: "tracking-negativo-extremo", line: 0,
+                    message: `letter-spacing ${v}em aplasta el texto (≤ -0.04em).`,
+                    fix: "El tracking más apretado del sistema es --tracking-display (-0.02em); no bajes de ahí." });
+            }
+        }
+    }
+    if (lang === "html") {
+        const primaries = (code.match(/btn[-\s_]*primary/gi) ?? []).length;
+        if (primaries > 1) {
+            out.push({ level: "warn", rule: "un-solo-primario", line: 0,
+                message: `Se detectaron ${primaries} botones primarios; debe haber uno solo por pantalla.`,
+                fix: "Deja un único botón primario visible; el resto, secundarios/ghost." });
+        }
+        for (const m of code.matchAll(/<(div|span)\b[^>]*\bonclick\s*=/gi)) {
+            out.push({ level: "warn", rule: "div-clickable", line: 0,
+                message: `<${m[1].toLowerCase()}> con onclick no es accesible por teclado.`,
+                fix: "Usa <button> para acciones." });
+        }
+        for (const _ of code.matchAll(/>([^<]*\.\.\.[^<]*)</g)) {
+            out.push({ level: "info", rule: "puntos-suspensivos", line: 0,
+                message: "Tres puntos '...' en el texto; usa el carácter '…'.",
+                fix: "Reemplaza '...' por '…'." });
+        }
+    }
+    return out;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@higinio/design-mcp",
+  "version": "0.1.0",
+  "description": "MCP server de los design systems de Higinio (Celeste Clásica y Nocturna Eléctrica).",
+  "type": "module",
+  "license": "UNLICENSED",
+  "author": "Higinio Sosa",
+  "repository": { "type": "git", "url": "git+https://github.com/HiginioSosa/Diseno-Higinio.git", "directory": "mcp" },
+  "homepage": "https://github.com/HiginioSosa/Diseno-Higinio#readme",
+  "bugs": { "url": "https://github.com/HiginioSosa/Diseno-Higinio/issues" },
+  "keywords": ["mcp", "design-system", "design-tokens", "celeste-clasica", "nocturna-electrica"],
+  "bin": { "design-mcp": "dist/index.js", "design-lint": "dist/cli.js" },
+  "files": ["dist", "assets"],
+  "publishConfig": { "access": "public" },
+  "engines": { "node": ">=20" },
+  "scripts": {
+    "sync-assets": "tsx scripts/sync-assets.ts",
+    "build": "tsc",
+    "prepare": "npm run sync-assets && npm run build",
+    "start": "node dist/index.js",
+    "dev": "tsx src/index.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "express": "^4.21.2",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  }
+}