Communitygithub.com

AbdlrahmanSaberAbdo/mockup

로고 방향, 색상 팔레트, 랜딩 페이지, 앱 화면, 스토어 페이지, 메뉴, 간판, 게시물과 같은 비즈니스를 위한 시각적 옵션을 빠르게 나란히 제시하여 사용자가 비교하고 선택할 수 있도록 합니다.

mockup란 무엇인가요?

이 스킬은 사용자가 시각적 비교를 통해 최선의 선택을 할 수 있도록, 여러 디자인 방향을 나란히 배치한 모크업을 생성합니다. 로고, 색상 팔레트, 랜딩 페이지, 앱 화면, 스토어 페이지, 메뉴, 게시물 템플릿 등 다양한 비즈니스 자료에 적용 가능하며, 허브 문서(Hub Document)가 있거나 없어도 작동합니다. 이 스킬은 먼저 허브 문서의 브리프에서 프로젝트 이름, 대상 청중, 분위기, 색상 팔레트, 로고, 피해야 할 사항을 읽고, 사용자가 참조 이미지나 색상을 제공한 경우 정확한 색상(이미지에서 추출한 16진수 값 포함)을 사용합니다. 그런 다음 3~4개의 뚜렷이 다른 방향(모바일/데스크톱, 아랍어/영어 등 필요한 모든 버전 포함)을 계획하고, 이를 한 캔버스나 페이지에 행으로 나란히 배치하여 한눈에 비교할 수 있도록 합니다. 또한 텍스트 대비 4.5:1(본문), 3:1(큰 텍스트)를 확인하고, 기준을 충족하지 못하는 팔레트 조합은 이름을 명시하고 대체 사용법을 제안합니다. 마지막으로 사용자의 선택을 기록하고, 최종 파일, 플랫 버전, 파비콘과 같은 후속 작업을 생성합니다. 주요 플랫폼으로는 Claude Code, Cursor, Codex 등이 있으며, 이 스킬은 다른 브랜드의 로고나 캐릭터를 복사하지 않으며, 생성된 이미지와 3D 효과는 작은 크기에서 실패할 수 있으므로 항상 아이콘용 플랫 버전을 계획하도록 규칙을 포함합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AbdlrahmanSaberAbdo/business-skills/tree/main/skills/mockup

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

mockup은(는) 무엇을 하나요?

사용자가 시각적으로 선택해야 할 때 사용하세요: 로고 방향, 팔레트, 랜딩 페이지, 앱 화면, 스토어 페이지, 메뉴 또는 전단지, 게시물 템플릿. 허브 문서가 있거나 없어도 작동합니다.

단계

  1. 허브 문서의 브리프에서 프로젝트 이름, 대상 청중, 분위기, 팔레트, 로고 및 피해야 할 사항을 읽습니다. 사용자가 참조 이미지나 팔레트를 제공한 경우 정확한 색상(가능한 경우 이미지에서 16진수 샘플 추출)을 사용합니다.
  2. 단순한 변형이 아닌 실제로 다른 3~4개의 방향을 계획하고, 각각 필요한 모든 버전(예: 모바일 및 데스크톱, 아랍어 및 영어, 정사각형 및 스토리 크기)을 포함합니다.
  3. 한 캔버스나 페이지에 행으로 나란히 배치하여 한눈에 비교할 수 있도록 합니다. 브리프의 실제 문구를 사용하고, 누락된 정보에는 [PRICE]와 같은 자리 표시자를 사용합니다.
  4. 대비 확인: 본문 텍스트 4.5:1, 큰 텍스트 3:1. 팔레트 쌍이 기준에 미치지 못하면 이름을 명시하고 대신 사용하는 방법을 제안합니다(예: 장식 전용).
  5. 방향당 한 줄: 아이디어와 주요 장점 또는 단점. 사용자에게 선택을 요청합니다.
  6. 선택을 to-brief로 기록하고 to-tasks로 후속 작업을 추가합니다(최종 파일, 플랫 버전, 파비콘).

규칙

  • 다른 브랜드의 로고, 캐릭터 또는 독점 디자인을 복사하지 마십시오.
  • 이는 방향 제시입니다. 최종 작업에 벡터 파일이나 디자이너가 필요한 경우 명시하십시오.
  • 생성된 이미지와 3D 효과는 작은 크기에서 실패합니다. 항상 아이콘용 플랫 버전을 계획하십시오.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