frontend-app-builder · OpenAI · Codex
요구사항에 맞는 화면을 설계하고 구현과 브라우저 확인을 진행합니다.
아이디어를 실제로 눌러볼 수 있는 웹앱 화면으로 옮기는 스킬입니다. 화면 디자인과 구현을 연결하고 브라우저에서 사용자 흐름을 확인하는 작업까지 다룹니다.
필수 기능과 사용자가 따라갈 순서를 설명해보세요. 입력, 목록, 상세 보기처럼 핵심 동작을 먼저 구성하면 앱의 방향을 확인하며 기능을 추가하기 쉽습니다.
“작은 도서 대여 앱을 만들어줘. 책 검색, 대여 상태 표시, 상세 화면을 구현하고 실제 브라우저에서 동작을 확인해줘.”
받을 수 있는 결과작동하는 프런트엔드 화면
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
앱 연결·MCP·보조 파일이 포함된 플러그인이에요. 아래 SKILL.md는 동작을 읽어보는 용도로도 사용할 수 있지만, 파일 하나로 앱 연결이 설치되지는 않아요.
Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 frontend-app-builder 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
“frontend-app-builder 스킬을 사용해줘. 입력 자료: 사용자 흐름과 필수 기능”처럼 요청하세요. 위의 예시를 내 자료에 맞게 바꿔도 좋아요.
예상 결과는 ‘작동하는 프런트엔드 화면’입니다. 필요한 내용이 포함됐는지 확인하세요. 입력 자료의 사실·숫자와 결과를 대조하고, 부족한 부분을 이어서 요청하세요.
제작자 원본 2026-10-04 확인 · 설치 안내 2026-10-04 확인 · 실제 설치·실행 미검증
모델 사용 요금과 연결 앱 요금은 이용 중인 서비스의 정책을 따릅니다.
설치 안내 출처Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 frontend-app-builder 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
원문 재배포 허용을 확인하지 못한 항목은 지원 환경의 설치 안내를 제공합니다.
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
OpenAI 플러그인 저장소 원본 확인안내에 표시된 앱에서 설치하세요. 설치·실행 검증은 별도입니다.