Uploaded March 2026 | Updated September 2026, 3 weeks ago
AI can build a stunning Avalonia UI in seconds... but what does the code actually look like behind the scenes?
In this video, we're exposing the hidden dangers of AI-generated C# code. Sure, the Jobs Page looks great on the surface, but underneath, itβs a maintenance nightmare filled with hard-coded values, massive code duplication, and structural disasters. I'm breaking down exactly why trusting the "pretty" AI output is dangerous, and we begin the process of building an Avalonia Coder AI agent to clean up the mess.
π Get more free knowledge on C#, hardware design, and more: angelsix.com
β±οΈ Chapters:
0:00 - The Danger of "Pretty" AI UIs
0:44 - Why AI Code is a Maintenance Nightmare
1:34 - Setting Up the Avalonia Coder AI Agent
2:41 - Fixing Hard-Coded Colors & Gradients
3:35 - Refactoring Duplicated Code
6:54 - Sorting Out Dropdowns & Layout Controls
10:12 - Fixing Grid Spacing & Row Definitions
14:44 - The Progress Bar Performance Disaster
19:37 - Resolving SVG Icon & Pixel Scaling Issues
22:12 - Structural Problems in the Table Header
23:52 - Fixing New Bugs Introduced During Refactoring
26:45 - How to Properly Oversee AI Code
#CSharp #AvaloniaUI #AICoding #SoftwareArchitecture #AngelSix
AI can build a stunning Avalonia UI in seconds... but what does the code actually look like behind the scenes?
In this video, we're exposing the hidden dangers of AI-generated C# code. Sure, the Jobs Page looks great on the surface, but underneath, itβs a maintenance nightmare filled with hard-coded values, massive code duplication, and structural disasters. I'm breaking down exactly why trusting the "pretty" AI output is dangerous, and we begin the process of building an Avalonia Coder AI agent to clean up the mess.
π Get more free knowledge on C#, hardware design, and more: angelsix.com
β±οΈ Chapters:
0:00 - The Danger of "Pretty" AI UIs
0:44 - Why AI Code is a Maintenance Nightmare
1:34 - Setting Up the Avalonia Coder AI Agent
2:41 - Fixing Hard-Coded Colors & Gradients
3:35 - Refactoring Duplicated Code
6:54 - Sorting Out Dropdowns & Layout Controls
10:12 - Fixing Grid Spacing & Row Definitions
14:44 - The Progress Bar Performance Disaster
19:37 - Resolving SVG Icon & Pixel Scaling Issues
22:12 - Structural Problems in the Table Header
23:52 - Fixing New Bugs Introduced During Refactoring
26:45 - How to Properly Oversee AI Code
#CSharp #AvaloniaUI #AICoding #SoftwareArchitecture #AngelSix

