goa-design-system-mcp by twjeffery - MCP Server

GoA Design System AI Assistant

Experimental AI-powered prototyping tool for rapidly building Alberta Government service prototypes with the GoA Design System

⚠️ This is an experimental project — expect rough edges and evolving features as we explore AI-assisted government service prototyping.

Accelerate your prototyping and user testing workflow. Get instant help building interactive, coded prototypes using GoA Design System components — perfect for testing concepts with real users quickly.

🚀 Quick Start

Get up and running in 3 steps:

Launch in GitHub Codespaces

Click "Code" → "Codespaces" → "Create codespace"

Start the MCP Server
```
npm run start
```
Configure Claude Desktop (see setup guide) (or other tools that can integrate into an MCP)

That's it! Start asking Claude questions like "Build me a user registration form" or "How do I create a dashboard layout?"

🎯 What Can You Ask?

🏗️ Complete Application Building

"Build this design for me in React" (paste Figma screenshot + optional JSON export)
"Prototype a business registration application with all the forms"
"Build a citizen portal dashboard prototype with user profile, services, and notifications"
"Generate a multi-step application prototype with progress tracking"

📋 Forms & Data Collection

"Build a user registration form prototype with validation"
"Prototype a complex application form with multiple sections"
"Design a survey form prototype with conditional logic"
"Build an address collection form prototype with postal code validation"
"Generate a file upload form prototype with document requirements"

📊 Data Display & Management

"Show me how to prototype a data table with pagination and search"
"Build a user management interface prototype with edit/delete actions"
"Prototype a dashboard with statistics cards and recent activity"
"Design a document library prototype with filtering and sorting"
"Build a notification center prototype with read/unread states"

🎨 Layout & Navigation

"Help me prototype a dashboard layout with sidebar navigation"
"Prototype a service landing page with call-to-action sections"
"Design a multi-tab interface prototype for application status"
"Build a responsive layout prototype that works on mobile and desktop"
"Generate a progress workflow prototype with step indicators"

🔧 Component Integration

"What GoA components should I use for user authentication?"
"How do I combine containers and blocks for a complex layout?"
"Show me patterns for progressive disclosure in forms"
"What's the best way to handle form validation and error states?"
"How do I build accessible dropdown menus with search?"

🎨 Figma-to-Code Conversion

"Convert this Figma design to React prototype using GoA components" (attach design image)
"Turn this wireframe into coded prototype with Angular"
"Build this dashboard mockup as an interactive prototype"
"Generate accessible prototype code that matches this design system comp"

💡 Real-World Examples

Scenario: Product Manager needs a user registration flow

Ask: "Build a complete user registration prototype with email verification and profile setup"

Get: Rapid coded prototype with React/Angular components — perfect for user testing sessions and stakeholder demos.

Scenario: Developer converting Figma designs

Ask: "Convert this dashboard design to prototype code" + attach Figma screenshot + JSON export

Get: Interactive prototype that matches your design using GoA components. Great for testing user flows and gathering feedback.

Scenario: Designer exploring component patterns

Ask: "What are the best GoA component combinations for an admin interface prototype?"

Get: Comprehensive guidance on layout patterns and component hierarchies to quickly build admin interface prototypes for user testing.

⚙️ Setup Guide

Prerequisites

Node.js 16+
Claude Desktop App (download here)
GitHub account

Claude Desktop Setup

Open Claude Desktop Configuration
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the MCP Server Configuration

{
  "mcpServers": {
    "goa-design-system": {
      "command": "node",
      "args": ["path/to/your/goa-design-system-mcp/dist/index.js"],
      "env": {}
    }
  }
}

Replace path/to/your/ with your actual codespace or local directory path
Restart Claude Desktop

Verifying Setup

Ask Claude: "What GoA components are available for building forms?"

If you get detailed component information, you're all set! 🎉

🎯 Who This Helps

👩‍💻 Developers

Rapidly prototype complex component combinations for user testing
Learn GoA Design System implementation patterns through examples
Convert designs to testable prototypes quickly
Understand accessibility requirements for government services

👨‍🎨 Designers

Explore what's possible with existing GoA components
Get component recommendations for prototype scenarios
Validate design decisions with interactive prototypes
Test user flows with real coded interfaces

📋 Product Managers

Rapidly prototype ideas for user testing and stakeholder demos
Understand what's technically feasible with current components
Test user flows with interactive, clickable prototypes
Communicate feature concepts using real component examples

🧪 QA Teams

Understand expected component behaviors for testing scenarios
Prototype edge cases and error states
Test accessibility features in realistic user scenarios
Explore component interactions before full development

🛠️ Technical Details

Component Coverage

34 Components: Forms, navigation, data display, layout, feedback
71 Pattern Examples: Comprehensive implementation patterns for government services
2 System Docs: Setup guides, layout patterns
Complete API: Props, states, accessibility, examples

Framework Support

React: Full component library with TypeScript support
Angular: Complete wrapper components with proper integration
Web Components: Core implementation for any framework

AI Optimizations

Structured metadata for accurate component recommendations
71 comprehensive usage patterns for government service scenarios
Implementation examples optimized for rapid iteration
Government service context analysis for citizen/worker workflows
Accessibility guidance built into prototype suggestions

🔄 Development Status

⚠️ Experimental Status: This is an early-stage experiment in AI-assisted government service prototyping. Features and capabilities are actively evolving.

Current: Local MCP server setup (you run it on your machine)
Coming Soon: Hosted version for easier team access and collaboration

Feedback Welcome: We're learning what works best for government service teams — share your experience!

📚 Additional Resources

Ready to accelerate your government service prototyping? Start with the Quick Start guide above! 🚀

This is an experimental tool for rapid prototyping and user testing. Generated code is intended for prototype and concept validation purposes.