frontman-ai/frontman

해결하는 문제

Frontman은 간격, 색상, 텍스트 수정과 같은 작은 UI 변경을 위해 개발자가 IDE를 열고, 올바른 파일을 찾고, 배포 주기를 관리해야 하는 프론트엔드 개발의 번거로움을 해결합니다. 기술적 지식이 없는 팀원이나 개발자가 브라우저에서 직접 이러한 시각적 수정을 수행할 수 있도록 합니다.

작동 방식

Frontman은 개발 서버(Next.js, Astro 또는 Vite)에 통합되어 브라우저 오버레이에서 실행되는 AI 에이전트로 작동합니다. Model Context Protocol (MCP)을 사용하여 라이브 애플리케이션과 소스 코드 사이의 간극을 메웁니다. 화면의 요소를 클릭하면 에이전트가 라이브 DOM, 계산된 CSS, 컴포넌트 트리를 분석하여 해당 소스 파일을 식별합니다. 원하는 변경 사항을 평이한 영어로 설명하면 에이전트가 코드 편집을 생성 및 적용하고 즉각적인 핫 리로드를 트리거합니다.

대상 사용자

개발자의 가용 시간을 기다리지 않고 UI를 다듬고 싶은 제품 관리자 및 디자이너, 그리고 단순히 원시 소스 코드가 아닌 애플리케이션의 렌더링 상태를 이해하는 AI 도구를 원하는 프론트엔드 개발자를 위해 설계되었습니다.

주요 특징

• 실시간 컨텍스트 인식: 계산된 CSS, 컴포넌트 트리, 서버 로그를 확인하여 정적 코드 분석으로는 놓칠 수 있는 정밀한 편집이 가능합니다.
• 프레임워크 통합: Next.js, Astro, Vite를 지원하며 React, Vue, Svelte를 자동으로 감지합니다.
• BYOK (Bring Your Own Key): OpenAI, Anthropic, OpenRouter를 포함한 다양한 LLM 제공업체와 호환됩니다.
• 개발자 친화적: 실제 코드베이스를 편집하고 기존 검토 워크플로우에 통합되므로 프로덕션 빌드에 영향을 주지 않습니다.