프런트엔드 & UI
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
디자인에 왜 중요한가
- 보라 파랑 AI 그러데이션과 동일한 카드 세 개짜리 행은 신중하게 고른 대안으로 교체됩니다.
- 카드 그룹 안의 버튼은 콘텐츠 길이가 제각각이어도 하단 한 줄에 맞춰 정렬됩니다.
- 누락된 호버, 포커스, 로딩, 빈 상태, 에러 상태를 채워 넣습니다.
다루는 내용
- How this works
- Design audit
- Upgrade techniques
- Fix priority
- Rules
설치 방법
redesign-existing-projects
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/redesign-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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.