SuperAPI AI 工具集

igniteui-blazor-generate-from-image-design

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:依据设计图实现 Ignite UI Blazor 应用视图。流程强制按序:分析图片并识别可见区域与 UI 模式;阅读 references/component-mapping.md;仅在组件可用性或主题依赖时检查 NuGet 包(IgniteUI.Blazor.Lite、IgniteUI.Blazor.GridLite 提供通用组件与轻量网格,IgniteUI.Blazor / IgniteUI.Blazor.Trial 提供功能丰富的网格与图表);主题使用 igniteui-theming MCP 工具及专门的 igniteui-blazor-theming 技能,不凭记忆写样式;选用组件前对每个组件族调用 get_doc;写代码前完整阅读 references/gotchas.md 并逐条核对,此为阻塞步骤。

主要能力与用法:用 list_components(framework: "blazor")按 UI 模式发现组件,用 get_doc、search_docs 查 API;主题先检查宿主页与全局 CSS 是否已有主题,无则用 create_palette(platform: "blazor",output: "css",不用会生成需编译 Sass 的 create_theme),必要时 create_custom_palette、create_elevations、create_typography;对核心组件先 get_component_design_tokens,再从图片取对应值,用 create_component_theme 只传与全局主题不同的 token,生成 CSS 放在全局文件或 .razor.css 中并加 ::deep,仅当 token 无法实现时才用 ::part();DV 组件(图表、地图、仪表、迷你图)无 CSS 设计 token,改由组件参数设置,并在 Program.cs 用 builder.Services.AddIgniteUIBlazor 注册所用模块。实现时创建 .razor 与 .razor.css,使用类型化 C# 模拟数据,遵循 @using IgniteUI.Blazor.Controls、[Parameter]、EventCallback<T>、@ref、@bind-Value、<Template>、@inject 等约定,最后用 set_size、set_spacing、set_roundness 校准视觉并构建、测试、比对图片。

限制:仅限 Blazor;Lite 版不含图表、地图、仪表、完整网格与 Dock Manager,需许可或试用包;缺包时须先确认包与版本并获批准再改 .csproj。其他细节资料未提供。