{"@context":"https://schema.org","@type":"HowTo","@id":"https://bkamp.ai/en/recipes/a00c6a60-7a9f-4038-a3ec-729423e479d2","name":"A designer riding the vibe on source code","description":"How do AI Native Team Designers Design UI?","url":"https://bkamp.ai/en/recipes/a00c6a60-7a9f-4038-a3ec-729423e479d2","image":"https://media.bkamp.ai/uploads/recipe_thumbnail/4f70064b-a999-4674-aa51-72bc98be149d/aefd97de-2af3-4348-a145-8a13ef7687ea.png","inLanguage":"en-US","datePublished":"2026-02-12T04:55:48.724906Z","dateModified":"2026-06-27T06:28:08.879257Z","author":{"@type":"Person","name":"Jack choi","url":"https://bkamp.ai/en/users/최준호_8d4cca"},"publisher":{"@type":"Organization","name":"bkamp","url":"https://bkamp.ai"},"educationalLevel":"중급","category":"디자인","step":[{"@type":"HowToStep","position":1,"name":"디자이너가 코드 위에서 직접 디자인하는 예시","text":"

피그마 없이 디자인한다고요? 🤔

Popup Studio 디자이너 박선영 님은 피그마 디자인 파일 없이, 소스 코드 위에서 Claude Code와 함께 일합니다. 4년 차 디자이너가 어떻게 AI와 함께 일하는 방식을 완전히 바꿨는지, 실제 작업 과정을 시연과 함께 보여드립니다.

이런 이야기를 합니다

Popup Studio는 왜 피그마를 쓰지 않는지, 그리고 어떻게 그게 가능한지
Google Stitch, 피그마 메이크, Lovable 같은 AI 디자인 도구를 다 써봤지만 실무가 바뀌지는 않았던 이유
소스 코드 위에서 일한다는 것의 의미: 디자이너가 프로덕트 구조 전체를 꿰고 일할 수 있게 된 변화
Claude Code로 실제 bkend 서비스 작업 시연: 영향 범위 분석 → 로컬 서버에서 UI 확인 → 버튼 상태값 수정 → PR 요청까지 한 흐름으로
숫자로만 보여주던 대시보드 카드를 AI에게 시각화 제안받고 바로 구현하기
\"너는 15년 차 시니어 디자이너잖아\" — AI에게 페르소나를 부여해 더 좋은 제안을 받는 꿀팁
며칠 걸리던 컴포넌트 작업이 실시간으로 끝나는 속도의 변화
ChatGPT와 Claude Code의 차이: 내부 맥락(코드)을 아는 AI vs 외부에서 보기만 하는 AI
디자이너의 역할이 넓어진 것이지 일이 많아진 게 아닌 이유: \"사용자 경험을 책임지는 사람이 직접 구현까지 할 수 있게 된 것\"
이런 일이 가능하려면 필요한 조건: 동료 간의 신뢰, AI에 한계가 없다는 마인드셋, 문서 공유 문화
\"코드를 아는 게 아니라 내 문제를 아는 것\" — 비개발자가 바이브 코딩을 시작하는 핵심 마인드

"}],"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1607},{"@type":"InteractionCounter","interactionType":"https://schema.org/BookmarkAction","userInteractionCount":0}],"mainEntityOfPage":{"@type":"WebPage","@id":"https://bkamp.ai/en/recipes/a00c6a60-7a9f-4038-a3ec-729423e479d2"}}

A designer riding the vibe on source code

An example of a designer designing directly over code

Step Roadmap

댓글 0개

A designer riding the vibe on source code

An example of a designer designing directly over code

Step Roadmap

댓글 0개

A designer riding the vibe on source code

An example of a designer designing directly over code

Step Roadmap

댓글 0개

A designer riding the vibe on source code

An example of a designer designing directly over code

Step Roadmap

댓글 0개