blun-king-cli 4.1.1 → 5.0.0

package/website-builder.js

@@ -0,0 +1,394 @@
+function cleanText(value) {
+  return String(value || "")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function inferBrandName(goal, references = []) {
+  const explicit = String(goal || "").match(/\b(fuer|fur)\s+([A-Za-z0-9_.-]+)/i);
+  if (explicit) return explicit[2].replace(/\.com$/i, "");
+
+  for (const ref of references) {
+    if (ref?.url) {
+      try {
+        const hostname = new URL(ref.url).hostname.replace(/^www\./i, "");
+        return hostname.split(".")[0];
+      } catch {}
+    }
+  }
+
+  if (/nicrazy/i.test(goal)) return "Nicrazy";
+  return "Brand";
+}
+
+function collectReferenceCorpus(goal, references = []) {
+  const parts = [String(goal || "")];
+  for (const ref of references) {
+    parts.push(ref.url || "");
+    parts.push(ref.title || "");
+    parts.push((ref.h1s || []).join(" "));
+    parts.push(ref.text || "");
+    parts.push(ref.html || "");
+  }
+  return cleanText(parts.join(" ")).toLowerCase();
+}
+
+function hasKeyword(corpus, term) {
+  if (term.includes(" ")) return corpus.includes(term);
+  return new RegExp(`\\b${term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`, "i").test(corpus);
+}
+
+function detectIndustry(goal, references = []) {
+  const corpus = collectReferenceCorpus(goal, references);
+  const rules = [
+    { id: "florist", terms: ["flower", "flowers", "bouquet", "bouquets", "floral", "florist", "arrangement", "wedding flowers"] },
+    { id: "tattoo", terms: ["tattoo", "tattoos", "flash", "studio", "artist", "ink"] },
+    { id: "jewelry", terms: ["jewelry", "jewellery", "ring", "rings", "necklace", "bracelet", "gold", "silver"] },
+    { id: "fashion", terms: ["fashion", "streetwear", "collection", "drop", "hoodie", "tee", "shirt", "lookbook", "apparel"] },
+    { id: "brand", terms: ["brand", "campaign", "creative", "studio", "label"] }
+  ];
+
+  let best = { id: "brand", score: 0 };
+  for (const rule of rules) {
+    const score = rule.terms.reduce((total, term) => total + (hasKeyword(corpus, term) ? 1 : 0), 0);
+    if (score > best.score) best = { id: rule.id, score };
+  }
+
+  if (best.score === 0 && /nicrazy/i.test(corpus)) return "fashion";
+  return best.id;
+}
+
+function industryConfig(industry, brand) {
+  const configs = {
+    fashion: {
+      nav: ["Drop", "Collection", "Story"],
+      eyebrow: "Reference Build",
+      title: `${brand} baut Spannung statt Deko.`,
+      subtitle: "Eine fokussierte Fashion-Landingpage mit klarer Markenhaltung, starkem Hero und sauberer Shop-Logik.",
+      cta: "Zum Drop",
+      features: [
+        ["Drop-Fokus", "Produkt, Kampagne und Kaufimpuls greifen direkt ineinander."],
+        ["Markenwelt", "Typografie, Bildsprache und Copy bleiben nah an einer modernen Label-Ästhetik."],
+        ["Conversion", "Hero, Collection-Teaser und CTA führen ohne Streuverlust in den Shop."]
+      ],
+      sections: {
+        showcaseTitle: "Current Collection",
+        showcaseItems: ["Hero Product", "Signature Layer", "New Arrival"],
+        proofTitle: "Warum das zur Referenz passt",
+        proofBody: "Die Seite bleibt in der Welt eines Fashion- oder Brand-Auftritts und driftet nicht in branchenfremde Templates ab."
+      },
+      requiredTerms: ["drop", "collection", "shop", "brand"],
+      bannedTerms: ["flower", "bouquet", "florist", "event floristik", "abo-service"]
+    },
+    jewelry: {
+      nav: ["Pieces", "Craft", "Contact"],
+      eyebrow: "Reference Build",
+      title: `${brand} wirkt präzise und hochwertig.`,
+      subtitle: "Eine klare Jewelry-Landingpage mit Fokus auf Material, Detail und Anfrage- oder Kauf-Logik.",
+      cta: "Kollektion ansehen",
+      features: [
+        ["Signature Pieces", "Die wichtigsten Produkte stehen ohne Ablenkung im Fokus."],
+        ["Craft Story", "Material, Verarbeitung und Vertrauen werden sichtbar gemacht."],
+        ["Clean Conversion", "Klare Wege zu Collection, Anfrage oder Direktkauf."]
+      ],
+      sections: {
+        showcaseTitle: "Featured Pieces",
+        showcaseItems: ["Statement Ring", "Layered Chain", "Signature Bracelet"],
+        proofTitle: "Warum das zur Referenz passt",
+        proofBody: "Die Struktur bleibt in der Sprache von Schmuck, Material und Produktinszenierung."
+      },
+      requiredTerms: ["pieces", "collection", "material"],
+      bannedTerms: ["flower", "bouquet", "florist"]
+    },
+    tattoo: {
+      nav: ["Works", "Booking", "Studio"],
+      eyebrow: "Reference Build",
+      title: `${brand} zeigt Handschrift statt Leerlauf.`,
+      subtitle: "Ein Tattoo- oder Artist-Auftritt mit starker Portfolio-Führung und klarer Booking-Logik.",
+      cta: "Session anfragen",
+      features: [
+        ["Portfolio First", "Arbeiten, Stilrichtung und Flash stehen sauber im Vordergrund."],
+        ["Booking Flow", "Die CTA führt direkt in den Termin- oder Anfragepfad."],
+        ["Studio Presence", "Ton, Aufbau und Hierarchie passen zu Artist- und Studio-Auftritten."]
+      ],
+      sections: {
+        showcaseTitle: "Recent Works",
+        showcaseItems: ["Blackwork", "Fine Line", "Flash Sheet"],
+        proofTitle: "Warum das zur Referenz passt",
+        proofBody: "Die Seite bleibt in der Welt eines Artist- oder Studio-Auftritts statt in generischen Commerce-Slots."
+      },
+      requiredTerms: ["booking", "studio", "works"],
+      bannedTerms: ["flower", "bouquet", "abo-service"]
+    },
+    florist: {
+      nav: ["Bouquets", "Events", "Contact"],
+      eyebrow: "Reference Build",
+      title: `${brand} bleibt floral und fokussiert.`,
+      subtitle: "Ein floristischer Auftritt mit Angebot, Anlass und sauberem Anfragepfad.",
+      cta: "Bouquets entdecken",
+      features: [
+        ["Anlass-Klarheit", "Produkte und Event-Angebote sind sofort verständlich."],
+        ["Vertrauen", "Stil, Qualität und Service werden klar sichtbar gemacht."],
+        ["Anfrage-Flow", "Kauf- oder Eventanfragen werden sauber geführt."]
+      ],
+      sections: {
+        showcaseTitle: "Featured Arrangements",
+        showcaseItems: ["Seasonal Bouquet", "Wedding Florals", "Table Arrangement"],
+        proofTitle: "Warum das zur Referenz passt",
+        proofBody: "Die Seite bleibt in Angebot, Sprache und CTA-Logik klar im floristischen Kontext."
+      },
+      requiredTerms: ["bouquet", "floral", "events"],
+      bannedTerms: ["tattoo", "drop", "streetwear"]
+    },
+    brand: {
+      nav: ["Work", "Story", "Contact"],
+      eyebrow: "Reference Build",
+      title: `${brand} bekommt einen klaren Markenauftritt.`,
+      subtitle: "Eine fokussierte Brand-Landingpage mit starker Haltung, sauberer Story und klarer CTA-Führung.",
+      cta: "Marke entdecken",
+      features: [
+        ["Positionierung", "Die Kernbotschaft sitzt früh und klar."],
+        ["Struktur", "Hero, Proof und CTA ziehen an einem Strang."],
+        ["Markenwelt", "Die Seite bleibt eigenständig statt austauschbar."]
+      ],
+      sections: {
+        showcaseTitle: "Brand Highlights",
+        showcaseItems: ["Core Message", "Offer Frame", "Trust Layer"],
+        proofTitle: "Warum das zur Referenz passt",
+        proofBody: "Die Seite hält Business-Typ, Zielgruppe und Markenwelt zusammen statt generische Branche zu erfinden."
+      },
+      requiredTerms: ["brand", "story", "contact"],
+      bannedTerms: ["flower", "bouquet", "abo-service"]
+    }
+  };
+
+  return configs[industry] || configs.brand;
+}
+
+function buildWebsiteProject(goal, references = []) {
+  const brand = inferBrandName(goal, references);
+  const industry = detectIndustry(goal, references);
+  const config = industryConfig(industry, brand);
+  const reference = references.find((entry) => !entry.error);
+  const refLine = reference
+    ? `<p class="reference-note">Referenz gelesen: ${reference.title || reference.url}. Business-Type-Lock: ${industry}.</p>`
+    : `<p class="reference-note">Business-Type-Lock: ${industry}.</p>`;
+
+  const html = `<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${brand} - Reference Build</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+<body>
+  <header class="site-header">
+    <div class="logo">${brand}</div>
+    <nav>
+      <a href="#showcase">${config.nav[0]}</a>
+      <a href="#about">${config.nav[1]}</a>
+      <a href="#contact">${config.nav[2]}</a>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="hero-copy">
+        <p class="eyebrow">${config.eyebrow}</p>
+        <h1>${config.title}</h1>
+        <p>${config.subtitle}</p>
+        ${refLine}
+        <a class="btn" href="#showcase">${config.cta}</a>
+      </div>
+    </section>
+
+    <section class="benefits" id="about">
+      ${config.features.map(([title, body]) => `<article><h2>${title}</h2><p>${body}</p></article>`).join("")}
+    </section>
+
+    <section class="products" id="showcase">
+      <h2>${config.sections.showcaseTitle}</h2>
+      <div class="grid">
+        ${config.sections.showcaseItems.map((item) => `<div class="card"><div class="thumb"></div><h3>${item}</h3><p>${brand} bleibt in einer ${industry}-nahen Markenlogik statt in generischen Platzhaltern.</p></div>`).join("")}
+      </div>
+    </section>
+
+    <section class="social-proof">
+      <h2>${config.sections.proofTitle}</h2>
+      <p>${config.sections.proofBody}</p>
+    </section>
+
+    <section class="cta" id="contact">
+      <h2>${config.cta}</h2>
+      <p>Klare CTA-Logik, saubere Struktur und keine Branchen-Drifts.</p>
+      <a class="btn" href="#showcase">${config.cta}</a>
+    </section>
+  </main>
+</body>
+</html>`;
+
+  const css = `:root{
+  --bg:#09090b;
+  --surface:#121826;
+  --text:#f5f5f5;
+  --muted:#a1a1aa;
+  --line:rgba(255,255,255,0.08);
+  --accent:#ff4d6d;
+}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+  font-family:Inter,system-ui,sans-serif;
+  background:radial-gradient(circle at top right, rgba(255,77,109,0.18), transparent 28%), var(--bg);
+  color:var(--text);
+}
+.site-header{
+  position:sticky;
+  top:0;
+  z-index:20;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 32px;
+  backdrop-filter:blur(12px);
+  background:rgba(9,9,11,0.88);
+  border-bottom:1px solid var(--line);
+}
+.site-header nav a{
+  color:var(--muted);
+  text-decoration:none;
+  margin-left:18px;
+}
+.logo{
+  font-weight:800;
+  letter-spacing:0.08em;
+  text-transform:uppercase;
+}
+.hero{
+  min-height:72vh;
+  display:grid;
+  place-items:center;
+  padding:80px 24px 56px;
+}
+.hero-copy{
+  max-width:820px;
+  text-align:center;
+}
+.eyebrow{
+  text-transform:uppercase;
+  letter-spacing:0.2em;
+  color:var(--muted);
+  font-size:12px;
+}
+h1{
+  font-size:clamp(42px,8vw,84px);
+  line-height:0.96;
+  margin:10px 0 18px;
+}
+.reference-note{
+  color:var(--muted);
+  font-size:14px;
+}
+.btn{
+  display:inline-block;
+  margin-top:22px;
+  padding:14px 22px;
+  border-radius:999px;
+  background:var(--accent);
+  color:#fff;
+  text-decoration:none;
+  font-weight:700;
+}
+.benefits,.products,.social-proof,.cta{
+  max-width:1200px;
+  margin:0 auto;
+  padding:72px 24px;
+}
+.benefits,.grid{
+  display:grid;
+  grid-template-columns:repeat(3,minmax(0,1fr));
+  gap:18px;
+}
+.benefits article,.card,.social-proof{
+  background:var(--surface);
+  border:1px solid var(--line);
+  border-radius:20px;
+  padding:24px;
+}
+.thumb{
+  height:240px;
+  border-radius:16px;
+  background:linear-gradient(135deg,#1f2937,#0f172a);
+}
+.cta{
+  text-align:center;
+}
+.hero p,.benefits p,.card p,.social-proof p,.cta p{
+  color:var(--muted);
+}
+@media (max-width:900px){
+  .benefits,.grid{
+    grid-template-columns:1fr;
+  }
+  .site-header{
+    padding:16px 18px;
+  }
+  h1{
+    font-size:44px;
+  }
+}`;
+
+  return {
+    brand,
+    industry,
+    config,
+    projectName: `${brand.toLowerCase().replace(/[^\w.-]/g, "-")}-landing`,
+    files: {
+      "index.html": html,
+      "style.css": css
+    }
+  };
+}
+
+function validateWebsiteOutput(files, profile) {
+  const html = String(files["index.html"] || "");
+  const css = String(files["style.css"] || "");
+  const issues = [];
+  const htmlLower = html.toLowerCase();
+  const cssLower = css.toLowerCase();
+
+  if (!html.startsWith("<!doctype html>")) issues.push("missing_doctype");
+  if (!/<html[\s>]/i.test(html)) issues.push("missing_html_tag");
+  if (!/<\/html>\s*$/i.test(html)) issues.push("missing_html_close");
+  if (!/<main>/i.test(html) || !/<\/main>/i.test(html)) issues.push("main_structure_invalid");
+  if (/<p=|<p"|<p='|<\/>\s*/i.test(html)) issues.push("invalid_html_attributes");
+  if (/sans-hard|z-top\s*:|rgba\([^)]*[a-z][^)]*\)/i.test(css)) issues.push("invalid_css_tokens");
+  if (!/z-index\s*:/i.test(css)) issues.push("missing_z_index");
+
+  for (const banned of profile.config.bannedTerms) {
+    if (htmlLower.includes(banned)) issues.push(`industry_drift:${banned}`);
+  }
+
+  const requiredHits = profile.config.requiredTerms.filter((term) => htmlLower.includes(term));
+  if (requiredHits.length < Math.max(1, Math.min(2, profile.config.requiredTerms.length))) {
+    issues.push("reference_fidelity_low");
+  }
+
+  if (/featured pieces|new era|daily layer/i.test(html) && profile.industry !== "brand") {
+    issues.push("generic_template_detected");
+  }
+
+  return {
+    ok: issues.length === 0,
+    issues
+  };
+}
+
+module.exports = {
+  inferBrandName,
+  detectIndustry,
+  buildWebsiteProject,
+  validateWebsiteOutput
+};

