@chihebnabil
Basic information
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.
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"page-design-guide": {
"command": "npx",
"args": [
"-y",
"page-design-guide-mcp"
]
}
}
}Tool list not available yet
This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.
Fetch the live tool list by running this server in a temporary sandbox using the button above.
An MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. It teaches design principles and best practices rather than providing code templates.
Add the server to your Claude Desktop configuration (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json) using either global installation ("command": "npx", "args": ["-y", "page-design-guide-mcp"]) or local installation pointing to the built index.js. Once connected, ask design questions like “What design principles should I follow for this landing page?” or use the available tools.
It provides foundational design principles, layout recommendations, color psychology, typography guidance, responsive design strategies, component guidance, animation principles, accessibility requirements, modern trends, and a design review tool.
You can install it globally via `npx -y page-design-guide-mcp` or locally by pointing to the built `index.js` in the package. Set it up in your Claude Desktop or OpenCode configuration.
Node.js >= 18.0.0 and the Claude Desktop app are required.
The server includes tools such as `get_design_principles`, `get_layout_guidance`, `get_color_guidance`, `get_typography_guidance`, `get_section_guidance`, `get_responsive_guidance`, `get_component_guidance`, `get_animation_guidance`, `get_accessibility_guidance`, `get_modern_trends`, and `review_design_approach`.
Yes. The `review_design_approach` tool lets you describe your design and receive feedback with scores, identified strengths, concerns, and recommendations.
Build and run AI product photography workflows from your AI assistant: on-model shots, catalog images, prints and edits, with results returned in chat.
Connect Claude, ChatGPT, and other AI assistants to your social media content, reviews, and UGC aggregated via EmbedSocial.
Make AI-drawn video from chat. Claude, Cursor or Claude Code plans the film, the model draws every frame in code at 30 fps, and you edit it on a timeline with narration, music and sound effects.
MCP server for Floors.live — design event floor plans, manage guest lists, and run intelligent seating assignments from Claude, ChatGPT, or Cursor. 32 tools.
Transcribe YouTube videos, podcasts, meetings and media links into speaker-labelled, timestamped transcripts, then search who said what, ask questions answered with timestamped citations, pull chapters and paste-ready ti
Comments