개발 도구 · 35 개 도구

AI 코딩 에이전트와 MCP 서버

에이전트가 매달 점점 더 많은 인터페이스 코드를 작성하고 있으며, 그 결과물은 어떤 컨텍스트를 받느냐에 달려 있습니다. 이 섹션에는 코딩 에이전트, 에이전트에 컴포넌트 레지스트리와 디자인 파일을 노출해 주는 MCP 서버, 그리고 디자인 관례를 가르쳐 주는 스킬을 모았습니다.

정렬

Dray preview

Dray에이전트·MCP여러 코딩 에이전트를 실행하고 관리하는 통합 데스크톱 워크스페이스입니다.

styles.refero.design

Refero preview

Refero에이전트·MCPAI 에이전트의 디자인 작업을 안내하는 구조화된 DESIGN.MD 명세 파일입니다.

designmd.me preview

designmd.me에이전트·MCPAI 코딩 에이전트가 파싱하고 그에 맞춰 구현할 수 있는 기계 판독용 디자인 명세를 생성합니다.

Open Design preview

Open Design에이전트·MCP디자인 시스템을 AI 에이전트가 읽고 적용할 수 있는 표준화된 형식으로 패키징합니다.

designmd.supply

designmd.supply preview

designmd.supply에이전트·MCPAI 어시스턴트를 원하는 디자인과 규칙으로 이끄는 DESIGN.MD 템플릿 라이브러리입니다.

getdesign.md preview

getdesign.md에이전트·MCPAI 코딩 에이전트가 따를 디자인 규칙을 만들어 주는 인터랙티브 생성기입니다.

design-md.hyperbrowser.ai

Hyperbrowser Design.md preview

Hyperbrowser Design.md에이전트·MCP기존 웹사이트에서 디자인 규칙을 바로 추출해 DESIGN.MD 파일을 생성합니다.

Aura preview

Aura에이전트·MCPAI 에이전트가 작업 기준으로 삼을 명확한 가이드라인을 담은 구조화된 디자인 시스템을 구축합니다.

Neuform preview

Neuform에이전트·MCP레이아웃을 깔끔하고 바로 쓸 수 있는 코드로 출력하는 AI 기반 인터페이스 디자인 도구입니다.

typeui.sh preview

typeui.sh에이전트·MCP타입이 적용된 UI 컴포넌트를 스캐폴딩해 깔끔한 출발점을 마련해 주는 커맨드라인 도구입니다.

Webclaw preview

Webclaw에이전트·MCP어떤 웹페이지든 AI 에이전트가 쉽게 읽을 수 있는 깔끔하고 구조화된 markdown으로 변환합니다.

Ghostex preview

Ghostex에이전트·MCP여러 백그라운드 코딩 에이전트 세션을 한곳에서 동시에 실행하고 조율합니다.

is-agentic.com preview

is-agentic.com에이전트·MCP특정 웹사이트가 크롤러와 자동화 에이전트를 얼마나 잘 수용하는지 평가합니다.

Herdr preview

Herdr에이전트·MCP코딩 에이전트의 작업을 관리하고 스케줄링하는 분산 러너입니다.

soubi.vercel.app

Soubi preview

Soubi에이전트·MCP에이전트 스킬 정의를 바로 쓸 수 있는 빌드로 변환하는 컴파일러입니다.

agentcn preview

agentcn에이전트·MCPReact 프로젝트에 바로 넣어 쓸 수 있는 프로덕션 수준의 커스터마이즈 가능한 AI 에이전트 레시피입니다.

skills preview

skills에이전트·MCPshadcn 레지스트리와 일상적인 개발 워크플로를 위해 만들어진 에이전트 스킬입니다.

mcpcn preview

mcpcn에이전트·MCPChatGPT, Claude, MCP 앱 인터페이스를 만들기 위한 React UI 컴포넌트입니다.

integrations.sh

integrations.sh preview

integrations.sh에이전트·MCPAI 에이전트가 참고하고 활용할 수 있는 API 통합 명세 저장소입니다.

fx preview

