AI 밤티 없애는 디자인시스템 프롬프트 2개

AI한테 "예쁘게 만들어줘"라고만 하면 보라색 그라데이션, 이모지 카드처럼 어디서 본 듯한 사이트가 나와요. 잘 만든 사이트에서 디자인 규칙을 먼저 뽑아 두고, 그 규칙대로 만들어 달라고 하면 결과가 확 달라져요.

두 프롬프트 모두 바로 복사해서 쓸 수 있어요. AI라서 같은 문장을 넣어도 결과가 조금씩 달라요. 나온 걸 보면서 어색한 데는 고쳐 달라고 하면 돼요.

단계	넣는 것	나오는 것
1. 사이트 고르기	원하는 느낌 한 줄	따라 할 사이트 주소
2. 디자인시스템 만들기	사이트 주소 + 프롬프트 1	디자인시스템 한 장
3. 사이트에 적용하기	디자인시스템 + 프롬프트 2	같은 느낌의 페이지들

① 만드는 과정

1. 사이트 고르기

디자인시스템은 사이트 전체에 같이 쓰는 규칙이에요.

• 색: 배경, 글자, 선, 버튼 색
• 글씨: 글꼴, 크기, 굵기
• 컴포넌트: 버튼, 입력칸, 체크박스 모양
• 간격: 여백, 모서리 둥글기

이게 정해져 있으면 어느 페이지를 새로 만들어도 같은 사이트처럼 보여요. AI한테 그냥 맡기면 페이지마다 규칙이 달라져서, 하나하나는 괜찮아도 모아 놓으면 어색해져요.

먼저 원하는 느낌을 한 줄로 정하고, 그 느낌의 사이트를 찾아 주소를 복사해요. Awwwards 이커머스 모음처럼 잘 만든 사이트를 모아 둔 곳에서 훑어보면 찾기 쉬워요.

2. 디자인시스템 만들기

클로드 코드에 아래 프롬프트를 넣어요. 주소와 원하는 느낌만 바꾸면 돼요.

이 사이트 디자인 규칙을 뽑아서 그 규칙대로 디자인시스템 만들어줘.

https://(사이트 주소)

- 원하는 느낌: 모노톤 미니멀의 데일리·오피스 여성복
- 스크린샷만 보지 말고 DOM, CSS 로 실제 값을 재줘
- 데스크탑과 모바일을 따로 봐줘
- 화면만 보지 말고 직접 눌러 봐줘. 메뉴에 마우스 올리기, 모바일 메뉴 열기, 장바구니 담기처럼 눌러야 나오는 화면까지
- 사이트에 실제로 있는 UI 만 먼저 정리해줘
- 결과는 한 장으로 보여줘. 왼쪽에 색·글씨·간격 규칙, 오른쪽에 버튼·입력칸 같은 컴포넌트
복사

저는 여러 번 나눠서 요청했는데, 한 번에 넣을 수 있게 합쳤어요. 그러면 이런 게 나와요.

결과를 보면서 어색한 데를 짚어 주세요. 저는 글씨 크기랑 여백을 제일 많이 고쳤어요.

3. 사이트에 적용하기

이제 만든 디자인시스템대로 페이지를 만들어 달라고 해요.

이 디자인시스템대로 [만들 페이지] 만들어줘.
디자인시스템에 없는 색, 글꼴, 간격은 쓰지 마.
복사

이 문장은 예시예요. 저는 쇼핑몰 스킨 작업 도구로 만들어서 이 문장을 그대로 쓰진 않았어요. 그래도 하는 일은 같아요. 규칙을 주고, 규칙 밖으로 나가지 말라고 하는 거예요.

저는 이렇게 쇼핑몰 화면을 만들었어요. 홈, 상품 목록, 상품 상세가 다 같은 규칙을 따라요.

• 한 페이지씩 만들어요. 한 번에 다 시키면 뒤로 갈수록 규칙에서 벗어나요.
• 디자인시스템 파일을 매번 같이 줘요. 새 대화에서는 앞에서 정한 걸 몰라요.
• 어긋나면 규칙을 다시 가리켜요. "이 버튼 디자인시스템이랑 달라"처럼요.

② 여러 사이트 느낌 섞기

사이트 하나만 따라 하면 그 사이트랑 너무 비슷해질 수 있어요. 저는 네 곳을 각각 뽑은 뒤 하나로 합쳤어요. 사이트마다 2번 프롬프트를 돌린 다음, 이렇게 요청하면 돼요.

분석한 사이트들을 바탕으로 공통 디자인시스템 하나로 정리해줘.

- 같은 역할은 같은 규칙으로 맞춰줘 (버튼, 글씨 크기 등)
- 사이트에 없던 컴포넌트(팝업, 안내창 등)도 이 값에 어울리게 채워줘
- 글씨 단계가 너무 쪼개지지 않게 정리해줘
복사

팔로우해 두시면 AI로 사이트 만드는 방법 계속 받아보실 수 있어요!