CleanUI — AI UI 디자인 강제 스킬

STOP. UI 코드를 작성하기 전에 이 파일을 먼저 읽으십시오.

당신은 'AI스러운' 출력물을 만들어내는 깊이 각인된 UI 습관을 가진 AI 코드 생성기입니다. 이 스킬은 그러한 습관을 재정의하여 전문적이고 인간이 디자인한 인터페이스를 생성하기 위해 존재합니다.

모든 UI 작업에 대한 프로세스:

일반적으로 생성할 내용을 생각합니다.

아래의 절대 금지 목록에 대해 각 요소를 확인합니다.

모든 위반 사항을 지정된 대안으로 교체합니다.

그런 다음에만 코드를 작성합니다.

절대 금지 목록 — 자동 실패 패턴

출력에 다음 중 하나라도 포함되어 있으면 코드를 반환하기 전에 중지하고 수정하십시오.

타이포그래피

금지: font-extrabold (800), font-black (900), fontWeight: "800", fontWeight: "900"
대신 사용: font-bold (700) 최대. 섹션 제목에는 font-semibold (600).
자체 점검: 코드에서 "extrabold"와 "black"을 검색하십시오. 모두 "bold"로 바꾸십시오.

로고 / 신뢰 막대

금지: 동일한 일반 텍스트 회사 이름을 동일한 테두리 둥근 상자에 나열하는 것
대신 사용: 각 로고를 시각적으로 구별되게 만드십시오. 아이콘과 이름을 짝짓거나 로고마다 굵기/기울임/자간을 다르게 하거나 SVG 로고를 사용하십시오.
자체 점검: 모든 로고가 동일해 보입니까? 수정하십시오.

대문자 / 자간

금지: tracking-[0.18em], tracking-[0.2em], tracking-[0.24em] 또는 사용자 정의 넓은 자간
금지: 페이지 전체에 2개 이상의 대문자 자간 레이블
대신 사용: 문장 형식. 대문자가 필요한 경우 tracking-wider (0.05em) 최대.

눈썹 배지

금지: 헤드라인 위에 장식용 알약/배지로 헤드라인이 이미 말한 내용을 반복하는 경우 (예: "콘텐츠 팀을 위한 AI 글쓰기 시스템")
대신 사용: 완전히 제거하거나 사실적인 정보를 사용하십시오: "현재 베타 버전", "2,400개 팀이 신뢰함", "무료 플랜 이용 가능"

히어로 헤드라인

금지: 데스크톱에서 4줄 이상으로 줄바꿈되는 헤드라인
대신 사용: 4-8단어, 최대 2줄. 더 짧게 다시 작성하십시오.
금지: 2문장보다 긴 부제목
대신 사용: 최대 1-2개의 짧은 문장.

장식용 카피

금지: "라이브 펄스", "나이트 시프트", "혼잡함 없는 운영의 명확성"과 같은 장식용 레이블
대신 사용: 실제 데이터 (상태, 개수, 날짜) 또는 완전히 제거하십시오. 모든 레이블은 기능을 제공해야 합니다.

그림자

금지: 카드에 shadow-xl, shadow-2xl, 8px 이상의 블러
대신 사용: 미세한 테두리가 있는 shadow-sm 또는 shadow-none.

테두리 반경

금지: rounded-md, rounded-xl, rounded-2xl, rounded-3xl, rounded-[24px], rounded-[32px]를 무작위로 혼합하는 것
대신 사용: 2-3개 값을 선택하십시오. 카드: 8-12px. 버튼: 6-8px (또는 알약 모양의 경우 rounded-full). 입력: 6-8px. 일관성을 유지하십시오.

아이콘

금지: 아이콘으로 유니코드 문자 사용 (↑, ↓, ◌, ⌂, ◫)
대신 사용: lucide-react (웹), @expo/vector-icons (React Native), SF Symbols (iOS), Material Icons (Android)

파일 구조

금지: 전체 앱을 단일 파일에 저장
대신 사용: 분리: 화면/페이지, 컴포넌트, 상수/테마, 데이터, 네비게이션

레이아웃 규칙

콘텐츠 유형에 레이아웃 매칭

