98.8K+다운로드
사용 가이드로 건너뛰기
minimalist-ui작성자 Leonxlnx

Minimalist UI 스킬.

UI 디자인을 위한 Claude Code 및 Codex skill: 깔끔한 모노크롬 에디토리얼 스타일 인터페이스입니다.

  • Web & UI
  • UI 코드
OpenDesign 다운로드사용 가이드 보기
Leonxlnx/taste-skill · skills/minimalist-skill/SKILL.mdSKILL.md
--- name: minimalist-ui description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. --- ## 2. Absolute Negative Constraints (Banned Elements) ## 3. Typographic Architecture ## 4. Color Palette (Warm Monochrome + Spot Pastels) ## 5. Component Specifications ## 6. Iconography & Imagery Directives ## 7. Subtle Motion & Micro-Animations
업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 7,896자

01 기능

minimalist-ui Skill이 Claude Code와 Codex에서 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 skill은 프리미엄 워크스페이스 플랫폼에서 영감을 받은 초미니멀리즘의 문서 스타일 웹 인터페이스를 생성합니다. 오프화이트와 차콜 톤의 웜 모노크롬 팔레트, 에디토리얼 세리프와 지오메트릭 산세리프를 사용한 맞춤형 타이포그래피 계층 구조, 그리고 뮤트한 파스텔 강조색을 사용한 플랫 벤토 그리드 레이아웃을 강제합니다.

이 프로토콜은 Inter, Roboto, Open Sans 폰트, Lucide와 Heroicons 같은 표준 아이콘 라이브러리, Tailwind의 기본 헤비 섀도, 그래디언트, 이모지, AI 카피라이팅 클리셰를 엄격히 금지합니다. 컴포넌트는 1px solid #EAEAEA 테두리, 선명한 8-12px 보더 반경, 넉넉한 내부 패딩, IntersectionObserver를 사용한 스크롤 진입 애니메이션을 사용합니다. 모션은 눈에 띄지 않고 세련되며, transform과 opacity로만 애니메이션됩니다.

산출물

  • 고급스럽고 정돈된 에디토리얼 미학을 네이티브하게 반영하는 HTML, React, Tailwind 또는 Vue 프론트엔드 코드
  • 벤토 그리드 형태의 비대칭 CSS Grid 구조와 넉넉한 매크로 화이트스페이스를 가진 레이아웃
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    매크로 화이트스페이스를 먼저 설정

    섹션 사이에 매시브한 세로 패딩을 사용합니다. 구체적으로 Tailwind 단위로 py-24 또는 py-32를 사용합니다.

  2. 02
    콘텐츠 너비 제한

    에디토리얼 비율을 유지하기 위해 주요 타이포그래피 콘텐츠를 max-w-4xl 또는 max-w-5xl로 제한합니다.

  3. 03
    타이포그래피 계층 구조와 모노크롬 변수 적용

    웜 모노크롬 팔레트 사양에 따라 즉시 커스텀 폰트와 색상 변수를 설정합니다.

  4. 04
    테두리 표준 강제

    모든 카드, 구분선, 테두리는 정확히 1px solid #EAEAEA를 사용해야 합니다.

  5. 05
    스크롤 진입 애니메이션 추가

    윈도우 스크롤 리스너가 아닌 IntersectionObserver를 사용하여 모든 주요 콘텐츠 블록에 애니메이션을 적용합니다.

  6. 06
    시각적 깊이 확보

    섹션에는 텅 빈 플랫 배경이 아니라 이미지, 앰비언트 그래디언트, 또는 미묘한 텍스처를 통한 깊이가 필요합니다.

02 적합성 확인

minimalist-ui Skill을 사용해야 할 때

이러한 종류의 UI 디자인 작업일 때 Claude Code 또는 Codex에서 minimalist-ui 스킬을 사용하십시오. 적합성과 한계는 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • 최상위 워크스페이스 플랫폼과 유사한 매우 정교한 초미니멀리즘 문서 스타일 웹 인터페이스 제작
  • 에디토리얼한 느낌을 구축하기 위해 극단적인 타이포그래피 대비와 프리미엄 폰트 선택이 필요한 인터페이스
  • 24px에서 40px의 넉넉한 내부 패딩을 가진 비대칭 벤토 박스 기능 그리드가 필요한 디자인
  • IntersectionObserver를 사용한 스크롤 진입 애니메이션으로 세련된 느낌을 주는 미묘하고 눈에 띄지 않는 모션이 필요한 프로젝트

한계 인지하기

  • 큰 요소나 섹션에 원색 배경을 사용하는 일반적인 SaaS 디자인 트렌드
  • 미묘한 내비게이션 바 블러 이상의 그라디언트, 네온 컬러, 3D 글래스모피즘을 요구하는 디자인
  • 큰 컨테이너, 카드, 주요 버튼에 필 형태(rounded-full)를 사용하는 인터페이스
  • 어떤 형태로든 이모지를 요구하거나 John Doe, Acme Corp 같은 일반적인 플레이스홀더 이름을 요구하는 콘텐츠

03 스킬 내부

