designnn 0.2.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "designnn",
+  "version": "0.2.0",
+  "description": "Trend-driven design prompt engine for Figma AI. Generate high-quality UI/UX prompts powered by real-time design trend analysis.",
+  "type": "module",
+  "bin": {
+    "designnn": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "bun build src/cli.ts --outdir dist --target node",
+    "dev": "bun run src/cli.ts",
+    "start": "node dist/cli.js"
+  },
+  "keywords": [
+    "design",
+    "figma",
+    "ai",
+    "prompt",
+    "ui",
+    "ux",
+    "trend",
+    "mcp",
+    "cli"
+  ],
+  "author": "concepter (Yoshihisa Abe)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abe430/designnn"
+  },
+  "files": [
+    "dist/",
+    "public/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "@types/express": "^5.0.6",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "express": "^5.2.1",
+    "openai": "^6.29.0",
+    "ora": "^9.3.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.9.3"
+  }
+}

package/public/app.js

@@ -0,0 +1,277 @@
+// ============================================
+// DESIGNNN Web UI — Client Application
+// ============================================
+
+(function () {
+  "use strict";
+
+  // --- State ---
+  let trends = [];
+  let currentFilter = "all";
+
+  // --- DOM References ---
+  const navBtns = document.querySelectorAll(".nav-btn");
+  const tabContents = document.querySelectorAll(".tab-content");
+  const chatInput = document.getElementById("chat-input");
+  const chatSubmit = document.getElementById("chat-submit");
+  const chatResult = document.getElementById("chat-result");
+  const quickBtns = document.querySelectorAll(".quick-btn");
+  const filterBtns = document.querySelectorAll(".filter-btn");
+  const trendsGrid = document.getElementById("trends-grid");
+  const exploreResult = document.getElementById("explore-result");
+  const mixSelect1 = document.getElementById("mix-select-1");
+  const mixSelect2 = document.getElementById("mix-select-2");
+  const mixContext = document.getElementById("mix-context");
+  const mixSubmit = document.getElementById("mix-submit");
+  const mixResult = document.getElementById("mix-result");
+
+  // --- Tab Navigation ---
+  navBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const tab = btn.dataset.tab;
+      navBtns.forEach((b) => b.classList.remove("active"));
+      tabContents.forEach((t) => t.classList.remove("active"));
+      btn.classList.add("active");
+      document.getElementById(`tab-${tab}`).classList.add("active");
+    });
+  });
+
+  // --- Utility: Show Loading ---
+  function showLoading(container) {
+    container.classList.remove("hidden");
+    container.innerHTML = `
+      <div class="loading-indicator">
+        <div class="loading-dots">
+          <span></span><span></span><span></span>
+        </div>
+        <span>Generating prompt...</span>
+      </div>
+    `;
+  }
+
+  // --- Utility: Show Result ---
+  function showResult(container, prompt, label) {
+    container.classList.remove("hidden");
+    container.innerHTML = `
+      <div class="result-header">
+        <div class="result-title">${label || "Generated Prompt"}</div>
+        <button class="btn-copy" onclick="copyPrompt(this)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+          Copy
+        </button>
+      </div>
+      <div class="result-body">
+        <pre>${escapeHtml(prompt)}</pre>
+      </div>
+      <div class="result-footer">
+        Paste this prompt into Figma AI (Ctrl+I / Cmd+I)
+      </div>
+    `;
+  }
+
+  // --- Utility: Show Error ---
+  function showError(container, message) {
+    container.classList.remove("hidden");
+    container.innerHTML = `
+      <div class="error-message">${escapeHtml(message)}</div>
+    `;
+  }
+
+  // --- Utility: Escape HTML ---
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // --- Copy to Clipboard ---
+  window.copyPrompt = function (btn) {
+    const pre = btn.closest(".result-area").querySelector("pre");
+    if (!pre) return;
+    navigator.clipboard.writeText(pre.textContent).then(() => {
+      btn.classList.add("copied");
+      btn.innerHTML = `
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+        Copied!
+      `;
+      setTimeout(() => {
+        btn.classList.remove("copied");
+        btn.innerHTML = `
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+          Copy
+        `;
+      }, 2000);
+    });
+  };
+
+  // ============================================
+  // CHAT
+  // ============================================
+  async function handleChat(message) {
+    if (!message.trim()) return;
+    chatSubmit.disabled = true;
+    chatSubmit.textContent = "Generating...";
+    showLoading(chatResult);
+
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to generate");
+      showResult(chatResult, data.prompt, `Prompt for: "${message}"`);
+    } catch (err) {
+      showError(chatResult, err.message);
+    } finally {
+      chatSubmit.disabled = false;
+      chatSubmit.textContent = "Generate";
+    }
+  }
+
+  chatSubmit.addEventListener("click", () => handleChat(chatInput.value));
+  chatInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") handleChat(chatInput.value);
+  });
+
+  quickBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      chatInput.value = btn.dataset.prompt;
+      handleChat(btn.dataset.prompt);
+    });
+  });
+
+  // ============================================
+  // EXPLORE
+  // ============================================
+  async function loadTrends() {
+    try {
+      const res = await fetch("/api/trends");
+      const data = await res.json();
+      trends = data.trends;
+      renderTrends(trends);
+      populateMixSelects(trends);
+    } catch (err) {
+      trendsGrid.innerHTML = `<div class="error-message">Failed to load trends</div>`;
+    }
+  }
+
+  function renderTrends(list) {
+    trendsGrid.innerHTML = list
+      .map(
+        (t) => `
+      <div class="trend-card" data-id="${t.id}">
+        <div class="trend-card-header">
+          <span class="trend-name">${escapeHtml(t.name)}</span>
+          <span class="trend-category">${t.category}</span>
+        </div>
+        <div class="trend-desc">${escapeHtml(t.description)}</div>
+        <div class="trend-popularity">
+          <div class="popularity-bar">
+            <div class="popularity-fill" style="width: ${t.popularity}%"></div>
+          </div>
+          <span class="popularity-value">${t.popularity}%</span>
+        </div>
+        <div class="trend-keywords">
+          ${t.keywords.map((k) => `<span class="keyword-tag">${escapeHtml(k)}</span>`).join("")}
+        </div>
+        <div class="trend-card-action">
+          <button class="btn-generate" onclick="generateFromTrend('${t.id}')">Generate Prompt</button>
+        </div>
+      </div>
+    `
+      )
+      .join("");
+  }
+
+  filterBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      currentFilter = btn.dataset.category;
+      filterBtns.forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+
+      if (currentFilter === "all") {
+        renderTrends(trends);
+      } else {
+        renderTrends(trends.filter((t) => t.category === currentFilter));
+      }
+      exploreResult.classList.add("hidden");
+    });
+  });
+
+  window.generateFromTrend = async function (trendId) {
+    showLoading(exploreResult);
+    // Scroll to result
+    exploreResult.scrollIntoView({ behavior: "smooth", block: "nearest" });
+
+    try {
+      const res = await fetch("/api/explore/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ trendId }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to generate");
+      showResult(exploreResult, data.prompt, `Trend: ${data.trend.name}`);
+    } catch (err) {
+      showError(exploreResult, err.message);
+    }
+  };
+
+  // ============================================
+  // MIX
+  // ============================================
+  function populateMixSelects(list) {
+    const options = list
+      .map((t) => `<option value="${t.id}">${t.name} [${t.category}]</option>`)
+      .join("");
+    const placeholder = `<option value="">Select a trend...</option>`;
+    mixSelect1.innerHTML = placeholder + options;
+    mixSelect2.innerHTML = placeholder + options;
+  }
+
+  async function handleMix() {
+    const t1 = mixSelect1.value;
+    const t2 = mixSelect2.value;
+    const ctx = mixContext.value;
+
+    if (!t1 || !t2) {
+      showError(mixResult, "Please select two trends to mix.");
+      return;
+    }
+    if (t1 === t2) {
+      showError(mixResult, "Please select two different trends.");
+      return;
+    }
+
+    mixSubmit.disabled = true;
+    mixSubmit.textContent = "Mixing...";
+    showLoading(mixResult);
+
+    try {
+      const res = await fetch("/api/mix", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ trend1Id: t1, trend2Id: t2, context: ctx || undefined }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to mix");
+      showResult(
+        mixResult,
+        data.prompt,
+        `Mix: ${data.trend1.name} × ${data.trend2.name}`
+      );
+    } catch (err) {
+      showError(mixResult, err.message);
+    } finally {
+      mixSubmit.disabled = false;
+      mixSubmit.textContent = "Mix & Generate";
+    }
+  }
+
+  mixSubmit.addEventListener("click", handleMix);
+
+  // --- Init ---
+  loadTrends();
+})();