콘텐츠 유형	레이아웃	사용 금지
이미지/시각적 (음식, 여행, 제품)	가로 캐러셀, 이미지 그리드, 히어로 이미지	텍스트 전용 세로 목록
데이터/숫자 (금융, 피트니스, 분석)	통계 카드, 진행 막대, 메트릭 그리드	히어로 이미지 카드
피드 (소셜, 뉴스, 게시물)	전체 너비 스태킹 카드, 무한 스크롤	드래그 핸들이 있는 섹션 레이아웃
검색/탐색 항목 (전자상거래, 작업, 이메일)	검색/필터가 있는 세로 목록	히어로 섹션
멀티미디어 (스트리밍, 음악, 팟캐스트)	가로 스크롤 선반 (Netflix 스타일)	세로 목록
채팅/메시지	연락처 목록 + 채팅 상세	히어로 카드 또는 통계 그리드
지도/위치	지도 보기 + 하단 시트 오버레이	표준 목록 레이아웃

안티 템플릿 규칙

모든 앱에 동일한 레이아웃 골격을 절대 사용하지 마십시오. 프롬프트를 읽고, 콘텐츠 유형을 식별하고, 올바른 레이아웃을 선택하십시오.
다음 요소를 모두 함께 사용하지 마십시오: 히어로 카드 + 그리드 버튼 + 드래그 핸들 + 세그먼트 제어 + 세로 목록. 그것은 템플릿입니다.
앱이 이미지 중심인 경우 실제 이미지를 표시하십시오 (썸네일, 사진). 둥근 사각형 안의 아이콘만 표시하지 마십시오.
카테고리, 추천 항목, 콘텐츠 선반에는 가로 스크롤 (FlatList horizontal, CSS overflow-x-auto)을 사용하십시오. AI 생성기는 이것을 충분히 활용하지 않습니다.

디자인 취향

색상 절제

모노크롬 또는 거의 모노크롬 팔레트가 화려한 팔레트보다 더 나은 경우가 많습니다.
색상은 주로 동작(버튼, 링크), 상태(배지) 및 강조(선택된 상태)에 나타나야 합니다. 모든 요소에 색상을 사용하지 마십시오.
어두운 요소(카드, 섹션)는 실제 객체(신용 카드, 미디어 플레이어, 코드 블록)를 나타내거나 의도적인 시각적 리듬을 만들 때만 정당화됩니다. 단지 "다양성을 위해" 사용하지 마십시오.

목록 항목

식별자로 문자 이니셜만 절대 사용하지 마십시오. 카테고리별 아이콘(레스토랑용 조리기구, 교통용 버스, 구독용 반복 아이콘)을 둥근 사각형 안에 사용하십시오.
항상 메타데이터를 포함하십시오: 날짜/시간, 카테고리, 상태. "레스토랑"은 가짜처럼 느껴집니다. "레스토랑 · 5월 5일 · 14:28"은 실제처럼 느껴집니다.

필터

5개 이상의 항목이 있는 목록에는 필터 또는 세그먼트 제어가 있어야 합니다.
세그먼트 제어: 선택된 세그먼트에 단색 채우기가 있는 알약 트랙 스타일.

액션 버튼

테두리 없는 스타일이 종종 더 깔끔해 보입니다: 흐릿한 배경 사각형 안의 아이콘 + 아래 레이블. 카드 래퍼, 그림자, 테두리 필요 없음.

모바일 규칙

전체 iOS 색상 팔레트, Android Material 3 토큰, 컴포넌트 가이드라인 및 코드 예제는 모바일 패턴 참조를 참조하십시오.

모든 플랫폼

실제 네비게이션 라이브러리를 사용하고, 사용자 정의 View 기반 네비게이션 바를 사용하지 마십시오. React Native: @react-navigation/bottom-tabs. iOS: TabView. Android: Material NavigationBar.
절대 부동 알약 모양의 하단 네비게이션 바를 만들지 마십시오. position: absolute, borderRadius: 28, 또는 어두운 부동 알약 모양을 사용하지 마십시오.
React Native에서 조건부 스타일링을 위해 Platform.select() 또는 Platform.OS를 사용하십시오.
디자인 토큰(색상, 간격, 반경, 타이포그래피)을 상수 파일에 정의하십시오.
화면당 3가지 상태를 처리하십시오: 로딩(스켈레톤), 콘텐츠, 비어 있음.

iOS

조용하고, 부드럽고, 프리미엄. 절제된 색상. 시스템 폰트(SF Pro). 의미론적 색상(.label, .secondaryLabel, .systemBackground). 반투명 네비게이션/탭 바. listStyle(.insetGrouped). 아이콘에는 SF Symbols. 가느다란 구분선. 모서리 반경: 10-12. 무거운 그림자 사용 금지 — 배경 대비를 사용하십시오.

Android (Material 3)

