Benchmark-Driven Development: A Framework for AI System Configuration

import boxen from 'boxen';
import pc from 'picocolors';

const width = 50;

// Layer 1: Role Message (Cyan border = configuration inputs)
// Variants in different colors to show they're alternatives being tested
const layer1Content = [
  pc.cyan('וריאנט A: "אתה מקצוען..."'),
  pc.blue('וריאנט B: "אתה מומחה דו-לשוני..."'),
  pc.green('וריאנט C: "אתה מומחה ליישום..."')
].join('\n');

const layer1Box = boxen(layer1Content, {
  padding: { left: 1, right: 1, top: 0, bottom: 0 },
  borderStyle: 'round',
  borderColor: 'cyan',
  width: width - 4
});

// Layer 2: Main Prompt Template (Blue border = active process)
// Template structure shown in blue (the actual processing layer)
const layer2Content = [
  pc.blue('{role_message}'),
  '',
  pc.blue('[הקשר, הוראות, מגבלות...]')
].join('\n');

const layer2Box = boxen(layer2Content, {
  padding: { left: 1, right: 1, top: 0, bottom: 0 },
  borderStyle: 'round',
  borderColor: 'blue',
  width: width - 4
});

// Layer 3: Rules (Green border = validated/proven)
// Rules are proven practices, so green makes semantic sense
// Show variety of rules with different shades
const layer3Content = [
  pc.green('• שמירת רישון'),
  pc.cyan('• התאמת אזורית'),
  pc.blue('• מונחים בתחום'),
  pc.green('• התאמה תרבותית'),
  pc.gray('... (בדוק את שילובי הכללים שלך)')
].join('\n');

const layer3Box = boxen(layer3Content, {
  padding: { left: 1, right: 1, top: 0, bottom: 0 },
  borderStyle: 'round',
  borderColor: 'green',
  width: width - 4
});

// Combine everything with semantic labels
const lines = [
  pc.bold(pc.white('הודעת תפקיד (שכבה 1) - ניתן לבדיקה A/B')),
  layer1Box.split('\n').map(line => '  ' + line).join('\n'),
  pc.gray('↓ הזרק לתוך'),
  pc.bold(pc.white('תבנית הבקשה הראשית (שכבה 2) - ניתן לבדיקה A/B')),
  layer2Box.split('\n').map(line => '  ' + line).join('\n'),
  pc.gray('↓ משולב עם'),
  pc.bold(pc.white('כללים (שכבה 3) - שילובים שניתנים לבדיקה A/B')),
  layer3Box.split('\n').map(line => '  ' + line).join('\n')
];

// Magenta outer container = attention-grabbing, highlights importance
const fullDiagram = boxen(lines.join('\n'), {
  padding: { left: 1, right: 1, top: 0, bottom: 0 },
  borderStyle: 'round',
  borderColor: 'magenta',
  width: width
});

export default fullDiagram;

translation:
  default_prompt: "Translate from English to Spanish..."
  rules:
    - preserve_register: true
    - locale_handling: "dialect-specific"
    - confidence_threshold: 85
  variants:
    colombia:
      regional_idioms: enabled
      ranked_models:
        - model: "model-a"
          rank: 1
          avg_score: 83
        - model: "model-b"
          rank: 2
          avg_score: 81
      excluded_models:
        - model: "model-c"
          reason: "below_threshold"
          failed_iterations: 4
    spain:
      regional_verbs: enabled
      ranked_models:
        - model: "model-a"
          rank: 1
          avg_score: 80
        - model: "model-b"
          rank: 2
          avg_score: 78