openprompt-lang 0.3.0

package/src/commands/init.js

@@ -0,0 +1,373 @@
+import { writeFileSync, readFileSync, existsSync, mkdirSync } from "fs";
+import { join } from "path";
+import chalk from "chalk";
+import { detectStack } from "../utils/config.js";
+
+const BASE_STRUCTURE = {
+  "src/components/ui": { desc: "Componentes atómicos reutilizables" },
+  "src/components/layout": { desc: "Componentes de layout (Navbar, Sidebar)" },
+  "src/components/shared": { desc: "Componentes compartidos del dominio" },
+  "src/features": { desc: "Módulos de features (auth, dashboard, etc.)" },
+  "src/hooks": { desc: "Custom hooks globales" },
+  "src/services": { desc: "APIs, clientes externos" },
+  "src/store": { desc: "Estado global (Zustand)" },
+  "src/types": { desc: "Interfaces globales" },
+  "src/utils": { desc: "Funciones utilitarias" },
+  "docs/COMMITS": { desc: "Logs de commits" },
+  "docs/LOGS/ERRORES": { desc: "Logs de errores por tipo" },
+  "docs/LOGS/ACTIVIDAD": { desc: "Logs de actividad diaria" },
+  "docs/BACKLOG": { desc: "Backlog por fases" },
+  "docs/PROMPTS/PLANTILLAS": { desc: "Prompts reutilizables" },
+  "docs/PROMPTS/STACK": { desc: "Contextos por tecnología" },
+  "scripts": { desc: "Scripts de automatización" },
+};
+
+const DESCRIPTIVE_SCRIPTS = {
+  "dev:start": "vite",
+  "dev:preview": "vite preview",
+  "build:prod": "vite build",
+  "build:analyze": "vite build --analyze",
+  "lint:check": "eslint src --ext .ts,.tsx",
+  "lint:fix": "eslint src --ext .ts,.tsx --fix",
+  "type:check": "tsc --noEmit",
+  "quality:doctor": "npx react-doctor check ./src",
+  "test:unit": "vitest run",
+  "test:watch": "vitest",
+  "test:coverage": "vitest run --coverage",
+  "validate:all": "npm run lint:check && npm run type:check && npm run quality:doctor && npm run test:unit",
+};
+
+export async function init(options) {
+  if (options.existing) {
+    return initExisting();
+  }
+
+  const projectName = options.name || "mi-proyecto";
+  const baseDir = join(process.cwd(), projectName);
+
+  console.log(chalk.cyan(`\n🚀 Inicializando proyecto: ${projectName}\n`));
+
+  // Crear directorios
+  for (const [dir, meta] of Object.entries(BASE_STRUCTURE)) {
+    const fullPath = join(baseDir, dir);
+    mkdirSync(fullPath, { recursive: true });
+    console.log(`  📁 ${dir}/`);
+  }
+
+  // Crear prompt-lang.json
+  const config = {
+    name: projectName,
+    version: "0.1.0",
+    stack: {
+      base: ["react", "typescript", "vite", "tailwind"],
+      extensions: options.stack ? [options.stack] : [],
+    },
+    profile: options.profile || "senior",
+    pipeline: {
+      "pre-commit": ["lint", "typecheck", "doctor", "test"],
+      scripts: {
+        "lint:check": "eslint src --ext .ts,.tsx",
+        "type:check": "tsc --noEmit",
+        "quality:doctor": "npx react-doctor check ./src",
+        "test:unit": "vitest run",
+      },
+    },
+    annotations: { enabled: true, strict: true },
+    components: {
+      source: "src/components/ui",
+      library: "",
+    },
+    docs: { commits: true, logs: true, backlog: true },
+    extractor: { ignore: [".env", "*.local", "dist"], output: "contexto.md" },
+  };
+
+  writeFileSync(join(baseDir, "prompt-lang.json"), JSON.stringify(config, null, 2), "utf-8");
+  console.log(chalk.green("  ✅ prompt-lang.json"));
+
+  // Crear AGENTS.md
+  const agentsContent = `# AGENTS.md — Contexto para IA
+
+## Stack
+- React 18 + TypeScript + Vite
+- Tailwind CSS 3.4
+${config.stack.extensions.includes("ionic") ? "- Ionic 8 + Capacitor 6 (mobile)" : ""}
+${config.stack.extensions.includes("tauri") ? "- Tauri v2 (desktop)" : ""}
+${config.stack.extensions.includes("supabase") ? "- Supabase (backend)" : ""}
+- Zustand (estado global)
+
+## Convenciones
+- Un componente por archivo, máximo 120 líneas
+- Un hook por archivo, máximo 80 líneas
+- 100% Tailwind utility classes (sin CSS personalizado)
+- Barrel exports en cada carpeta (index.ts)
+- Commits: conventional commits + log en docs/COMMITS/
+- Prompt library: docs/PROMPTS/INDEX.md
+- Framework: openPrompt-Lang (anotaciones @kind, @contract, @limit, etc.)
+
+## Perfil del desarrollador
+${config.profile}
+
+## Reglas críticas
+- NO usar any
+- NO superar límites de líneas sin refactorizar
+- Ejecutar \`npm run validate:all\` antes de cada commit
+- Las anotaciones PromptLang deben declarar @use() al inicio del archivo
+
+## Referencias
+- Framework: docs/FRAMEWORK.md
+- Prompt library: docs/PROMPTS/INDEX.md
+`;
+
+  writeFileSync(join(baseDir, "AGENTS.md"), agentsContent, "utf-8");
+  console.log(chalk.green("  ✅ AGENTS.md"));
+
+  // Crear .gitignore
+  const gitignore = `node_modules/
+dist/
+build/
+.env
+.env.local
+*.log
+.DS_Store
+coverage/
+contexto.md
+`;
+
+  writeFileSync(join(baseDir, ".gitignore"), gitignore, "utf-8");
+  console.log(chalk.green("  ✅ .gitignore"));
+
+  // Crear package.json con scripts descriptivos
+  const packageJson = {
+    name: projectName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: { ...DESCRIPTIVE_SCRIPTS },
+  };
+
+  writeFileSync(join(baseDir, "package.json"), JSON.stringify(packageJson, null, 2), "utf-8");
+  console.log(chalk.green("  ✅ package.json (scripts descriptivos)"));
+
+  // Crear scripts de validación
+  const validateScript = `#!/bin/bash
+set -e
+
+echo "=== Pipeline de Validación (openPrompt-Lang) ==="
+
+echo "[1/4] Linting..."
+npm run lint:check || { echo "❌ Lint falló"; exit 1; }
+
+echo "[2/4] TypeScript check..."
+npm run type:check || { echo "❌ TypeScript falló"; exit 1; }
+
+echo "[3/4] react-doctor..."
+npm run quality:doctor || { echo "❌ react-doctor encontró problemas"; exit 1; }
+
+echo "[4/4] Tests..."
+npm run test:unit || { echo "❌ Tests fallaron"; exit 1; }
+
+echo "=== ✅ Pipeline completo — Código válido ==="
+`;
+
+  writeFileSync(join(baseDir, "scripts/validate.sh"), validateScript, "utf-8");
+  console.log(chalk.green("  ✅ scripts/validate.sh"));
+
+  // Crear docs/BACKLOG/PHASE-1-core.md
+  const backlogPhase1 = `# PHASE-1 Core — MVP Funcional
+
+> Prioridad: P0 (Crítico) | 50% del proyecto
+
+## Tareas
+
+### TASK-001: Setup inicial del proyecto
+**Módulo:** infraestructura
+**Estimación:** 2h
+**Criterios de aceptación:**
+- [ ] Proyecto Vite + React + TypeScript creado
+- [ ] Tailwind configurado
+- [ ] Estructura de carpetas según estándar
+- [ ] Pipeline de validación funcional
+
+### TASK-002: Sistema de autenticación
+**Módulo:** auth
+**Estimación:** 6h
+**Dependencias:** TASK-001
+**Criterios de aceptación:**
+- [ ] Login con email/contraseña
+- [ ] Registro de usuarios
+- [ ] Protección de rutas
+- [ ] Manejo de sesión con Zustand
+`;
+
+  writeFileSync(join(baseDir, "docs/BACKLOG/PHASE-1-core.md"), backlogPhase1, "utf-8");
+  console.log(chalk.green("  ✅ docs/BACKLOG/PHASE-1-core.md"));
+
+  // Crear docs/COMMITS/INDEX.md
+  writeFileSync(
+    join(baseDir, "docs/COMMITS/INDEX.md"),
+    "# Índice de Commits\n\n| Fecha | Versión | Descripción |\n|---|---|---|\n",
+    "utf-8"
+  );
+  console.log(chalk.green("  ✅ docs/COMMITS/INDEX.md"));
+
+  console.log(chalk.cyan("\n📦 Estructura inicial creada exitosamente."));
+  console.log(chalk.cyan(`👉 cd ${projectName}`));
+  console.log(chalk.cyan(`👉 npx openPrompt-Lang context`));
+  console.log(chalk.cyan(`👉 npm run dev:start        # Iniciar servidor de desarrollo`));
+  console.log(chalk.cyan(`👉 npm run validate:all     # Pipeline completo de validación`));
+  console.log(chalk.cyan(`👉 Revisa docs/FRAMEWORK.md para las convenciones\n`));
+
+  return baseDir;
+}
+
+async function initExisting() {
+  const cwd = process.cwd();
+  const projectName = existsSync(join(cwd, "package.json"))
+    ? JSON.parse(readFileSync(join(cwd, "package.json"), "utf-8")).name || "mi-proyecto"
+    : "mi-proyecto";
+
+  console.log(chalk.cyan(`\n🔧 Configurando openPrompt-Lang en proyecto existente: ${projectName}\n`));
+
+  // Detectar stack
+  const stack = detectStack(cwd);
+  const detected = Object.entries(stack).filter(([, v]) => v).map(([k]) => k);
+  console.log(chalk.blue("🔍 Stack detectado:") + (detected.length ? detected.join(", ") : "ninguno detectado"));
+
+  const baseExtensions = [];
+  if (stack.ionic) baseExtensions.push("ionic");
+  if (stack.tauri) baseExtensions.push("tauri");
+  if (stack.supabase) baseExtensions.push("supabase");
+
+  // Crear prompt-lang.json
+  const config = {
+    name: projectName,
+    version: "0.1.0",
+    stack: {
+      base: detected.filter(t => ["react", "typescript", "vite", "tailwind"].includes(t)),
+      extensions: baseExtensions,
+    },
+    profile: "senior",
+    pipeline: {
+      "pre-commit": ["lint", "typecheck"],
+      scripts: {},
+    },
+    annotations: { enabled: true, strict: true },
+    components: {
+      source: "src/components/ui",
+      library: "",
+    },
+    docs: { commits: false, logs: false, backlog: false },
+    extractor: { ignore: [".env", "*.local", "dist", "node_modules"], output: "contexto.md" },
+  };
+
+  if (existsSync(join(cwd, "prompt-lang.json"))) {
+    console.log(chalk.yellow("  ⚠️  prompt-lang.json ya existe. Saltando."));
+  } else {
+    writeFileSync(join(cwd, "prompt-lang.json"), JSON.stringify(config, null, 2), "utf-8");
+    console.log(chalk.green("  ✅ prompt-lang.json"));
+  }
+
+  // Crear AGENTS.md
+  const agentsLines = [
+    "# AGENTS.md — Contexto para IA",
+    "",
+    "## Stack",
+    ...(stack.react ? ["- React 18+"] : []),
+    ...(stack.typescript ? ["- TypeScript"] : []),
+    ...(stack.vite ? ["- Vite"] : []),
+    ...(stack.tailwind ? ["- Tailwind CSS"] : []),
+    ...(stack.ionic ? ["- Ionic + Capacitor (mobile)"] : []),
+    ...(stack.tauri ? ["- Tauri (desktop)"] : []),
+    ...(stack.supabase ? ["- Supabase (backend)"] : []),
+    "",
+    "## Convenciones",
+    "- Anotaciones PromptLang con @kind, @contract, @limit",
+    "- Framework: openPrompt-Lang",
+    "",
+    "## Perfil del desarrollador",
+    "senior",
+    "",
+    "## Reglas críticas",
+    "- NO usar any",
+    "- NO superar límites de líneas sin refactorizar",
+    "- Las anotaciones PromptLang deben declarar @use() al inicio del archivo",
+    "",
+    "## Referencias",
+    "- Framework: openPrompt-Lang",
+    "- Prompt library: docs/PROMPTS/INDEX.md (si aplica)",
+    "",
+  ];
+
+  if (existsSync(join(cwd, "AGENTS.md"))) {
+    console.log(chalk.yellow("  ⚠️  AGENTS.md ya existe. Saltando."));
+  } else {
+    writeFileSync(join(cwd, "AGENTS.md"), agentsLines.join("\n"), "utf-8");
+    console.log(chalk.green("  ✅ AGENTS.md"));
+  }
+
+  // Preguntar: agregar scripts descriptivos al package.json
+  if (existsSync(join(cwd, "package.json"))) {
+    const { addScripts } = await import("inquirer").then(m =>
+      m.default.prompt([{
+        type: "confirm",
+        name: "addScripts",
+        message: "¿Agregar scripts descriptivos (dev:start, lint:check, validate:all...) al package.json?",
+        default: false,
+      }])
+    );
+
+    if (addScripts) {
+      const pkgPath = join(cwd, "package.json");
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      pkg.scripts = pkg.scripts || {};
+      let added = 0;
+      for (const [name, cmd] of Object.entries(DESCRIPTIVE_SCRIPTS)) {
+        if (!pkg.scripts[name]) {
+          pkg.scripts[name] = cmd;
+          added++;
+        }
+      }
+      if (added > 0) {
+        writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf-8");
+        console.log(chalk.green(`  ✅ ${added} scripts agregados al package.json`));
+      } else {
+        console.log(chalk.yellow("  ⚠️  Todos los scripts descriptivos ya existen. Sin cambios."));
+      }
+    }
+  }
+
+  // Preguntar: crear docs/
+  const { createDocs } = await import("inquirer").then(m =>
+    m.default.prompt([{
+      type: "confirm",
+      name: "createDocs",
+      message: "¿Crear docs/BACKLOG, docs/COMMITS y docs/LOGS?",
+      default: false,
+    }])
+  );
+
+  if (createDocs) {
+    const docDirs = ["docs/BACKLOG", "docs/COMMITS", "docs/LOGS/ERRORES", "docs/LOGS/ACTIVIDAD", "docs/PROMPTS/PLANTILLAS", "docs/PROMPTS/STACK"];
+    for (const dir of docDirs) {
+      const fullPath = join(cwd, dir);
+      mkdirSync(fullPath, { recursive: true });
+      console.log(`  📁 ${dir}/`);
+    }
+
+    const backlogIndex = join(cwd, "docs/BACKLOG/PHASE-1-core.md");
+    if (!existsSync(backlogIndex)) {
+      writeFileSync(backlogIndex, `# PHASE-1 Core — MVP Funcional\n\n> Prioridad: P0 (Crítico) | 50% del proyecto\n\n## Tareas\n\n### TASK-001: Primera tarea\n**Módulo:** \n**Estimación:** \n**Criterios de aceptación:**\n- [ ] \n`, "utf-8");
+      console.log(chalk.green("  ✅ docs/BACKLOG/PHASE-1-core.md"));
+    }
+
+    const commitsIndex = join(cwd, "docs/COMMITS/INDEX.md");
+    if (!existsSync(commitsIndex)) {
+      writeFileSync(commitsIndex, "# Índice de Commits\n\n| Fecha | Versión | Descripción |\n|---|---|---|\n", "utf-8");
+      console.log(chalk.green("  ✅ docs/COMMITS/INDEX.md"));
+    }
+  }
+
+  console.log(chalk.cyan("\n✅ openPrompt-Lang configurado en proyecto existente."));
+  console.log(chalk.cyan(`👉 openPrompt-Lang context --output contexto.md`));
+  console.log(chalk.cyan(`👉 Empieza a anotar tu código con @kind, @contract, @limit...\n`));
+}

