SuperAPI AI 工具集

igniteui-angular-generate-from-image-design

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:依据设计图片实现 Ignite UI Angular 应用视图,借助 MCP 服务器(igniteui-cli、igniteui-theming、angular-cli)完成组件发现、主题生成与布局实现。仅适用于 Angular。

主要能力:分析设计图中的区域与 UI 模式;用 list_components 查找匹配组件;用 get_doc 查阅组件 API;用 create_palette/create_theme 等生成主题;用 set_size、set_spacing、set_roundness 微调视觉;构建、测试、运行并与图对比验证。

必要用法:编码前先分析图片、阅读 references/component-mapping.md 与 references/gotchas.md,并验证 MCP 服务器可用(调用 list_components 与 detect_platform)。若不可用,在项目根目录运行 npx -y igniteui-cli ai-config(或 ig ai-config),请用户重载编辑器或代理会话后停止;仅在用户明确要求时才继续,并回退到参考文件与手动 Sass 工作流,将未验证的 API 细节标注为 unverified。主题流程:先查 theming://guidance/colors/rules,再提取颜色、elevation、typography 并调用 create_theme;对每个核心组件调用 get_component_design_tokens 与 create_component_theme。图表、地图、仪表、迷你图需额外安装 DV 包,安装前需获批准。

适用场景:将设计稿转为 Angular 界面、需要 Ignite UI 组件与主题一致性的视图实现。

限制:仅支持 Angular;DV 组件无 Sass 设计令牌,需通过组件输入设置;文档目录仅覆盖部分组件;终端环境下视觉对比需用户反馈。具体收费、价格、平台与效果资料暂未提供。