no-fi가 에이전트의 ASCII 와이어프레임을 검사한다

no-fi는 에이전트가 평문 문자로 사용자 인터페이스(UI) 와이어프레임을 그리게 하는 스킬이다. 색상이나 서체보다 화면의 배치와 콘텐츠, 흐름을 논의하려는 팀이 활용할 수 있으며, 와이어프레임을 정해진 규칙에 맞게 검사하는 도구도 제공한다.

화면을 요청하면 Claude는 상자, 입력란, 버튼, 표, 막대 차트를 모노스페이스 문자로 그린다. 색상·글꼴·아이콘을 제외해 화면 구조에 집중하도록 한다.

설치와 사용

설치 방법은 에이전트가 스킬을 불러오는 위치에 no-fi 스킬 폴더를 넣는 네 가지 방식과 claude.ai에 업로드하는 방식이 있다.

• 프롬프트 이용: no-fi.dev에서 설치 프롬프트를 복사해 Claude Code 또는 다른 에이전트에 붙여 넣는다. 프롬프트는 아래 npx 명령을 실행하며, npx를 실행할 수 없으면 파일을 하나씩 내려받는다.
• npx 이용:

npx no-fi-skill

이 명령은 스킬을 ~/.claude/skills/no-fi에 복사한다. --project를 추가하면 ./.claude/skills/no-fi에 설치하고, --force를 추가하면 기존 설치를 덮어쓴다.

• skills CLI 이용:

npx skills add p-a-u-l-i-e/no-fi --skill no-fi

• 직접 설치:

git clone https://github.com/p-a-u-l-i-e/no-fi.git
cp -R no-fi/plugin/skills/no-fi ~/.claude/skills/

• claude.ai에 설치: no-fi.zip을 내려받아 Settings, Capabilities, Skills에서 업로드한다. 이 파일에는 스킬 폴더만 들어 있다. GitHub의 Download ZIP은 저장소 전체를 담으므로 claude.ai에서 스킬로 사용할 수 없다.

스킬은 평문 파일과 Node 및 Python으로 작성한 작은 검사 스크립트 하나로 구성된다. 설치 전에 모든 파일을 읽어볼 수 있다.

화면을 요청할 때는 디자이너에게 스케치를 부탁하듯 말하면 된다. “와이어프레임”이나 “스케치”라는 표현을 쓰면 스킬이 불러와지며, Claude Code에서는 /no-fi를 입력해도 된다. 예를 들면 다음과 같이 요청할 수 있다.

• 세 단계로 된 송금 양식을 와이어프레임으로 그린다.
• 알림 설정 페이지를 그린다.
• 디자인하기 전에 거래 내역 표를 함께 살펴본다.

Claude는 결과를 코드 펜스로 감싼 뒤 검사기를 실행하고, 그림으로 표현해야 할 시각 요소가 있으면 그림 아래에 문장으로 설명을 덧붙인다.

와이어프레임 작성 규칙

읽기 쉬운 와이어프레임을 위해 일곱 가지 규칙을 둔다. 전체 내용은 SKILL.md에서 확인할 수 있다.

• 일반 문자와 상자 그리기 문자만 사용한다. 출력 가능한 ASCII 문자, 상자 테두리 문자, 막대와 차트를 위한 블록 문자를 쓴다. 이모지와 탭은 허용하지 않는다.
• 바깥 테두리는 이중선, 안쪽 테두리는 단일선으로 그린다. 가장 바깥 컨테이너에는 이중선을 쓰고 내부의 모든 상자에는 단일선을 쓴다.
• 너비를 고정한다. 한 줄은 80자를 넘지 않으며, 각 상자는 모든 행에서 너비가 같아야 한다.
• 결과는 항상 코드 펜스로 감싼다. 그래야 정렬을 유지할 수 있다.
• 장식 대신 설명을 사용한다. 색상·글꼴·아이콘은 넣지 않고, 시각 요소는 그림 아래의 설명에 적는다.
• 정해진 어휘를 사용한다. 각 요소는 표에 정리된 방식으로 그리며 임의의 기호를 만들지 않는다.
• 검사기를 실행해 결과를 보여주기 전에 모든 오류를 수정한다.

