프론트엔드 디자인

출처: 인류학/기술(MIT)에서 채택한 콘텐츠.

이 기술은 일반적인 "AI 슬롭" 미학을 피하는 독특한 프로덕션급 프런트엔드 인터페이스를 생성하는 데 도움이 됩니다. 미적 세부 사항과 창의적인 선택에 특별한 주의를 기울여 실제 작업 코드를 구현합니다.

사용자는 구성 요소, 페이지, 애플리케이션 또는 빌드할 인터페이스 등 프런트엔드 요구 사항을 제공합니다. 여기에는 목적, 대상 또는 기술적 제약에 대한 맥락이 포함될 수 있습니다.

디자인적 사고

코딩하기 전에 맥락을 이해하고 대담한 미학적 방향을 약속하십시오.

• 목적: 이 인터페이스는 어떤 문제를 해결합니까? 누가 그것을 사용합니까?
• 톤: 극단적인 것을 선택하세요: 극도로 미니멀한, 최대주의적인 혼돈, 복고풍 미래주의, 유기농/자연주의, 럭셔리/세련된, 장난기 있는/장난감 같은, 사설/잡지, 브루탈주의/원시, 아르데코/기하학, 부드러운/파스텔, 산업/실용주의 등 선택할 수 있는 맛이 너무 많습니다. 영감을 얻기 위해 이를 사용하되 미학적 방향에 충실한 디자인을 디자인하십시오.
• 제약조건: 기술 요구사항(프레임워크, 성능, 접근성).
• 차별화: 이것이 잊혀지지 않는 이유는 무엇입니까? 누군가가 기억할 단 한 가지는 무엇입니까?

필수: 명확한 개념 방향을 선택하고 정확하게 실행하세요. 대담한 맥시멀리즘과 세련된 미니멀리즘이 모두 작동합니다. 핵심은 강렬함이 아니라 의도성입니다.

그런 다음 다음과 같은 작업 코드(HTML/CSS/JS, React, Vue 등)를 구현합니다.

• 생산 등급 및 기능성
• 시각적으로 인상적이며 기억에 남습니다.
• 명확한 미학적 관점과 결합
• 세세한 부분까지 세심하게 다듬어진

프론트엔드 미학 지침

초점:

• 타이포그래피: 아름답고 독특하며 흥미로운 글꼴을 선택하세요. Arial 및 Inter와 같은 일반 글꼴은 사용하지 마세요. 대신 프런트엔드의 미학을 향상시키는 독특한 선택을 선택하십시오. 예상치 못한 독특한 글꼴 선택. 독특한 디스플레이 글꼴과 세련된 본문 글꼴을 결합하세요.
• 색상 및 테마: 응집력 있는 미학을 약속합니다. 일관성을 위해 CSS 변수를 사용하세요. 날카로운 액센트가 있는 주요 색상은 소심하고 고르게 분포된 팔레트보다 성능이 뛰어납니다.
• 모션: 효과와 미세 상호작용에 애니메이션을 사용합니다. HTML용 CSS 전용 솔루션의 우선순위를 지정하세요. 가능한 경우 React용 Motion 라이브러리를 사용하세요. 영향력이 큰 순간에 집중하세요. 시차를 두고 공개되는(애니메이션 지연) 잘 구성된 페이지 로드는 분산된 마이크로 상호작용보다 더 많은 즐거움을 선사합니다. 놀라운 스크롤 트리거 및 호버 상태를 사용하세요.
• 공간 구성: 예상치 못한 레이아웃. 어울리지 않음. 중복. 대각선 흐름. 그리드를 깨는 요소. 넉넉한 네거티브 공간 또는 제어된 밀도.
• 배경 및 시각적 세부정보: 기본 색상을 단색으로 설정하는 대신 분위기와 깊이를 조성합니다. 전반적인 미적 감각에 어울리는 상황별 효과와 질감을 추가하세요. 그라디언트 메쉬, 노이즈 텍스처, 기하학적 패턴, 계층화된 투명도, 극적인 그림자, 장식 테두리, 사용자 정의 커서 및 그레인 오버레이와 같은 창의적인 형태를 적용하세요.

과도하게 사용되는 글꼴 모음(Inter, Roboto, Arial, 시스템 글꼴), 진부한 색 구성표(특히 흰색 배경의 보라색 그라데이션), 예측 가능한 레이아웃 및 구성 요소 패턴, 상황별 특성이 부족한 진부한 디자인과 같은 일반적인 AI 생성 미학을 절대 사용하지 마세요.

창의적으로 해석하고 상황에 맞게 진정으로 설계된 듯한 예상치 못한 선택을 하세요. 어떤 디자인도 동일하면 안 됩니다. 밝은 테마와 어두운 테마, 글꼴, 미학이 다양합니다. 절대 여러 세대에 걸쳐 공통 선택(예: Space Grotesk)에 수렴하지 마세요.

중요: 구현 복잡성을 미적 비전에 맞추세요. 맥시멀리스트 디자인에는 광범위한 애니메이션과 효과가 포함된 정교한 코드가 필요합니다. 미니멀리스트 또는 세련된 디자인에는 제한, 정확성, 그리고 간격, 타이포그래피 및 미묘한 세부 사항에 대한 세심한 주의가 필요합니다. 우아함은 비전을 잘 실행하는 데서 나옵니다.

기억하세요: Claude는 특별하고 창의적인 작업을 할 수 있습니다. 주저하지 말고 고정관념에서 벗어나 독특한 비전에 전념할 때 진정으로 창조될 수 있는 것이 무엇인지 보여주세요.

리소스 파일

라이센스.txt

LICENSE.txt 다운로드

바이너리 리소스

GitHub에서 보기

GitHub에서 보기