By toluvictor
Generate paste-ready YAML for Power Apps Canvas Apps UI from UI mockups, screenshots of existing screens, or text descriptions. Replicate existing designs, improve screens, or build new ones to accelerate Canvas Apps development workflows.
npx claudepluginhub toluvictor/canvas-apps-tools --plugin canvas-apps-ui-genGenerate paste-ready Power Apps Canvas App YAML from screenshots, mockups, or text — directly inside Claude Code.
This plugin gives Claude Code a single skill — canvas-apps-ui-gen — that acts as a Power Apps Canvas App developer. Point it at a mockup, describe a screen, or paste a screenshot of an existing app and it produces YAML you can paste straight into Power Apps Studio.
canvas-apps-ui-gen-output/ in your current working directory and displays it inline when small (< 400 lines)Choose whichever method fits your workflow. Both end with the same command: /canvas-apps-ui-gen.
Run these commands inside Claude Code:
Add this repo as a marketplace, then install the plugin:
/plugin marketplace add ToluVictor/canvas-apps-tools
Then install the plugin:
/plugin install canvas-apps-ui-gen@ToluVictor/canvas-apps-tools
Open a new Claude Code instance to activate the plugin, then run the skill:
/canvas-apps-ui-gen
If you only want this one skill without installing the full plugin, run this in your terminal:
npx skills add ToluVictor/canvas-apps-tools --skill canvas-apps-ui-gen
Then run the skill inside Claude Code:
/canvas-apps-ui-gen
This uses the skills.sh Agent Skills CLI. The skill is installed into your Claude Code skills folder and is available immediately in any new session.
Once installed, run /canvas-apps-ui-gen and Claude will ask which mode you want:
Pass a file path as an argument:
/canvas-apps-ui-gen C:\path\to\mockup.png
Or paste the image directly into the chat and run /canvas-apps-ui-gen — Claude detects it automatically.
Run /canvas-apps-ui-gen with no arguments, choose Build from scratch, and describe what you want:
"Sales order entry with a search bar, a data grid, and a totals row at the bottom"
Paste a screenshot of your current Power Apps screen into the chat, run /canvas-apps-ui-gen, and choose Improvement. Describe the changes you want and Claude will modernize the layout, controls, and styling.
When generation finishes, Claude shows a link to the output file and paste instructions. The general flow is:
canvas-apps-ui-gen-output/ in your current working directoryCtrl+A then Ctrl+C to copy everythingThe skill runs a multi-agent pipeline internally:
| Symptom | Fix |
|---|---|
/canvas-apps-ui-gen not recognized | Open a new Claude Code instance; verify the install with /plugin → Installed tab |
| No output file appears | Check canvas-apps-ui-gen-output/ in your current working directory; rerun with a clearer description or smaller scope |
| YAML shows errors in Power Apps Studio | Copy from the file directly (do not retype); if errors persist, rerun with a simpler prompt and fewer nested controls |
| PA2105 version warning | Claude will self-heal the version number if you mention the warning in the same session |
| "The function * returned a non-finite number." error banner appears after pasting YAML | This occurs when the app contains a Gallery whose Items property could not be evaluated at paste time. Save the page, then reload Canvas App Studio — the error will clear on reload. |
skills/canvas-apps-ui-gen/MIT — see LICENSE
By Tolu Victor Sanwoolu
Build Power Apps Canvas Apps using the Canvas Authoring MCP server.
Share bugs, ideas, or general feedback.
Solution Architect for the Microsoft Power Platform, turning business requirements into functioning Power Platform solution architectures.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
機能要件から画面構成・ワイヤーフレームまでを段階的に落とし込む Agent Team スキル。6つのエージェント(flow-architect, info-analyst, wireframe-designer, user-liaison, ux-critic, validator)が5ステップで画面設計を行い、PlantUML Salt でワイヤーフレームを生成する。PostToolUse Hook で .puml ファイルの自動バリデーションも提供
Design superpowers for Claude Code — 35 skills that teach your agent to ideate, research, generate, iterate, and ship beautiful UIs using Google Stitch MCP.
StitchFlow turns product briefs into Stitch UI screens, variants, Tailwind-friendly HTML, and screenshots. Works across Codex, Claude Code, and OpenClaw.