package/website_builder.txt

@@ -0,0 +1,38 @@
+Du bist das Website Builder Brain bei BLUN KING.
+
+DEIN JOB: Echte Websites bauen. Nicht analysieren. Nicht diskutieren. Nicht ausweichen.
+
+HARD RULES:
+- Wenn der User eine Landingpage/Webseite will, ist das BUILD.
+- Referenzen sind Stilquelle und Strukturquelle, nicht Endergebnis.
+- Liefere direkt eine umsetzbare neue Version.
+- Wenn Datei-Erstellung möglich ist, erzeuge IMMER echte Dateien.
+- Mindestens index.html + style.css.
+- Wenn sinnvoll, zusätzlich script.js.
+- Kein Blueprint als Endergebnis.
+- Kein "kopiere das".
+- Kein Backend/API/Testskript-Ausweichmüll.
+- Kein SEO/Head-Audit als Hauptantwort.
+- "Arbeite autonom" bedeutet: einfach machen.
+
+SEITENSTRUKTUR:
+- Header
+- Hero mit klarer H1 und CTA
+- Benefits / Features
+- Social Proof / Vertrauenselemente
+- CTA-Block
+- Footer
+
+DESIGN:
+- hochwertig
+- modern
+- responsive
+- starke Typografie
+- klare Hierarchie
+- mobile first
+- gute Conversion-Logik
+
+OUTPUT:
+- echte Dateien
+- kurze Begleitnachricht
+- wenn möglich create_project oder write_file