Escribe intención.
Recibe componentes.
NEXUS es el DSL que convierte descripciones estructuradas en código React de producción. Sin fricción, sin boilerplate.
El problema
Demasiado código,
muy poca intención.
Cada componente React arrastra un peso de infraestructura que no tiene nada que ver con lo que realmente estás construyendo.
// LoginPage.tsx — 80+ líneas de setup
import { useState, useCallback, useEffect } from "react";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import { z } from "zod";
import { useForm } from "react-hook-form";
const schema = z.object({
email: z.string().email("Email inválido"),
password: z.string().min(8, "Mínimo 8 caracteres"),
});
export default function LoginPage() {
const router = useRouter();
const [loading, setLoading] = useState(false);
const { register, handleSubmit, formState } = useForm({
resolver: zodResolver(schema),
});
const onSubmit = useCallback(async (data) => {
setLoading(true);
try {
await fetch("/api/auth/login", {
method: "POST",
body: JSON.stringify(data),
});
router.push("/dashboard");
} catch {
toast.error("Credenciales inválidas");
} finally {
setLoading(false);
}
}, []);
// ... 50 líneas más de JSX// nexus.blueprint — 7 líneasForm "Iniciar sesión"Input "Email" [type:email] !requiredInput "Contraseña" [type:password] !requiredButton "Ingresar" #primary=> API.post(/auth/login)-> /dashboard( ?error ) -> Text "Inválido" !danger : null
Setup infinito
Hooks, validaciones, estados de carga — todo antes de escribir una línea de UI real.
Boilerplate repetido
El mismo patrón formulario-fetch-toast-router reescrito en cada feature.
Contexto cognitivo alto
Recordar imports, wiring de librerías y convenciones del proyecto al mismo tiempo.
Bugs de integración
Los errores surgen en las costuras entre librerías, no en la lógica de negocio.
Playground
Escribe NEXUS. Obtén React.
El editor envía tu blueprint al motor de generación y retorna componentes de producción en tiempo real.
Gramática
Blueprints de referencia.
Cada token del DSL tiene una semántica precisa. Aprende los 6 patrones fundamentales y podrás expresar cualquier UI.
#6EE7B7">@React #Tailwind#6EE7B7">@modify #94a3b8">[preserve:all]Form "login"Input "Código 2FA" #94a3b8">[type:otp] !required
Modifica un elemento existente sin tocar nada más. El contrato de preserve es inviolable.
Instalación
En producción en 4 pasos.
NEXUS se integra en tu workflow actual sin romper nada. Zero config para proyectos estándar.
Instalar nxlang
El núcleo de Nexus se distribuye vía npm y funciona en cualquier proyecto Next.js, Vite o CRA.
npm install nxlangEsto añade el motor de protocolo a tus dependencias.
Inicializar Protocolo
Crea el archivo de definición de estándares para tu proyecto.
npx nxlang initGenera nexus.config.ts en la raíz.
Escribir Blueprints
Usa el Studio o crea archivos .nexus para definir tus componentes.
npx nxlang validate dashboard.nexusValida la sintaxis antes de la síntesis.
Síntesis de Código
Genera el código de producción basado en tus blueprints.
npx nxlang buildProduce archivos React/Tailwind optimizados.
// nexus.config.tsimport { defineConfig } from "nxlang";export default defineConfig({lang: "es",framework: "next-ts",styling: "tailwind",output: "./src/components",tokens: {primary: "#6EE7B7",secondary: "#64748b",danger: "#ef4444",success: "#22c55e",radius: "8px",font: "'Inter', sans-serif",},icons: {library: "lucide-react",},standards: ["CleanCode", "ModularArchitecture"],});
Requisitos
Sé de los primeros en usar Prism
Estamos en beta. Deja tu email y te avisamos cuando abra el acceso completo.