sonance-brand-mcp 1.3.97 → 1.3.98

package/dist/assets/api/sonance-vision-apply/route.ts

@@ -1341,6 +1341,85 @@ Output format:
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
+/**
+ * DESIGN REASONING PROMPT
+ * Forces the LLM through a structured analysis before making design changes.
+ * This prevents over-engineering and ensures thoughtful, targeted modifications.
+ */
+const DESIGN_REASONING_PROMPT = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN REASONING PROTOCOL (Follow BEFORE generating patches)
+═══════════════════════════════════════════════════════════════════════════════
+
+STEP 1 - VISUAL ANALYSIS:
+Before making any changes, analyze the current UI in the screenshot:
+• What type of component is this? (form wizard, modal, card, data table, sidebar, etc.)
+• What is currently working well that should be PRESERVED?
+• What specific visual issues exist? (inconsistent spacing, unclear hierarchy, alignment problems, clutter)
+
+STEP 2 - MINIMAL CHANGE PLAN:
+Identify the MINIMUM changes needed to address the user's request:
+• What 1-3 targeted fixes would solve the issue?
+• What should you explicitly NOT change?
+• Will these changes break existing functionality or visual balance?
+
+STEP 3 - GUARDRAILS CHECK:
+Before implementing, verify you are following these rules:
+• Am I preserving the existing layout structure? (flex stays flex, grid stays grid)
+• Am I keeping the existing color palette unless specifically asked to change it?
+• Am I making incremental improvements, NOT a complete restructure?
+• Am I keeping the same visual hierarchy and element positions?
+
+STEP 4 - IMPLEMENT:
+Only now generate patches for the targeted changes from Step 2.
+Each patch should be small and focused - prefer multiple small patches over one large rewrite.
+`;
+
+/**
+ * DESIGN GUARDRAILS
+ * Explicit constraints to prevent the LLM from over-engineering design changes.
+ */
+const DESIGN_GUARDRAILS = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN GUARDRAILS (MUST FOLLOW)
+═══════════════════════════════════════════════════════════════════════════════
+
+❌ DO NOT:
+• Convert layout systems (do NOT change flex to grid or vice versa)
+• Restructure component hierarchy unless explicitly asked
+• Change color schemes unless specifically requested
+• Move elements to different positions unless asked
+• Rewrite entire sections - make targeted changes only
+• Add new wrapper elements or change semantic structure
+
+✓ DO:
+• Focus on spacing, padding, and margins for "cleaner" requests
+• Improve typography (font size, weight, line-height) for readability
+• Fix alignment issues within the existing structure
+• Adjust visual hierarchy through subtle styling, not restructuring
+• Make the smallest change that addresses the user's request
+• Preserve what is already working well
+`;
+
+/**
+ * Detect if a user request is design-heavy and needs the reasoning protocol.
+ * Simple requests like "change button color to blue" don't need it.
+ */
+function isDesignHeavyRequest(userPrompt: string): boolean {
+  const designKeywords = [
+    'redesign', 'design', 'layout', 'improve', 'better', 'modernize', 'modern',
+    'cleaner', 'clean', 'messy', 'cluttered', 'update look', 'looks bad',
+    'ugly', 'prettier', 'beautiful', 'professional', 'polish', 'refine',
+    'restructure', 'reorganize', 'rearrange', 'simplify', 'streamline',
+    'compact', 'spacious', 'breathing room', 'visual', 'aesthetic',
+    'ux', 'user experience', 'ui', 'user interface', 'make it look',
+    'looks weird', 'not right', 'fix the look', 'appearance'
+  ];
+  
+  const lowerPrompt = userPrompt.toLowerCase();
+  return designKeywords.some(keyword => lowerPrompt.includes(keyword));
+}
+
 export async function POST(request: Request) {
   // Only allow in development
   if (process.env.NODE_ENV !== "development") {
@@ -1748,6 +1827,23 @@ User Request: "${userPrompt}"
 
 `;
 
+      // ========== DESIGN REASONING PROTOCOL ==========
+      // For design-heavy requests, add structured reasoning and guardrails
+      // This prevents over-engineering and ensures thoughtful changes
+      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      
+      if (isDesignRequest) {
+        debugLog("Design-heavy request detected, adding reasoning protocol", {
+          prompt: userPrompt?.substring(0, 50),
+          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
+            .filter(k => userPrompt?.toLowerCase().includes(k))
+        });
+        
+        textContent += DESIGN_REASONING_PROMPT;
+        textContent += DESIGN_GUARDRAILS;
+        textContent += '\n';
+      }
+
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {

package/dist/assets/api/sonance-vision-edit/route.ts

@@ -1337,6 +1337,85 @@ Output format:
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
+/**
+ * DESIGN REASONING PROMPT
+ * Forces the LLM through a structured analysis before making design changes.
+ * This prevents over-engineering and ensures thoughtful, targeted modifications.
+ */
+const DESIGN_REASONING_PROMPT = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN REASONING PROTOCOL (Follow BEFORE generating patches)
+═══════════════════════════════════════════════════════════════════════════════
+
+STEP 1 - VISUAL ANALYSIS:
+Before making any changes, analyze the current UI in the screenshot:
+• What type of component is this? (form wizard, modal, card, data table, sidebar, etc.)
+• What is currently working well that should be PRESERVED?
+• What specific visual issues exist? (inconsistent spacing, unclear hierarchy, alignment problems, clutter)
+
+STEP 2 - MINIMAL CHANGE PLAN:
+Identify the MINIMUM changes needed to address the user's request:
+• What 1-3 targeted fixes would solve the issue?
+• What should you explicitly NOT change?
+• Will these changes break existing functionality or visual balance?
+
+STEP 3 - GUARDRAILS CHECK:
+Before implementing, verify you are following these rules:
+• Am I preserving the existing layout structure? (flex stays flex, grid stays grid)
+• Am I keeping the existing color palette unless specifically asked to change it?
+• Am I making incremental improvements, NOT a complete restructure?
+• Am I keeping the same visual hierarchy and element positions?
+
+STEP 4 - IMPLEMENT:
+Only now generate patches for the targeted changes from Step 2.
+Each patch should be small and focused - prefer multiple small patches over one large rewrite.
+`;
+
+/**
+ * DESIGN GUARDRAILS
+ * Explicit constraints to prevent the LLM from over-engineering design changes.
+ */
+const DESIGN_GUARDRAILS = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN GUARDRAILS (MUST FOLLOW)
+═══════════════════════════════════════════════════════════════════════════════
+
+❌ DO NOT:
+• Convert layout systems (do NOT change flex to grid or vice versa)
+• Restructure component hierarchy unless explicitly asked
+• Change color schemes unless specifically requested
+• Move elements to different positions unless asked
+• Rewrite entire sections - make targeted changes only
+• Add new wrapper elements or change semantic structure
+
+✓ DO:
+• Focus on spacing, padding, and margins for "cleaner" requests
+• Improve typography (font size, weight, line-height) for readability
+• Fix alignment issues within the existing structure
+• Adjust visual hierarchy through subtle styling, not restructuring
+• Make the smallest change that addresses the user's request
+• Preserve what is already working well
+`;
+
+/**
+ * Detect if a user request is design-heavy and needs the reasoning protocol.
+ * Simple requests like "change button color to blue" don't need it.
+ */
+function isDesignHeavyRequest(userPrompt: string): boolean {
+  const designKeywords = [
+    'redesign', 'design', 'layout', 'improve', 'better', 'modernize', 'modern',
+    'cleaner', 'clean', 'messy', 'cluttered', 'update look', 'looks bad',
+    'ugly', 'prettier', 'beautiful', 'professional', 'polish', 'refine',
+    'restructure', 'reorganize', 'rearrange', 'simplify', 'streamline',
+    'compact', 'spacious', 'breathing room', 'visual', 'aesthetic',
+    'ux', 'user experience', 'ui', 'user interface', 'make it look',
+    'looks weird', 'not right', 'fix the look', 'appearance'
+  ];
+  
+  const lowerPrompt = userPrompt.toLowerCase();
+  return designKeywords.some(keyword => lowerPrompt.includes(keyword));
+}
+
 export async function POST(request: Request) {
   // Only allow in development
   if (process.env.NODE_ENV !== "development") {
@@ -1717,6 +1796,23 @@ User Request: "${userPrompt}"
 
 `;
 
+      // ========== DESIGN REASONING PROTOCOL ==========
+      // For design-heavy requests, add structured reasoning and guardrails
+      // This prevents over-engineering and ensures thoughtful changes
+      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      
+      if (isDesignRequest) {
+        debugLog("Design-heavy request detected, adding reasoning protocol", {
+          prompt: userPrompt?.substring(0, 50),
+          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
+            .filter(k => userPrompt?.toLowerCase().includes(k))
+        });
+        
+        textContent += DESIGN_REASONING_PROMPT;
+        textContent += DESIGN_GUARDRAILS;
+        textContent += '\n';
+      }
+
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.97",
+  "version": "1.3.98",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",