package/src/commands/suggest.js

@@ -0,0 +1,31 @@
+import chalk from "chalk";
+import { suggestStack } from "../utils/ai.js";
+
+export async function suggest(description) {
+  console.log(chalk.cyan(`\n🤖 Analizando: "${description}"\n`));
+
+  const result = await suggestStack(description);
+
+  if (result.source === "fallback" || !result.stack) {
+    console.log(result.plan);
+    console.log(chalk.yellow("\n📌 No se pudo conectar con IA. Usa el plan anterior con cualquier IA externa.\n"));
+    return;
+  }
+
+  console.log(chalk.green("✅ Stack sugerido:"));
+  console.log(`  ${result.stack.join(", ") || "React + TypeScript + Vite + Tailwind"}`);
+
+  if (result.modules) {
+    console.log(chalk.green("\n📦 Módulos sugeridos:"));
+    for (const mod of result.modules) {
+      console.log(`  • ${mod}`);
+    }
+  }
+
+  if (result.priorities) {
+    console.log(chalk.green("\n🎯 Prioridades:"));
+    for (const p of result.priorities) {
+      console.log(`  ${p}`);
+    }
+  }
+}

package/src/commands/validate.js

@@ -0,0 +1,183 @@
+import { readFileSync, existsSync, readdirSync, statSync } from "fs";
+import { join, extname } from "path";
+import { execSync } from "child_process";
+import chalk from "chalk";
+import { loadConfig, detectStack } from "../utils/config.js";
+import { lintFile } from "../utils/annotations.js";
+
+const CODE_EXTENSIONS = new Set([".ts", ".tsx", ".js", ".jsx"]);
+
+export async function validate(options) {
+  const baseDir = process.cwd();
+  const config = loadConfig(baseDir);
+  let hasErrors = false;
+
+  console.log(chalk.cyan("\n🔍 openPrompt-Lang: Validación\n"));
+
+  // 1. Validar estructura
+  console.log(chalk.yellow("[1/5] Verificando estructura..."));
+  const requiredDirs = ["src", "docs"];
+  for (const dir of requiredDirs) {
+    if (!existsSync(join(baseDir, dir))) {
+      console.log(chalk.red(`  ❌ Falta carpeta: ${dir}/`));
+      hasErrors = true;
+    } else {
+      console.log(chalk.green(`  ✅ ${dir}/`));
+    }
+  }
+
+  // 2. Validar config
+  console.log(chalk.yellow("\n[2/5] Verificando configuración..."));
+  if (existsSync(join(baseDir, "prompt-lang.json"))) {
+    console.log(chalk.green("  ✅ prompt-lang.json"));
+  } else {
+    console.log(chalk.yellow("  ⚠️  No hay prompt-lang.json (usando defaults)"));
+  }
+
+  if (existsSync(join(baseDir, "AGENTS.md"))) {
+    console.log(chalk.green("  ✅ AGENTS.md"));
+  } else {
+    console.log(chalk.yellow("  ⚠️  No hay AGENTS.md (recomendado)"));
+  }
+
+  // 2b. Validar coherencia stack
+  console.log(chalk.yellow("\n[2b/5] Validando coherencia stack..."));
+  const stack = config.stack || {};
+  const base = (stack.base || []).map(s => s.toLowerCase());
+  const extensions = (stack.extensions || []).map(s => s.toLowerCase());
+
+  if (base.includes("tauri") && !extensions.includes("tauri")) {
+    console.log(chalk.red("  ❌ stack.base incluye 'tauri' pero stack.extensions no lo declara"));
+    hasErrors = true;
+  } else {
+    console.log(chalk.green("  ✅ stack.base / extensions coherente"));
+  }
+
+  // 3. Validar anotaciones PromptLang en archivos
+  console.log(chalk.yellow("\n[3/5] Analizando anotaciones PromptLang..."));
+  let annotatedFiles = 0;
+  let annotationErrors = 0;
+  let annotationWarnings = 0;
+  let platformUsages = new Set();
+
+  const walkDir = (dirPath) => {
+    let entries;
+    try {
+      entries = readdirSync(dirPath);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const fullPath = join(dirPath, entry);
+      try {
+        const stat = statSync(fullPath);
+        if (stat.isDirectory()) {
+          if (!entry.startsWith(".") && entry !== "node_modules" && entry !== "dist") {
+            walkDir(fullPath);
+          }
+          continue;
+        }
+      } catch {
+        continue;
+      }
+
+      const ext = extname(entry).toLowerCase();
+      if (!CODE_EXTENSIONS.has(ext)) continue;
+
+      try {
+        const content = readFileSync(fullPath, "utf-8");
+        if (!content.includes("@use") && !content.includes("@kind")) continue;
+
+        annotatedFiles++;
+        const { annotations, errors, warnings } = lintFile(content, config.annotations.strict);
+
+        // Colectar @platform usages para validación de stack
+        for (const ann of annotations) {
+          if (ann.tag === "platform" && ann.args) {
+            ann.args.split(",").forEach(p => platformUsages.add(p.trim()));
+          }
+        }
+
+        if (errors.length > 0 || warnings.length > 0) {
+          const relPath = entry;
+          for (const err of errors) {
+            annotationErrors++;
+            console.log(chalk.red(`  ❌ ${relPath}: ${err}`));
+          }
+          for (const warn of warnings) {
+            annotationWarnings++;
+            console.log(chalk.yellow(`  ⚠️  ${relPath}: ${warn}`));
+          }
+        }
+      } catch {
+        // skip
+      }
+    }
+  };
+
+  walkDir(join(baseDir, "src"));
+
+  if (annotatedFiles === 0) {
+    console.log(chalk.cyan("  📭 No se encontraron archivos con anotaciones PromptLang"));
+  } else {
+    console.log(chalk.green(`  📄 ${annotatedFiles} archivos con anotaciones`));
+    if (annotationErrors > 0) {
+      hasErrors = true;
+      console.log(chalk.red(`  ❌ ${annotationErrors} errores`));
+    }
+    if (annotationWarnings > 0) {
+      console.log(chalk.yellow(`  ⚠️  ${annotationWarnings} advertencias`));
+    }
+    if (annotationErrors === 0 && annotationWarnings === 0) {
+      console.log(chalk.green(`  ✅ Todas las anotaciones válidas`));
+    }
+  }
+
+  // Validación cruzada: @platform vs stack
+  if (platformUsages.size > 0) {
+    for (const plat of platformUsages) {
+      if (plat === "mobile" && !extensions.some(e => ["ionic", "capacitor"].includes(e))) {
+        console.log(chalk.yellow(`  ⚠️  @platform(mobile) usado pero stack no incluye ionic/capacitor`));
+      }
+      if (plat === "desktop" && !extensions.includes("tauri")) {
+        console.log(chalk.yellow(`  ⚠️  @platform(desktop) usado pero stack no incluye tauri`));
+      }
+    }
+  }
+
+  // 4. Ejecutar pipeline configurado
+  console.log(chalk.yellow("\n[4/5] Ejecutando pipeline..."));
+  const scripts = config.pipeline?.scripts || {};
+  const pipelineSteps = config.pipeline?.["pre-commit"] || [];
+
+  if (pipelineSteps.length === 0) {
+    console.log(chalk.cyan("  📭 No hay pipeline configurado"));
+  } else {
+    for (const step of pipelineSteps) {
+      const scriptCmd = scripts[step];
+      if (!scriptCmd) {
+        console.log(chalk.yellow(`  ⚠️  Paso "${step}" sin script configurado`));
+        continue;
+      }
+      try {
+        process.stdout.write(`  ▶️  ${step}... `);
+        execSync(scriptCmd, { cwd: baseDir, stdio: "pipe" });
+        console.log(chalk.green("✅"));
+      } catch (err) {
+        console.log(chalk.red("❌"));
+        hasErrors = true;
+        console.log(chalk.red(`     ${err.stderr?.toString().split("\n")[0] || "Error"}`));
+      }
+    }
+  }
+
+  // 5. Resumen
+  console.log(chalk.yellow("\n[5/5] Resumen\n"));
+
+  if (hasErrors) {
+    console.log(chalk.red("❌ Validación falló — revisa los errores arriba\n"));
+    process.exit(1);
+  } else {
+    console.log(chalk.green("✅ Validación completa — todo correcto\n"));
+  }
+}

