<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sébastien Lachance</title>
    <description>The latest articles on DEV Community by Sébastien Lachance (@archiecoderdev).</description>
    <link>https://dev.to/archiecoderdev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2893743%2Fa4ecb0a5-f4c7-4944-b058-3d10232c5b50.jpg</url>
      <title>DEV Community: Sébastien Lachance</title>
      <link>https://dev.to/archiecoderdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/archiecoderdev"/>
    <language>en</language>
    <item>
      <title>New Winamp interface made 100% with AI and Uno Platform tools</title>
      <dc:creator>Sébastien Lachance</dc:creator>
      <pubDate>Fri, 05 Dec 2025 05:42:02 +0000</pubDate>
      <link>https://dev.to/archiecoderdev/new-winamp-interface-made-100-with-ai-and-uno-platform-tools-5c53</link>
      <guid>https://dev.to/archiecoderdev/new-winamp-interface-made-100-with-ai-and-uno-platform-tools-5c53</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/unoplatform"&gt;AI Challenge for Cross-Platform Apps&lt;/a&gt; - AI Acceleration&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;My app is a revamp of the classic Winamp media player that was released in 1997. The technology of Uno Platform makes possible the creation of a cross-platform app with a single codebase. I challenged myself to create the complete interface with AI tools only.&lt;/p&gt;

&lt;p&gt;My setup:&lt;br&gt;
• Visual Studio&lt;br&gt;
• Uno Platform MCP servers&lt;br&gt;
• Uno Platform Hot Design&lt;br&gt;
• GitHub Copilot GPT-5&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/archiecoder/UnoWinamp" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdp5vc3aco8rxwfzwxdvf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdp5vc3aco8rxwfzwxdvf.png" alt="Final application" width="800" height="1068"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogpilk21l7p69lpxkmee.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogpilk21l7p69lpxkmee.gif" alt="Final application" width="720" height="815"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  AI Tooling in Action
&lt;/h2&gt;

&lt;p&gt;Without the following video, it would be hard to believe how simple it is to start the creation of a new interface. I simply pasted an image of the classic Winamp into Visual Studio.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/ArchieCoder/UnoWinamp/blob/master/Agent%20in%20action.gif" rel="noopener noreferrer"&gt;🔥 Video of the App MCP / Uno Platform MCP / GPT-5 in action 🔥&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5wy23blksugcft7599v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5wy23blksugcft7599v.png" alt="Interface produced by AI" width="800" height="624"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The initial interface is obviously not 100% exact, but it’s very impressive. It saves hours of work.&lt;/p&gt;

&lt;p&gt;I focused next to add the amplifier. I pasted the image and prompted “create a control based on SkiaSharp and animate it”.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fssd95kijbwnu3sejv8q0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fssd95kijbwnu3sejv8q0.png" alt="Amplifier" width="476" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Following the success of the previous control, I pasted another image and asked “create a control based on SkiaSharp of the wave chart and animate it”.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6wmn6oybr1bivsejbn6t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6wmn6oybr1bivsejbn6t.png" alt="Original wave from Winamp classic" width="177" height="43"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgt8q8ogvdpngzlvdpibz.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgt8q8ogvdpngzlvdpibz.gif" alt="Wave oscilloscope" width="820" height="84"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I was wowed by the output. I didn’t prompt anything else of it. I just asked to insert it above the band sliders. Also, it found the perfect class name WaveOscilloscopeControl.&lt;/p&gt;

&lt;p&gt;The agent produces the 3 SkiaSharp based control:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/ArchieCoder/UnoWinamp/blob/master/UnoWinAmp/Presentation/Controls/AmpVisualizerControl.xaml.cs" rel="noopener noreferrer"&gt;AmpVisualizerControl&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/ArchieCoder/UnoWinamp/blob/master/UnoWinAmp/Presentation/Controls/EqBandSliderControl.cs" rel="noopener noreferrer"&gt;EqBandSliderControl&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/ArchieCoder/UnoWinamp/blob/master/UnoWinAmp/Presentation/Controls/WaveOscilloscopeControl.cs" rel="noopener noreferrer"&gt;WaveOscilloscopeControl&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I asked the agent to animate them. The prompt is simple as: "create this control based on the screenshot and animate it". It's mind-blowing!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; the Uno Platform Visual Studio plugin installs the App MCP and the Uno Platform MCP.&lt;/p&gt;

&lt;p&gt;I did the UI adjustments with the help of Uno Platform Hot Design. When you exactly know which set of controls to adjust, Hot Design is much more convenient and faster than prompting for questions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdx5z5s7qu83jfuqwop3.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdx5z5s7qu83jfuqwop3.gif" alt="Hot design" width="720" height="405"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Using App MCP and Uno Platform MCP
&lt;/h2&gt;