fx에이전트·MCPZig로 만들어져 커맨드라인에서 동작하는 고성능 코딩 에이전트입니다.

hyperframes.dev

HyperFrames preview

HyperFrames에이전트·MCP브라우저 창 없이 HTML을 MP4 영상으로 렌더링하는 헤드리스 엔진입니다.

Foglamp preview

Foglamp에이전트·MCP지연 시간과 운영 비용을 함께 모니터링하는 옵저버빌리티 도구입니다.

Distill preview

Distill에이전트·MCP흩어진 리서치 노트를 모아 체계적으로 정리해 주는 AI 에이전트입니다.

Agentation preview

Agentation에이전트·MCP화면상의 UI 주석을 AI 에이전트가 활용할 수 있는 컨텍스트로 바꿔 줍니다.

OpenCode preview

OpenCode에이전트·MCP터미널에 자리 잡고 커맨드라인에서 동작하는 오픈소스 AI 코딩 에이전트입니다.

impeccable.style

Impeccable preview

Impeccable에이전트·MCPAI 에이전트가 좋은 UI에 대한 감각을 더 잘 갖추도록 돕는 디자인 인텔리전스 스킬입니다.

SkillSync preview

SkillSync에이전트·MCP여러 코드 에디터에 걸쳐 에이전트 컨텍스트를 동기화된 상태로 유지합니다.

bb preview

bb에이전트·MCP코딩 에이전트를 실행하고 테스트하기 위해 만들어진 오픈소스 개발 환경입니다.

Capacity preview

Capacity에이전트·MCP프롬프트를 풀스택 앱으로 바꿔 주는 자연어 기반 워크스페이스입니다.

Lafys preview

Lafys에이전트·MCP간단한 설명을 빌더용 UI 컴포넌트로 바꿔 주는 프롬프트 기반 생성기입니다.

Efecto preview

Efecto에이전트·MCPMCP를 통해 연결된 도구와 연동되는 에이전트 중심의 비주얼 웹 캔버스입니다.

Arc labs preview

Arc labs에이전트·MCP모의 기술 면접을 진행해 연습을 돕는 AI 커리어 도구 모음입니다.

Scira preview

Scira에이전트·MCP웹 전반에서 답을 찾아 주는 군더더기 없는 오픈소스 AI 검색 엔진입니다.

Kombai preview

Kombai에이전트·MCP주어진 컨텍스트를 바탕으로 UI 코드를 작성하는 AI 디자인 엔지니어입니다.

Causal preview

Causal에이전트·MCP메모를 기록하고 계획을 구상하는 AI 기반 캔버스 워크스페이스입니다.

AI 코딩 에이전트와 MCP 서버 자주 묻는 질문

2026년 최고의 AI 코딩 에이전트와 MCP 서버는?

Designeer는 Dray, Refero, Open Design 등 라이브 미리보기를 제공하는 AI 코딩 에이전트, MCP 서버, 에이전트 스킬 35개를 정리했습니다. 코딩 에이전트에 더 나은 디자인 맥락, 감각, 도구를 제공해 프론트엔드 작업을 돕습니다.

MCP 서버란 무엇이고 AI 에이전트에 왜 쓰나요?

MCP(Model Context Protocol) 서버는 AI 코딩 에이전트에 도구, 데이터, 그리고 디자인 레퍼런스나 컴포넌트 소스 같은 맥락에 대한 구조화된 접근을 제공합니다. MCP 서버와 에이전트 스킬을 추가하면 에이전트가 더 정확하고 브랜드에 맞는 UI를 만들어 냅니다.

이 AI 에이전트와 MCP 서버는 무료 오픈소스인가요?

많은 MCP 서버와 에이전트 스킬이 무료 오픈소스이며, designmd.me 같은 여러 디자인 맥락 도구는 기존 에이전트에 바로 연결되도록 만들어졌습니다. 일부 호스팅 서비스는 팀을 위한 유료 요금제를 더하므로 각각 확인해 보세요.

AI 코딩 에이전트·MCP 서버 35개 (2026) — Designeer