Communitygithub.com

산업적 브루탈리즘 & 전술 원격측정 UI

스위스 타이포그래픽 인쇄와 군사 터미널 미학을 융합한 원시적인 기계 인터페이스입니다. 엄격한 그리드, 극단적인 폰트 크기 대비, 실용주의적 색상, 아날로그 열화 효과를 특징으로 하며, 데이터가 많은 대시보드, 포트폴리오, 편집 사이트를 마치 기밀 해제된 청사진처럼 보이게 만듭니다.

산업적 브루탈리즘 & 전술 원격측정 UI란 무엇인가요?

이 스킬은 웹 인터페이스가 마치 기계 공학 청사진이나 군사 터미널 화면처럼 보이도록 설계하는 방법을 알려줍니다. 1960년대 스위스 인쇄 디자인과 군용 헤드업 디스플레이(HUD)에서 영감을 받아, 엄격한 CSS 그리드, 극단적인 폰트 크기 대비, 순수하게 실용적인 색상(빨간색 강조)을 사용합니다. 또한 CSS와 SVG 필터를 활용하여 하프톤, CRT 스캔라인, 1비트 디더링 같은 아날로그 열화 효과를 구현합니다. 이 디자인 시스템은 '스위스 산업 인쇄(밝은 모드)'와 '전술 원격측정(어두운 모드)'이라는 두 가지 명확한 비주얼 패러다임을 제공하며, 프로젝트당 하나만 선택해야 합니다. 모든 모서리는 90도이며, 테두리 반경은 사용하지 않습니다. typography는 인터페이스의 주요 구조적 요소이며, macro-typography(네오 그로테스크 산세리프 대문자)와 micro-typography(고정폭 소문자 데이터)를 극단적으로 대비시킵니다. 이 스킬은 CSS `clamp()`, `mix-blend-mode`, `repeating-linear-gradient`와 같은 고급 웹 엔지니어링 기법을 사용하며, `<data>`나 `<samp>` 같은 정확한 시맨틱 태그를 요구합니다. 최종 결과물은 기존의 소비자 UI 패턴을 거부하고, 데이터 밀도가 높고 기계적인 정밀감을 주는 인터페이스입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/leonxlnx/taste-skill/tree/main/skills/brutalist-skill
원본 보기→모든 스킬 둘러보기

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

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

SKILL: 산업적 브루탈리즘 & 전술 원격측정 UI

1. 스킬 메타

이름: 산업적 브루탈리즘 & 전술 원격측정 인터페이스 엔지니어링 설명: 중세 스위스 타이포그래픽 디자인, 산업 제조 매뉴얼, 복고풍 항공우주/군사 터미널 인터페이스를 종합하는 웹 인터페이스 아키텍처에 대한 고급 숙련도입니다. 이 분야는 엄격한 모듈식 그리드, 극단적인 타이포그래피 규모 대비, 순수하게 실용적인 색상 팔레트, 그리고 아날로그 열화(하프톤, CRT 스캔라인, 비트맵 디더링)의 프로그래밍 방식 시뮬레이션에 대한 절대적인 숙달을 요구합니다. 목표는 순수한 기능성, 기계적 정밀성, 높은 데이터 밀도를 투영하는 디지털 환경을 구축하여 기존의 소비자 UI 패턴을 의도적으로 배제하는 것입니다.

2. 비주얼 원형

디자인 시스템은 두 가지 뚜렷하지만 호환성이 높은 비주얼 패러다임을 병합하여 작동합니다. 프로젝트당 하나를 선택하고 이를 고수하십시오. 동일한 인터페이스 내에서 두 모드를 번갈아 사용하거나 혼합하지 마십시오.

2.1 스위스 산업 인쇄

1960년대 기업 아이덴티티 시스템과 중장비 청사진에서 파생되었습니다.

  • 특징: 고대비 밝은 모드(신문 용지/미표백 기재). 모놀리식한 두꺼운 산세리프 타이포그래피에 의존. 보이는 구분선으로 윤곽이 잡힌 무자비한 구조적 그리드. 거대하고 뷰포트를 넘어서는 숫자나 글자 형태로 강조된 광활한 계산된 네거티브 공간의 공격적인 비대칭 사용. 경고/강조 색상으로 빨간색을 많이 사용.

