@designpal/agent-skills

One command to set up the DesignPal MCP in Claude Code, Cursor, Codex, VS Code, or Windsurf.

DesignPal is a remote MCP server that turns a conversation into a cinematic, scroll-driven animated website. This package wires it into your AI assistant of choice — writing the right config files, registering a slash command and subagent for Claude Code, and getting you to a browser sign-in in under a minute.

Install

Run at the root of your project:

npx -y @designpal/agent-skills init

The CLI auto-detects your client (it looks for .claude/, .cursor/, .codex/, .vscode/, or .windsurf/ in the project, and falls back to Claude Code), writes the right MCP config, and prints next steps.

Requirements

• Node.js 18 or newer
• An MCP-compatible client: Claude Code, Cursor, Codex, VS Code with GitHub Copilot (Agent mode), or Windsurf
• A Google account — sign-in is OAuth via Google. No API key. No manual credential setup.

Quick start

1. Initialize

Run from the root of your project. Auto-detect, or pick a host:

# Auto-detect (defaults to Claude Code)
npx -y @designpal/agent-skills init

# Pick a specific host
npx -y @designpal/agent-skills init cursor
npx -y @designpal/agent-skills init vscode
npx -y @designpal/agent-skills init windsurf
npx -y @designpal/agent-skills init codex

# Set up every supported host at once
npx -y @designpal/agent-skills init --all

2. Connect

| Client | Next step | |---|---| | Claude Code | Run /designpal to start a project, or /mcp to inspect the server. | | Cursor / VS Code / Windsurf / Codex | Open the editor's MCP panel, find the designpal server, click connect. In VS Code, switch GitHub Copilot Chat to Agent mode. |

A browser window opens for the OAuth consent screen. Sign in with Google — that's the only credential step. Your client caches the bearer token and refreshes it silently.

3. Prompt

Open your assistant and try:

Use DesignPal to build a landing page for a productivity app called FocusFlow. Dark, minimal aesthetic. Hero with an animated video background, a features section, and a CTA at the bottom.

The assistant walks you through a short questionnaire and either previews one section or generates the whole page.

Commands

designpal init [host] [--all]     Set up DesignPal MCP for your editor
designpal doctor [host]           Check your setup for issues
designpal upgrade [host] [--all]  Refresh skill/agent files to the latest version

init

Writes the host-specific MCP config and (for Claude Code) the slash command, subagent, and skill files. Also creates .designpal/ and adds it to .gitignore.

npx -y @designpal/agent-skills init
npx -y @designpal/agent-skills init cursor
npx -y @designpal/agent-skills init --all

doctor

Verifies the MCP config exists, parses cleanly, points at the right server, and (for Claude Code) checks the skill / agent / command files are in place. Pings the well-known URL too.

npx @designpal/agent-skills doctor
npx @designpal/agent-skills doctor cursor

upgrade

When a new version of this package ships, refreshes the slash-command, subagent, and skill markdown files to match. The MCP config is left alone — re-run init if you need to recreate it.

npx -y @designpal/agent-skills upgrade
npx -y @designpal/agent-skills upgrade --all

Supported hosts

| CLI argument | Client | MCP config path | |---|---|---| | claude (default) | Claude Code | .mcp.json | | cursor | Cursor | .cursor/mcp.json | | codex | Codex CLI | .codex/mcp.json | | vscode | VS Code (GitHub Copilot Agent mode) | .vscode/mcp.json | | windsurf | Windsurf | .windsurf/mcp.json |

All configs are project-scoped — they live inside the project and travel with your repo if you commit them.

What init writes

Every host gets the same MCP server entry:

{
  "mcpServers": {
    "designpal": {
      "type": "http",
      "url": "https://www.designpal.dev/api/mcp"
    }
  }
}

Claude Code gets three additional files for a richer experience:

• .claude/skills/designpal/SKILL.md — a skill teaching Claude how to use the 19 DesignPal tools end-to-end
• .claude/agents/designpal.md — a subagent for multi-step generation work
• .claude/commands/designpal.md — the /designpal slash command

init also creates a project-local .designpal/ directory (where generated HTML and asset bundles land) and appends an exclusion to .gitignore:

# DesignPal generated assets
.designpal/*
!.designpal/.gitkeep

Authentication

DesignPal is OAuth-only. There is no API key. The first time your client calls a DesignPal tool, a browser window opens to designpal.dev/oauth/authorize for the consent screen. You sign in with Google; your client receives a bearer token and refreshes it silently from then on.

To re-authorize (e.g., switching Google accounts), most clients have a "disconnect" or "reauthorize" action in their MCP panel — or you can delete the cached token from your client's MCP credential store and call any DesignPal tool to trigger a fresh consent flow.

Free trial & pricing

New accounts get one free animated section preview — enough to see DesignPal in motion. After that, plans start at $25/mo. See pricing.

Troubleshooting

Run the doctor:

npx @designpal/agent-skills doctor

It checks that the MCP config exists, parses, points at the right server, that the server is reachable, and that any host-specific files are in place.

For deeper help, see the full setup guide at designpal.dev/docs/mcp.

Links

• Setup guide: designpal.dev/docs/mcp
• Dashboard: designpal.dev/dashboard
• Pricing: designpal.dev/#pricing
• MCP server URL: https://www.designpal.dev/api/mcp

License

MIT