프런트엔드 & UI
design-skills · Brutalism
거친 콘크리트에서 따온 레이아웃, Darker Grotesque 디스플레이, 빨강과 오커.
무엇인가
1950년대 노출 콘크리트 건축에서 끌어온 브루탈리스트 UI 가이드라인 스킬. 꾸밈없고 기능적이며 일부러 거슬립니다. Darker Grotesque 디스플레이 타입, 흰 바탕 위 빨강 #DD614C와 오커 #DAA144.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
디자인에 왜 중요한가
- 대담하고 꾸밈없는 요소가 장식을 걷어내, 구조와 카피가 무게를 짊어집니다.
- 강한 액센트 둘, 빨강과 오커가 그러데이션과 그림자를 통째로 대신합니다.
- 접근성 최저선은 그대로 적용되어, 거슬리는 레이아웃도 대비와 보이는 포커스를 지킵니다.
다루는 내용
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
설치 방법
design-skills · Brutalism
-
저장소를 클론하세요.
git clone https://github.com/bergside/awesome-design-skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/brutalism/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex가 컴포넌트를 고르기 전에 톤이 대담하고 꾸밈없다는 것을 알려 주세요.
-
품질 게이트가 요구하는 대로 모든 규칙을 토큰이나 기준값에 묶으세요.
-
결과를 검토할 때 해야 할 규칙마다 하지 말아야 할 구체적 예시를 짝지으세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.