Claude: Create a Power Pages Site

Key insights

• county 311, single-page application (SPA), and Power Pages: Session 2 shows how to build a modern county 311 SPA prototype using VS Code and Claude Code.
  You scaffold a clean single-page experience first, then refine it before deploying to Power Pages.
• VS Code, /create-site, and dev server: Open your project folder, run the create-site prompt, approve Claude’s commands, and spin up a local dev server to preview the site.
  Claude scaffolds files and runs commands while you confirm each step.
• natural language, accessibility (WCAG), and use my location: Make UI changes by describing them in plain language and sending screenshots; add features like a “use my location” button.
  Perform an accessibility pass to improve contrast and meet basic WCAG needs.
• mock data and Dataverse: Use mock data in the local prototype to test map filters and flows.
  After iterating, deploy the site to Power Pages and connect it to Dataverse for real data and security.
• Claude Pro license and prerequisites: The feature requires a Claude Pro license to run.
  You also need Node.js 18+, PAC CLI, Azure CLI, and an authenticated Power Platform environment for deployment.
• speed, code-first, and agent approvals: The workflow speeds up scaffolding and supports a code-first SPA approach while AI agents handle routine tasks.
  Monitor credit limits, approve agent actions, and test locally before pushing to production.

Video at a glance

In a recent tutorial video by Pragmatic Works, the host demonstrates how to build a modern "county 311" prototype using VS Code and Claude Code. The session focuses on creating the site locally, iterating quickly with natural language prompts, and preparing the prototype for deployment to Power Pages. Importantly, the video is Session 2 in a short series and picks up after the prerequisites have been installed, so viewers see the practical steps that follow setup. Overall, the piece serves as a step-by-step walkthrough aimed at code-first developers who want to combine AI assistance with familiar Developer Tools.

Setting up and scaffolding the site

First, the video walks viewers through opening a project folder in VS Code and running a long, descriptive prompt to the Claude agent to scaffold the site. Then, the agent executes commands and requests permissions, giving the developer options to approve each action as the project structure is created. Consequently, the process reduces repetitive setup work while keeping the developer in control, since approvals and prompts require human confirmation. In addition, the presenter explains how to manage limited credits on the free plan and how those limits can affect the pace of automation.

Next, the tutorial shows how to launch a local development server so designers and stakeholders can preview the single-page application experience. Viewers see mock data loaded into the prototype and can interact with a working map and list of issues, which helps communicate the concept before any production deployment. This quick preview workflow supports rapid validation and early feedback, and it also highlights how the AI scaffolding integrates with existing development tooling like local dev URLs. As a result, teams can test UX ideas fast and iterate without waiting for full cloud deployments.

Iterating with natural language and screenshots

After scaffolding, the session moves into iterative refinement using plain English prompts and screenshot-based requests to Claude. For instance, the presenter asks the agent to remove certain UI elements, add a "use my location" button, and filter map categories based on user needs, demonstrating a conversational pairing model. Furthermore, the use of screenshots to point out UI flaws lets the AI target specific visual fixes, which speeds up small design changes that otherwise require manual CSS or component edits. This approach blends designer intent with developer control and helps teams prototype interactions quickly.

Moreover, the presenter demonstrates how to run an accessibility pass to improve color contrast and meet basic WCAG needs, showing that AI assistance can be useful beyond feature scaffolding. The accessibility work includes adjusting contrast and testing keyboard and screen-reader interactions, which are essential for public-facing civic sites like a county 311 portal. Thus, the video highlights how incremental accessibility improvements can be incorporated early in the design cycle rather than deferred to later. In turn, this raises the quality of the prototype and reduces rework before wider deployment.

Preparing for deployment and data integration

Finally, the tutorial lays out the next steps toward production by preparing the prototype for deployment to Power Pages and wiring it to Microsoft Dataverse. The presenter explains that the local prototype uses mock data initially, but that the AI-driven workflow can create data models and propose relationships for real Dataverse tables in a later session. Consequently, teams can validate UX flows first and then let the AI assist with data modeling and security configuration when they are ready to connect to live systems. This staged approach helps avoid premature commitment while still planning for real integrations.

Tradeoffs and practical challenges

While the video shows clear productivity gains, it also surfaces tradeoffs and challenges that teams should weigh carefully. For example, the presenter notes that the most advanced features require a pro license for Claude, so organizations must consider the cost against the time savings and increased output. Additionally, relying on agentic scaffolding can speed development but may obscure implementation details, which makes deep debugging or custom business logic more challenging for developers who need full control.

Security and governance also present practical hurdles: even though the AI can suggest Dataverse schemas and permission settings, teams still must verify those choices to meet organizational policies and compliance needs. Finally, the presenter emphasizes that iterative prompting works best when paired with disciplined reviews, tests, and accessibility checks, so teams should balance rapid AI-led changes with human oversight. In short, the tutorial demonstrates powerful workflows, but it also reminds viewers to manage costs, governance, and quality as they adopt AI-assisted development techniques.

Keywords

Creating a Power Page with Claude tutorial, Power Page SEO guide, Build a site with Claude AI, Claude AI website creation tutorial, Power Page content strategy, Creating the site session 2 walkthrough, How to create a Power Page, Claude for website builders