&lt;p&gt;It’s no secret that there’s less documentation on the Uno Platform compared to web stacks, simply because there are far more web developers in the world. However, MCPs are extremely handy for producing great code that compiles across Uno Platform solutions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App MCP&lt;/strong&gt;&lt;br&gt;
The App MCP knows the best practice to separate the data from the UI. After the UI was built, I requested to move the hard-coded values to the ViewModel and to implement most of the player commands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/ArchieCoder/UnoWinamp/blob/master/UnoWinAmp/Presentation/MainViewModel.cs" rel="noopener noreferrer"&gt;MainViewModel.cs File&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Uno Platform MCP&lt;/strong&gt;&lt;br&gt;
My best example that showcases the power of the Uno Platform MCP server is I was able to request a brand new feature by Uno to replace the classic Windows title bar with an embedded title with the app.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpa4hg4g7ceoenwi5ifgs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpa4hg4g7ceoenwi5ifgs.png" alt="Embedded title bar" width="800" height="181"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var app = (App)Application.Current;
var window = app.MainWindow;
if (window is null)
{
    return;
}

window.ExtendsContentIntoTitleBar = true;
window.SetTitleBar(TitleBar);

var appWindow = window.AppWindow;
if (appWindow is not null)
{
    var tb = appWindow.TitleBar;
    tb.IconShowOptions = IconShowOptions.HideIconAndSystemMenu;
    tb.ButtonBackgroundColor = Windows.UI.Color.FromArgb(0x00, 0x00, 0x00, 0x00);
    tb.ButtonInactiveBackgroundColor = Windows.UI.Color.FromArgb(0x00, 0x00, 0x00, 0x00);
    tb.ButtonForegroundColor = Windows.UI.Color.FromArgb(0xFF, 0xCF, 0xCF, 0xCF);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Cross-Platform Reach
&lt;/h2&gt;

&lt;p&gt;My application runs on Windows, macOS, the Web, Android, iOS, and Linux. In fact, if Uno Platform supports the target, my app will run on it. Skia rendering support is what makes this possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  Development Experience
&lt;/h2&gt;

&lt;p&gt;I used AI in the past for very specific sub-tasks. In this challenge, I asked myself can I create a complete interface with no coding. It turned out that I was able to accomplish this with Visual Studio Copilot / Uno Platform Studio and Uno Platform Hot Design.&lt;/p&gt;

&lt;p&gt;I am not a self-made designer, but with the help of AI, I find the app UI appealing.&lt;/p&gt;

&lt;p&gt;Personally, the impressive part is I completed the challenge in two evenings of about three hours each 🤯. Without AI / Uno tools, this would have taken me more than a week.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>unoplatformchallenge</category>
      <category>dotnet</category>
      <category>crossplatform</category>
    </item>
    <item>
      <title>Revisiting the old classic Winamp and made it as a cross-platform app using Uno Platform</title>
      <dc:creator>Sébastien Lachance</dc:creator>
      <pubDate>Fri, 05 Dec 2025 04:12:28 +0000</pubDate>
      <link>https://dev.to/archiecoderdev/revisiting-the-old-classic-winamp-and-made-it-as-a-cross-platform-app-using-uno-platform-4amg</link>
      <guid>https://dev.to/archiecoderdev/revisiting-the-old-classic-winamp-and-made-it-as-a-cross-platform-app-using-uno-platform-4amg</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/unoplatform"&gt;AI Challenge for Cross-Platform Apps&lt;/a&gt; - WOW Factor&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;If you grew up during the Windows 95 era, there's a good chance you used the iconic media player Winamp.&lt;/p&gt;

&lt;p&gt;I decided to modernize the classic Winamp interface using Fluent Design and make the app cross-platform with the Uno Platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/archiecoder/UnoWinamp" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Desktop&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2l6g6r7k4ratxrzszi46.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2l6g6r7k4ratxrzszi46.png" alt="Desktop version" width="800" height="1068"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr3z6zub0qh0n37agv0by.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr3z6zub0qh0n37agv0by.gif" alt="Desktop version" width="720" height="815"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mobile&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmm6gbcttjupspu1lf7yw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmm6gbcttjupspu1lf7yw.gif" alt="Mobile version" width="592" height="1076"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floueyg50llb81bb0g1ot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floueyg50llb81bb0g1ot.png" alt="Web version" width="800" height="757"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Cross-Platform Magic
&lt;/h2&gt;

&lt;p&gt;The cross-platform capability is basically an effort-less feature for a Uno Platform project. You only need to adapt the design to different screen sizes. You don't have to worry about the physical device. &lt;/p&gt;

&lt;p&gt;It's a pure joy to see the app running on Android, Windows, iOS, Web and macOS without any code change.&lt;/p&gt;

&lt;h2&gt;
  
  
  Interactive Features
&lt;/h2&gt;

&lt;p&gt;In the player section, the play, pause, stop, next and previous buttons are working. The band sliders are clickable.&lt;/p&gt;

&lt;p&gt;The amp visualizer and wave oscillator are animated with real-time rendering by SkiaSharp.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Wow Factor
&lt;/h2&gt;

&lt;p&gt;The amp visualizer and wave oscillator are cool to watch.&lt;/p&gt;

&lt;p&gt;PS: some people might not believe me if I say I spent two evenings of about three hours each!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>unoplatformchallenge</category>
      <category>dotnet</category>
      <category>crossplatform</category>
    </item>
  </channel>
</rss>