package/public/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DESIGNNN — Trend-driven Design Prompt Engine</title>
+  <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=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-left">
+      <h1 class="logo">DESIGNNN</h1>
+      <span class="tagline">for Figma AI</span>
+    </div>
+    <nav class="nav">
+      <button class="nav-btn active" data-tab="chat">Chat</button>
+      <button class="nav-btn" data-tab="explore">Explore</button>
+      <button class="nav-btn" data-tab="mix">Mix</button>
+    </nav>
+    <a href="https://github.com/abe430/designnn" target="_blank" class="github-link">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+    </a>
+  </header>
+
+  <!-- Main Content -->
+  <main class="main">
+    <!-- Chat Tab -->
+    <section class="tab-content active" id="tab-chat">
+      <div class="tab-hero">
+        <h2>Chat to Prompt</h2>
+        <p>Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt.</p>
+      </div>
+      <div class="chat-container">
+        <div class="input-group">
+          <input type="text" id="chat-input" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
+          <button id="chat-submit" class="btn-primary">Generate</button>
+        </div>
+        <div class="quick-prompts">
+          <span class="quick-label">Try:</span>
+          <button class="quick-btn" data-prompt="Landing page for a fitness app with bold typography">Fitness Landing</button>
+          <button class="quick-btn" data-prompt="E-commerce product page with glassmorphism style">E-commerce Glass</button>
+          <button class="quick-btn" data-prompt="Mobile onboarding flow for a meditation app">Meditation Onboarding</button>
+          <button class="quick-btn" data-prompt="SaaS pricing page with dark theme and neon accents">SaaS Pricing</button>
+        </div>
+        <div id="chat-result" class="result-area hidden"></div>
+      </div>
+    </section>
+
+    <!-- Explore Tab -->
+    <section class="tab-content" id="tab-explore">
+      <div class="tab-hero">
+        <h2>Explore Trends</h2>
+        <p>Browse 18+ curated UI/UX design trends. Click any trend to generate a Figma AI prompt.</p>
+      </div>
+      <div class="explore-container">
+        <div class="filter-bar">
+          <button class="filter-btn active" data-category="all">All</button>
+          <button class="filter-btn" data-category="style">Style</button>
+          <button class="filter-btn" data-category="component">Component</button>
+          <button class="filter-btn" data-category="pattern">Pattern</button>
+          <button class="filter-btn" data-category="layout">Layout</button>
+          <button class="filter-btn" data-category="interaction">Interaction</button>
+        </div>
+        <div id="trends-grid" class="trends-grid"></div>
+        <div id="explore-result" class="result-area hidden"></div>
+      </div>
+    </section>
+
+    <!-- Mix Tab -->
+    <section class="tab-content" id="tab-mix">
+      <div class="tab-hero">
+        <h2>Trend Mixer</h2>
+        <p>Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.</p>
+      </div>
+      <div class="mix-container">
+        <div class="mix-selectors">
+          <div class="mix-slot" id="mix-slot-1">
+            <div class="slot-label">Trend 1</div>
+            <select id="mix-select-1" class="mix-select">
+              <option value="">Select a trend...</option>
+            </select>
+          </div>
+          <div class="mix-icon">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v1.59L18 8z"/><circle cx="12" cy="12" r="3"/><path d="M6 16h1v2c0 2.76 2.24 5 5 5s5-2.24 5-5v-1.59"/></svg>
+            <span>MIX</span>
+          </div>
+          <div class="mix-slot" id="mix-slot-2">
+            <div class="slot-label">Trend 2</div>
+            <select id="mix-select-2" class="mix-select">
+              <option value="">Select a trend...</option>
+            </select>
+          </div>
+        </div>
+        <div class="context-group">
+          <input type="text" id="mix-context" placeholder="Additional context (optional): e.g., for a music streaming app" />
+        </div>
+        <button id="mix-submit" class="btn-primary btn-mix">Mix & Generate</button>
+        <div id="mix-result" class="result-area hidden"></div>
+      </div>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <p>DESIGNNN v0.1.0 — Made with energy by <a href="https://github.com/abe430" target="_blank">concepter</a></p>
+  </footer>
+
+  <script src="/app.js"></script>
+</body>
+</html>