이것은 작동하는 React 앱입니다. 활성 상태가 있는 사이드바 탐색, 4개의 KPI 카드, 2개의 차트, 그리고 실제로 검색하고 행을 선택할 수 있는 거래(transactions) 테이블로 구성되어 있습니다. 390px까지 반응형으로 동작합니다. 배포도 완료되었습니다.

이 모든 것이 하나의 프롬프트와 이 이미지에서 나왔습니다:
[https://x.com/marcelkargul/status/2094890583265251405]

전체 내용을 공개합니다.

실제로 제가 보낸 것
첨부된 디자인에 따라 대시보드를 만들어 달라는 스크린샷과 한 줄의 문구, 그것뿐이었습니다. 색상 값, 간격 스케일, 컴포넌트 목록,

만약 용어가 생소하다면: 이것은 Bit Cloud를 기반으로 구축되었는데, 여기서 작업 단위는 레포지토리(repo)가 아니라 컴포넌트와 스코프입니다. 각각의 요소는 자체 API, 테스트 및 문서로 버전 관리되며, 브랜치나 PR 대신 레인(lanes)과 변경 요청을 통해 배포됩니다. Hope는 이 위에 구축된 AI이며—이것이 출력물이 하나의 긴 파일이 아니라 구조화된 컴포넌트로 나온 이유입니다.

솔직히 말하자면
이것은 프로토타입입니다. 프롬프트 하나로 프로토타입을 얻을 수 있습니다. 이것이 실제 주장이며, 저는 이 점에 대해 정확하고 싶습니다. 왜냐하면 '프롬프트 하나 → 프로덕션 앱'이라는 것은 많이 게시되지만 기본적으로는 결코 사실이 아니기 때문입니다.

여기서 진짜인 것: 레이아웃, 반응형 동작(responsive behavior), 상호작용, 컴포넌트 구조, 배포. 클릭할 수 있습니다. 누군가에게 보여줄 수 있습니다.

진짜가 아닌 것:

• 데이터는 모의 데이터(mock)입니다. 모든 숫자는 하드코딩된 배열입니다. 백엔드도, 데이터베이스도, API도 없습니다.
• 내비게이션이 작동하지 않습니다. 사이드바 항목 12개는 단 하나의 페이지입니다. 'Products'를 클릭해도 브레드크럼(breadcrumb)만 바뀌고 아무것도 변하지 않습니다.
• 인증 기능 없음. 'Welcome back, Najla'는 단순한 문자열입니다.
• 제어 요소들은 장식용입니다. 날짜 선택기는 버튼일 뿐입니다. 필터 및 내보내기(Filter and Export)는 아무런 동작도 하지 않습니다. 페이지네이션은 8개 행에 걸쳐 3개의 페이지 번호를 표시할 뿐입니다.

이 중 어느 것도 결함이 아닙니다. 이것이 프로토타입의 본질입니다. 가치를 창출한 것은 '디자인 존재'를 '클릭하고 공유할 수 있는 작동하는 것'으로 단일 단계로 압축했다는 점이며, 이 단계가 진정으로 붕괴되었습니다.

이를 실제 플랫폼으로 전환하려면 몇 가지 더 많은 프롬프트가 필요합니다. 사이드바를 실제 라우트(route)에 연결하여 12개 항목이 12개의 페이지가 되도록 해야 합니다. 트랜잭션 뒤에 데이터베이스를 배치해야 합니다. 인사말이 의미를 갖도록 인증 기능을 추가해야 합니다. 날짜 범위 필터링을 실제로 작동하게 하고, 내보내기를 실제로 내보내게 만들어야 합니다. 이 각각은 자체적인 작업 단위입니다—예전보다 작아졌지만 0은 아닙니다.

결론적으로: 프롬프트 하나로 배포된 프로토타입이 가능합니다. 플랫폼까지는 아닙니다. 그렇지 않다고 말하는 사람은 무언가를 팔고 있는 것입니다. 😄

제가 계속 생각하는 부분
저는 이것을 디자인하지 않았습니다. 저는 이것을 디자인할 수 없습니다. 스크린샷은 다른 사람의 작업물이었고, 제가 만들었을 것이라 예상되는 어떤 것보다도 훌륭합니다.

사라진 것은 디자인 자체가 아니었습니다. 그것은 디자인과 브라우저에서 열어볼 수 있는 버전 사이의 간극이었습니다. 즉, 인수인계 과정, 티켓 발행, 그리고 엔지니어링 역량을 기다리는 몇 주간의 시간 같은 것이었죠.

Hope를 사용하여 Bit Cloud에 구축했습니다.