구조적, 대담, 표현적. material3의 Material 컴포넌트. 그림자 대신 톤 표면(tonalElevation). Scaffold + TopAppBar + NavigationBar. 목록 행에는 ListItem composable. 항목 사이에는 HorizontalDivider(). 카드 모서리 반경: 12dp. 시드 색상에서 색상 구성표를 생성하십시오.

React Native / Expo

Platform.select()를 사용한 플랫폼 조건부 색상, 그림자 및 간격.
iOS는 shadowColor/shadowOpacity/shadowRadius를 사용합니다. Android는 elevation을 사용합니다.
플랫폼별 배경색: iOS #F2F2F7, Android #F9F9FF.
다른 기본 색상: iOS #007AFF, Android는 Material 시드 색상을 사용합니다.

웹 규칙

창의적 자유 + 구조

다음에 대한 자유가 있습니다: 색상 팔레트, 폰트 선택, 테두리 반경 값, 브랜드 개성, 배경 처리.

다음을 따라야 합니다: 섹션 구조, 히어로 콘텐츠 제한, 컴포넌트 패턴, 반응형 동작.

네비게이션

backdrop-blur 및 반투명 배경이 있는 상단 고정
로고 왼쪽, 네비게이션 링크 중앙, CTA 버튼 오른쪽
모바일: 햄버거 메뉴

랜딩 페이지 구조

히어로       → 헤드라인 + 부제목 + 2개의 CTA + 신뢰 요소 1개
신뢰         → 로고 막대 (시각적으로 구별되는 로고)
기능         → 아이콘 + 제목 + 설명이 있는 3열 그리드
작동 방식     → 3단계 프로세스
사용후기       → 아바타 + 이름 + 역할 + 인용문
가격         → 2-3단계, 추천 단계는 시각적으로 반전 (어두운 배경)
CTA          → 최종 행동 촉구
바닥글       → 링크 열 + 저작권

히어로

헤드라인 + 짧은 부제목 + 2개의 버튼 + 신뢰 요소 1개. 그게 전부입니다.
2열 히어로의 오른쪽에 제품 목업/스크린샷은 괜찮습니다.
히어로에 통계 카드, 목록이 있는 복잡한 미리보기 카드 또는 여러 단락 설명을 넣지 마십시오.

기능 카드

아이콘 컨테이너: 최소 48px, 색조 배경. 너무 작지 않아야 합니다.
카드 패딩: 넉넉함 (p-6 ~ p-8).
각 카드는 완전하게 느껴져야 합니다. 아이콘 + 제목 + 설명.

가격

추천 단계: 반전 (어두운 배경, 밝은 텍스트) 또는 더 두꺼운 테두리 + "가장 인기 있음" 배지.
각 카드의 전체 너비 CTA.

대시보드

사이드바 (240-260px) + 메인 콘텐츠.
사이드바: 로고, 아이콘이 있는 네비게이션 항목, 선택적 업그레이드 카드.
상단 바: 검색 + 알림 + 아바타.
콘텐츠: 인사말 → 통계 카드 → 탭이 있는 필터링된 목록 → 활동 피드.

다크 모드

배경: 매우 어두운 회색, 순수한 검정색이 아닙니다.
텍스트: 순백색이 아닌, 약간 흰색.
테두리: 어두운 회색. 색상 채도를 줄이십시오.

출력 전 체크리스트

코드를 반환하기 전에 다음을 확인하십시오:

타이포그래피:

코드 어디에도 font-extrabold 또는 font-black이 없어야 함
최대 2개의 폰트 두께 사용 (일반 + 굵게/세미볼드)

시각적:

tracking-[0.18em] 이상 없어야 함
페이지 전체에 최대 2개의 대문자 레이블
로고 막대 항목이 서로 시각적으로 구별되어야 함
카드에 shadow-xl 또는 shadow-2xl 없어야 함
일관된 테두리 반경 (최대 2-3개 값)

히어로:

데스크톱에서 헤드라인이 2줄에 맞아야 함
눈썹 배지 (있는 경우) 새 정보를 추가해야 하며 헤드라인을 반복하지 않아야 함
부제목은 1-2문장이어야 하며 단락이 아니어야 함

구조:

여러 파일 (화면, 컴포넌트, 상수, 네비게이션)
실제 아이콘 라이브러리 (유니코드 아님)
플랫폼별 스타일링 (React Native)
로딩/비어 있음 상태 존재

레이아웃:

레이아웃이 콘텐츠 유형과 일치해야 함 (매번 동일한 템플릿이 아님)
목록 항목에 카테고리 아이콘 + 메타데이터가 있어야 함
5개 이상의 항목이 있는 목록에 필터가 있어야 함

즐겨 사용하는 AI에게 물어보기

문서