Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Frontend Guru MCP Convert this landing page screenshot into React code."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Transform designs to Elevate 2.0 design system - MCP server + web interface
Takes design inputs (URLs, screenshots, descriptions) and transforms them into production-ready React components that follow G2's Elevate 2.0 design system.
Two interfaces:
MCP Server - For Claude Code users (CLI + Desktop tab)
Web Interface - For everyone else (GUI, zero setup)
Related MCP server: stitch-pro-mcp
1. Install dependencies:
npm install
npm run build2. Configure Claude Code/Desktop:
Add to your MCP config file:
Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
Claude Code: ~/.claude/mcp_servers.json
{
"mcpServers": {
"frontend-guru": {
"command": "node",
"args": ["/Users/abedell/Developer/frontend-guru-mcp/dist/mcp/index.js"]
}
}
}3. Restart Claude
4. Use it:
/frontend-guru https://example.comClaude will ask you questions about format, then run the transformation.
Coming soon - Will be deployed to: https://g2-frontend-guru.vercel.app
src/
āāā core/ # Shared logic (used by both MCP and web)
ā āāā agents/ # Agent prompts (orchestrator, analyzer, planner, etc.)
ā āāā orchestrator/ # Transformation workflow
ā āāā exports/ # Output format handlers
āāā mcp/ # MCP server (Claude Code)
āāā web/ # Web interface (Next.js) - TODORun MCP server in dev mode:
npm run dev:mcpBuild everything:
npm run buildComplete web interface (Next.js app in src/web/)
Deploy web interface to Vercel
Implement actual agent workflow integration (currently returns mock data)
Add export handlers (ZIP, preview URL, clipboard)
Add progress tracking for long builds
Add build history/listing
User provides input (URL, screenshot, or description)
Analyzer agent identifies all sections in the design
Planner agent creates optimal build plan
Builder agent transforms design to React code (with design system rules)
Validator agent checks completeness and compliance
Refiner agent fixes any design system violations
Export in requested format (React, ZIP, preview, clipboard)
All agents follow the "transformation mindset" - adapting designs to match Elevate 2.0 standards, not just copying them.
Agents: See src/core/agents/ for all agent prompts
Design System Rules: See src/core/agents/frontend-guardian.md for all 41 rules
Orchestrator: See src/core/agents/orchestrator.md for workflow
MCP server not showing up in Claude:
Check config file path is correct
Verify file has valid JSON (no trailing commas)
Restart Claude completely
Check logs: MCP server logs to stderr
Build fails:
Ensure all agents are present in src/core/agents/
Check that Node.js version is 18+ (node --version)
Private - G2 internal use only
Transform a design (URL, screenshot, or description) to Elevate 2.0 design system compliant React code
| Name | Required | Description | Default |
|---|---|---|---|
| source | Yes | URL, screenshot path, or design description | |
| format | No | Output format | react |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It only states a transformation happens, omitting behavioral traits such as idempotency, side effects, authentication needs, or whether the input is consumed destructively.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence, highly concise and front-loaded with the core action. No redundant words; every part contributes to understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given low complexity (2 params, no output schema), the description covers the essential purpose and input format. However, it could mention output format details or constraints (e.g., only React output).
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, reaching baseline of 3. The description does not add meaning beyond the schema; both 'source' and 'format' are already well-documented in the input schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Transform') and resource ('design') with a clear outcome: 'Elevate 2.0 design system compliant React code'. It distinguishes the tool's purpose without needing sibling differentiation as none exist.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool vs alternatives, nor prerequisites or exclusions. Usage is implied from the transformation purpose, but lacks clarity on context like preferred input types or output limitations.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.0.0frontend_guru_transformWith only one tool, there is no possibility of ambiguity or overlap between tools.
The single tool name follows a clear verb_noun pattern (frontend_guru_transform) with no inconsistency.
One tool is too few for a comprehensive design-to-code server. Typical scopes would require multiple tools for different aspects (e.g., validation, customization, export).
The single tool covers only the transformation step, lacking essential operations like validating outputs, adjusting parameters, or managing multiple designs. The surface is severely incomplete for the stated purpose.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Serves your design system and coding standards to coding agents, so they stop guessing.
Build, clone & publish websites by chatting with Claude. Live in seconds, custom domains + SSL.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/abedell-g2/frontend-guru-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