package/src/generators/figma-prompt.js

@@ -0,0 +1,56 @@
+export function generateFigmaPrompt(answers) {
+  const { projectType, screens, mobileFirst, style, includeAntiPatterns } = answers;
+  const screenList = screens.split(",").map((s) => s.trim());
+
+  const styleMap = {
+    "Minimalista corporativo": "minimalista, profesional, colores neutros con acento azul oscuro, tipografía sans-serif limpia, espaciado generoso",
+    "Moderno vibrante": "moderno, atrevido, gradientes sutiles, colores vibrantes (púrpura/cian), micro-interacciones, glassmorphism ligero",
+    "Oscuro (dark mode)": "dark mode first, fondo gris oscuro (#0f0f0f), acentos en verde/azul neón, contrastes altos, sombras sutiles",
+    "Claro y limpio": "claro, fondos blancos/gris claro, mucho espacio negativo, bordes suaves, iconos lineales, tipografía elegante",
+    "Personalizado": style,
+  };
+
+  const prompt = `> [!example] Prompt generado por openPrompt-Lang
+> \`\`\`markdown
+> Eres un experto en diseño UI/UX y desarrollo Frontend con React y Tailwind CSS.
+>
+> ## Contexto
+> - **Tipo de proyecto:** ${projectType}
+> - **Pantallas a diseñar:** ${screenList.join(", ")}
+> - **Enfoque:** ${mobileFirst ? "Mobile-first" : "Desktop-first"}
+> - **Estilo visual:** ${styleMap[style] || style}
+>
+> ## Reglas de Diseño
+> 1. **Modularidad React:** Cada elemento visual debe ser un componente independiente.
+>    - \`/components/ui/Button.tsx\`, \`/components/ui/Card.tsx\`, etc.
+>    - \`/components/layout/Navbar.tsx\`, \`/components/layout/Sidebar.tsx\`
+> 2. **Tailwind 100%:** Sin CSS personalizado. Todo con clases de utilidad.
+> 3. **Componentes atómicos:** Usar \`class-variance-authority\` para variantes.
+> 4. **Composición:** Las páginas deben componer componentes, no ser monolíticas.
+>
+> ## Restricciones Técnicas
+> - Navegación: ${mobileFirst ? "Bottom tabs en mobile, sidebar en desktop" : "Sidebar fija con header superior"}
+> - Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
+> - Zonas táctiles: mínimo \`h-10 w-10\` en mobile
+> - Estados: loading, empty, error, success para cada vista
+>
+> ${includeAntiPatterns ? `## Anti-patrones (Prohibido)
+> - ❌ Tamaños absolutos (h-[500px], w-[300px])
+> - ❌ Posicionamiento absoluto para layout (usar flex/grid)
+> - ❌ CSS personalizado o modules
+> - ❌ Componentes de más de 120 líneas
+> - ❌ Mezclar lógica de negocio en componentes de presentación` : ""}
+>
+> ## Lista de Pantallas
+> ${screenList.map((s, i) => `${i + 1}. **${s}:** Describir componentes principales y flujo`).join("\n")}
+>
+> ## Entregables
+> - Árbol de componentes con nombres y props principales
+> - Layout de cada pantalla con estructura de grid/flex
+> - Estados visuales (loading, empty, error) para cada componente crítico
+> - Sugerencia de estructura de carpetas
+> \`\`\`
+`;
+
+  return prompt;
+}