page-design-guide-mcp 1.0.6 → 1.0.8

package/README.md

@@ -1,141 +1,141 @@
-# Page Design Guide MCP Server
-
-An MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. This server focuses on teaching design principles and best practices rather than providing code templates.
-
-## Features
-
-- [layout] **Layout Guidance** - When and how to use F-Pattern, Z-Pattern, Bento Grid, etc.
-- [palette] **Color Psychology** - Color meanings, scheme types, and palette recommendations
-- [type] **Typography** - Hierarchy, font pairings, and readability best practices
-- [grid] **Responsive Design** - Mobile-first strategies and breakpoint guidance
-- [layers] **Visual Hierarchy** - Principles of contrast, whitespace, alignment
-- [component] **Component Guidance** - Design principles for buttons, cards, forms, navigation
-- [motion] **Animation Principles** - Timing, purpose, and performance considerations
-- [accessibility] **Accessibility** - WCAG compliance, contrast ratios, semantic HTML
-- [sparkles] **Modern Trends** - Current design trends and when to use them
-- [check] **Design Review** - Analyze design descriptions and get recommendations
-
-## Installation
-
-Install the package globally via npm:
-
-```bash
-npm install -g page-design-guide-mcp
-```
-
-Or install it locally in your project:
-
-```bash
-npm install page-design-guide-mcp
-```
-
-## Setup with Claude Desktop
-
-Add this to your Claude Desktop configuration file:
-
-**MacOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`  
-**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
-
-### Option 1: Global Installation (Recommended)
-
-```json
-{
-  "mcpServers": {
-    "page-design-guide": {
-      "command": "npx",
-      "args": ["-y", "page-design-guide-mcp"]
-    }
-  }
-}
-```
-
-### Option 2: Local Installation
-
-```json
-{
-  "mcpServers": {
-    "page-design-guide": {
-      "command": "node",
-      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
-    }
-  }
-}
-```
-
-Replace `/absolute/path/to` with the actual path to your project's `node_modules` directory.
-
-## Usage
-
-Once connected, you can ask Claude questions like:
-
-- "What design principles should I follow for this landing page?"
-- "Which layout works best for a portfolio site?"
-- "What colors convey trust and professionalism?"
-- "How should I structure the hero section?"
-- "What are common mistakes to avoid with typography?"
-- "How do I make this accessible?"
-- "Review my design approach for this e-commerce page"
-
-## Available Tools
-
-### `get_design_principles`
-Get foundational design principles (hierarchy, whitespace, contrast, alignment, etc.) with guidelines and common mistakes to avoid.
-
-### `get_layout_guidance`
-Get layout recommendations based on page type. Explains when and why to use F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc.
-
-### `get_color_guidance`
-Get color psychology, scheme types (monochromatic, complementary, etc.), and palette recommendations based on mood and industry.
-
-### `get_typography_guidance`
-Get typography hierarchy, font pairing recommendations for different styles, and best practices for readable text.
-
-### `get_section_guidance`
-Get guidance for specific page sections: header, hero, features, testimonials, pricing, cta, footer, faq - including purpose, structure, and best practices.
-
-### `get_responsive_guidance`
-Get responsive design principles, breakpoint strategies, and mobile-first best practices.
-
-### `get_component_guidance`
-Get design guidance for UI components: buttons, cards, forms, navigation, modals, icons - including sizing, states, and accessibility.
-
-### `get_animation_guidance`
-Get animation principles, timing guidelines, and performance considerations for different types of motion.
-
-### `get_accessibility_guidance`
-Get accessibility requirements including contrast ratios, focus states, semantic HTML, and motion preferences.
-
-### `get_modern_trends`
-Get current web design trends (2024-2026) with guidance on when and how to use them appropriately.
-
-### `review_design_approach`
-Describe your design and get feedback with scores, identified strengths, concerns, and recommendations.
-
-## Project Structure
-
-```
-page-design-guide-mcp/
-├── src/
-│   └── index.ts          # Main MCP server code
-├── build/                # Compiled JavaScript (generated)
-├── package.json
-├── tsconfig.json
-└── README.md
-```
-
-## Development
-
-For development with auto-rebuild on changes:
-
-```bash
-npm run watch
-```
-
-## Requirements
-
-- Node.js >= 18.0.0
-- Claude Desktop app
-
-## License
-
+# Page Design Guide MCP Server
+
+An MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. This server focuses on teaching design principles and best practices rather than providing code templates.
+
+## Features
+
+- [layout] **Layout Guidance** - When and how to use F-Pattern, Z-Pattern, Bento Grid, etc.
+- [palette] **Color Psychology** - Color meanings, scheme types, and palette recommendations
+- [type] **Typography** - Hierarchy, font pairings, and readability best practices
+- [grid] **Responsive Design** - Mobile-first strategies and breakpoint guidance
+- [layers] **Visual Hierarchy** - Principles of contrast, whitespace, alignment
+- [component] **Component Guidance** - Design principles for buttons, cards, forms, navigation
+- [motion] **Animation Principles** - Timing, purpose, and performance considerations
+- [accessibility] **Accessibility** - WCAG compliance, contrast ratios, semantic HTML
+- [sparkles] **Modern Trends** - Current design trends and when to use them
+- [check] **Design Review** - Analyze design descriptions and get recommendations
+
+## Installation
+
+Install the package globally via npm:
+
+```bash
+npm install -g page-design-guide-mcp
+```
+
+Or install it locally in your project:
+
+```bash
+npm install page-design-guide-mcp
+```
+
+## Setup with Claude Desktop
+
+Add this to your Claude Desktop configuration file:
+
+**MacOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`  
+**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+### Option 1: Global Installation (Recommended)
+
+```json
+{
+  "mcpServers": {
+    "page-design-guide": {
+      "command": "npx",
+      "args": ["-y", "page-design-guide-mcp"]
+    }
+  }
+}
+```
+
+### Option 2: Local Installation
+
+```json
+{
+  "mcpServers": {
+    "page-design-guide": {
+      "command": "node",
+      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
+    }
+  }
+}
+```
+
+Replace `/absolute/path/to` with the actual path to your project's `node_modules` directory.
+
+## Usage
+
+Once connected, you can ask Claude questions like:
+
+- "What design principles should I follow for this landing page?"
+- "Which layout works best for a portfolio site?"
+- "What colors convey trust and professionalism?"
+- "How should I structure the hero section?"
+- "What are common mistakes to avoid with typography?"
+- "How do I make this accessible?"
+- "Review my design approach for this e-commerce page"
+
+## Available Tools
+
+### `get_design_principles`
+Get foundational design principles (hierarchy, whitespace, contrast, alignment, etc.) with guidelines and common mistakes to avoid.
+
+### `get_layout_guidance`
+Get layout recommendations based on page type. Explains when and why to use F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc.
+
+### `get_color_guidance`
+Get color psychology, scheme types (monochromatic, complementary, etc.), and palette recommendations based on mood and industry.
+
+### `get_typography_guidance`
+Get typography hierarchy, font pairing recommendations for different styles, and best practices for readable text.
+
+### `get_section_guidance`
+Get guidance for specific page sections: header, hero, features, testimonials, pricing, cta, footer, faq - including purpose, structure, and best practices.
+
+### `get_responsive_guidance`
+Get responsive design principles, breakpoint strategies, and mobile-first best practices.
+
+### `get_component_guidance`
+Get design guidance for UI components: buttons, cards, forms, navigation, modals, icons - including sizing, states, and accessibility.
+
+### `get_animation_guidance`
+Get animation principles, timing guidelines, and performance considerations for different types of motion.
+
+### `get_accessibility_guidance`
+Get accessibility requirements including contrast ratios, focus states, semantic HTML, and motion preferences.
+
+### `get_modern_trends`
+Get current web design trends (2024-2026) with guidance on when and how to use them appropriately.
+
+### `review_design_approach`
+Describe your design and get feedback with scores, identified strengths, concerns, and recommendations.
+
+## Project Structure
+
+```
+page-design-guide-mcp/
+├── src/
+│   └── index.ts          # Main MCP server code
+├── build/                # Compiled JavaScript (generated)
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## Development
+
+For development with auto-rebuild on changes:
+
+```bash
+npm run watch
+```
+
+## Requirements
+
+- Node.js >= 18.0.0
+- Claude Desktop app
+
+## License
+
 MIT

package/build/data/accessibilityGuidance.d.ts

@@ -0,0 +1,17 @@
+export declare const accessibilityGuidance: {
+    colorContrast: {
+        normalText: string;
+        largeText: string;
+        uiComponents: string;
+    };
+    focusStates: {
+        requirement: string;
+        implementation: string;
+    };
+    semanticHTML: {
+        landmarks: string;
+        headings: string;
+    };
+    bestPractices: string[];
+};
+//# sourceMappingURL=accessibilityGuidance.d.ts.map

package/build/data/accessibilityGuidance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibilityGuidance.d.ts","sourceRoot":"","sources":["../../src/data/accessibilityGuidance.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;CAmBjC,CAAC"}

package/build/data/accessibilityGuidance.js

@@ -0,0 +1,22 @@
+// Accessibility Guidance
+export const accessibilityGuidance = {
+    colorContrast: {
+        normalText: "4.5:1 minimum ratio",
+        largeText: "3:1 minimum (18px+ or 14px bold)",
+        uiComponents: "3:1 for interactive elements"
+    },
+    focusStates: {
+        requirement: "All interactive elements must have visible focus",
+        implementation: "Outline or ring, 2-3px, contrasting color"
+    },
+    semanticHTML: {
+        landmarks: "Use header, main, nav, footer, section, article",
+        headings: "Proper hierarchy (h1 > h2 > h3), no skipping levels"
+    },
+    bestPractices: [
+        "Test with keyboard navigation",
+        "Don't rely on color alone to convey information",
+        "Provide alt text for informative images"
+    ]
+};
+//# sourceMappingURL=accessibilityGuidance.js.map

package/build/data/accessibilityGuidance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibilityGuidance.js","sourceRoot":"","sources":["../../src/data/accessibilityGuidance.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,aAAa,EAAE;QACX,UAAU,EAAE,qBAAqB;QACjC,SAAS,EAAE,kCAAkC;QAC7C,YAAY,EAAE,8BAA8B;KAC/C;IACD,WAAW,EAAE;QACT,WAAW,EAAE,kDAAkD;QAC/D,cAAc,EAAE,2CAA2C;KAC9D;IACD,YAAY,EAAE;QACV,SAAS,EAAE,iDAAiD;QAC5D,QAAQ,EAAE,qDAAqD;KAClE;IACD,aAAa,EAAE;QACX,+BAA+B;QAC/B,iDAAiD;QACjD,yCAAyC;KAC5C;CACJ,CAAC"}

package/build/data/animationGuidance.d.ts

@@ -0,0 +1,22 @@
+export declare const animationGuidance: {
+    purposes: {
+        feedback: string;
+        continuity: string;
+        attention: string;
+        hierarchy: string;
+        delight: string;
+    };
+    timingPrinciples: {
+        microInteractions: string;
+        smallTransitions: string;
+        mediumTransitions: string;
+        largeTransitions: string;
+    };
+    easings: {
+        standard: string;
+        enter: string;
+        exit: string;
+    };
+    bestPractices: string[];
+};
+//# sourceMappingURL=animationGuidance.d.ts.map

package/build/data/animationGuidance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationGuidance.d.ts","sourceRoot":"","sources":["../../src/data/animationGuidance.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAwB7B,CAAC"}

package/build/data/animationGuidance.js

@@ -0,0 +1,27 @@
+// Animation Guidance (Repaired and Completed)
+export const animationGuidance = {
+    purposes: {
+        feedback: "Confirm user actions (button press, form submit)",
+        continuity: "Smooth transitions between states/pages",
+        attention: "Draw focus to important elements",
+        hierarchy: "Show relationships and depth",
+        delight: "Add personality and polish (use sparingly)"
+    },
+    timingPrinciples: {
+        microInteractions: "100-200ms (instant feel)",
+        smallTransitions: "200-300ms (noticeable but quick)",
+        mediumTransitions: "300-500ms (deliberate movement)",
+        largeTransitions: "500-800ms (page loads, complex reveals)"
+    },
+    easings: {
+        standard: "ease-in-out (natural acceleration/deceleration)",
+        enter: "ease-out (fast in, slow stop)",
+        exit: "ease-in (slow start, fast out)"
+    },
+    bestPractices: [
+        "Respect 'prefers-reduced-motion' media query",
+        "Don't animate just for the sake of it",
+        "Keep animations fast to avoid feeling sluggish"
+    ]
+};
+//# sourceMappingURL=animationGuidance.js.map

package/build/data/animationGuidance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationGuidance.js","sourceRoot":"","sources":["../../src/data/animationGuidance.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,QAAQ,EAAE;QACN,QAAQ,EAAE,kDAAkD;QAC5D,UAAU,EAAE,yCAAyC;QACrD,SAAS,EAAE,kCAAkC;QAC7C,SAAS,EAAE,8BAA8B;QACzC,OAAO,EAAE,4CAA4C;KACxD;IACD,gBAAgB,EAAE;QACd,iBAAiB,EAAE,0BAA0B;QAC7C,gBAAgB,EAAE,kCAAkC;QACpD,iBAAiB,EAAE,iCAAiC;QACpD,gBAAgB,EAAE,yCAAyC;KAC9D;IACD,OAAO,EAAE;QACL,QAAQ,EAAE,iDAAiD;QAC3D,KAAK,EAAE,+BAA+B;QACtC,IAAI,EAAE,gCAAgC;KACzC;IACD,aAAa,EAAE;QACX,8CAA8C;QAC9C,uCAAuC;QACvC,gDAAgD;KACnD;CACJ,CAAC"}

package/build/data/colorGuidance.d.ts

@@ -0,0 +1,53 @@
+export declare const colorGuidance: {
+    psychology: {
+        blue: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        green: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        red: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        orange: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        purple: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        black: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+        white: {
+            associations: string[];
+            bestFor: string[];
+            avoid: string[];
+        };
+    };
+    modernPalettes: {
+        name: string;
+        primary: string;
+        accent: string;
+        neutrals: string;
+        mood: string;
+    }[];
+    applicationRules: {
+        sixtyThirtyTen: string;
+        ctaColors: string;
+        textColors: string;
+        backgrounds: string;
+    };
+};
+//# sourceMappingURL=colorGuidance.d.ts.map

package/build/data/colorGuidance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorGuidance.d.ts","sourceRoot":"","sources":["../../src/data/colorGuidance.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFzB,CAAC"}

package/build/data/colorGuidance.js

@@ -0,0 +1,84 @@
+// Color Psychology and Schemes
+export const colorGuidance = {
+    psychology: {
+        blue: {
+            associations: ["Trust", "Stability", "Professionalism", "Calm", "Security"],
+            bestFor: ["Finance", "Healthcare", "Technology", "Corporate", "SaaS"],
+            avoid: ["Food (suppresses appetite)", "Urgency-based messaging"]
+        },
+        green: {
+            associations: ["Growth", "Nature", "Health", "Wealth", "Sustainability"],
+            bestFor: ["Environmental", "Health/Wellness", "Finance", "Organic products"],
+            avoid: ["Luxury brands", "High-energy products"]
+        },
+        red: {
+            associations: ["Energy", "Urgency", "Passion", "Excitement", "Power"],
+            bestFor: ["Sales/Clearance", "Food", "Entertainment", "Sports"],
+            avoid: ["Healthcare", "Financial (except warnings)", "Relaxation"]
+        },
+        orange: {
+            associations: ["Creativity", "Enthusiasm", "Fun", "Confidence", "Adventure"],
+            bestFor: ["Youth brands", "Creative agencies", "Food", "Fitness"],
+            avoid: ["Luxury", "Corporate/formal", "Healthcare"]
+        },
+        purple: {
+            associations: ["Luxury", "Creativity", "Wisdom", "Royalty", "Mystery"],
+            bestFor: ["Beauty", "Luxury goods", "Creative services", "Spirituality"],
+            avoid: ["Budget brands", "Masculine products", "Agriculture"]
+        },
+        black: {
+            associations: ["Elegance", "Power", "Sophistication", "Luxury", "Mystery"],
+            bestFor: ["Luxury brands", "Fashion", "Tech", "Premium products"],
+            avoid: ["Children's products", "Healthcare", "Budget brands"]
+        },
+        white: {
+            associations: ["Purity", "Simplicity", "Cleanliness", "Modern", "Minimal"],
+            bestFor: ["Healthcare", "Tech", "Minimalist brands", "Weddings"],
+            avoid: ["Over-reliance can feel sterile or empty"]
+        }
+    },
+    modernPalettes: [
+        {
+            name: "Professional Trust",
+            primary: "Deep blue (#1E40AF to #2563EB)",
+            accent: "Amber or teal for CTAs",
+            neutrals: "Slate grays",
+            mood: "Trustworthy, established, reliable"
+        },
+        {
+            name: "Modern Minimal",
+            primary: "Near-black (#0F172A)",
+            accent: "Single vibrant color for emphasis",
+            neutrals: "Cool grays on white",
+            mood: "Clean, sophisticated, focused"
+        },
+        {
+            name: "Warm & Approachable",
+            primary: "Coral or warm orange (#F97316)",
+            accent: "Complementary teal",
+            neutrals: "Warm grays",
+            mood: "Friendly, energetic, inviting"
+        },
+        {
+            name: "Nature & Growth",
+            primary: "Forest green (#15803D)",
+            accent: "Earth tones or gold",
+            neutrals: "Warm off-whites",
+            mood: "Organic, sustainable, healthy"
+        },
+        {
+            name: "Dark Mode Elegant",
+            primary: "Dark gray (#18181B) background",
+            accent: "Vibrant purple, blue, or green",
+            neutrals: "Gray scale for hierarchy",
+            mood: "Modern, tech-forward, sophisticated"
+        }
+    ],
+    applicationRules: {
+        sixtyThirtyTen: "60% dominant color (usually background), 30% secondary, 10% accent",
+        ctaColors: "CTAs should be the most visually distinct color on the page",
+        textColors: "Dark text on light backgrounds, light text on dark. Never pure black (#000) on pure white (#FFF) - too harsh",
+        backgrounds: "Slight tints are softer than pure white. #FAFAFA or #F8FAFC feel more refined"
+    }
+};
+//# sourceMappingURL=colorGuidance.js.map

package/build/data/colorGuidance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorGuidance.js","sourceRoot":"","sources":["../../src/data/colorGuidance.ts"],"names":[],"mappings":"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"}

package/build/data/componentGuidance.d.ts

@@ -0,0 +1,69 @@
+export declare const componentGuidance: {
+    buttons: {
+        primary: {
+            sizing: string;
+            fontSize: string;
+            borderRadius: string;
+            fontWeight: string;
+            colors: string;
+            hoverEffect: string;
+            example: string;
+        };
+        secondary: {
+            style: string;
+            example: string;
+        };
+        modernVariants: string[];
+    };
+    cards: {
+        modern: {
+            background: string;
+            shadow: string;
+            borderRadius: string;
+            padding: string;
+            border: string;
+            hover: string;
+        };
+        layout: {
+            image: string;
+            spacing: string;
+            cta: string;
+        };
+    };
+    forms: {
+        inputs: {
+            sizing: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            fontSize: string;
+            background: string;
+        };
+        labels: {
+            position: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        validation: {
+            success: string;
+            error: string;
+        };
+    };
+    navigation: {
+        modern: {
+            style: string;
+            linkSpacing: string;
+            fontSize: string;
+            fontWeight: string;
+            activeState: string;
+            hoverState: string;
+        };
+        mobile: {
+            pattern: string;
+            animation: string;
+            closeButton: string;
+        };
+    };
+};
+//# sourceMappingURL=componentGuidance.d.ts.map

package/build/data/componentGuidance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentGuidance.d.ts","sourceRoot":"","sources":["../../src/data/componentGuidance.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuE7B,CAAC"}