Generate 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.
- Replicate a UI mockup or wireframe as Canvas App YAML
- Improve an existing Canvas App screen (modernize spacing, upgrade controls, add hover/focus states)
- Build from scratch from a text description alone
- Enforces Power Apps YAML rules (PA2105 / PA2108 / PA1001) automatically
- Saves output to
canvas-apps-ui-gen-output/in your current working directory and displays it inline when small (< 400 lines)
- Claude Code or GitHub Copilot CLI
- Node.js 18+
- Power Apps Studio (to paste and run the generated YAML)
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-toolsThen install the plugin:
/plugin install canvas-apps-ui-gen@ToluVictor/canvas-apps-toolsOpen a new Claude Code instance to activate the plugin, then run the skill:
/canvas-apps-ui-genIf 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-genThen run the skill inside Claude Code:
/canvas-apps-ui-genThis 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.pngOr 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:
- Open the generated YAML file in
canvas-apps-ui-gen-output/in your current working directory - Press
Ctrl+AthenCtrl+Cto copy everything - In Power Apps Studio, right-click the target screen or container in the tree view
- Select Paste code
- Validate and adjust as needed
The skill runs a multi-agent pipeline internally:
- Detects input mode and parses the image or text
- Describes the layout and asks a few quick questions before generating
- Runs three specialist agents in parallel — layout & sizing, controls, and styling
- An assembly agent merges their outputs, runs QA checks, and writes the final YAML
| 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. |
- Fork this repo
- Add or update content under
skills/canvas-apps-ui-gen/ - Submit a pull request
MIT — see LICENSE
By Tolu Victor Sanwoolu
