impeccable
AI로 세련된 프론트엔드 인터페이스 구축하기
AI가 생성한 인터페이스는 흔히 진부하고 템플릿처럼 보이기 쉽습니다. Impeccable은 전문가 수준의 디자인 결정을 통해 AI를 안내하여 독창적이고 프로덕션 등급의 프론트엔드 코드를 만들어냅니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"impeccable" 사용 중입니다. Bold 타이포그래피와 비대칭 레이아웃을 사용한 크리에이티브 에이전시 포트폴리오의 히어로 섹션 만들기
예상 결과:
clamp()를 사용한 유동적 디스플레이 타이포그래피, 다양한 간격의 비대칭 그리드 레이아웃, 글꼴 선택 절차를 통해 선택된 독창적인 글꼴 페어링, 그리고 squint 테스트를 통과하는 명확한 시각적 계층 구조를 갖춘 반응형 히어로 섹션.
"impeccable" 사용 중입니다. 일관성 없는 색상 값을 가진 페이지에서 재사용 가능한 토큰 추출하기
예상 결과:
OKLCH 기반 프리미티브 색상, 색조 중립 스케일, 기본 및 상태 색상에 대한 시맨틱 색상 매핑, 각 토큰 사용 시기에 대한 문서화된 가이드를 포함한 응집력 있는 디자인 토큰 시스템.
"impeccable" 사용 중입니다. 적절한 유효성 검사가 포함된 접근 가능한 연락처 폼 디자인하기
예상 결과:
표시 레이블, blur 시 유효성 검사, aria-describedby를 사용한 설명 오류 메시지, focus-visible를 사용한 적절한 포커스 링, 모바일 사용자를 위한 적절한 크기의 터치 타겟을 갖춘 폼.
보안 감사
낮은 위험All 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
낮은 위험 문제 (1)
위험 요인
⚙️ 외부 명령어 (1)
품질 점수
만들 수 있는 것
마케팅 사이트 리뉴얼
스타트업 창업자가 동일한 SaaS 템플릿들의 바다에서 돋보이는 랜딩 페이지를 원합니다. Impeccable은 독창적인 타이포그래피와 색상 선택을 통해大胆한 미학 방향으로 AI를 안내합니다.
디자인 시스템 부트스트래핑
개발자가 기존 코드베이스에서 일관된 디자인 토큰, 컴포넌트, 패턴을 추출하여 재사용 가능한 디자인 시스템으로 만들어야 합니다. extract 모드는 재사용 가능한 패턴을 식별하고 체계화합니다.
접근 가능한 폼 및 인터랙션 디자인
제품 팀에서 적절하게 디자인된 폼, 포커스 상태, 로딩 패턴, 키보드 네비게이션이 필요합니다. Impeccable은 WCAG 준수, Popover API, 포커스 링 디자인에 대한 참고 자료를 제공합니다.
이 프롬프트를 사용해 보세요
Run /impeccable teach to gather design context for my project. Scan the codebase first, then ask me the questions you still need answered.
Run /impeccable craft a pricing page for a SaaS product. The target audience is small business owners who value clarity and speed. The brand tone is confident, practical, and no-nonsense.
Run /impeccable extract the shared design tokens and reusable components from my existing component library. Focus on colors, spacing, typography, and button variants.
Run /impeccable craft a dark-mode dashboard for an observability tool used by SREs. The interface needs to be information-dense but readable, with a muted color palette and strong data visualization hierarchy.
모범 사례
- 디자인 작업을 생성하기 전에 항상 사용자로부터 디자인 컨텍스트를 수집하십시오. 기존 지침을 확인한 다음 .impeccable.md를 확인하고 teach 플로우를 실행하십시오.
- 안전하고 범용적인 기본값으로 물러서지 말고大胆한 미학 방향을 확고히 하십시오. 맥시멀리즘과 미니멀리즘 모두 의도적으로 실행될 때 효과적입니다.
- 모든 출력에 AI slop 테스트를 실행하십시오: 누군가가 이것을 AI가 생성한 것으로 즉시 인식할까요? 그렇다면 디자인에 더 독창적인 창의적 선택이 필요합니다.
피하기
- Inter, Fraunces, Space Grotesk, Cormorant와 같은 reflex 글꼴 사용 - AI 생성 프로젝트 전반에 단문화(monoculture)를 만듭니다.
- 어두운 배경의 시안, 보라색-파란색 그라데이션, 글로우 액센트 - 가장 쉽게 알아차릴 수 있는 AI 디자인의 특징입니다.
- 카드에 border-left 액센트 스트라이프, 그라데이션 텍스트, 글래스모피즘 장식 사용 - AI slop 패턴으로 명시적으로 금지됩니다.
자주 묻는 질문
언제 Impeccable을 호출해야 하나요?
craft, teach, extract 모드의 차이점은 무엇인가요?
Impeccable이 React, Vue 또는 다른 프레임워크와 호환되나요?
Impeccable이 진부한 AI 느낌의 디자인을 어떻게 방지하나요?
Impeccable이 접근성 준수를 도와줄 수 있나요?
Impeccable의 새 버전으로 업데이트하면 어떻게 되나요?
개발자 세부 정보
작성자
pbakaus라이선스
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
참조
main