Build government websites with AI + UX4G
Copy the universal prompt below, paste it into any IDE AI (Cursor, Windsurf, GitHub Copilot, Kiro), attach your BRD — and generate a production-ready, accessible, UX4G-powered website in minutes.
Two prompts, one ecosystem
Write a BRD once. Use it with the Figma Make prompt to generate designs, or with the CodeGen prompt to generate working code — or both, in sequence.
Design Path
Figma Make + UX4G Make Kit
Generate complete, themed design screens in Figma. Produces mobile + desktop frames, dark mode, regional language variants, and all interactive states — annotated with BRD traceability.
Code Path
Any AI IDE + ux4g-web-components
Generate a deployable Next.js application using UX4G components. Produces routed pages, CSS token system, mock data, i18n, form validation, and accessibility — with a 5-round self-audit.
Prompts
Download and use with your BRD for AI-powered design or development.
Figma Make — Universal BRD-to-Design Prompt
For Figma Make + UX4G Component Library
Paste into Figma Make's system context field along with your BRD and the UX4G Figma component library. Produces complete, themed, accessible design screens — not wireframes. Includes section background planning, typography hierarchy rules, color application rules, and a 9-step quality checklist. Uses the UX4G Make Kit built from the ux4g-web-components npm package.
IDE Universal Code Generation Prompt
For Kiro, Cursor, GitHub Copilot, Claude Code
Paste into your AI code editor as a system prompt or rules file. Produces a fully functional, accessible, responsive Next.js 14 application using ux4g-web-components — not a static prototype. Includes project structure, CSS token system, component standards, mock data layer, i18n setup, and a 5-round self-audit protocol.
BRD Template
The structured requirements format both prompts are designed to consume. Fill it out, attach it, and let the AI handle the rest.
UX4G BRD Template
Structured requirements format for AI consumption
A comprehensive Business Requirements Document template designed to pair with both the Figma Make and CodeGen prompts. Covers product overview, personas, user journeys, page inventory, functional requirements, design & brand requirements, accessibility, and more. Fill this out and attach it to either prompt for best results.
What the BRD template covers
Sample BRDs
Complete, production-quality BRDs you can use for testing the prompts or as reference when writing your own.
Sample BRD — Join Indian Navy
Recruitment portal revamp — complete BRD example
A complete, production-quality BRD for the Join Indian Navy recruitment portal (joinindiannavy.gov.in). Includes 5 detailed personas, 3 user journeys with error recovery, 25+ page inventory, full functional requirements, payment flows, multilingual support, and design specifications with Navy Blue + Gold color scheme.
Sample BRD — Incredible India Tourism Portal
National tourism portal — discovery & planning
A complete BRD for the Incredible India tourism portal (incredibleindia.org). Covers destination discovery, itinerary builder, interactive maps, visa information, verified operator directory, accessible tourism, and 500+ destination pages. Demonstrates a content-heavy, photography-driven product with international audience requirements.
Sample BRD comparison
| Feature | Join Indian Navy | Incredible India Tourism |
|---|---|---|
| Product type | Recruitment portal | Tourism discovery portal |
| Primary action | Check eligibility → Apply | Discover → Plan itinerary |
| Forms & payment | ✓ Multi-step form, OTP, payment | ✗ No forms (referral model) |
| Itinerary / builder | ✗ | ✓ Day-by-day itinerary builder |
| Maps | ✗ | ✓ Interactive map discovery |
| Personas | 5 (candidate, parent, admin) | 5 (domestic, international, accessible, admin) |
| Pages | 25+ | 30+ |
| Photography | Official Navy media only | Stunning destination photography |
| Color scheme | Navy Blue #003087 + Gold #C8960C | Red #E63329 + Saffron #FF8C00 + Green #1A472A |
| Languages at launch | English + Hindi | English + Hindi |
Step-by-step workflows
Follow these steps for each path.
Write your BRD
Same BRD template works for both design and code generation.
Set up your IDE
Install the prompt as a rules file: .kiro/rules/product.md (Kiro), .cursorrules (Cursor), or AGENTS.md (Copilot).
Install UX4G package
Run npm install ux4g-web-components in your project.
Reference your BRD
Use @BRD.md or #BRD.md in your first message to the AI.
Send the trigger message
The prompt includes a trigger message. The AI will extract requirements, generate foundation files, then build pages with full self-audit.
IDE-specific setup
.kiro/rules/product.md.cursorrulesAGENTS.mdCLAUDE.mdWhat gets generated
Complete project structure
Pages, routing, components, styles, tokens, mock data, i18n — all wired up and building.
UX4G components throughout
Every UI element uses the correct UX4G component — Button, Card, Alert, Badge, Stepper, Timeline, and 50+ more.
WCAG 2.1 AA from day one
Skip links, ARIA, keyboard navigation, focus rings, and color contrast — built in, not bolted on.
4 frameworks supported
React (primary), Angular, Flutter, Web Components — specify in your BRD and the prompt adapts.
Hindi + English ready
i18n structure with next-intl / react-i18next. No hardcoded strings. Add languages without restructuring.
Dark mode via tokens
UX4G CSS custom properties handle light/dark automatically. No extra Tailwind classes needed.