스킬 frontend-design

📦

frontend-design

Name: frontend-design
Author: sickn33

안전

독특한 프로덕션 수준의 프론트엔드 인터페이스 디자인

또한 다음에서 사용할 수 있습니다: Azeem-2,1bertogit,92Bilal26,davila7,7Spade,1bertogit,AJV009,anthropics,ZhanlinCui,DennisLiuCk,anthropics,YYH211,7Spade,92Bilal26,AdamAugustinsky,AgentWorkforce,AI-Vibe-Prompts,CesarAugustusGroB

일반적인 AI 생성 UI는 시각적 정체성과 기억에 남는 특징이 부족합니다. 이 스킬은 DFII 프레임워크를 적용하여 통일된 미학을 갖춘 의도적이고 정교한 인터페이스를 만듭니다.

지원: Claude Codex Code(CC)

🥉 74 브론즈

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"frontend-design" 사용 중입니다. 우주 관광 스타트업을 위한 레트로 퓨처리스트 미학의 히어로 섹션 디자인

예상 결과:

히어로 섹션 특징: 진한 보라색에서 청록색으로 전환되는 그라데이션 메쉬 배경, 헤드라인을 위한 맞춤 디스플레이 폰트(Orbitron), 겹치는 요소가 있는 비대칭 텍스트 레이아웃, 그레인 오버레이 텍스처, CTA 버튼의 단일 고임팩트 플로팅 애니메이션, CSS만 사용하는 별 필드 파티클 효과. DFII 점수: 13(강력한 미학적 통합을 갖춘 탁월한 실행).

"frontend-design" 사용 중입니다. 럭셔리 미니멀 미학의 가격 카드 컴포넌트 생성

예상 결과:

3단계 가격 카드: 넉넉한 여백(48px 기본 단위), 기하학적 산스(Jost)와 페어링된 정교한 세리프 디스플레이 폰트(Playfair Display), 기본 CTA에만 금색 악센트가 있는 단색 기반, 20% 불투명도의 미묘한 박스 쉐도우, 호버 시 부드러운 스케일 변환, SVG 체크마크 아이콘. 일반적인 보라색 그라데이션과 대칭 레이아웃을 피함.

보안 감사

안전

v1 • 2/25/2026

All 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.

스캔된 파일

456

분석된 줄 수

발견 사항

총 감사 수

보안 문제를 찾지 못했습니다

감사자: claude

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

100

보안

사양 준수

만들 수 있는 것

랜딩 페이지 디자인

에디토리얼 루탈리즘 미학으로 기억에 남는 랜딩 페이지를 만듭니다. 맞춤형 타이포그래피 계층, 비대칭 레이아웃, 고임팩트 오프닝 애니메이션을 포함합니다.

대시보드 컴포넌트 라이브러리

럭셔리 미니멀 미학으로 통일된 대시보드 컴포넌트 세트를 구축합니다. 절제된 색상 팔레트, 정밀한 간격, 정교한 마이크로 인터랙션을 사용합니다.

브랜드 웹사이트 리디자인

레트로 퓨처리스트 미학 방향으로 기존 웹사이트를 리디자인합니다. 맞춤형 그라데이션 메쉬, 레이어드 투명도, 독특한 모션 패턴을 구현합니다.

이 프롬프트를 사용해 보세요

기본 컴포넌트 스타일링

럭셔리 미니멀 미학을 사용하여 회원가입 폼 컴포넌트를 디자인하세요. 의도적인 타이포그래피 선택, 하나의 악센트가 있는 주도적인 색상 스토리, 목적 있는 여백을 포함하세요. 완전한 HTML과 CSS를 제공하세요.

DFII 분석이 포함된 전체 페이지 디자인

제품 랜딩 페이지를 만드세요. 먼저 5개 차원 모두에서 DFII 프레임워크를 사용하여 디자인 방향을 평가하세요. 12점 이상의 점수를 목표로 하세요. 의도적인 비대칭 구성을 사용한 인더스트리얼 유틸리타리언 미학을 적용하세요.

디자인 시스템 정의

핀테크 대시보드의 완전한 디자인 시스템을 정의하세요. 다음을 지정하세요: 근거와 함께 디스플레이 및 본문 폰트 페어링, 하나의 주도색조와 하나의 악센트가 있는 CSS 변수 색상 시스템, 간격 리듬, 모션 철학. 그런 다음 샘플 카드 컴포넌트를 구현하세요.

미학적 변환

에디토리얼 루탈리즘 미학을 사용하여 이 일반적인 버튼 컴포넌트를 기억에 남는 것으로 변환하세요. 일반적인 AI 생성 UI와 차별화하는 요소를 설명하세요. 접근성을 위한 호버 상태와 포커스 스타일을 포함하세요.

모범 사례

코드를 작성하기 전에 항상 미학적 방향을 명시적으로 명시
디자인 결정이 8점 이상의 점수를 달성하는지 확인하기 위해 DFII 프레임워크 사용
일반적인 템플릿과 차별화되는 하나 이상의 기억에 남는 디자인 앵커 포함

피하기

의도적인 근거 없이 시스템 폰트나 Inter, Roboto, Arial 같은 AI 기본값 사용
미학적 정당성 없이 일반적인 보라색-흰색 SaaS 그라데이션 적용
모든 템플릿이 될 수 있는 대칭적이고 예측 가능한 섹션 레이아웃 생성

자주 묻는 질문

DFII 프레임워크란 무엇인가요?

DFII(Design Feasibility and Impact Index)는 5개 차원에서 디자인 방향을 평가합니다: 미학적 임팩트, 컨텍스트 적합성, 구현 실행 가능성, 성능 안전성, 일관성 위험. 점수 범위는 -5에서 +15이며, 12점 이상은 탁월한 디자인 방향을 나타냅니다.

이 스킬은 기존 디자인 시스템과 함께 작동할 수 있나요?

네. 기존 디자인 토큰, 폰트 선택 또는 브랜드 가이드라인을 컨텍스트로 제공하세요. 스킬은 제약 조건을 준수하면서 미학적 방법론을 적용합니다.

이 스킬은 반응형 디자인을 생성하나요?

네. 모든 출력에는 반응형 고려사항이 포함됩니다. 특정 요구사항이 있으면 타겟 브레이크포인트를 지정하세요. 그렇지 않으면 모바일 퍼스트 반응형 동작이 기본값입니다.

이 스킬은 어떤 프레임워크를 지원하나요?

바닐라 HTML, CSS, JavaScript를 기본적으로 지원합니다. 요청 시 React 컴포넌트 출력을 제공합니다. CSS 애니메이션을 선호합니다. 복잡성이 정당화될 때만 Framer Motion을 사용합니다.

다른 미학적 방향을 어떻게 지정하나요?

원하는 미학을 명시적으로 선언하세요: 루탈리스트, 에디토리얼, 럭셔리 미니멀, 레트로 퓨처리스트, 인더스트리얼, 오가닉, 플레이풀, 맥시멀리스트 또는 미니멀리스트. 인접한 두 미학을 결합할 수 있지만 더 많이 혼합하는 것은 피하세요.

이 스킬은 기존 컴포넌트를 개선할 수 있나요?

네. 현재 컴포넌트 코드를 공유하고 원하는 미학적 변환을 지정하세요. 스킬은 기능을 유지하면서 의도적인 디자인 결정으로 리팩토링합니다.