sonance-brand-mcp 1.3.102 → 1.3.104

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

@@ -1519,18 +1519,44 @@ function buildPhase2DesignPrompt(problems: DesignProblem[]): string {
     return ''; // No problems identified, skip design protocol
   }
 
-  // Create a simple, readable list of problems (no JSON complexity)
-  const problemsList = problems.map(p => `• ${p.description}`).join('\n');
+  // Create a structured list with code hints to guide the LLM
+  const problemsList = problems.map((p, i) => {
+    const hint = p.codeHint ? `\n   → Look for: ${p.codeHint}` : '';
+    return `${i + 1}. [${p.severity.toUpperCase()}] ${p.description}${hint}`;
+  }).join('\n\n');
   
   return `
 ═══════════════════════════════════════════════════════════════════════════════
-DESIGN ISSUES TO FIX
+DESIGN ISSUES TO FIX (${problems.length} problems identified)
 ═══════════════════════════════════════════════════════════════════════════════
 
-These visual issues were identified:
 ${problemsList}
 
-Fix these issues by modifying the code below.
+BEFORE GENERATING PATCHES, analyze each problem:
+
+For EACH problem, determine:
+1. What is the current DOM structure for this element?
+2. Can this be fixed by adjusting className values (spacing, alignment, colors)?
+3. Or does the DOM structure itself prevent the fix?
+
+DECISION RULES:
+- If a problem is about SPACING: adjust margin/padding classes (mt-X, mb-X, gap-X, p-X)
+- If a problem is about ALIGNMENT: adjust flex/grid alignment classes (items-center, justify-between)
+- If a problem is about HIERARCHY: adjust font-size, font-weight, or color classes
+- If a problem is about GROUPING: check if elements are in the same container first
+  → If yes: adjust gap/spacing classes
+  → If no: consider minimal restructuring
+
+ONLY restructure elements when:
+- Elements are in separate containers that prevent proper grouping
+- The current container type (div, flex, grid) fundamentally can't achieve the layout
+
+PREFER the minimal change. A good designer makes surgical fixes, not rewrites.
+
+YOUR TASK: Generate AT LEAST ONE PATCH for EACH problem listed above.
+Expected minimum patches: ${problems.length}
+
+Use the "Look for" hints to find the relevant code in the file.
 
 ⚠️ CRITICAL - EXACT CODE MATCHING:
 Your "search" string MUST be copied CHARACTER-FOR-CHARACTER from the file.
@@ -1545,11 +1571,14 @@ DO NOT:
 - Add or remove classes/attributes
 - Invent code that "should" exist
 - Guess at the structure
+- Restructure when a className change would work
 
 DO:
 - Copy the exact text from the numbered lines
 - Make small, targeted changes in the "replace" field
 - Keep patches focused on one change each
+- Generate one patch per problem minimum
+- Prefer adjusting existing classes over moving elements
 `;
 }
 

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

@@ -1515,18 +1515,44 @@ function buildPhase2DesignPrompt(problems: DesignProblem[]): string {
     return ''; // No problems identified, skip design protocol
   }
 
-  // Create a simple, readable list of problems (no JSON complexity)
-  const problemsList = problems.map(p => `• ${p.description}`).join('\n');
+  // Create a structured list with code hints to guide the LLM
+  const problemsList = problems.map((p, i) => {
+    const hint = p.codeHint ? `\n   → Look for: ${p.codeHint}` : '';
+    return `${i + 1}. [${p.severity.toUpperCase()}] ${p.description}${hint}`;
+  }).join('\n\n');
   
   return `
 ═══════════════════════════════════════════════════════════════════════════════
-DESIGN ISSUES TO FIX
+DESIGN ISSUES TO FIX (${problems.length} problems identified)
 ═══════════════════════════════════════════════════════════════════════════════
 
-These visual issues were identified:
 ${problemsList}
 
-Fix these issues by modifying the code below.
+BEFORE GENERATING PATCHES, analyze each problem:
+
+For EACH problem, determine:
+1. What is the current DOM structure for this element?
+2. Can this be fixed by adjusting className values (spacing, alignment, colors)?
+3. Or does the DOM structure itself prevent the fix?
+
+DECISION RULES:
+- If a problem is about SPACING: adjust margin/padding classes (mt-X, mb-X, gap-X, p-X)
+- If a problem is about ALIGNMENT: adjust flex/grid alignment classes (items-center, justify-between)
+- If a problem is about HIERARCHY: adjust font-size, font-weight, or color classes
+- If a problem is about GROUPING: check if elements are in the same container first
+  → If yes: adjust gap/spacing classes
+  → If no: consider minimal restructuring
+
+ONLY restructure elements when:
+- Elements are in separate containers that prevent proper grouping
+- The current container type (div, flex, grid) fundamentally can't achieve the layout
+
+PREFER the minimal change. A good designer makes surgical fixes, not rewrites.
+
+YOUR TASK: Generate AT LEAST ONE PATCH for EACH problem listed above.
+Expected minimum patches: ${problems.length}
+
+Use the "Look for" hints to find the relevant code in the file.
 
 ⚠️ CRITICAL - EXACT CODE MATCHING:
 Your "search" string MUST be copied CHARACTER-FOR-CHARACTER from the file.
@@ -1541,11 +1567,14 @@ DO NOT:
 - Add or remove classes/attributes
 - Invent code that "should" exist
 - Guess at the structure
+- Restructure when a className change would work
 
 DO:
 - Copy the exact text from the numbered lines
 - Make small, targeted changes in the "replace" field
 - Keep patches focused on one change each
+- Generate one patch per problem minimum
+- Prefer adjusting existing classes over moving elements
 `;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.102",
+  "version": "1.3.104",
   "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",