NYS Foster-Adoptive Parent Application Demo

A demonstration of AI-assisted development using Claude Code and the NYS Design System MCP server.

View Live Demo →

About This Project

This project demonstrates how quickly a functional web application can be built using AI-assisted development paired with a well-structured design system. The entire application was built from a PDF form in approximately 10 minutes.

Watch me turn a PDF into a web application in 10 minutes using Claude Code and the NYS Design System MCP server.

Watch the video on LinkedIn →

Why This Matters

Design systems are infrastructure for reliable AI-assisted development work.

Instead of just fixing code after the fact, we're refining the context we pass to AI so the outputs get better by default. The NYS Design System MCP server provides structured information about components, tokens, and patterns that enables AI to generate production-quality code that follows established standards.

Features

• 8-step application form with validation and progress tracking
• Stepper navigation showing completed and current steps
• Repeatable sections for household members, references, employment history
• Application review page with edit capabilities
• Print-friendly styles for saving copies
• Accessible components using NYSDS web components

NYS Design System MCP Server

The Model Context Protocol (MCP) server for the NYS Design System provides AI assistants with structured access to component documentation, design tokens, and usage patterns.

Available Tools

Tool	Description
find_components	Search for NYSDS components by name or description. Omit query to list all components.
get_component	Get full documentation for a specific component including properties, events, slots, CSS custom properties, and usage examples.
get_tokens	Get design tokens by category (color, font, space, etc.), layer (primitive, applied, theme), or list all available token categories and agency themes.
find_tokens	Search for design tokens by CSS variable name, value, or description.
get_token_info	Get detailed information about a specific token, optionally validating its usage in a specific context (text, background, border, icon).
get_token_graph	Get the token dependency graph showing which tokens reference which and which are most used.
validate_component_api	Validate that provided attributes/properties are valid for a given NYSDS component.
get_utility_classes	Get NYSDS utility class reference for layout, spacing, typography, and responsive design.
get_guide	Get guides for installation, form validation, styles, fonts, page structure, or framework-specific setup (Angular, React, Vue, .NET, Drupal, vanilla JS).

How It Works

When an LLM uses the MCP server, it receives structured information about:

• Component APIs — Properties, events, slots, and their types/defaults
• Design Tokens — CSS variables for colors, spacing, typography with semantic meanings
• Usage Patterns — Examples and best practices for common scenarios
• Validation — Real-time feedback on correct component usage

This context enables AI to generate code that:

• Uses correct component attributes and values
• Follows design system conventions
• Applies appropriate tokens for styling
• Handles accessibility requirements automatically

Technology Stack

• Vite — Build tool and dev server
• TypeScript — Type-safe JavaScript
• NYS Design System — Web components and design tokens
• GitHub Pages — Static hosting

Local Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

Learn More

• NYS Design System Documentation
• NYS Design System GitHub
• Model Context Protocol
• Claude Code

License

This is a demonstration project for the NYS Design System.