![Avalonia Styles Not Working? Youre Breaking This Rule
Your Avalonia styles write correctly, apply cleanly β and do absolutely nothing. No error.
No warning. Just silence. This is what happens when one rule gets broken inside a Control
Template, and it took a deep dive into Avalonias full binding precedence order to understand
why.
In this episode were finishing the Button Spinner styling β but the real story is discovering
that a single Binding inside the default control template was silently blocking every style
override we tried to write. We dig into the full priority order, document it properly, and
rebuild the Button Spinner cleanly from there.
βββββββββββββββββββββββββββββββ
π WHAT YOULL LEARN
βββββββββββββββββββββββββββββββ
β’ Avalonias full binding precedence order β Animation β Local Value β Style Trigger β
TemplateBinding β Style Setter β Inherited β Default
β’ The rule you must never break inside a Control Template β and what silently breaks when
you do
β’ Why using a regular Binding inside a Control Template blocks all style overrides forever
β’ How to fix it: moving the offending property to a Style Setter instead
β’ Cleaning up duplicate stream geometries β replacing two separate paths with a single arrow
and RenderTransform
β’ Removing all hardcoded MinWidth, padding, and icon sizes β wiring everything through the
token system
β’ A new binding priority reference document, available on GitHub
βββββββββββββββββββββββββββββββ
β± TIMESTAMPS
βββββββββββββββββββββββββββββββ
[0:00] β Introduction & series progress overview
[3:00] β Reviewing the Button Spinner control template
[7:02] β Cleaning up the Repeat Button control theme
[10:39] β Margin Multiplier Converter & Stream Geometry tasks
[14:36] β Removing the unnecessary control theme
[17:25] β The rule you must never break inside a Control Template
[18:00] β Avalonias binding precedence order, explained
[19:31] β The binding priority reference document
[22:52] β Reviewing the cleaned-up styles
[24:57] β Final cleanup: padding, paths, and icon sizing
[29:48] β Wrap-up
βββββββββββββββββββββββββββββββ
π LINKS
βββββββββββββββββββββββββββββββ
βΆ Ep 1 β Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
βΆ Ep 2 β Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
βΆ Ep 3 β Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
βΆ Ep 4 β Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
βΆ Ep 5 β Checkbox Deep Dive: https://www.youtube.com/watch?v=uIimnwjITT0
βΆ Ep 6 β Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY
βΆ Ep 7 β Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U
βΆ Ep 8 β Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8
βΆ Ep 9 β Surgical Legacy Code Removal: https://www.youtube.com/watch?v=5-p_fnOi0As
βΆ Ep 10 β One Token System: https://www.youtube.com/watch?v=JEcD1XXIiA8
πΊ Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
πΎ Source Code & Binding Priority Doc: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
π AngelSix: https://www.angelsix.com
βββββββββββββββββββββββββββββββ
πΊ SERIES: Avalonia UI Theming β Hand Coded From Scratch
βββββββββββββββββββββββββββββββ
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Avalonia Styles Not Working? Youre Breaking This Rule](https://i.ytimg.com/vi/OhJN8Ssp2hA/mqdefault.jpg)






![Building a Design Token System | Dev + AI
The theme engine is live β now it needs a proper foundation. In this episode I work through
the design of a complete design token system: the minimal, compact set of values that define
every visual property in a theme. Colours, spacing, radius, stroke, scaling β all architected
from first principles.
And yes, I used AI. Not to write the code β but as a collaborator in the design process.
The human makes every decision. The AI challenges, refines, and fills gaps. This is what
correct AI usage looks like: not vibe coding, not outsourcing β genuine engineering with a
powerful tool in your hands.
βββββββββββββββββββββββββββββββ
π WHAT YOULL LEARN
βββββββββββββββββββββββββββββββ
β’ How the new source generator eliminates manual theme compilation β with full IntelliSense
β’ What a design token system actually is and why it matters for scalable UI theming
β’ Foundation tokens vs semantic tokens β and how the two layers interact
β’ Semantic colour naming: Surface, On-Surface, Accent, and why background/foreground falls short
β’ How a single BaseSize value scales every margin, padding, font and spacing proportionally
β’ Defining overlay layers for hover, pressed, and disabled states without hardcoding values
β’ How to use AI as a design collaborator β prompting, pushing back, and staying in control
β’ Why AI loses context over long sessions and how to manage it without losing your work
β’ The final locked design token plan β ready for implementation
βββββββββββββββββββββββββββββββ
β± TIMESTAMPS
βββββββββββββββββββββββββββββββ
[0:00] β Introduction & recap of the new theme engine
[0:40] β Installing the Angel6.ThemeEngine NuGet package
[1:19] β Defining a theme class with the [Theme] attribute
[1:49] β Injecting ThemeContext via dependency injection
[2:48] β Theme class properties in practice
[4:54] β Using theme: prefix in XAML with full IntelliSense
[6:10] β Source generator demo β instantaneous updates, no recompile
[7:55] β Why we need a design token system β entering AI collaboration
[9:28] β AI names it: design token system and confirms the concept
[11:56] β AIs first proposed architecture: colours, sizing, radius
[14:16] β Pushing back β more accent colours, base size scaling, real zoom
[17:20] β AIs revised plan: semantic colours, UI zoom, proportional scaling
[19:06] β AI creates the plan file using its planning skill
[22:10] β Brainstorming plan locked in the /plans folder
[25:06] β Closing questions: spacing levels, radius, overlays, accent derivation
[27:04] β AIs response β overlay layers, scale implementation, pastel accents
[30:00] β Further feedback: base size as derived properties, not render transform
[33:09] β Agreeing on scale implementation approach
[34:38] β Locking in the accent colour palette values
[36:27] β AI refines the plan with strong opinions acknowledged
[39:12] β Plan locked β ready for implementation
βββββββββββββββββββββββββββββββ
π LINKS
βββββββββββββββββββββββββββββββ
βΆ Part 1 β Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
βΆ Part 2 β Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
βΆ Part 3 β Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
βΆ Part 4 β Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
βΆ Part 5 β Checkbox Anatomy: https://www.youtube.com/watch?v=uIimnwjITT0
βΆ Part 6 β Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY
βΆ Part 7 β Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U
πΊ Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
πΎ Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
π AngelSix: https://www.angelsix.com
βββββββββββββββββββββββββββββββ
πΊ SERIES: Avalonia UI Theming β Hand Coded From Scratch
βββββββββββββββββββββββββββββββ
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Building a Design Token System | Dev + AI](https://i.ytimg.com/vi/QMVdxRZqaU8/mqdefault.jpg)

