SyminUI
WPF UI kit. Build interface with Neomorphism style and C# UI which use MVU design.
Install / Use
/learn @syminomega/SyminUIREADME
SyminUI
SyminUI is a WPF UI kit. Build interface with Neomorphism style and C#UI in MVU pattern (WIP).
SyminUI 是 WPF 的 UI 组件库,并使用称为 C#UI 的 MVU 设计模式进行 UI 搭建(画饼中),默认样式为新拟态风格。
Preview 总览

⭐ Next Step
- Separate the theme and MVU architecture into different packages.
将主题文件和MVU架构拆分到不同的项目中。 - Add dark theme.
添加深色主题支持。
🧰 Quick Start 快速使用
- Add
SyminDataandSyminUIreference to your project.
在项目中添加SyminData和SyminUI引用. - Add these code to
App.xaml.
将以下代码添加至App.xaml中。
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/SyminUI;component/Themes/SyminLight.xaml"/>
<ResourceDictionary Source="pack://application:,,,/SyminUI;component/Themes/SyminBasic.xaml"/>
<ResourceDictionary Source="pack://application:,,,/SyminUI;component/Themes/SyminStyle.xaml"/>
<ResourceDictionary Source="pack://application:,,,/SyminUI;component/Themes/SyminExtra.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
🛠️ MVU Design (Working In Progress)
Introducing the new way to design the user interface.
使用全新的设计模式制作用户界面!
public class TestView : ViewContainer
{
/// <summary>
/// 提供视图
/// </summary>
public override IView ViewProvider => MainView;
readonly State<string> myText = "My Text";
//测试可切换控件
readonly State<IView> dynamicView = new Label("Label A");
readonly State<string> inputText = "Input Message Here";
readonly ObservableCollection<string> textCollection = new()
{
"1111",
"2222",
"3333"
};
public VStack MainView => new VStack
{
new HStack
{
new Label(myText),
new Button("Change Value Button")
.OnClick(() => { myText.Value = "Text Changed!"; })
},
new HStack
{
new Button("Open Canvas")
.OnClick(() =>
{
CanvasTestWindow testWindow = new();
testWindow.Show();
}),
new Label("Label In HStack"),
}.HorizontalAlignment(HorizontalAlignment.Center),
new Grid()
{
new ContentView(dynamicView)
.GridLayout(0, 0),
new Button("Change Content")
.OnClick(() => { dynamicView.Value = new Label("Changed View"); })
.GridLayout(0, 1),
new InputField(inputText)
.GridLayout(1, 0),
new Button("Show Input Value")
.OnClick(() => MessageBox.Show(inputText.Value))
.GridLayout(1, 1),
}
.Cols("2*", ("*", 200, 400))
.Rows("auto", "auto"),
new Button("Add List Item")
.OnClick(TestCollection),
new ItemsView()
.Foreach(textCollection, x => new HStack
{
new Label("List Items"),
new Button(x),
})
};
private void TestCollection()
{
textCollection.Insert(1, "Inserted Item");
}
}

⚠ Known Issues 已知问题
- Slider view tick placement does not work.
滑条的指示器样式未设计。 - MenuItem disabled style is not finished.
菜单按钮禁用样式尚未完善。 - ListBox Header may not fit the row length.
ListBox的头部可能和内容没法对齐。
📄 License 许可证
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.0kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
