메뉴
높은 디자인 품질을 갖춘 독특하고 운영 수준(production-grade)의 프런트엔드 인터페이스를 생성합니다. 웹 컴포넌트, 페이지, 아티팩트, 포스터 또는 애플리케이션(예: 웹사이트, 랜딩 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 또는 모든 웹 UI의 스타일링/미화)을 구축할 때 이 SKILL을 사용하세요. 일반적인 AI 미학을 피하고 창의적이고 세련된 코드와 UI 디자인을 생성합니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
OpenAPI/Swagger 사양, 인증 패턴, 버전 관리 전략 및 모범 사례를 사용하여 RESTful 및 GraphQL API를 설계하고 문서화합니다. 사용 사례: (1) API 사양 생성, (2) REST 엔드포인트 설계, (3) GraphQL 스키마 설계, (4) API 인증 및 권한 부여, (5) API 버전 관리 전략, (6) 문서 생성
코드나 구현 계획을 작성하기 전, 무언가를 생성하거나 개발할 때 사용합니다. 협력적인 질문, 대안 탐색 및 점진적 검증을 통해 거친 아이디어를 구체화된 설계로 발전시킵니다. 명확한 'Mechanical' 프로세스 중에는 사용하지 마십시오.
.NET 코드에서 정적 분석(Static analysis), 보안 스캔(Security scan) 및 종속성 체크(Dependency check)를 수행합니다. 코드 품질, 보안 감사 또는 취약점 탐지가 포함된 작업에서 사용합니다.
dotnet format, prettier 및 기타 포맷팅 도구를 사용하여 코드를 정리합니다. 코드 스타일 수정, 포맷 일관성 유지 또는 커밋 전 코드 준비가 필요한 작업에서 사용합니다.
보안 스캔, 품질 지표 및 모범 사례 분석을 포함한 자동화된 코드 리뷰입니다. 다음을 위한 코드 리뷰 시 사용합니다: (1) 보안 취약점 및 일반적인 공격 벡터, (2) 코드 품질 이슈 및 유지보수 문제, (3) 성능 병목 현상 및 최적화 기회, (4) 모범 사례 및 디자인 패턴, (5) 테스트 커버리지 및 테스트 전략, (6) 문서 품질 및 완전성
.NET/C#의 코딩 규약, 명명 규칙, 레이아웃, C# 12/13/14의 최신 기능 활용 가이드라인을 정의합니다. C#/.NET 코드 작성 시, 클래스·메서드 명명 시, 코드 포맷팅 시, 또는 사용자가 코딩 규약, 명명 규칙, C# 모범 사례, Primary Constructors, Collection Expressions, field 키워드에 대해 언급했을 때 사용합니다.
| name | frontend-design |
| description | 높은 디자인 품질을 갖춘 독특하고 운영 수준(production-grade)의 프런트엔드 인터페이스를 생성합니다. 웹 컴포넌트, 페이지, 아티팩트, 포스터 또는 애플리케이션(예: 웹사이트, 랜딩 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 또는 모든 웹 UI의 스타일링/미화)을 구축할 때 이 SKILL을 사용하세요. 일반적인 AI 미학을 피하고 창의적이고 세련된 코드와 UI 디자인을 생성합니다. |
이 SKILL은 일반적인 "AI스러운" 미학을 피하고 독특하며 운영 수준의 프런트엔드 인터페이스를 생성하도록 안내합니다. 미적 세부 사항과 창의적인 선택에 각별한 주의를 기울여 실제로 작동하는 코드를 구현합니다.
사용자는 프런트엔드 요구 사항(빌드할 컴포넌트, 페이지, 애플리케이션 또는 인터페이스)을 제공합니다. 여기에는 목적, 대상 사용자 또는 기술적 제약 사항에 대한 컨텍스트가 포함될 수 있습니다.
코딩하기 전에 컨텍스트를 이해하고 대담한(BOLD) 미적 방향성을 정하세요:
중요: 명확한 개념적 방향을 선택하고 정밀하게 실행하세요. 대담한 맥시멀리즘과 세련된 미니멀리즘 모두 효과적입니다. 핵심은 강도가 아니라 '의도성(intentionality)'입니다.
그 후, 다음과 같은 실제로 작동하는 코드(HTML/CSS/JS, React, Vue 등)를 구현합니다:
다음에 집중하세요:
자주 사용되는 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트), 진부한 컬러 스킴(특히 흰 배경의 보라색 그래디언트), 예측 가능한 레이아웃과 컴포넌트 패턴, 그리고 컨텍스트 고유의 캐릭터가 없는 일률적인 디자인과 같은 일반적인 AI 생성 미학을 절대 사용하지 마세요.
창의적으로 해석하고, 해당 컨텍스트를 위해 진정으로 디자인된 느낌을 주는 예상치 못한 선택을 하세요. 어떤 디자인도 똑같아서는 안 됩니다. 라이트 테마와 다크 테마, 서로 다른 폰트, 서로 다른 미학을 다양하게 적용하세요. 생성 결과물들이 공통적인 선택지(예: Space Grotesk)에 머무르게 하지 마세요.
중요: 구현 복잡도를 미적 비전에 맞추세요. 맥시멀리스트 디자인은 광범위한 애니메이션과 효과를 포함한 정교한 코드가 필요합니다. 미니멀리스트나 세련된 디자인은 절제, 정밀함, 그리고 간격, 타이포그래피, 미묘한 세부 사항에 대한 세심한 주의가 필요합니다. 우아함은 비전을 잘 실행하는 데서 나옵니다.
기억하세요: Claude는 비범하고 창의적인 작업을 수행할 수 있습니다. 주저하지 말고 틀에서 벗어나 생각하며, 독특한 비전에 온전히 몰입했을 때 진정으로 무엇이 창조될 수 있는지 보여주세요.
