Tele UX-UI-Motion Skill MCP

Model Context Protocol 기반 MCP 서비스로, AI 에이전트에게 UI/UX/애니메이션 디자인 스킬 라이브러리의 탐색·검색·읽기 기능을 제공합니다.

198개의 디자인 스킬을 내장하고 있으며, 17개 분야를 다루고, 10개의 오픈소스 디자인 프로젝트에서 정제되었습니다.

정제 프로젝트:

시작하기 · 스킬 라이브러리 카테고리 · 워크플로우 · 감사의 글

소개

프런트엔드 UI를 만들 때 AI 에이전트는 체계적인 디자인 지식이 부족한 경우가 많습니다. 글래스모피즘이 무엇인지 모르고, WCAG 대비 요구 사항을 모르며, GSAP로 애니메이션을 작성하지 못합니다. 이 프로젝트의 해결 방안은 우수한 오픈소스 디자인 지식을 구조화된 스킬 파일로 정리하고, MCP 프로토콜을 통해 에이전트에 노출하여 사전을 찾듯 필요할 때 조회할 수 있게 하는 것입니다.

에이전트는 디자인 지식과 프로젝트 코드 사이를 반복적으로 오갈 필요 없이, 점진적 워크플로우를 통해 스킬을 단계적으로 검색·읽기·적용하여 전문 디자인 표준에 부합하는 UI를 최종적으로 만들어 냅니다.

핵심 기능

• 탐색 — 17개의 최상위 카테고리를 단계적으로 드릴다운하여 스킬 라이브러리 구조 탐색

• 검색 — 키워드로 전체 또는 카테고리 내에서 검색하여 필요한 스킬을 빠르게 찾기

• 읽기 — 원칙, 패턴, 코드 예제를 포함한 스킬의 전체 디자인 가이드 획득

• 키워드 조회 — 특정 스킬이 다루는 전체 키워드를 확인하여 정밀 검색 지원

• 점진적 가이드 — 발견부터 전달까지 전 과정을 안내하는 5단계 에이전트 워크플로우

Related MCP server: AceternityUI_MCP_Server

시작하기

npx로 사용하기 (권장)

설치 없이 MCP 클라이언트에서 바로 구성:

{
  "mcpServers": {
    "tele-ux-ui-motion-skill-mcp": {
      "command": "npx",
      "args": ["-y", "tele-ux-ui-motion-skill-mcp"]
    }
  }
}

소스에서 개발하는 경우 로컬 패키지를 전역 설치해야 합니다: npm install -g ., 이후 npx 구성은 정식 배포 후와 완전히 동일합니다.

로컬 개발

git clone <repo-url>
cd tele-ux-ui-motion-skill-mcp
npm install
npm run build
npm start

환경 변수

스킬 라이브러리 카테고리

워크플로우

에이전트가 이 서비스를 사용할 때 5단계 점진적 워크플로우를 따르며, 각 단계에서 help(step=N)을 통해 해당 단계의 상세 지침을 확인할 수 있습니다:

Step 1  发现与探索    → 列出所有类别，建立全局认知
Step 2  需求分析      → 分析用户需求，用专业词汇描述方案，与用户确认
Step 3  技能检索      → 提取关键词，全局 + 迭代检索，建立技能清单
Step 4  开发执行      → 制定计划表，按序读取技能并开发
Step 5  测试与交付    → 检查测试工具，验证产出，交付结果

기술 스택

• 언어: TypeScript

• 런타임: Node.js >= 18

• MCP SDK: @modelcontextprotocol/sdk

• 전송 방식: stdio

개발

npm run build    # 编译 TypeScript 并拷贝静态文件到 dist/
npm run dev      # 监听模式编译
npm start        # 启动服务

감사의 글

이 프로젝트의 스킬 콘텐츠는 다음 10개의 오픈소스 프로젝트에서 정제되었습니다. 원작자들의 아낌없는 공유에 감사드립니다:

오픈소스 라이선스

이 프로젝트는 MIT 라이선스로 오픈소스로 제공됩니다. 스킬 콘텐츠는 각 원본 프로젝트의 오픈소스 라이선스(MIT / CC0 1.0)를 따릅니다.