google-labs-code/enhance-prompt

enhance-prompt은(는) 무엇을 하나요?

모호한 UI 아이디어를 세련되고 Stitch에 최적화된 프롬프트로 변환합니다. 구체성을 높이고, UI/UX 키워드를 추가하며, 디자인 시스템 컨텍스트를 주입하고, 더 나은 생성 결과를 위해 출력을 구조화합니다.

개요

google-labs-code/enhance-prompt는 불완전하거나 막연한 사용자 입력을 받아 AI 에이전트가 더 잘 이해하고 실행할 수 있는 정밀한 프롬프트로 개선합니다. 이 도구는 특히 Stitch 디자인 시스템과 호환되는 UI 컴포넌트를 생성할 때 유용합니다.

주요 기능

• 구체성 향상: 모호한 용어를 명확하고 측정 가능한 UI 속성으로 대체합니다.
• UI/UX 키워드 통합: 접근성, 반응형 디자인, 사용자 흐름 등과 같은 관련 용어를 자동으로 추가합니다.
• 디자인 시스템 컨텍스트 주입: Stitch 디자인 토큰, 컴포넌트 변형, 레이아웃 규칙을 프롬프트에 포함시킵니다.
• 구조화된 출력: AI가 파싱하기 쉬운 형식(예: YAML 또는 JSON)으로 결과를 반환합니다.

사용 방법

1. 입력: 모호한 UI 아이디어를 자연어로 제공합니다.
   • 예: "사용자 프로필 카드가 필요해요"
2. 처리: 스킬이 입력을 분석하고 Stitch 디자인 시스템 규칙을 적용합니다.
3. 출력: 개선된 프롬프트가 생성됩니다.
   • 예:

     component: UserProfileCard
     description: Stitch Card 컴포넌트를 사용하여 사용자 프로필을 표시합니다.
     variant: elevated
     slots:
       - avatar: 사용자 아바타 이미지 (원형, 48px)
       - name: 텍스트, bold, 16px, 다크 모드 지원
       - bio: 텍스트, regular, 14px, 최대 2줄
     states:
       - default: 로드된 상태
       - loading: 스켈레톤 플레이스홀더
       - error: 재시도 버튼 포함
     

지원 플랫폼

• Claude Code: .claude/skills/ 디렉토리에 배치하여 사용합니다.
• Cursor: docs/ 또는 .cursorrules에 설정합니다.
• Codex: SKILL.md 파일을 프로젝트 루트에 추가합니다.

예제

입력: "대시보드에 차트를 추가하고 싶어요"

출력:

{
  "component": "DashboardChart",
  "description": "Stitch Chart 컴포넌트를 사용하여 대시보드에 데이터 시각화를 추가합니다.",
  "recommended_props": {
    "type": "line",
    "responsive": true,
    "accessibility": {
      "ariaLabel": "월별 판매 데이터 차트",
      "role": "img"
    }
  },
  "layout": "DashboardLayout에 Grid 배치로 2열",
  "states": ["loading", "data", "empty", "error"]
}

설치

이 스킬을 사용하려면 해당 저장소를 클론하거나 SKILL.md 파일을 프로젝트의 적절한 위치에 복사하세요.

git clone https://github.com/google-labs-code/enhance-prompt.git

또는 AI 에이전트 설정에 따라 스킬 디렉토리에 복사합니다.

기여

버그 리포트, 기능 제안, 풀 리퀘스트를 환영합니다. 자세한 내용은 CONTRIBUTING.md를 참조하세요.

라이선스

Apache 2.0 라이선스 하에 배포됩니다.