minimalist-ui
프리미엄 미니멀리스트 웹 인터페이스 만들기
대부분의 AI 생성 인터페이스는 일반적이고 파생적인 느낌을 줍니다. 이 스킬은 Claude가 따뜻한 모노크롬 팔레트, 타이포그래피 계층 구조, 프리미엄 미|Estetik으로 세련되고 에디토리얼 스타일의 웹 디자인을 생성하도록 안내합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"minimalist-ui" 사용 중입니다. 세 개의 티어로 미니멀리스트 가격 섹션 생성
예상 결과:
벤토 그리드 레이아웃으로 세 개의 카드가 있는 가격 섹션. 각 카드는 1px #EAEAEA 테두리, 넉넉한 32px 패딩, 깔끔한 8px 테두리 반경을 가집니다. 기본 티어에는 #111111 CTA 버튼이 있습니다. 보조 텍스트는 #787774를 사용합니다. 그림자나 그라디언트 없음.
"minimalist-ui" 사용 중입니다. FAQ 아코디언 섹션 디자인
예상 결과:
컨테이너 박스 없는 아코디언. 각 항목은 1px #EAEAEA 하단 테두리로 분리됩니다. Radix 또는 Phosphor 아이콘을 사용한 깔끔한 + 및 - 토글. 가독성을 위한 1.6 라인 높이 오프 블랙 텍스트(#2F3437).
"minimalist-ui" 사용 중입니다. SaaS 제품용 히어로 섹션 생성
예상 결과:
Playfair Display 또는 Newsreader를 사용한 에디토리얼 세리프 헤딩, 타이트 -0.02em 트래킹, 1.1 라인 높이의 히어로. 따뜻한 오프 화이트 배경(#FBFBFA). 넉넉한 라인 높이의 Switzer 또는 SF Pro 서브타이틀. 0.03 투명도의 선택적 앰비언트 레디얼 그라디언트.
보안 감사
안전All 102 static findings are false positives triggered by CSS font-family declarations and UI design terminology. The SKILL.md is a legitimate design specification document. No actual shell commands, cryptographic code, keyloggers, or network exfiltration patterns exist. The hardcoded URL is a standard placeholder image service (picsum.photos) commonly used in web development.
감지된 패턴
품질 점수
만들 수 있는 것
스타트업 랜딩 페이지
일반적인 SaaS 디자인과 차별화된 세련된 미니멀리스트 랜딩 페이지 생성.
문서 사이트
에디토리얼 타이포그래피로 깔끔하고 읽기 쉬운 문서 레이아웃 생성.
디자인 시스템 컴포넌트
미니멀리스트 디자인 원칙을 따르는 일관된 UI 컴포넌트 구축.
이 프롬프트를 사용해 보세요
[PRODUCT NAME]을 위한 미니멀리스트 랜딩 페이지를 디자인하세요. 따뜻한 모노크롬 팔레트, 에디토리얼 세리프 헤딩, 벤토 그리드 기능 섹션을 갖춘 프리미엄 유틸리테리안 미니멀리즘 스타일을 사용하세요. 히어로 섹션, 세 개의 기능 카드, 가격표가 포함되어야 합니다.
미니멀 디자인 원칙을 사용하여 다음 UI 컴포넌트를 생성하세요: (1) #111111 배경의 기본 CTA 버튼, (2) 부드러운 파스텔 배경의 태그 배지, (3) 하단 1px 테두리만 있는 아코디언 FAQ 섹션. 정의된 컬러 팔레트와 타이포그래피를 사용하세요.
벤토 그리드 레이아웃을 사용하여 세 개의 티어 가격표를 디자인하세요. 각 티어는 넉넉한 패딩(24px-40px), 1px #EAEAEA 테두리, 깔끔한 8px 테두리 반경을 가져야 합니다. 오프 블랙 텍스트(#2F3437)와 부드러운 회색 보조 텍스트(#787774)를 사용하세요.
[PRODUCT TYPE]을 위한 완전한 랜딩 페이지를 생성하세요. 프리미엄 유틸리테리안 미니멀리즘 프로토콜을 따르세요: 따뜻한 모노크롬 팔레트(#FFFFFF, #F7F6F3, #111111), 에디토리얼 세리프 헤딩(Lyon Text/Newsreader), 시스템 산세리프 본문(SF Pro/Geist). 다음을 포함하세요: 타이트 트래킹 헤드라인이 있는 히어로, 벤토 기능 그리드, 추천 섹션, 미니멀 블러가 있는 스티키 네비게이션. translateY(12px) 페이드인으로 스크롤 진입 애니메이션을 추가하세요.
모범 사례
- 컴포넌트를 추가하기 전에 먼저 컬러 팔레트와 타이포그래피 계층 구조 정의
- 프리미엄 느낌을 위해 섹션 사이에 넉넉한 여백(py-24 또는 py-32) 사용
- 최적의 가독성을 위해 콘텐츠 너비를 max-w-4xl 또는 max-w-5xl로 제한
- IntersectionObserver를 사용하여 미묘하고 성능 좋은reveal를 위한 스크롤 진입 애니메이션 적용
피하기
- Inter, Roboto, Open Sans와 같은 일반적인 폰트 사용 (기업적이고 파생적인 느낌을 줌)
- 미니멀리스트 미학을 반하는 무거운 Tailwind 그림자(shadow-md, shadow-lg) 적용
- 모노크롬 팔레트를 깨뜨리는 밝은 기본 색상, 그라디언트 또는 글래스모피즘 효과 사용
- 큰 컨테이너나 기본 버튼에 둥근 필 필 스타일 적용