2.2 전술 원격측정 및 CRT 터미널

기밀 군사 데이터베이스, 레거시 메인프레임, 항공우주 헤드업 디스플레이(HUD)에서 파생되었습니다.

  • 특징: 다크 모드 전용. 고밀도 표 형식 데이터 프레젠테이션. 고정폭 타이포그래피의 절대적 지배. 기술적 프레이밍 장치(ASCII 괄호, 십자선) 통합. 시뮬레이션된 하드웨어 한계(인광 빛, 스캔라인, 낮은 비트 심도 렌더링) 적용.

3. 타이포그래피 아키텍처

타이포그래피는 기본 구조 및 장식 인프라입니다. 이미지는 부차적입니다. 시스템은 규모, 두께, 간격에 있어 극단적인 변화를 요구합니다.

3.1 매크로 타이포그래피 (구조적 헤더)

  • 분류: 네오 그로테스크 / 두꺼운 산세리프.
  • 최적 웹 폰트: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
  • 구현 매개변수:
    • 크기: 유동적 타이포그래피(예: clamp(4rem, 10vw, 15rem))를 사용하여 거대한 규모로 배치.
    • 자간: 매우 좁으며 종종 음수(-0.03em ~ -0.06em), 글리프가 단단한 건축 블록을 형성하도록 강제.
    • 행간: 매우 압축됨(0.85 ~ 0.95).
    • 대소문자: 구조적 충격을 위해 전부 대문자.

3.2 마이크로 타이포그래피 (데이터 및 원격측정)

  • 분류: 고정폭 / 기술 산세리프.
  • 최적 웹 폰트: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
  • 구현 매개변수:
    • 크기: 고정 및 작음(10px ~ 14px / 0.7rem ~ 0.875rem).
    • 자간: 넉넉함(0.05em ~ 0.1em) - 기계식 타자기 간격 또는 터미널 매트릭스 시뮬레이션.
    • 행간: 표준에서 좁음(1.2 ~ 1.4).
    • 대소문자: 전부 대문자. 모든 메타데이터, 탐색, 장치 ID, 좌표에 사용.

3.3 질감 대비 (예술적 파괴)

  • 분류: 고대비 세리프.
  • 최적 웹 폰트: Playfair Display, EB Garamond, Times New Roman.
  • 구현 매개변수: 극히 드물게 사용. 벡터 완벽성을 저하시키고 깨끗한 산세리프와 질감 대비를 만들기 위해 과도한 후처리(하프톤 필터, 1비트 디더링)를 적용해야 함.

4. 색상 시스템

색상 아키텍처는 타협하지 않습니다. 그라데이션, 부드러운 그림자, 현대적 반투명은 엄격히 금지됩니다. 색상은 물리적 매체 또는 원시적 방출형 디스플레이를 시뮬레이션합니다.

중요: 프로젝트당 하나의 기재 팔레트를 선택하고 일관되게 사용하십시오. 동일한 인터페이스 내에서 밝은 기재와 어두운 기재를 절대 혼합하지 마십시오.

스위스 산업 인쇄(밝음)의 경우:

  • 배경: #F4F4F0 또는 #EAE8E3 (무광택, 미표백 문서 용지).
  • 전경: #050505 ~ #111111 (카본 잉크).
  • 강조: #E61919 또는 #FF2A2A (항공/위험 빨강). 이것이 유일한 강조 색상입니다. 취소선, 두꺼운 구조적 구분선, 또는 중요한 데이터 하이라이트에 사용.

