스킬

Interface Design: 대시보드와 관리 화면에 기억할 수 있는 화면 규칙 두기

대시보드, 앱, 도구, 관리 화면을 세션을 건너 유지되는 화면 체계로 만들고 싶을 때 맞다. 단 작업이 마케팅 사이트가 아니어야 하고, 스킬이 코딩 대리와 같은 권한을 공유하는지 먼저 확인한다.

Official source · Interface Design

Install

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

누구에게 맞나

대시보드, 내부 앱, 도구, 관리 화면을 반복 실행할 수 있는 화면 체계로 만들고 싶을 때, 마케팅 착지 페이지가 아닐 때 이 스킬을 쓴다. 먼저 화면 의도를 정한 뒤, 이후 세션도 같은 규칙으로 나아가게 한다. 매번 처음부터 즉흥으로 하지 않는다.

공식 설명은 범위를 좁게 적는다: interface design을 향하며 구체는 dashboards, apps, tools, admin panels. 마케팅 사이트가 아니라고 명시한다. 작업이 홍보 페이지, 브랜드 홈, 캠페인 페이지, 판매 착지 페이지라면 이를 주 경로로 보지 말 것.

다른 전제는 권한이다. 설명은 스킬이 코딩 대리와 같은 권한 세트를 쓴다고 적는다. 따라서 설치 후 실제로 화면을 바꾸기 전에 스킬 파일을 열고 허용된 일을 읽는다. 근거는 Claude Code 외 클라이언트 이름을 내지 않았고, 「관련하면 자동 호출」을 전 플랫폼 능력으로 쓰지 않았다. 적히지 않은 환경은 이미 된다고 기본으로 두지 말 것.

3분 만에 첫 시도 끝내기

공식 페이지가 인정하는 곳은 여기뿐이다:

https://github.com/dammyjay93/interface-design

권장 설치 경로도 이 하나뿐이다. 먼저 저장소 주소를 대조하고 설치할 것이 이 스킬인지 확인한 뒤 이 기기 터미널에서 실행한다:

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

명령의 부작용은 핵심 스킬을 ~/.claude/skills/interface-design에 넣는 것이다. 실행 후 그 디렉터리를 열고 스킬 파일이 착지한 것을 본 뒤 대화에 들어간다. 디렉터리가 없거나 명령이 실패하면 멈춘다. 공식 설명에 없는 설치기나 디렉터리로 바꾸지 말 것.

Claude Code에서는 /interface-design으로 명시 호출한다. 처음에는 대조만 하고 디스크에 쓰지 않는다. 기존 관리 화면이나 대시보드 페이지를 고르고, 이 화면이 지켜야 할 구조와 컴포넌트 규칙, 지금 파일에 쓰면 안 되는 결정을 말하게 한다. 업무 코드를 바꾸게 하지 말고 .interface-design/system.md도 만들지 말게 한다.

관찰 가능한 성공 신호는 둘이다. 대화에 대시보드 또는 관리 화면(마케팅 페이지가 아님)을 향한 규칙이 나온다. 그리고 ~/.claude/skills/interface-design에서 방금 설치한 스킬 파일을 열 수 있다. 어느 쪽이든 맞지 않으면 설치와 호출에서 멈추고 파일 쓰기에 들어가지 말 것.

사용 사례

사례 1: 기존 관리 화면에서 화면 의도를 맞추기. 실제 admin panel, 내부 도구, 대시보드를 열고 /interface-design으로 「의도를 가지고 화면을 짜기」로 현재 구조를 확인하게 한다. 어떤 구역이 체계 일관성을 유지해야 하는지, 어떤 것은 마케팅 사이트 서사처럼 배치하면 안 되는지. 이 사례는 dashboards, apps, tools, admin panels만 덮는다. 설명은 처음부터 사이트 전체를 생성하는 시연도, 마케팅 페이지 다시 쓰기 단계도 없다.

사례 2: 이미 합의된 화면 결정을 남겨 다음 세션에서 이어 쓰기. 먼저 대화에서 기억할 규칙 몇 줄을 나열한다. 디스크에 써도 된다고 확인한 뒤 스킬이 .interface-design/system.md를 쓰게 한다. 쓴 뒤 바로 그 파일을 열고 방금 그 몇 줄과 맞는지 대조한다. 다음에 스킬을 다시 돌리면 이 결정을 다시 로드할 수 있어야 한다. 설명은 .interface-design/system.md에 저장하고 스킬 실행 시 reload까지만 적는다. 여러 저장소 공유, 충돌 병합, 자동 덮어쓰기는 없다. 빠진 부분은 열어 대조할 수 있는 그 한 파일에서 멈춘다.

사용 경계

마케팅 사이트에 쓰지 말 것. 공식 문장은 적용 범위 뒤에 “Not for marketing sites”를 둔다. 단단한 경계이며 스타일 조언이 아니다.

스킬과 코딩 대리 권한이 같다. 쓰기 전에 설치된 스킬 자체를 읽는다. 파일을 보지 않은 채 저장소를 바꾸거나 기억 파일을 쓰게 하지 말 것.

설치와 호출은 npx skills add, ~/.claude/skills/interface-design, Claude Code 자동 호출, /interface-design까지만 적혀 있다. 다른 마켓, 다른 디렉터리, 나타나지 않은 클라이언트를 보태지 말고, 이 명령을 설명이 지명하지 않은 플랫폼에 씌우지 말 것.

기억은 .interface-design/system.md의 저장과 다시 로드까지다. 두 번째 저장소, 팀 동기화, 프로젝트 간 상속을 가정하지 말 것.

설명에 언어 범위, 가격, Claude Code 외 공식 클라이언트 명단은 없다. 근거 없는 항목은 모름으로 두고 조작을 보태 쓰지 말 것.