원문 캡처 · github.com
원문 캡처 · github.com

Pristine은 에이전트가 실제 웹페이지를 살펴보고 UI를 평가하거나 수정하도록 돕는 스킬이다. Claude Code, Codex, GitHub Copilot, Cursor와 SKILL.md를 읽는 에이전트에서 사용할 수 있다.

Pristine은 라이트·다크 모드와 데스크톱·모바일 화면을 캡처해 페이지를 평가한다. 프로젝트는 페르소나별로 점수를 매기고 발견한 문제의 수정안을 제시한다고 설명한다. 예시 사이트에는 전체 비평과 변경 내용을 포함한 전후 비교 8개가 있다: 예시 보기.

주요 명령은 다음과 같다.

  • /pristine init은 코드를 읽고 보이지 않는 정보만 질문한 뒤 제품, 페르소나, 브랜드, 디자인 시스템을 담은 DESIGN.md를 작성한다.
  • /pristine critique <target>은 11개 항목을 기준으로 페르소나별 페이지 점수와 각 문제의 수정안을 제시하며 코드는 수정하지 않는다.
  • /pristine design <brief>는 새 페이지·컴포넌트·흐름을 만들거나 기존 디자인을 새 방향으로 다시 구성한다.
  • /pristine polish [lenses] <target>는 기존 UI의 외관을 유지하면서 세부 요소를 다듬는다. 기존 UI에서 /pristine만 입력했을 때의 기본 명령이다.

대상은 URL, 붙여 넣은 스크린샷, 파일 경로 또는 기능 이름으로 지정할 수 있다. polish 뒤에 렌즈를 적어 적용할 방향을 지정할 수 있으며, 렌즈는 bolder, colorize, typeset, quieter, decolorize, distill, layout, adapt, consistency, animate, delight, overdrive, clarify, harden, optimize, polish-details 등 16개다. 자세한 명령과 예시는 문서에서 볼 수 있다.

설치는 도구별 플러그인 명령이나 skills.sh를 이용한다. 수동 설치 방법은 다음과 같다.

sh
git clone https://github.com/maddhruv/pristine ~/pristine
ln -s ~/pristine/skills/pristine ~/.claude/skills/pristine # or ~/.copilot/skills, ~/.agents/skills

설치 후 프로젝트에서 /pristine init을 한 번 실행하고, 작업 중인 대상에 /pristine을 실행하면 된다. 페이지 캡처에는 에이전트가 이미 사용할 수 있는 브라우저 도구를 이용한다. 그런 도구가 없으면 첫 실행 때 scripts/capture.mjs가 비공개 Playwright Chromium을 ~/.cache/pristine-capture에 설치한다. 번들 스크립트를 사용하려면 Node 18 이상이 필요하다.

  • Claude Code 설치 명령: /plugin marketplace add maddhruv/pristine /plugin install pristine@pristine
  • Codex 설치 명령:
sh
codex plugin marketplace add maddhruv/pristine
codex plugin add pristine@pristine
  • GitHub Copilot CLI 및 VS Code 설치 명령:
sh
copilot plugin marketplace add maddhruv/pristine
copilot plugin install pristine@pristine
  • skills.sh를 이용하는 설치 명령:
sh
npx skills add maddhruv/pristine

저장소에는 기여 안내와 행동 강령이 있다. 프로젝트는 버그 신고에 세션, 하네스, 모델 정보를 포함하면 도움이 된다고 안내한다. 라이선스는 Apache-2.0이다.