信息
- 类型
- Claude Skill
- 官方
- 是
- 定价
- 免费
- 作者
- Anthropic
- 路径
- .claude/skills/frontend-design
简介
前端设计技能为 Claude 注入一套设计指导：在排版、配色、间距、组件风格与设计令牌上做出更克制、更专业的选择，避免“模板感”，适合生成新 UI 或重构现有界面。
何时触发 / 适用场景
- 从零搭建一个有设计感的页面时
- 重构现有 UI 的视觉风格
- 统一一套设计令牌/配色
如何安装使用
把 前端设计技能 添加到 Claude 的三种方式：
① Claude.ai / 桌面端
进入「设置 → Capabilities / Skills」或某个项目，上传该 Skill 文件夹（包含 SKILL.md 及附带脚本/资源）。相关任务出现时 Claude 会自动调用。
② Claude Code
把文件夹放到项目的 .claude/skills/frontend-design，或通过 /plugin 从插件市场安装。
③ API / Agent SDK
通过 Skills 能力（上传 SKILL.md 与资源到代码执行容器），或 Agent SDK 的 skills 配置启用。
源码与 SKILL.md：https://github.com/anthropics/skills
示例用法
帮我做一个有质感的落地页，别太模板化
把这个后台界面重新设计得更专业
包含内容
SKILL.md references/（设计参考）
依赖与要求
- 前端项目（HTML/CSS 或 React 等）
能力
排版/配色组件风格设计令牌
相关推荐
安装命令与配置整理自项目公开仓库与文档，最后更新于 2026-06-16。MCP 服务器为第三方代码，接入前请自行核验来源与安全性。
广告
评论
还没有评论，来做第一个分享体验的人吧。