스킬 industrial-brutalist-ui
🎨

industrial-brutalist-ui

안전

산업 브루탈리스트 웹 인터페이스 디자인

스위스 타이포그래피와 군사 터미널 미학을 활용한 대담하고 기계적인 웹 인터페이스를 만들어ください. 날것의 기능성과 극단적인 타이포그래피 대비를 가진 데이터 집약적인 대시보드와 에디토리얼 사이트를 생성합니다.

지원: Claude Codex Code(CC)
🥉 73 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"industrial-brutalist-ui" 사용 중입니다. 산업 브루탈리스트 스타일의 히어로 섹션 생성

예상 결과:

전체 뷰포트 너비에 걸친 대규모 대문자 헤드라인, 섹션을 나누는 눈에 보이는 1px 테두리, 모서리의 모노스페이스 메타데이터 레이블, 주요 데이터 포인트를 표시하는 빨간색 악센트 선이 있는 CSS Grid 레이아웃을 생성합니다.

"industrial-brutalist-ui" 사용 중입니다. 전술 터미널 인터페이스용 데이터 테이블 디자인

예상 결과:

고정 폭 모노스페이스 폰트, 어두운 배경, 흰색 텍스트, 선택적 녹색 상태 셀, 전체 너비에 걸친 수평 규칙, [ SYSTEM STATUS ]와 같은 대괄호로 감싸진 섹션 헤더가 있는 테이블을 생성합니다.

보안 감사

안전
v1 • 4/19/2026

Static analysis detected 71 potential security issues, all are FALSE POSITIVES. The backtick patterns are CSS code examples in markdown documentation, not shell execution. Color hex codes were misidentified as cryptographic weaknesses. ASCII bracket decorations were misidentified as Windows system references. This skill contains only design guidelines with no executable code.

1
스캔된 파일
93
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
50
커뮤니티
100
보안
83
사양 준수

만들 수 있는 것

데이터 대시보드 디자인

전술 터미널 미학, 모노스페이스 텔레메트리 데이터, 명확한 시각적 계층 구조가 특징인 분석 플랫폼용 고밀도 모니터링 대시보드 생성

에디토리얼 포트폴리오 사이트

초대형 타이포그래피와 비대칭 레이아웃이 특징인 스위스 산업 프린트 미학을 사용한 시각적으로 인상적인 포트폴리오 또는 에디토리얼 웹사이트 구축

기술 문서 UI

엄격한 그리드와 실용적인 스타일이 특징인 해제된 청사진이나 군사 매뉴얼 같은 느낌의 문서 인터페이스 디자인

이 프롬프트를 사용해 보세요

기본 브루탈리스트 랜딩 페이지 
스위스 산업 프린트 스타일을 사용하여 랜딩 페이지를 만드세요. #F4F4F0 배경의 밝은 基底, 대규모 스케일의 무거운 산세리프 헤더, 빨간색 #E61919 악센트를 사용하세요. 눈에 보이는 그리드 선과 대문자 모노스페이스 메타데이터를 포함하세요.
다크 터미널 대시보드 
전술 텔레메트리 미학을 사용하여 데이터 대시보드를 구축하세요. #0A0A0A 배경의 다크 모드, 모든 데이터 디스플레이에 JetBrains Mono 폰트, 백색 인광 #EAEAEA 텍스트, 하나의 상태 표시기에만 선택적으로 녹색 #4AF626을 사용하세요.
타이포그래피 시스템 설정 
brutalist 인터페이스용 CSS 타이포그래피 변수를 생성하세요. clamp(4rem, 10vw, 15rem)의 -0.05em 자간으로 Inter Black을 사용한 매크로 헤더, 12px의 JetBrains Mono와 0.08em 트래킹의 마이크로 텍스트. 모두 대문자.
아날로그 텍스처 효과 
SVG 방사형 점의 하프톤 패턴 오버레이, repeating-linear-gradient의 CRT 스캔라인, 루트 요소의 SVG 필터를 사용한 전역 기계적 노이즈를 포함한 아날로그 열화용 CSS 효과를 추가하세요.

모범 사례

  • 프로젝트당 하나의 시각적 원형을 선택하고(스위스 산업 프린트 또는 전술 텔레메트리) 같은 인터페이스에서 둘을 혼합하지 마세요
  • 매크로 타이포그래피에 항상 CSS clamp() 함수를 사용하여 뷰포트 크기에 따른 유동적 스케일링과 임팩트를 보장하세요
  • 모든 요소에서 일관된 아날로그 열화를 위해 DOM 루트 수준에서 전역 노이즈 필터와 텍스처 효과를 적용하세요

피하기

  • 같은 인터페이스 내에서 밝은 基底와 어두운 基底 컬러 팔레트를 혼합하지 마세요 - 하나의 모드를 선택하세요
  • 모든 요소에서 border-radius를 사용하지 마세요 - 모든 모서리는 기계적 강도를 위해 정확히 90도여야 합니다
  • 실용적 미학을 위반하므로 그라디언트, 부드러운 드롭 섀도우, 현대적 투명도 효과를 사용하지 마세요

자주 묻는 질문

하나의 프로젝트에서 스위스 산업 프린트와 전술 텔레메트리 스타일을 혼합할 수 있나요?
아니요. 이 스킬은 프로젝트당 하나의 시각적 원형을 선택해야 합니다. 밝은 基底와 어두운 基底를 혼합하거나, 두 가지 독특한 타이포그래피 시스템을 결합하면 미학적 일관성이 깨집니다.
이 스타일에는 어떤 웹 폰트가 가장 잘 작동하나요?
매크로 헤더에는 Neue Haas Grotesk Black, Inter Extra Bold, Archivo Black 또는 Monument Extended를 사용하세요. 데이터 텍스트에는 JetBrains Mono, IBM Plex Mono 또는 Space Mono를 사용하세요. 모든 폰트는 웹 폰트 서비스에서 로드해야 합니다.
이 스킬은 이커머스 또는 소비자 애플리케이션에 적합한가요?
이 미학은 의도적으로 날것이고 기계적입니다. 데이터 대시보드, 포트폴리오, 에디토리얼 사이트, 기술 문서에 가장 잘 작동합니다. 소비자 중심의 이커머스의 경우 더 부드러운 UI 패턴을 고려하세요.
하프톤과 디더링 효과는 어떻게 구현하나요?
mix-blend-mode: multiply 오버레이로 SVG 방사형 점 패턴을 사용하거나, 사전 처리된 디더링 이미지를 적용하세요. 이 스킬은 모든 요소에 도트 매트릭스 텍스처링을 생성하는 CSS 패턴을 제공합니다.
지정된 빨간색 악센트 외에 다른 색상을 사용할 수 있나요?
아니요. 컬러 시스템은 배경/전경 팔레트에 항공 빨간색 #E61919 또는 #FF2A2A를 더한 것으로 엄격히 제한됩니다. 유일한 예외는 필요한 경우 단일 특정 UI 요소에 대한 터미널 녹색 #4AF626입니다.
이 스킬은 React, Vue 또는 다른 프레임워크와 작동하나요?
네. 이 스킬은 모든 프론트엔드 프레임워크와 작동하는 CSS와 디자인 패턴을 생성합니다. 일반 HTML이든, React styled-components, Vue scoped styles, Tailwind 커스텀 클래스를 사용하든 CSS를 컴포넌트에 적용하세요.

개발자 세부 정보

작성자

leonxlnx

라이선스

MIT

리포지토리

https://github.com/leonxlnx/taste-skill/tree/main/skills/brutalist-skill/

참조

main

파일 구조

📄 SKILL.md