프런트엔드 & UI
Border Gradients
카드, 모달, 히어로 면에 정제된 그러데이션 가장자리를 더합니다.
무엇인가
padding-box와 border-box 레이어링으로 은은한 그러데이션 테두리를 만드는 CSS 레시피에, 복잡한 배경을 가진 면을 위한 마스크된 가상 요소 변형까지 더했습니다.
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
디자인에 왜 중요한가
- 네온 테두리의 요란한 광 없이 고급스러운 가장자리 윤곽을 줍니다.
- 마스크된 변형은 기존 배경을 덮어쓰지 않고 그대로 지켜 줍니다.
- 기본값이 정지점을 0.4 불투명도 아래로 두어, 테두리가 튀기보다 감싸 줍니다.
다루는 내용
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
설치 방법
Border Gradients
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/css-border-gradient/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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.