설명
Atheros AI Builder는 개발자와 디자이너를 위해 AI를 사용하여 사용자 인터페이스 구성 요소를 생성하고 관리하는 도구로, 정적 목업이 아닌 생산 가능한 코드를 원합니다. 340개 이상의 프리미엄 구성 요소 템플릿 라이브러리와 프롬프트, 스크린샷 또는 기존 템플릿에서 새로운 구성 요소를 생성할 수 있는 AI 생성 레이어를 결합합니다.
더 읽기
생성은 입력으로 시작됩니다: 구성 요소를 설명하는 텍스트 프롬프트, 재현할 업로드된 스크린샷 또는 템플릿 갤러리에서 선택한 시작점입니다. Atheros는 요청을 Atheros 라우터를 통해 라우팅하며, 복잡성, 비용 및 품질을 고려하여 세 가지 모드 중 하나를 선택합니다: 일반적인 적합성을 위한 Auto, 가장 정교한 시각적 결과를 위한 Ultra, 또는 가장 빠른 전환을 위한 Flash입니다. 단일 구성 요소는 프로젝트의 design.md 파일에 대해 생성되며, 이 파일은 디자인 토큰, 유형 및 간격 규칙을 포함하고 있으며, 완료되기 전에 테스트, 접근성 및 이러한 토큰 준수에 대해 검증됩니다. 하나의 프로젝트는 공유된 design.md 아래에 여러 구성 요소를 보유할 수 있으며, 생성된 구성 요소가 따라야 할 스택 및 코딩 패턴을 캡처하는 builder.md 파일과 함께 있습니다.
구성 요소 또는 프로젝트가 구축되면 세 가지 방법으로 배포할 수 있습니다. React, 일반 JavaScript 또는 TypeScript로 코드를 내보낼 수 있습니다. Atheros MCP 서버를 통해 Claude Code, Codex 또는 Cursor와 같은 AI 코딩 에이전트에 직접 가져올 수 있으며, 에이전트는 구성 요소 라이브러리를 검색하고 특정 템플릿을 가져오며, 자신의 인터페이스를 떠나지 않고도 디자인 및 빌더 파일에 대해 프로젝트를 검증할 수 있습니다. 레이어, 자동 레이아웃 및 매핑된 디자인 토큰을 보존하는 Figma로의 내보내기는 곧 제공될 예정입니다.
Atheros는 매달 30개의 AI 크레딧과 최대 5개의 생성된 구성 요소를 포함하는 무료 요금제를 제공하며, 연간 청구 시 월 $15부터 시작하는 300개 이상의 프리미엄 구성 요소와 500개의 크레딧을 포함하는 중간 요금제 Atheros AI Pass, 연간 청구 시 월 $39부터 시작하는 최전선 모델, 2,000개의 크레딧 및 최대 700개의 구성 요소를 포함하는 Atheros AI Ultra 요금제를 제공합니다; 두 유료 요금제 모두 월별 청구 시 더 높은 요금이 부과됩니다. 추가 AI 크레딧은 패키지로 구매할 수 있습니다.
Atheros AI Builder는 자신의 디자인 시스템 및 코딩 규칙에 이미 맞는 인터페이스 구성 요소를 생성하고, 이러한 구성 요소를 내보낸 코드와 AI 코딩 에이전트의 워크플로 내에서 직접 접근할 수 있기를 원하는 팀을 위해 설계되었습니다.
- 카테고리AI UI/UX 디자인 도구
- 요금제구독
- 배포클라우드
- 플랫폼웹
Atheros AI Builder의 핵심 기능
텍스트 프롬프트 또는 업로드된 스크린샷에서 UI 구성 요소 생성
340개 이상의 프리미엄, 생산 준비 완료된 구성 요소 템플릿 라이브러리
Auto, Ultra(품질) 및 Flash(속도) 모드를 갖춘 AI 라우터
프로젝트의 design.md 토큰, 접근성 및 테스트 규칙에 대해 구성 요소 검증
builder.md는 생성된 구성 요소가 프로젝트의 코딩 패턴과 일관되도록 유지
React, 일반 JavaScript 또는 TypeScript로 내보내기
Atheros MCP를 통해 AI 코딩 에이전트(Claude Code, Codex, Cursor)와 연결
레이어, 자동 레이아웃 및 매핑된 디자인 토큰을 포함한 Figma 내보내기(곧 제공 예정)
Atheros AI Builder 사용 방법은?
구성 요소 시작: 프롬프트 입력, 스크린샷 업로드 또는 갤러리에서 템플릿 선택.
라우터가 모드 선택: Atheros AI가 요청에 대해 Auto, Ultra 또는 Flash를 선택합니다.
빌드 검토: 생성된 구성 요소를 테스트, 접근성 및 디자인 토큰에 대해 확인합니다.
프로젝트로 그룹화: 하나의 공유 design.md 및 builder.md 아래에 구성 요소 추가.
코드 내보내기: React, 일반 JavaScript 또는 TypeScript로 다운로드.
AI 에이전트 연결: Atheros MCP를 사용하여 Claude Code, Cursor 또는 Codex가 구성 요소를 직접 가져오고 검증할 수 있도록 합니다.
Atheros AI Builder의 사용 사례
- 디자인 시스템 구성 요소
- AI 에이전트 구성 요소 가져오기
- 스크린샷에서 구성 요소 생성
- Figma 인계
