Claude Code Skills 试试frontend-design skill AI的审美你不懂

Claude 现已引入 Skills 功能，显著提升了其执行特定任务的能力。Skills 本质上是一个包含指令、脚本和资源的结构化文件夹，Claude 能够根据任务需求动态加载这些资源。

这一机制的核心优势在于按需加载：Claude 仅在检测到当前任务与特定技能相关时才会调用该技能。这种设计不仅确保了 Claude 的运行效率，还能使其快速获取特定领域的专业知识，从而更高效地完成任务。

在执行过程中，Claude 会自动扫描可用技能库以匹配相关项。一旦找到匹配项，它仅加载完成任务所需的最少信息和文件。

与MCP相比，MCP 本质上是为 AI 大模型提供调用外部工具的能力，MCP Server 就是这个能力的具体实现——你可以通过它，把你已有的 API、脚本、服务包装成 AI 能理解和调用的 MCP 工具。

使用 MCP 的限制：

1、如果只靠 MCP，你虽然可以调用很多工具／数据，但模型每次必须在提示或上下文里夹带大量相关信息，这会消耗大量 token、降低效率。

2、在很多场景下，问题不是调用 API，而是按公司标准／流程来做事，MCP 可以访问数据或工具，但不会自动知道这个流程的外在规则是什么。

而 Skills 正好解决了这些问题，所以，MCP 是 AI 连接外部的工具，而 Skills 教模型如何使用工具。

第一步，安装frontend-design skill

> /plugin install frontend-design@anthropics/claude-code
  ⎿  ✓ Installed frontend-design. Restart Claude Code to load new plugins.

第二步，使用frontend-design skil

使用 @anthropics/skills/frontend-design skil，重新设计首页

没有使用skill时，生成的UI图

使用skill后，生成的UI图

啊，我怎么更喜欢没有使用skill设计的UI呢。