전술 원격측정(어두움)의 경우:

  • 배경: #0A0A0A 또는 #121212 (비활성화된 CRT. 순수한 #000000은 피하십시오).
  • 전경: #EAEAEA (백색 인광체). 기본 텍스트 색상입니다.
  • 강조: #E61919 또는 #FF2A2A (항공/위험 빨강). 동일한 빨간색, 동일한 규칙.
  • 터미널 녹색(#4AF626): 선택 사항. 단 하나의 특정 UI 요소(예: 하나의 상태 표시기 또는 하나의 데이터 판독값)에만 사용하고 일반 텍스트 색상으로는 절대 사용하지 마십시오. 명확한 목적이 없다면 완전히 생략하십시오.

5. 레이아웃 및 공간 엔지니어링

레이아웃은 수학적으로 엔지니어링된 것처럼 보여야 합니다. 기존 웹 패딩을 거부하고 대신 눈에 보이는 구획화를 선호합니다.

  • 청사진 그리드: CSS 그리드 아키텍처를 엄격히 준수. 요소는 떠다니지 않고 정확히 그리드 트랙과 교차점에 고정됩니다.
  • 가시적 구획화: 정보의 별도 영역을 구분하기 위해 단색 테두리(1px 또는 2px solid)를 광범위하게 사용. 수평선(<hr>)은 작동 단위를 분리하기 위해 컨테이너 전체 너비를 자주 가로지릅니다.
  • 이중 모드 밀도: 레이아웃은 극단적인 데이터 밀도(빽빽하게 채워진 고정폭 메타데이터 클러스터)와 매크로 타이포그래피를 감싸는 광활한 계산된 네거티브 공간 사이를 오갑니다.
  • 기하학: border-radius 절대 금지. 모든 모서리는 기계적 강성을 강제하기 위해 정확히 90도여야 합니다.

6. UI 구성 요소 및 상징

표준 웹 UI 규칙은 실용적이고 산업적인 그래픽 요소로 대체됩니다.

  • 구문 장식: 데이터 포인트를 프레이밍하기 위한 ASCII 문자 사용.
    • 프레이밍: [ 전송 시스템 ], < 재-지시 >
    • 방향: >>>, ///, \\
  • 산업용 마커: 등록(®), 저작권(©), 상표(™) 기호를 법적 텍스트가 아닌 구조적 기하학 요소로 기능하도록 눈에 띄게 통합.
  • 기술 자산: 그리드 교차점에 십자선(+) 통합, 반복 수직선(바코드), 두꺼운 수평 경고 줄무늬, 무작위 문자열 데이터(예: REV 2.6, UNIT / D-01)를 통합하여 활성 기계 프로세스를 시뮬레이션.

7. 질감 및 후처리 효과

디자인이 순수하게 디지털로 보이는 것을 방지하기 위해 CSS 및 SVG 필터를 통해 프론트엔드에 시뮬레이션된 아날로그 열화를 엔지니어링합니다.

  • 하프톤 및 1비트 디더링: 연속 톤 이미지 또는 큰 세리프 타이포그래피를 도트 매트릭스 패턴으로 변환. 사전 처리 또는 CSS mix-blend-mode: multiply 오버레이와 SVG 방사형 도트 패턴을 결합하여 구현.
  • CRT 스캔라인: 터미널 인터페이스의 경우 배경에 repeating-linear-gradient를 적용하여 수평 전자빔 스윕을 시뮬레이션(예: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).
  • 기계적 노이즈: DOM 루트에 적용된 전역적이고 낮은 불투명도의 SVG 정적/노이즈 필터로 어둡고 밝은 모드 모두에 통일된 물리적 입자를 도입.

8. 웹 엔지니어링 지침

  1. 그리드 결정론: 대조적인 부모/자식 배경색과 함께 display: grid; gap: 1px;를 사용하여 복잡한 테두리 선언 없이 수학적으로 완벽하고 면도날처럼 얇은 구분선을 생성.
  2. 시맨틱 엄격성: 원격측정의 기술적 특성을 정확하게 반영하기 위해 정확한 시맨틱 태그(<data>, <samp>, <kbd>, <output>, <dl>)를 사용하여 DOM을 구성.
  3. 타이포그래피 클램핑: 뷰포트 전체에서 구조적 무결성을 유지하면서 공격적으로 확장되는 거대한 텍스트 스케일을 보장하기 위해 매크로 타이포그래피에만 CSS clamp() 함수를 구현.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

leonxlnx/design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

leonxlnx/design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/full-output-enforcement

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

leonxlnx/gpt-taste

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

leonxlnx/high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

leonxlnx/image-taste-frontend

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

leonxlnx/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

leonxlnx/taste-skill

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/taste-skill

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

leonxlnx/taste-skill

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

leonxlnx/taste-skill

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/taste-skill

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

leonxlnx/taste-skill

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community