Claude 사용해서 Figma로 디자인 해달라고 하면 얼마나 잘 해줄까?

https://5ffthewall.tistory.com/137

Figma에 Cladue 연결해서 AI에게 디자인 생성해달라고 하기인데 이제 MCP를 곁들인…

 

이전 글을 참고해서 클로드로 피그마 디자인을 하는 환경을 구축해뒀다.

이번에는 어느정도로 쓸만 한지를 직접 보여주겠다.

 

1. 디자인 시스템 주고 적용해서 디자인 해달라고 하기

 

사진과 같은 디자인 시스템이 담긴 링크를 클로드에게 주고 이 걸 활용해서 디자인을 해달라고 했다.

 

프롬프트는 다음과 같다.

(https://www.figma.com/design/aRDYrhvhDnIJLehFWvyLi3/~~ 링크 첨부)
이걸 보고 여기에 있는 디자인 시스템을 활용해서 앱 디자인을 만들어줘! 피그마에 바로 붙여넣을 수 있게 보내주고
앱 주제는 행복을 기록하는 감정 기록 일기장이야 앱 형식의 디자인을 보내줘! 만들어야 하는 화면은 1. 로그인 화면 2. 감정을 기록하는 기록 화면 (일기장처럼, 일기랑 감정 정도(숫자)를 입력받아) 3. 감정을 기록한 점수를 볼 수 있는 캘린더 화면, 점수에 따라 각 날짜의 진하기가 진해져 4. 개인정보를 담는 개인 페이지 5. 기록한 일기들을 스크롤형식으로 계속 볼 수 있는 저장소 화면 이렇게 5개 만들어줘

 

결과는 다음과 같다.

 

디자인 시스템을 온전히 가져다 쓴다기 보다는 색상만 골라 온 느낌? 

플러그인이 없는 클로드라 디자인 요소들을 바로 가져다 쓸 수 없고 클로드 자체가 또 만들어내야 해서 그런 것 같기도 하다. 아쉽긴 하지만 주요 포인트 색상을 주고 프로토타입 정도 만드는 정도는 매우 만족할 것 같다.

 

2. 작업하던 디자인 주고 추가로 화면 만들어 달라고 하기

 

이건 내가 기존에 작업하던 피그마 화면이다. 여기에 추가로 화면을 만들어달라고 요청해봤다.

 

프롬프트는 다음과 같다.

https://www.figma.com/design/aRDYrhvhDnIJLehFWvyLi3/OpenS 링크링크
여기에 다른 화면들 그려진걸 보고 비슷한 느낌으로 로그인과 회원가입 화면을 두 개 만들어줘 회원가입은 구글, 카카오 두 개 넣을거야 피그마에 바로 붙여넣을 수 있게 보내줘!

 

결과는 다음과 같다.

 

뭐 나름... 있어야 하는 폼은 다 있고 전체적인 레이아웃은 괜찮은 것 같다. 가이드 정도는 받은 느낌? 디테일은 수정하면 되니까 이 정도면 나쁘지~~ 않을 수도

 

또 다른 페이지를 만들어달라고 해봤다.

프롬프트는 다음과 같다.

추가화면을 만들어줘
프로필 사진 업로드 옵션 - 회원가입 과정에서 프로필 사진을 설정할 수 있는 기능을 추가하면 사용자 참여도를 높일 수 있습니다. 이거 개인 페이지 화면과 이거를 만들어줘

 

결과는 다음과 같다.

 

뭐 이정도면 만족?? 글씨체도 기존에 설정되어있던 pretandard로 써준다. 플러그인 있는 커서로 쓰면 확실히 더 괜찮겠는걸...

 

3. 아무것도 없는 화면에 만들어 달라고 하기

프롬프트는 다음과 같다.

(pdf 첨부) -> 앱 방향성 담긴 프로젝트 소개/기능 문서였음
이런 앱을 만들거야. 앱 화면을 만들어주라.

 

결과는 다음과 같다.

 

가끔 가다가 흔들어서 활성화 이런 건 건질 수 있다. 본격 디자인 전에 한 번쯤은 돌려보고 괜찮은 레퍼런스 있으면 가져오고 이런 식으로 큰 기대 없이 쓰면 괜찮은 정도인 것 같다. 난 커서와 플러그인 같이 쓰는 그걸 너무 해보고 싶은데 커서 결제한 사람 누구야 어디있어!!! ㅜㅜㅜ

 

 

암튼 이정도로 사용할 수 있다는 걸 보여주고 싶었다.

가끔 가다 쓸 듯?