프런트엔드 & UI
design-taste-frontend
브리프를 읽고 방향을 정한 뒤, 틀에 박히지 않은 인터페이스를 내놓습니다.
무엇인가
랜딩 페이지, 포트폴리오, 리디자인을 위한 안티슬롭 프런트엔드 스킬. 디자인 판단을 한 줄로 선언하고 변주, 모션, 밀도 다이얼을 정한 뒤 긴 프리플라이트 점검을 돌립니다.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, a
디자인에 왜 중요한가
- 엔터프라이즈 브리프는 직접 손으로 짠 유사 CSS 대신 공식 디자인 시스템 패키지를 받습니다.
- 프리플라이트는 줄표, 섹션 번호를 매긴 아이브로우, 스크롤 유도 문구, 중복된 CTA 의도를 금지합니다.
- 레이아웃 반복에 상한을 두어, 8개 섹션이면 최소 네 가지 서로 다른 계열을 씁니다.
다루는 내용
- Brief inference
- The three dials
- Brief to design system map
- Design engineering directives
- AI tells
- Final pre-flight check
설치 방법
design-taste-frontend
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/taste-skill/SKILL.md -
그다음 원하는 UI를 설명하세요. 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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.