구성 요소와 예시

어휘 목록은 구조, 입력란, 버튼, 피드백, 내비게이션, 데이터, 차트의 7개 그룹으로 나뉜 44개 요소로 구성된다. 각 요소는 실제 구성 요소를 나타내는 모양으로 그린다.

• 입력란은 한 줄로 표시하고, 여러 줄 입력란은 // 손잡이가 있는 더 큰 카드로 그린다.
• 배지는 ( Paid )처럼 알약 모양으로, 태그는 <Food x>처럼 제거 표시와 함께 그린다.
• 버튼은 대괄호로 표시하며 기본 버튼에는 이중 대괄호를 쓴다.
• 펼쳐진 상태는 펼쳐진 모습으로 그린다. 선택 메뉴는 아래에 메뉴를 표시하고, 아코디언은 콘텐츠를 아래에 둔다.
• 모달, 토스트, 툴팁은 화면 내부에 놓인 카드로 그린다.

각 요소의 그림과 설명을 담은 전체 표는 SKILL.md에 있다. 같은 데이터는 vocabulary.json에서도 볼 수 있다.

examples/에는 어휘 목록 전체를 활용해 만든 완성 화면 7개가 있다.

와이어프레임 검사

에이전트는 와이어프레임을 보여주기 전에 검사한다. 직접 검사하려면 어디서든 다음 명령을 실행하면 된다.

npx no-fi-skill check wireframe.txt

검사기는 스킬에 포함되어 있으며 Node와 Python 버전은 같은 결과를 출력한다. 설치 경로에서 또는 저장소에서 다음 명령으로 실행할 수 있다.

node ~/.claude/skills/no-fi/scripts/check_wireframe.mjs wireframe.txt
python3 plugin/skills/no-fi/scripts/check_wireframe.py wireframe.txt

검사기는 지원하지 않는 문자와 탭, ASCII 상자 테두리, 닫히지 않거나 선이 맞지 않는 상자, 한 상자 안에서 이중선과 단일선을 섞어 쓴 경우, 다른 상자 안에 이중선 상자를 중첩한 경우를 오류로 처리한다. 또한 표의 구분선이 같은 열에 놓이지 않은 경우, 진행률 막대의 채움 길이와 백분율이 맞지 않는 경우, 막대 차트 행의 길이와 값이 일치하지 않는 경우도 검사한다. 범례가 없는 히트맵과 누적 세로 막대, 각 행의 값이 무엇을 나타내는지 설명하지 않은 세로 막대 차트도 오류로 처리한다.

어휘 목록의 원본 데이터는 plugin/skills/no-fi/vocabulary.json이다. 아래 스크립트는 스킬 외부의 scripts/에 있어 사용자에게 배포되지 않는다. 어휘를 수정한 뒤에는 다음 명령을 실행한다.

python3 scripts/sync_vocabulary.py # rewrite the tables in SKILL.md
node scripts/check_coverage.mjs # every element appears in an example
node plugin/skills/no-fi/scripts/check_wireframe.mjs plugin/skills/no-fi/examples/*.txt

python3 scripts/check_coverage.py를 실행해도 Node 버전과 같은 범위 검사 결과를 얻는다.

저장소는 Claude 플러그인과 스킬, 유지 관리 스크립트, 사이트 등으로 구성된다. 플러그인 설정은 .claude-plugin/plugin.json에 있으며, 스킬의 규칙과 어휘 표는 plugin/skills/no-fi/SKILL.md, 어휘 데이터는 plugin/skills/no-fi/vocabulary.json에 있다. 완성된 예시는 plugin/skills/no-fi/examples/에, 와이어프레임 검사 스크립트는 plugin/skills/no-fi/scripts/에 들어 있다. 어휘 동기화와 범위 검사용 유지 관리 스크립트는 별도의 scripts/에 있으며, bin/no-fi-skill.mjs는 npx no-fi-skill 명령을 제공한다. assets/에는 README 이미지가 있고 site/에는 no-fi.dev 사이트 파일이 있다.

라이선스는 MIT다.