AI 커스텀 디자인 시스템 호출

어떤 디자인 가이드를 AI에서 사용할 수 있나요?

게시된 라이브러리에서 [AI 사용 허용]을 체크해야 AI 패널에서 해당 라이브러리를 선택하여 사용할 수 있습니다.

설정 경로 1

팀 메인 페이지 - 리소스 탭 (라이브러리 파일 편집 권한 필요)

설정 경로 2

라이브러리 팝업 창 좌측 하단 (라이브러리 파일 편집 권한 필요)

설정 경로 3

관리자 페이지 - 라이브러리 관리 (엔터프라이즈 버전 관리자용)

AI 커스텀 디자인 시스템 활용 프로세스

1. 디자인 시스템 선택

디자인 파일 내 AI 패널을 열고 대화창에서 [커스텀 디자인 시스템]을 선택한 뒤, AI 사용이 허용된 라이브러리 파일을 선택합니다. 선택을 마친 후 프롬프트를 입력하면 해당 컴포넌트 라이브러리의 스타일이 반영된 디자인 시안을 생성할 수 있습니다.

2. 프롬프트 입력

프롬프트 작성 팁

• 생성 품질을 높이기 위해 프롬프트는 선택한 컴포넌트 라이브러리의 스타일 및 의미적 범위와 최대한 일치하도록 작성하는 것이 좋습니다.
• 라이브러리와 프롬프트가 서로 상충할 경우, 생성 결과물의 품질과 컴포넌트 활용도가 저하될 수 있습니다.
• 페이지에 컴포넌트 라이브러리가 커버하지 못하는 모듈이 포함된 경우, AI는 부적절한 컴포넌트를 억지로 적용하는 대신 문맥에 따라 내용을 보충하여 생성합니다.

지양해야 할 사항

• 스타일 충돌: 컴포넌트 라이브러리는 라이트 모드의 B2B스타일인데, 프롬프트는 다크 모드의 금융 스타일을 요구하는 경우
• 시나리오 충돌: 컴포넌트 라이브러리는 대시보드 중심인데, 프롬프트는 모바일 앱 로그인 페이지를 요구하는 경우
• 구조적 충돌: 라이브러리에 폼 요소만 포함되어 있는데, 프롬프트는 이커머스 상품 카드 UI를 요구하는 경우
• 브랜드 충돌: 프롬프트에 강한 브랜드 비주얼을 요구했으나, 컴포넌트 라이브러리에 관련 요소가 없는 경우