minimalist-ui 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 금지된 서체

    Inter, Roboto, Open Sans를 절대 사용하지 마십시오. 본문과 UI에는 대신 SF Pro Display, Geist Sans, Helvetica Neue, Switzer를 사용하십시오.

  2. 금지된 아이콘 라이브러리

    Lucide, Feather, 표준 Heroicons를 사용하지 마십시오. 대신 Bold 또는 Fill 굵기의 Phosphor Icons, 혹은 Radix UI Icons를 사용하십시오.

  3. 섀도우 불투명도 제한

    Tailwind의 shadow-md, shadow-lg, shadow-xl을 사용하지 마십시오. 섀도우는 실질적으로 존재하지 않거나 불투명도 0.05 미만의 초확산 형태여야 합니다.

  4. 이모지 전면 금지

    코드, 마크업, 텍스트 콘텐츠, 헤딩, 대체 텍스트에 이모지를 사용하지 마십시오. 적절한 아이콘이나 깔끔한 SVG 프리미티브로 대체하십시오.

  5. 금지된 카피라이팅 표현

    Elevate, Seamless, Unleash, Next-Gen, Game-changer, Delve 같은 AI 카피라이팅 클리셰를 사용하지 마십시오. 대신 평이하고 구체적인 언어로 작성하십시오.

  6. 본문 텍스트 색상 제약

    본문 텍스트는 절대 순수 검정 #000000이어서는 안 됩니다. 오프블랙이나 차콜 #111111 또는 #2F3437을 line-height 1.6으로 사용하십시오.

  7. 카드 테두리 사양

    카드는 정확히 1px solid #EAEAEA 테두리를 가져야 하며, border-radius는 최대 8px 또는 12px로 선명하게 처리해야 합니다.

  8. 애니메이션 성능 요구사항

    오직 transform과 opacity로만 애니메이션을 처리하십시오. top, left, width, height 같은 레이아웃을 유발하는 속성은 절대 사용하지 마십시오.

04 활용하기

Claude Code 또는 Codex에 minimalist-ui 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 Agent에 minimalist-ui 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

skills/minimalist-skill/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Build a project dashboard using an asymmetrical bento-grid layout with the warm monochrome palette. Include feature cards with 1px solid #EAEAEA borders and 24px internal padding, a primary CTA button with #111111 background, status badges using pale blue and pale green pastels, and scroll-entry animations for each grid item. Use Geist Sans for body text and Instrument Serif for the hero heading. Add keystroke hints as <kbd> elements and ensure no Tailwind shadow utilities are used.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 스크롤 진입 애니메이션이 IntersectionObserver와 600ms 지속시간의 translateY(12px)를 사용하는지 확인하십시오

OpenDesign에서 minimalist-ui를 SKILL.md 링크로 가져오십시오: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택하십시오.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill 브랜치 main
스킬 파일
skills/minimalist-skill/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 ccbc156
License
MIT LICENSE에서 확인
리포지토리 스타
86,946 GitHub 스냅샷은 2026-09-14에 전체 Leonxlnx/taste-skill 저장소에 대해 촬영되었으며, 이 카탈로그에 11개의 skills가 포함되어 있습니다. minimalist-ui의 평가 또는 사용 수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 프로토콜 개요따뜻한 모노크롬 팔레트와 플랫 아키텍처를 사용하는 초미니멀리즘 문서 스타일 웹 인터페이스에 대한 지침을 소개합니다
  2. 절대 금지 제약(금지 요소)Inter 폰트, Lucide 아이콘, 강한 그림자, 그레이디언트, 이모지, 카피라이팅 클리셰 등 엄격히 금지된 디자인 요소를 나열합니다
  3. 타이포그래피 아키텍처기하학적 산세리프, 에디토리얼 세리프, 좁은 자간의 모노스페이스를 사용한 폰트 패밀리, 크기, 계층 구조를 지정합니다
  4. 색상 팔레트(따뜻한 모노크롬 + 스팟 파스텔)순백색, 따뜻한 본 배경, 차콜 텍스트, 네 가지 뮤트한 파스텔 강조색을 포함한 기본 색상을 정의합니다
  5. 컴포넌트 사양벤토 그리드, 버튼, 태그, 아코디언, 키스트로크 UI, 가짜 OS 윈도우 크롬의 구현 방법을 상세히 설명합니다
  6. 아이콘 및 이미지 지침Phosphor 또는 Radix 아이콘, 모노크롬 일러스트레이션, 채도를 낮춘 사진, 깊이감을 위한 미세한 배경 처리를 지정합니다
  7. 미세한 모션 및 마이크로 애니메이션transform과 opacity만을 사용한 스크롤 등장 효과, 호버 상태, 순차적 캐스케이드, 앰비언트 모션을 정의합니다
  8. 실행 프로토콜여백부터 애니메이션까지 디자인 시스템을 구현하기 위한 단계별 워크플로를 제공합니다
스킬 자체 설명
"깔끔한 편집 스타일 인터페이스. 따뜻한 단색 팔레트, 타이포그래피 대비, 평면 벤토 그리드, 은은한 파스텔. 그라디언트 없음, 무거운 그림자 없음."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 7,896자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

minimalist-ui 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

Inter나 Roboto 대신 어떤 폰트를 사용해야 합니까?

본문 및 UI 텍스트에는 SF Pro Display, Geist Sans, Helvetica Neue, Switzer를 사용합니다. 히어로 헤딩과 인용문에는 좁은 자간의 Lyon Text, Newsreader, Playfair Display, Instrument Serif를 사용합니다. 코드와 키스트로크에는 Geist Mono, SF Mono, JetBrains Mono를 사용합니다.

이 스타일에 권장되는 아이콘 라이브러리는 무엇입니까?

Phosphor Icons의 Bold 또는 Fill 굵기를 사용하거나, 기술적이고 약간 더 두꺼운 스트로크 느낌을 위해 Radix UI Icons를 사용합니다. Lucide, Feather, 표준 Heroicons 같은 일반적인 얇은 선 라이브러리는 사용하지 마십시오. 일관성을 위해 모든 아이콘의 스트로크 너비를 통일합니다.

Minimalist UI

실제 UI 디자인 작업에서 minimalist-ui를 실행하십시오.

OpenDesign을 다운로드하고, SKILL.md 링크에서 minimalist-ui를 가져온 다음, 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원