Skip to content
Blog

MCP vs Agent Skills: what’s the difference for designers?

By Attuna ·

MCP gives an AI agent access to things outside your project: live tools and data, such as a Figma file, a browser or a reference library. Agent Skills give it know-how: written instructions for how to do a task, such as reviewing a page or choosing typography. Claude Code’s docs put it in one line: “MCP connects Claude to external services. Skills extend what Claude knows, including how to use those services effectively.” Most design workflows benefit from both, and many simple tasks need neither.

An analogy that holds up

Think of briefing a freelance designer. A skill is the process document you hand them: how your team reviews work, what to check, in what order. MCP is the access you grant: a seat in your Figma, a login to the staging site, the shared moodboard. The process document doesn’t contain your designs, and the access doesn’t explain how you like to work.

What MCP provides

The Model Context Protocol is an open standard. An MCP server exposes tools the agent can call, resources it can read and prompts it can use. The server runs code, so it can answer with current information, including images.

  • Figma’s server returns the variables, layout and a screenshot of the frame you link.
  • A browser server lets the agent open your local site and take a screenshot.
  • A reference library server returns the references relevant to the task, with your notes.

In Claude Code, MCP servers are added with claude mcp add and checked with /mcp. Our plain-language explanation of MCP covers the moving parts.

What Agent Skills provide

Agent Skills are also an open format. A skill is a folder with a SKILL.md file: a name, a description of when to use it, and instructions. Agents load skills progressively. Only the name and description are read at startup; the instructions load when the skill is used, and any extra files load only if needed. A skill can include scripts, but at heart it’s written guidance.

  • Anthropic’s frontend-design skill guides aesthetic choices.
  • A ui-review skill you write runs your team’s review checklist.
  • A brand skill encodes your typography and colour rules.

See Claude Code skills for frontend design for real examples and how to install them.

Side by side

  • Answers: MCP answers “what is true right now?”; a skill answers “how should this be done?”
  • Content: MCP returns live data; a skill contains fixed instructions until someone edits it.
  • Runs where: MCP needs a server (local or remote); a skill is files in a folder.
  • Access: MCP often needs authentication and permissions; a skill needs none.
  • Failure mode: MCP returns too much or the wrong data; a skill is vague, ignored or loaded at the wrong time.
  • Shared via: MCP through a server URL or .mcp.json; skills through the repository or a plugin.

Example: working from visual references

Visual references show the difference clearly. Suppose you want a new settings page that follows the restraint of a few products you admire.

Skill only

A skill can say “before building, look at the references for this page, extract hierarchy and density, and never copy colours or illustrations”. Good method, but the skill doesn’t have the references. You still paste screenshots by hand.

MCP only

A reference server can return the three most relevant references with your notes on why you saved them. Good context, but without a method the agent may imitate the surface of an image rather than the quality you meant.

Both

The skill sets the method, MCP supplies the material. The agent fetches the references, applies the extraction rules, and builds with your components.

.claude/skills/use-references/SKILL.md
---
name: use-references
description: How to use visual references for UI work. Use before building or restyling any page or component.
---

1. Ask the reference server for references relevant to the task.
2. For each reference, write one line on what to take from it
   (hierarchy, density, type relationships, composition).
3. Never copy colours, illustrations, logos or copy from a reference.
4. All values come from our tokens and components, even when a
   reference differs.
5. Before coding, list the references used and what each contributes.

When neither is necessary

  • The context is already in the repository. Components, tokens and an example page are enough for many changes. Point to them with @.
  • It’s a one-off. Paste the screenshot. Setting up a server for a single task isn’t worth it.
  • It’s an always-true rule. That belongs in CLAUDE.md, which loads every session.
  • It must always happen. Use a hook or lint rule. Neither skills nor MCP enforce anything.

Recommendations for design engineering

  1. Start with CLAUDE.md for the codebase’s rules.
  2. Add a browser connection so the agent can see what it builds. It’s the highest-value MCP server for UI work.
  3. Add Figma MCP if your designs live in Figma; see how to use Figma MCP with Claude Code.
  4. Write a small skill for any workflow you repeat, such as a UI review.
  5. Connect a source of creative direction when the same references and principles keep getting pasted in.

The last step is where Attuna fits. It’s in development, and provides an MCP server that gives agents a project’s brief, creative direction, rules and references, ranked so accessibility and function always come before style. It’s context, not a skill. Pairing it with a skill like the one above is exactly the combination this article describes. For the practical setup, see how to use MCP with Claude Code for design.

Sources