riazmo commited on
Commit
b565ae1
·
verified ·
1 Parent(s): ad4e018

Delete config/agents.yaml

Browse files
Files changed (1) hide show
  1. config/agents.yaml +0 -518
config/agents.yaml DELETED
@@ -1,518 +0,0 @@
1
- # Agent Personas & Configuration
2
- # Design System Extractor v2
3
-
4
- # =============================================================================
5
- # MODEL CONFIGURATION
6
- # =============================================================================
7
- # Model assignments for each agent based on task complexity
8
- # =============================================================================
9
-
10
- models:
11
- # Agent 1: Crawler & Extractor — NO LLM NEEDED (Rule-based)
12
- agent_crawler:
13
- requires_llm: false
14
- notes: "Pure rule-based extraction using Playwright + CSS parsing"
15
-
16
- # Agent 2: Normalizer — LIGHT MODEL
17
- agent_normalizer:
18
- requires_llm: true
19
- primary_model: "Qwen/Qwen2.5-7B-Instruct"
20
- fallback_model: "microsoft/Phi-3-mini-4k-instruct"
21
- tasks:
22
- - "Suggest semantic token names from values"
23
- - "Explain duplicate detection rationale"
24
- - "Infer naming conventions from class names"
25
- temperature: 0.2 # Low temp for consistent naming
26
- max_tokens: 1024
27
- why_this_model: |
28
- 7B model is sufficient because:
29
- - Tasks are mostly pattern matching and naming
30
- - Doesn't require complex reasoning
31
- - Fast inference, good for iterative workflows
32
-
33
- # Agent 3: Advisor — STRONG MODEL (Key agent)
34
- agent_advisor:
35
- requires_llm: true
36
- primary_model: "Qwen/Qwen2.5-72B-Instruct"
37
- fallback_model: "mistralai/Mixtral-8x7B-Instruct-v0.1"
38
- budget_model: "Qwen/Qwen2.5-7B-Instruct" # If quota constrained
39
- tasks:
40
- - "Analyze extracted system for patterns and anti-patterns"
41
- - "Research and recommend type scales with rationale"
42
- - "Suggest spacing systems based on detected patterns"
43
- - "Identify accessibility issues and fixes"
44
- - "Compare against industry design systems"
45
- temperature: 0.4 # Moderate temp for creative recommendations
46
- max_tokens: 4096
47
- why_this_model: |
48
- 72B model is critical because:
49
- - Needs deep understanding of design systems
50
- - Must reason about trade-offs (pros/cons)
51
- - Should know Material, Polaris, Carbon, etc.
52
- - Quality of recommendations is user-facing
53
-
54
- # Agent 4: Generator — LIGHT MODEL
55
- agent_generator:
56
- requires_llm: true
57
- primary_model: "Qwen/Qwen2.5-7B-Instruct"
58
- fallback_model: "mistralai/Mistral-7B-Instruct-v0.3"
59
- tasks:
60
- - "Format tokens into Tokens Studio JSON"
61
- - "Generate CSS custom properties"
62
- - "Structure metadata correctly"
63
- temperature: 0.1 # Very low temp for consistent formatting
64
- max_tokens: 8192 # Larger for full JSON output
65
- why_this_model: |
66
- 7B model is sufficient because:
67
- - Structured output generation is formulaic
68
- - JSON schema is well-defined
69
- - Speed matters for export flow
70
-
71
- # =============================================================================
72
- # FREE TIER vs PRO RECOMMENDATIONS
73
- # =============================================================================
74
-
75
- tier_recommendations:
76
- free_tier:
77
- description: "For users without HF Pro subscription"
78
- agent2: "Qwen/Qwen2.5-7B-Instruct"
79
- agent3: "mistralai/Mixtral-8x7B-Instruct-v0.1" # Best free option for reasoning
80
- agent4: "Qwen/Qwen2.5-7B-Instruct"
81
- notes: "Quality will be slightly lower for Agent 3 recommendations"
82
-
83
- pro_tier:
84
- description: "For users with HF Pro subscription"
85
- agent2: "Qwen/Qwen2.5-7B-Instruct"
86
- agent3: "Qwen/Qwen2.5-72B-Instruct" # Full quality
87
- agent4: "Qwen/Qwen2.5-7B-Instruct"
88
- notes: "Best quality, especially for design system recommendations"
89
-
90
- # =============================================================================
91
- # AGENT 1: Website Crawler & Extractor
92
- # =============================================================================
93
- agent_crawler:
94
- name: "Design Archaeologist"
95
- persona: |
96
- You are a meticulous Design Archaeologist. Your job is to carefully excavate
97
- design decisions buried in website code. You approach each site with curiosity
98
- and systematic precision, documenting everything you find without judgment.
99
-
100
- You understand that live websites are often messy — accumulated decisions from
101
- multiple designers over years. Your role is to faithfully extract what exists,
102
- not to fix or improve it yet.
103
-
104
- responsibilities:
105
- - Auto-discover pages from base URL (minimum 10)
106
- - Include key templates: homepage, listing, detail, form, marketing, auth
107
- - Scroll pages fully (above + below fold)
108
- - Extract separately for Desktop (1440px) and Mobile (375px)
109
-
110
- extraction_targets:
111
- colors:
112
- - hex values
113
- - rgb/rgba values
114
- - usage frequency
115
- - context (background, text, border, etc.)
116
- typography:
117
- - font families
118
- - font sizes (px, rem, em)
119
- - line heights
120
- - font weights
121
- - letter spacing
122
- spacing:
123
- - margin values
124
- - padding values
125
- - gap values
126
- - infer base system (4px, 8px)
127
- other:
128
- - border radius
129
- - box shadows
130
- - layout signals (containers, grids)
131
-
132
- tools:
133
- - playwright (crawling, scrolling, computed styles)
134
- - css parsing (CSSOM)
135
-
136
- output_format:
137
- - raw extracted tokens
138
- - confidence score per token
139
- - desktop/mobile separated
140
- - errors and warnings logged
141
-
142
- guardrails:
143
- - Never modify or "fix" extracted values
144
- - Always preserve original CSS values
145
- - Log anomalies, don't hide them
146
- - Respect robots.txt (configurable)
147
-
148
- # =============================================================================
149
- # AGENT 2: Token Normalizer & Structurer
150
- # =============================================================================
151
- agent_normalizer:
152
- name: "Design System Librarian"
153
- persona: |
154
- You are a methodical Design System Librarian. Your expertise is in organizing
155
- chaotic information into structured, meaningful categories. You see patterns
156
- where others see noise.
157
-
158
- You are careful to distinguish between what you KNOW (detected) and what you
159
- THINK (inferred). You never overwrite the truth — you annotate it.
160
-
161
- responsibilities:
162
- - Clean noisy extraction data
163
- - Group and merge duplicates (with threshold tolerance)
164
- - Infer naming patterns from class names
165
- - Propose initial token names
166
- - Tag confidence levels
167
-
168
- naming_conventions:
169
- colors:
170
- - "color.{role}.{shade}" (e.g., color.primary.500)
171
- - roles: primary, secondary, neutral, success, warning, error
172
- - shades: 50, 100, 200, ..., 900
173
- typography:
174
- - "font.{category}.{size}" (e.g., font.heading.lg)
175
- - categories: heading, body, label, caption
176
- - sizes: xs, sm, md, lg, xl, 2xl
177
- spacing:
178
- - "space.{size}" (e.g., space.4, space.8)
179
- - based on pixel value / 4
180
-
181
- tagging:
182
- detected: "Directly found in CSS, high confidence"
183
- inferred: "Derived from patterns, medium confidence"
184
- low_confidence: "Appears rarely or inconsistently"
185
-
186
- duplicate_threshold:
187
- colors: 3 # hex values within 3 steps are potential duplicates
188
- spacing: 2 # pixel values within 2px are potential duplicates
189
-
190
- guardrails:
191
- - Never overwrite extracted truth
192
- - Always mark inferred vs detected
193
- - Preserve original values alongside normalized
194
- - Flag conflicts, don't resolve them silently
195
-
196
- # =============================================================================
197
- # AGENT 3: Design System Best Practices Advisor
198
- # =============================================================================
199
- agent_advisor:
200
- name: "Senior Staff Design Systems Architect"
201
- persona: |
202
- You are a Senior Staff Design Systems Architect with 15+ years of experience
203
- building and scaling design systems at major tech companies. You've seen what
204
- works and what doesn't.
205
-
206
- Your role is to ADVISE, not DECIDE. You present options with clear rationale,
207
- letting humans make the final call. You respect existing decisions while
208
- offering paths to improvement.
209
-
210
- responsibilities:
211
- - Analyze extracted system for patterns and anti-patterns
212
- - Research modern design system best practices
213
- - Propose upgrade OPTIONS (never auto-apply)
214
- - Ensure accessibility compliance (AA minimum)
215
-
216
- research_sources:
217
- - Material Design (Google)
218
- - Polaris (Shopify)
219
- - Carbon (IBM)
220
- - Fluent (Microsoft)
221
- - Primer (GitHub)
222
- - Radix
223
- - Tailwind CSS
224
-
225
- upgrade_categories:
226
- typography_scales:
227
- - name: "Minor Third"
228
- ratio: 1.2
229
- description: "Subtle progression, good for dense UIs"
230
- - name: "Major Third"
231
- ratio: 1.25
232
- description: "Balanced, most popular choice"
233
- - name: "Perfect Fourth"
234
- ratio: 1.333
235
- description: "Strong hierarchy, good for marketing"
236
- - name: "Golden Ratio"
237
- ratio: 1.618
238
- description: "Dramatic, use sparingly"
239
-
240
- spacing_systems:
241
- - name: "4px base"
242
- scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64]
243
- description: "Fine-grained control"
244
- - name: "8px base"
245
- scale: [4, 8, 16, 24, 32, 48, 64, 80, 96]
246
- description: "Industry standard, recommended"
247
- - name: "Tailwind"
248
- scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96]
249
- description: "Utility-first, comprehensive"
250
-
251
- naming_conventions:
252
- - name: "T-shirt sizes"
253
- example: "xs, sm, md, lg, xl, 2xl"
254
- pros: "Intuitive, easy to remember"
255
- cons: "Limited granularity"
256
- - name: "Numeric"
257
- example: "100, 200, 300, 400, 500"
258
- pros: "Extensible, precise"
259
- cons: "Less intuitive"
260
- - name: "Semantic"
261
- example: "caption, body, subhead, title, display"
262
- pros: "Meaningful, self-documenting"
263
- cons: "Harder to extend"
264
-
265
- color_ramps:
266
- shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
267
- aa_contrast_minimum: 4.5
268
- aaa_contrast_minimum: 7.0
269
-
270
- output_format:
271
- - option sets (never single recommendations)
272
- - rationale for each option
273
- - pros and cons
274
- - accessibility impact
275
- - migration effort estimate
276
-
277
- guardrails:
278
- - Never auto-apply changes
279
- - Always provide multiple options
280
- - Respect existing system, suggest improvements
281
- - Flag accessibility issues prominently
282
-
283
- # =============================================================================
284
- # AGENT 4: Plugin & JSON Generator
285
- # =============================================================================
286
- agent_generator:
287
- name: "Automation Engineer"
288
- persona: |
289
- You are a precise Automation Engineer. Your job is to transform design
290
- decisions into machine-readable formats that tools can consume. You care
291
- deeply about compatibility, versioning, and clean output.
292
-
293
- You understand that your output will be used by Figma plugins, CSS
294
- preprocessors, and design tools — so format matters.
295
-
296
- responsibilities:
297
- - Convert finalized tokens to standard formats
298
- - Generate color ramps with AA compliance
299
- - Maintain viewport separation (Desktop/Mobile)
300
- - Version all outputs
301
-
302
- output_formats:
303
- tokens_studio:
304
- description: "Compatible with Tokens Studio Figma plugin"
305
- extension: ".json"
306
- figma_variables:
307
- description: "Direct Figma Variables format"
308
- extension: ".json"
309
- css_variables:
310
- description: "CSS custom properties"
311
- extension: ".css"
312
- tailwind_config:
313
- description: "Tailwind CSS configuration"
314
- extension: ".js"
315
-
316
- token_structure:
317
- colors:
318
- include_ramps: true
319
- ramp_shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
320
- include_contrast: true
321
- typography:
322
- include_composite: true # font-family + size + weight + line-height
323
- include_individual: true
324
- spacing:
325
- base: 8
326
- include_negative: false
327
-
328
- metadata_fields:
329
- - source_url
330
- - extracted_at
331
- - version
332
- - viewport
333
- - token_source (detected/inferred/upgraded)
334
-
335
- guardrails:
336
- - Always include metadata
337
- - Validate JSON before output
338
- - Preserve source attribution on each token
339
- - Warn on potential conflicts
340
-
341
- # =============================================================================
342
- # LANGGRAPH WORKFLOW CONFIGURATION
343
- # =============================================================================
344
- workflow:
345
- name: "design_system_extraction"
346
-
347
- checkpoints:
348
- - id: "confirm_pages"
349
- description: "Human confirms discovered pages before crawling"
350
- required: true
351
- - id: "review_extraction"
352
- description: "Human reviews extracted tokens (Stage 1 UI)"
353
- required: true
354
- - id: "select_upgrades"
355
- description: "Human selects upgrade options (Stage 2 UI)"
356
- required: true
357
- - id: "approve_export"
358
- description: "Human approves final output (Stage 3 UI)"
359
- required: true
360
-
361
- parallel_nodes:
362
- - name: "viewport_extraction"
363
- description: "Extract Desktop and Mobile in parallel"
364
- agents: ["agent_crawler"]
365
- - name: "research_and_advise"
366
- description: "Agent 3 can research while human reviews Stage 1"
367
- agents: ["agent_advisor"]
368
-
369
- error_handling:
370
- retry_attempts: 3
371
- retry_delay_seconds: 5
372
- log_errors: true
373
- show_in_ui: true
374
-
375
- # =============================================================================
376
- # UI CONFIGURATION
377
- # =============================================================================
378
- ui:
379
- layout: "single_scroll"
380
-
381
- stages:
382
- stage1:
383
- name: "Extraction Review"
384
- purpose: "Trust building — see what was found"
385
- components:
386
- - token_tables
387
- - color_swatches
388
- - typography_samples
389
- - viewport_toggle
390
- - confidence_indicators
391
- - accept_reject_controls
392
-
393
- stage2:
394
- name: "Upgrade Playground"
395
- purpose: "Decision making through live visuals"
396
- components:
397
- - option_selector
398
- - live_preview_iframe
399
- - side_by_side_comparison
400
- - existing_vs_upgraded_toggle
401
-
402
- stage3:
403
- name: "Final Review & Export"
404
- purpose: "Confidence before export"
405
- components:
406
- - token_preview_readonly
407
- - json_tree_view
408
- - diff_view
409
- - viewport_tabs
410
- - download_buttons
411
- - version_labeling
412
-
413
- preview:
414
- type: "iframe"
415
- template: "specimen.html"
416
- update_trigger: "on_selection"
417
-
418
- # =============================================================================
419
- # EXTRACTION SETTINGS
420
- # =============================================================================
421
- extraction:
422
- viewports:
423
- desktop:
424
- width: 1440
425
- height: 900
426
- name: "Desktop"
427
- mobile:
428
- width: 375
429
- height: 812
430
- name: "Mobile"
431
-
432
- crawling:
433
- max_pages: 20
434
- min_pages: 10
435
- scroll_behavior: "smooth"
436
- wait_for_network_idle: true
437
- network_idle_timeout_ms: 5000
438
- skip_infinite_scroll: true
439
- respect_robots_txt: true
440
-
441
- page_templates:
442
- required:
443
- - homepage
444
- - listing
445
- - detail
446
- optional:
447
- - form
448
- - marketing
449
- - auth
450
- - checkout
451
- - about
452
- - contact
453
-
454
- # =============================================================================
455
- # COLOR PROCESSING
456
- # =============================================================================
457
- color_processing:
458
- ramp_generation:
459
- enabled: true
460
- shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
461
- method: "oklch" # or "hsl" or "lab"
462
-
463
- accessibility:
464
- check_contrast: true
465
- minimum_standard: "AA" # or "AAA"
466
- contrast_pairs:
467
- - ["text", "background"]
468
- - ["button-text", "button-background"]
469
-
470
- duplicate_detection:
471
- enabled: true
472
- threshold_delta_e: 3 # CIE Delta E threshold
473
-
474
- # =============================================================================
475
- # TYPOGRAPHY PROCESSING
476
- # =============================================================================
477
- typography_processing:
478
- scale_options:
479
- - name: "Minor Third"
480
- ratio: 1.2
481
- - name: "Major Third"
482
- ratio: 1.25
483
- - name: "Perfect Fourth"
484
- ratio: 1.333
485
-
486
- base_size: 16 # px
487
-
488
- text_styles:
489
- - display
490
- - heading-xl
491
- - heading-lg
492
- - heading-md
493
- - heading-sm
494
- - body-lg
495
- - body-md
496
- - body-sm
497
- - caption
498
- - label
499
-
500
- # =============================================================================
501
- # SPACING PROCESSING
502
- # =============================================================================
503
- spacing_processing:
504
- base: 8 # px
505
- scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96]
506
-
507
- names:
508
- 0: "none"
509
- 4: "xs"
510
- 8: "sm"
511
- 12: "sm-md"
512
- 16: "md"
513
- 24: "lg"
514
- 32: "xl"
515
- 48: "2xl"
516
- 64: "3xl"
517
- 80: "4xl"
518
- 96: "5xl"