wtt-connect 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtt-connect",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": false,
   "description": "WTT-native connector daemon for Codex, Claude Code, Cursor, Gemini, ACP, and other coding agent surfaces.",
   "type": "module",

package/src/opendesign.js

@@ -55,6 +55,8 @@ export async function buildOpenDesignPrompt({ config, outputDir, userMessage, re
     '- Do not use external CDNs, remote images, external fonts, forms, cookies, localStorage, or network calls.',
     '- Use inline SVG or local CSS/JS only.',
     '- Treat this as a premium visual explainer, not a documentation page. The first viewport must look intentionally designed.',
+    '- Never rely on browser default fonts or default black SVG fills. Every SVG shape must intentionally set fill/stroke from named CSS variables.',
+    '- Do not produce black-on-white blob diagrams. Large black/dark fills, default #000 text-only SVGs, and unstyled Times/Arial pages are failed artifacts.',
     '- For formula/principle explanations include: a main diagram, step animation, symbol/metric table, minimal concrete example, explanatory text beside visuals, and final compact summary.',
     '- For UI/prototype requests include realistic fake data, hover states, and meaningful state transitions.',
     '',
@@ -132,7 +134,22 @@ export async function evaluateOpenDesignArtifact(dir) {
   if (/data-step|step-|timeline|progress|播放|replay|next/i.test(combined)) score += 1;
   else issues.push('missing step-by-step interaction/state');
 
-  return { ok: score >= 6, score, issues };
+  const lower = combined.toLowerCase();
+  const blackishTokens = (lower.match(/(?:#[0-2]{3,6}\b|rgb\(\s*(?:0|1?\d|2\d|3\d)\s*,\s*(?:0|1?\d|2\d|3\d)\s*,\s*(?:0|1?\d|2\d|3\d)\s*\)|fill=["'](?:black|#000|#111|#222)|background(?:-color)?:\s*(?:#000|#111|#121212|black))/g) || []).length;
+  const colorTokens = new Set((lower.match(/#[0-9a-f]{3,8}\b|oklch\([^)]+\)|hsl\([^)]+\)|rgb\([^)]+\)/g) || [])
+    .filter((token) => !/^#(?:000|111|222|333|fff|ffffff)\b/.test(token)));
+  if (blackishTokens <= 8 && colorTokens.size >= 8) score += 1;
+  else issues.push('visual palette is too black/default or lacks enough intentional color tokens; avoid black blob diagrams');
+
+  const fontFamilies = (combined.match(/font-family\s*:\s*([^;}]+)/gi) || []).join('\n').toLowerCase();
+  if (fontFamilies && !/inter|roboto|arial,\s*sans-serif|system-ui,\s*sans-serif/.test(fontFamilies)) score += 1;
+  else issues.push('typography is too default; use a distinctive local font stack, not Inter/Roboto/Arial/system-only');
+
+  const svgFills = (combined.match(/fill=["'][^"']+["']|fill:\s*[^;}]+/gi) || []).join('\n').toLowerCase();
+  if (svgFills && !/fill=["'](?:black|#000|#111|#222)["']/.test(svgFills)) score += 1;
+  else issues.push('SVG appears to rely on default/black fills; explicitly use colored fills and strokes for nodes, arrows, and highlights');
+
+  return { ok: score >= 8, score, issues };
 }
 
 async function loadSkillBlocks(config, skillNames) {
@@ -165,11 +182,12 @@ function visualQualityContract(zh) {
     '- Canvas: design for a 1440x900 whiteboard/preview area, responsive down to tablet. Use full-width composition, not a narrow article.',
     '- Visual hierarchy: strong title block, one dominant SVG/canvas diagram, one compact example panel, one formula/symbol table, one step timeline, and a final takeaway strip.',
     '- Default aesthetic when the user did not request a theme: light editorial research board, warm off-white paper, precise ink lines, subtle grid/noise, restrained color accents, refined spacing. It should feel closer to a polished team workspace/design note than a dark coding console.',
-    '- Aesthetic: choose a committed direction such as editorial lab notebook, precision engineering console, warm classroom blackboard, industrial systems map, or high-contrast research poster. Avoid generic SaaS cards.',
-    '- Typography: use distinctive CSS font stacks from local system fonts only, for example Georgia/Times editorial serif plus ui-monospace accents, or Avenir/Helvetica Neue with a mono data layer. Do not use plain Inter/Roboto/Arial defaults.',
-    '- Color: define CSS variables in :root. Use a restrained but intentional palette with textured background, grid/noise/paper effect, or layered panels. Avoid flat dark gray, neon cyan buttons, purple gradients, and default dark-mode dashboards unless the content explicitly requires them.',
+    '- Aesthetic: choose a committed direction such as editorial lab notebook, precision engineering console, warm classroom board, industrial systems map, or high-contrast research poster. Avoid generic SaaS cards.',
+    '- Typography: define a non-default font system in :root/body. Recommended local stacks: "Avenir Next", "Helvetica Neue", sans-serif for UI; Georgia, "Times New Roman", serif for editorial formulas; "SFMono-Regular", "Cascadia Code", monospace for data. Do not use plain Inter/Roboto/Arial/default browser font stacks.',
+    '- Color: define CSS variables in :root and use at least 8 named color tokens. Use a restrained but intentional palette with textured background, grid/noise/paper effect, or layered panels. Avoid flat dark gray, neon cyan buttons, purple gradients, and default dark-mode dashboards unless the content explicitly requires them.',
+    '- No black blob rule: SVG rectangles, circles, arrows, and paths must not default to black. Use colored fills like parchment, blue, amber, green, coral, slate ink, and colored strokes. Large dark regions must be rare accents, never the dominant diagram body.',
     '- Polish: use fine borders, soft shadows, intentional whitespace, aligned baselines, and varied panel sizes. Do not make every block the same rounded rectangle.',
-    '- SVG: include at least one large inline SVG with labeled nodes, arrows, and a visible animated path. Arrow animation must be obvious: stroke-dasharray/stroke-dashoffset or moving marker/dot.',
+    '- SVG: include at least one large inline SVG with labeled nodes, arrows, and a visible animated path. Every shape must have explicit fill/stroke. Arrow animation must be obvious: stroke-dasharray/stroke-dashoffset or moving marker/dot, and final arrow/path must remain visible after animation ends.',
     '- Motion: include 2-4 purposeful animations: entry reveal, arrow/path draw, active step highlight, formula/example transition. Respect prefers-reduced-motion.',
     '- Explanation: every diagram node must have adjacent text that explains why it matters. Do not rely on labels alone.',
     '- Example: include a minimal concrete example with inputs, intermediate transformation, and output/result.',