프런트엔드 & UI
design-skills · Editorial
Gelasio 세리프와 엄격한 8pt 그리드로 짜인 잡지형 레이아웃.
무엇인가
현대적인 에디토리얼 룩을 위한 디자인 시스템 가이드라인 스킬. 본문과 디스플레이 모두 Gelasio 세리프, Ubuntu Mono, 흰 바탕 위 검정에 가까운 #111111, 그리고 8pt 베이스라인 그리드를 씁니다.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
디자인에 왜 중요한가
- 디스플레이와 본문을 한 가족의 세리프로 통일해 긴 글의 타이포그래피가 일관됩니다.
- 8pt 베이스라인 그리드가 제목, 본문, 여백에 걸쳐 세로 리듬을 강제합니다.
- 접근성 기준에 reduced-motion 지원, 44px 터치 영역, 고대비 처리가 포함됩니다.
다루는 내용
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
설치 방법
design-skills · Editorial
-
저장소를 클론하세요.
git clone https://github.com/bergside/awesome-design-skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/editorial/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 디자인 의도를 먼저 다시 정리하게 한 뒤, 컴포넌트에 손대기 전에 토큰을 정의하세요.
-
구조, 변형, 상태, 반응형 동작을 아우르는 컴포넌트 규칙을 요청하세요.
-
코드 리뷰어가 결과를 확인할 수 있도록 QA 체크리스트로 마무리하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.