Welcome back to our series on creating beautiful Microsoft Power Pages websites using Claude Code and AI-powered development. In this second session, we move beyond prerequisites and begin building a real-world project: a County 311 citizen service portal.
If you missed Session 1, be sure to complete the setup steps first before continuing.
What You’ll Build in This Session
In this tutorial, we create a modern County 311 service request system using:
- Microsoft Power Pages
- Claude Code
- Dataverse
- VS Code
- Node.js
- AI-assisted rapid development workflows
This sample portal allows citizens to:
- Report potholes
- Request trash pickup
- Submit sidewalk repair requests
- Report broken street lights
- Track service request status
- View issue maps
- Search a knowledge base
Instead of using a traditional Power Pages template design, we build a beautiful single-page application (SPA) with a polished modern interface.
Why Use Claude Code for Power Pages Development?
Traditional Power Pages customization can take days or weeks. Claude Code dramatically speeds up development by helping generate:
- Front-end layouts
- Navigation systems
- Forms
- Accessibility fixes
- Styling updates
- Interactive components
- Deployment-ready structures
Even users with little coding experience can build advanced portals using conversational prompts.
Step 1: Create Your Claude Account
Before starting, create an account at Claude.ai.
Free Plan Notes
The free plan includes limited credits. During large builds, you may run out of usage temporarily.
Options include:
- Wait for credits to refresh
- Upgrade to paid tiers
- Use pay-as-you-go billing
For large website generation projects, paid plans often provide a smoother experience.
Step 2: Open Your Project Folder in VS Code
Create your project folder, for example:
C:\Projects\311
Then in Visual Studio Code:
- Open VS Code
- Select Open Folder
- Choose your project directory
- Confirm trust settings
You should also verify these extensions are installed:
- Claude extension/icon
- Power Platform tools
Step 3: Run the AI Prompt to Create the Site
Using Claude Code, paste in your long-form project prompt to generate the site.
This prompt typically includes:
- Government branding
- Portal pages
- Forms
- Responsive layout
- Accessibility standards
- Multilingual support
- Data integration placeholders
Once submitted, Claude begins generating the project structure.
What Happens During Generation?
During the build process, Claude may request permissions such as:
- Running Bash commands
- Launching Node.js
- Installing packages
- Opening folders
- Starting development servers
Approve these requests as needed.
Typical build time:
7 to 12 minutes
Step 4: Preview Your Local Development Site
Once complete, Claude usually launches a local development URL such as:
localhost:3000
Your site may include:
Homepage
Modern hero banner, branding, navigation, calls to action
Services Page
- Pothole reporting
- Sidewalk repairs
- Street light outages
- Trash collection
Request Tracking
Users can track service requests by ticket number.
Interactive Maps
Citizens can view open public issues.
Contact Page
Department information and support contacts.
AI Websites Are Non-Deterministic
Every AI-generated version may look slightly different.
That is completely normal.
The same prompt may generate:
- Different layouts
- Different color palettes
- Different component spacing
- Different imagery
This flexibility is actually one of AI development’s biggest strengths.
Step 5: Modify the Site with Natural Language Prompts
Once the first version is ready, you can refine it instantly.
Example: Remove Search Bar
Prompt:
Remove the search bar from the hero header.
Claude updates the code automatically.
Example: Filter Map Categories
Prompt:
Remove bin replacement and trash pickup from the public request map.
Useful for protecting privacy or removing irrelevant categories.
Screenshot-Based Editing (Powerful Feature)
You can also paste screenshots into Claude and request UI fixes.
Examples:
- Move logo to top-left
- Fix spacing issue
- Add larger buttons
- Improve mobile layout
- Change hero image alignment
This makes design iteration incredibly fast.
Step 6: Add “Use My Location” Feature
For service requests, location matters.
Prompt example:
Add a Use My Current Location button.
Claude can wire browser geolocation so users can quickly drop a map pin for reporting issues.
Great for:
- Potholes
- Water leaks
- Broken lights
- Sidewalk damage
Step 7: Improve Accessibility (ADA / WCAG Compliance)
Government websites must meet accessibility standards.
Claude can scan and fix:
- Low contrast buttons
- Missing labels
- Poor keyboard navigation
- Tab order issues
- Badge contrast failures
- Form accessibility issues
Example prompt:
Scan site for accessibility issues and fix WCAG problems.
This can save weeks of manual remediation.
Why This Workflow Is Revolutionary
Instead of manually building every component, you can now:
- Generate a full site in minutes
- Iterate with stakeholders live
- Improve accessibility instantly
- Prepare for Dataverse integration
- Deploy to Power Pages quickly
This dramatically reduces development time.
What’s Coming Next (Session 3)
In the next session, the site will be deployed to Microsoft Power Pages and connected to Dataverse.
Upcoming topics:
- Deploying SPA into Power Pages
- Hosting inside Microsoft ecosystem
- Connecting live Dataverse tables
- Authentication providers
- Citizen login system
- Real ticket creation workflows
Final Thoughts
Using Claude Code + Power Pages is changing how portals are built.
You no longer need weeks of development cycles to launch modern government, business, or citizen-facing websites.
With the right prompts, you can go from idea to polished prototype in under an hour.
Need Help with Power BI, Power Platform, or AI Solutions?
Explore expert training and consulting here:
