r/vibecoding•4개월 전•64•138

바이브 코딩으로 만든 프론트엔드 디자인을 보여주세요! 👇

Show vibe-coded frontend designs! 👇

핵심 요약

AI 도구를 활용해 구현한 멋진 프론트엔드 디자인을 공유하고 사용한 모델을 소개하는 자리입니다.

바이브 코딩 — AI 도구로 구현한 프론트엔드 디자인을 공유함.
모델 활용 — Claude, ChatGPT 등 다양한 AI 모델의 작업물을 확인 가능함.
디자인 트렌드 — 대시보드, 랜딩 페이지 등 AI로 생성된 UI가 빠르게 표준화됨.
사용자 사례 — MacOS 파일 관리자나 차트 분석 도구 등 실제 프로젝트가 공유됨.

아름다운 무언가를 만들었다면, 무엇이든 댓글로 자랑하고 그걸 만드는 데 사용한 AI 모델도 알려주세요.

Claude Sonnet 4.6, Opus 4.7, ChatGPT 5.5 등

어떤 것들이 가능한지 정말 보고 싶네요!

원문

커뮤니티 목록

r/vibecoding•4개월 전•64•138

바이브 코딩으로 만든 프론트엔드 디자인을 보여주세요! 👇

Show vibe-coded frontend designs! 👇

핵심 요약

AI 도구를 활용해 구현한 멋진 프론트엔드 디자인을 공유하고 사용한 모델을 소개하는 자리입니다.

바이브 코딩 — AI 도구로 구현한 프론트엔드 디자인을 공유함.
모델 활용 — Claude, ChatGPT 등 다양한 AI 모델의 작업물을 확인 가능함.
디자인 트렌드 — 대시보드, 랜딩 페이지 등 AI로 생성된 UI가 빠르게 표준화됨.
사용자 사례 — MacOS 파일 관리자나 차트 분석 도구 등 실제 프로젝트가 공유됨.

아름다운 무언가를 만들었다면, 무엇이든 댓글로 자랑하고 그걸 만드는 데 사용한 AI 모델도 알려주세요.

Claude Sonnet 4.6, Opus 4.7, ChatGPT 5.5 등

어떤 것들이 가능한지 정말 보고 싶네요!

주요 댓글

r/vibecoding

AI를 활용한 UI 개발에서 무작정 전체를 생성하기보다, 세밀한 반복 수정과 좋은 감각이 결합될 때 훨씬 완성도 높은 결과물이 나온다는 의견이 지배적입니다.

사람들이 실물처럼 보이게 웹사이트를 디자인하던 시절이 그리워서, Myst나 포인트 앤 클릭 퍼즐 게임 느낌의 포트폴리오 사이트를 만들어봤음. 프로젝트 목록만 나열하는 대신, 방문자가 내가 만든 방을 탐험할 수 있게 함. https://mattebso.com. Claude Design이랑 Claude Code로 Opus 4.7 썼고, 방 이미지는 ChatGPT, 애니메이션이랑 루프는 Veo3.1 썼음.

진짜 맘에 든다

고마워!

Claude Code를 어시스턴트로 활용해서 만든 https://wogl.io 임 ❤️

누가 너나 이 작업에 대해 뭐라 하면 나한테 말해. 내가 가서 방어해 줄게. 이게 바로 우리가 보고 싶어 하는 거지. 노력도 보이고, 교육적이고, 엄청 깔끔하고, 진짜 공들인 티가 나. 그리고 성공했어.

Claude Design으로 내 MacOS 파일 관리자를 위한 멋진 인터페이스를 개발했음. [이미지] 라이트 테마가 더 나은 것 같기도 함.

전 Ubiquiti 대시보드랑 디스코드 UI를 정말 좋아해요. 그래서 평소에 그 느낌을 살려서 vibe를 맞춰보려고 노력하죠.

사람들이 앱 전체를 한 번에 다 뽑아내려고 하는 걸 멈추니까 프론트엔드 퀄리티가 확 뛰었어. 내가 본 제일 잘 만든 vibe-coded UI들은 보통 한 번에 거대한 프롬프트를 넣는 게 아니라, 간격, 타이포그래피, 모션, 반응형을 엄청나게 반복 수정하면서 섹션별로 만든 것들이야. 진짜 잘 만든 데모들은 'AI 마법'이라기보단 좋은 감각이랑 빠른 반복 수정 루프의 결과물이지.

원문r/vibecoding