全新 Winamp 界面 100% 由 AI 与 Uno Platform 工具打造

Source: Dev.to

我构建的内容

我的应用是对1997年发布的经典 Winamp 媒体播放器的全新改版。Uno Platform 使得可以使用单一代码库创建跨平台应用。我挑战自己仅使用 AI 工具完成整个界面。

我的环境

• Visual Studio
• Uno Platform MCP 服务器
• Uno Platform Hot Design
• GitHub Copilot（GPT‑5）

演示

GitHub 仓库

AI 工具实战

如果没有下面的视频，可能很难相信创建新界面是如此简单。我只是在 Visual Studio 中粘贴了一张经典 Winamp 的图片。

🔥 应用 MCP / Uno Platform MCP / GPT‑5 实际操作视频 🔥

最初的界面并非 100 % 完全相同，但已经非常惊人，省去了数小时的工作。

随后我添加了放大器。我粘贴图片并提示 “create a control based on SkiaSharp and animate it”。

在前一个控件成功后，我又粘贴了一张图片并请求 “create a control based on SkiaSharp of the wave chart and animate it”。

我被输出结果惊艳到了。我没有再给出其他提示，只是要求把它插入到频段滑块上方，代理自动选择了完美的类名 WaveOscilloscopeControl。

代理生成了三个基于 SkiaSharp 的控件：

• AmpVisualizerControl
• EqBandSliderControl
• WaveOscilloscopeControl

我让代理为它们添加动画。提示仅为：“create this control based on the screenshot and animate it”。简直令人难以置信！

注意： Uno Platform Visual Studio 插件会同时安装 App MCP 和 Uno Platform MCP。

我使用 Uno Platform Hot Design 进行 UI 调整。当你明确知道要微调哪些控件时，Hot Design 比起一次次提问要更方便、更快捷。

使用 App MCP 与 Uno Platform MCP

App MCP

App MCP 知道如何最佳地将数据与 UI 分离。在 UI 完成后，我请求将硬编码的值迁移到 ViewModel，并实现大部分播放器指令。

MainViewModel.cs

Uno Platform MCP

Uno Platform MCP 强大功能的典型示例是将经典 Windows 标题栏替换为嵌入式标题栏的请求。

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);
}

跨平台覆盖

该应用可在 Windows、macOS、Web、Android、iOS 和 Linux 上运行。事实上，只要 Uno Platform 支持的目标平台，应用就能运行。Skia 渲染支持使这一切成为可能。

开发体验

我过去曾在非常具体的子任务中使用 AI。这次挑战中，我问自己是否能在不手写代码的情况下完成整个界面。结果表明，我可以借助 Visual Studio Copilot / Uno Platform Studio 和 Uno Platform Hot Design 实现这一点。

我并非天生的设计师，但在 AI 的帮助下 UI 看起来相当吸引人。令人印象深刻的是，我在两个大约三小时的晚上就完成了整个挑战 🤯。如果没有 AI / Uno 工具，这将需要更长的时间。