허브 · 도구 64개 · 섹션 3개

프런트엔드 개발자를 위한 AI 개발 도구

컴포넌트 뒤에서 실제로 돌아가는 작업 스택입니다. AI 코드 에디터와 터미널 에이전트, 그 에이전트에 컨텍스트를 주는 MCP 서버와 스킬, 그리고 결과물을 URL에 올려주는 플랫폼까지 모았습니다.

01 / 03

AI 코드 에디터와 개발자 도구

24섹션 열기

Claude Code preview

Claude Code개발자 도구명령줄 터미널 안에서 직접 작동하는 에이전트형 코딩 어시스턴트입니다.

Cursor preview

Cursor개발자 도구소프트웨어를 더 빠르게 작성하고 배포하도록 설계된 AI 우선 코드 에디터입니다.

Zed preview

Zed개발자 도구짧은 지연 시간과 빠른 반응성을 위해 설계된 고성능 코드 에디터입니다.

v0 preview

v0개발자 도구평문 프롬프트를 작동하는 shadcn/ui 코드로 변환하는 생성형 AI 도구입니다.

Bolt.new preview

Bolt.new개발자 도구풀스택 애플리케이션을 구축하고 실행하는 브라우저 내 샌드박스입니다.

Vite preview

Vite개발자 도구현대적인 웹 프로젝트를 위한 빠른 프런트엔드 빌드 도구이자 개발 서버입니다.

Biome preview

Biome개발자 도구웹 개발 프로젝트를 위해 Rust로 구축된 빠른 코드 포매터이자 린터입니다.

Playwright preview

Playwright개발자 도구브라우저를 자동화하고 안정적인 엔드투엔드 테스트 스위트를 실행하는 프레임워크입니다.

buildertools.sh

BuilderTools preview

BuilderTools개발자 도구소프트웨어를 더 빠르게 배포하도록 돕는 데 초점을 맞춘 개발자 도구 모음입니다.

nuqs preview

nuqs개발자 도구타입 안전한 URL 검색 매개변수를 읽고 쓰기 위한 React 라이브러리입니다.

better-t-stack.dev

Better T Stack preview

Better T Stack개발자 도구현대적인 풀스택 TypeScript 프로젝트의 뼈대를 생성하는 명령줄 도구입니다.

AI Stack preview

AI Stack개발자 도구AI 앱을 구축하는 데 사용되는 현대적인 기술 스택을 비교하는 디렉터리입니다.

Alumnium preview

Alumnium개발자 도구MCP를 통해 제공되며, 평이한 자연어로 엔드투엔드 테스트를 작성합니다.

vercel-doctor.com

Vercel Doctor preview

Vercel Doctor개발자 도구Next.js 앱의 성능 병목을 짚어내는 진단 도구입니다.

OSS Perks preview

OSS Perks개발자 도구오픈 소스 프로젝트 메인테이너를 위한 무료 클라우드 크레딧과 혜택을 모은 허브입니다.

Vinext preview

Vinext개발자 도구Cloudflare에서 Next.js 애플리케이션을 구축하고 실행할 수 있게 해 주는 Vite 플러그인입니다.

evlog preview

evlog개발자 도구웹 애플리케이션에서 이벤트를 수집하기 위한 구조화된 로깅 프레임워크입니다.

audio.raphaelsalaja.com

@web-kits/audio preview

@web-kits/audio개발자 도구웹 애플리케이션에서 사운드를 추가하고 제어하기 위한 선언형 라이브러리입니다.

Nue preview

Nue개발자 도구React의 더 가벼운 대안으로 자리매김한 경량 웹 프레임워크입니다.

Umami preview

Umami개발자 도구쿠키 동의 배너 없이 작동하는 프라이버시 중심의 웹 분석 도구입니다.

torph.lochie.me

Torph preview

Torph개발자 도구모핑 전환으로 텍스트를 애니메이션하는 의존성 없는 라이브러리입니다.

x.ai/bot preview

x.ai/bot개발자 도구xAI 웹 크롤러의 사양을 상세히 설명하는 문서입니다.

Tracwell preview

Tracwell개발자 도구사이트의 방문자와 전환을 추적하는 데 초점을 맞춘 분석 도구입니다.

DialKit preview

DialKit개발자 도구작업하면서 실시간으로 매개변수를 조정할 수 있는 앱 내 플로팅 툴바입니다.

02 / 03

AI 코딩 에이전트와 MCP 서버

35섹션 열기

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 기반 캔버스 워크스페이스입니다.

03 / 03

배포·호스팅 플랫폼

Vercel preview

Vercel배포Next.js 앱을 배포하고 웹에 서비스하기 위한 클라우드 플랫폼입니다.

developers.cloudflare.com

Cloudflare preview

Cloudflare배포앱 배포를 위해 전 세계 엣지 네트워크에서 서버리스 Workers를 실행합니다.

Netlify preview

Netlify배포지속적 배포 파이프라인을 통해 사이트를 내보내는 웹 호스팅 플랫폼입니다.

Railway preview

Railway배포앱과 데이터베이스 배포를 간소화해 주는 인프라 플랫폼입니다.

Fly.io preview

Fly.io배포사용자와 물리적으로 가까운 곳에 배치된 서버에서 Docker 컨테이너를 실행합니다.

프런트엔드 개발자를 위한 AI 개발 도구 (64) — Designeer