AI 티 안 나는 디자인 세트 설치

Install the 'no AI look' design set

Claude Code가 디자인 기준 파일, 뻔한 디자인 막는 스킬, 배포 전 규칙 검사, 진짜 브라우저 확인까지 순서대로 설치해요. 그다음 내 화면을 그 기준으로 다시 만들고 휴대폰·PC 캡처로 전후를 보여 줘요.

이럴 때 Claude로 만든 웹사이트가 매번 비슷하고 어색해 보일 때

도구 Claude Code · Codex

프롬프트

너는 내 웹 프로젝트의 디자인 품질 담당이다. 아래 5개 도구를 순서대로 준비하고, 내 화면을 다시 만들기 전에 기준부터 세워라. 설치마다 무엇을 했는지 한 줄씩 보고하고, 실패하면 이유와 대안을 말해라.

【내가 채울 것】
- 프로젝트 폴더: [예: ~/projects/my-site]
- 닮고 싶은 브랜드 1개: [예: apple, airbnb, stripe, notion, claude — 목록은 github.com/VoltAgent/awesome-design-md/tree/main/design-md]
- 고칠 화면: [예: 첫 화면, 가격 페이지]

1) 디자인 기준 파일 (awesome-design-md, MIT)
- https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[브랜드]/DESIGN.md 를 받아 프로젝트 맨 위 폴더에 DESIGN.md 로 저장한다.
- 앞으로 색·폰트·간격·버튼은 이 파일을 기준으로 쓴다. 브랜드 로고·이름은 쓰지 않는다(분위기만 빌린다).
2) 뻔한 디자인 막기 (taste-skill, MIT)
- npx skills add https://github.com/Leonxlnx/taste-skill
- 설치된 스킬 이름을 보여 주고, 화면 작업 때 이 스킬을 먼저 읽는다.
3) 배포 전 디자인 규칙 검사 (vercel-labs/agent-skills 의 web-design-guidelines)
- npx skills add vercel-labs/agent-skills
- 접근성·포커스 상태·폼·애니메이션·글자 위계를 이 규칙으로 점검하고, 지적 사항을 파일·줄 단위 표로 보여 준다.
4) 진짜 브라우저로 확인 (agent-browser, Apache-2.0)
- npm install -g agent-browser && agent-browser install
- 로컬 화면을 열어 휴대폰(390px)·PC(1280px) 크기로 캡처하고, 겹침·잘림·대비 부족·깨진 링크를 찾아 고친 뒤 다시 캡처해 전후를 보여 준다.
5) (선택) 스크린샷을 코드로 (screenshot-to-code, MIT)
- 이건 따로 서버를 띄우는 앱이고 Gemini·Anthropic 등 API 키가 필요하다. 지금 필요한지 먼저 묻고, 필요할 때만 README 순서대로 설치를 돕는다. 키는 내가 직접 넣는다.

작업 순서: 기준 파일 → 스킬 설치 → [고칠 화면]을 DESIGN.md 기준으로 다시 만들기 → 디자인 규칙 검사 → 브라우저 캡처 확인 → 남은 문제 목록.
지키기: 결제·계정 설정·배포는 내가 확인한 뒤에만. 외부 사이트의 이미지·문구를 그대로 가져오지 않는다. 마지막에 바꾼 파일 목록과 전후 캡처 경로를 정리한다.

팁

5번(스크린샷을 코드로)은 서버와 API 키가 필요해서 꼭 필요할 때만 쓰세요. 나머지 4개는 명령 한 줄씩이면 돼요.
브랜드 기준 파일은 분위기만 빌리는 용도예요. 로고·브랜드 이름은 쓰지 마세요.
인스타에서 '댓글 달면 DM으로 보내 준다'는 그 5개와 같은 도구예요. 여기서는 설치 순서까지 무료로 볼 수 있어요.

출처

권리: 프롬프트 문장은 빌더로그 작성. 소개한 도구는 각 저장소 라이선스(MIT·Apache-2.0, agent-skills 는 표시 없음)를 따릅니다.

프롬프트 도감builderlog.net · PROMPT DEX · 2026 가을판 · 205종

원하는 결과부터 골라보세요. 무료 프롬프트는 복사해서 바로 써보고, 반복 작업은 내 컴퓨터에 맞는 패키지로 시작할 수 있어요.

패키지 둘러보기 무료 프롬프트 먼저 써보기

000수록 프롬프트

0.0평균 별점 / 5

0직접 재현·테스트

0내 사진이 필요한 것

채집0/ 0

LAST SYNC

🆓 무료 프롬프트, 골라 드려요

복사해서 바로 쓰는 것만

전체 도감에서 더 찾기 ↓

🐙 GitHub 인기 저장소 전체

🎯 뭘 하고 싶어요?

목표를 하나 고르면 그 스킬트리만 펼쳐집니다. 전체는 "전체 코스"

도감

📡 실시간 수집함

깃허브·사례집·레딧·해커뉴스를 매일 긁어 쌓습니다. 사람이 검토하기 전까지는 미검증

수집중▮

★ 별점 기준

5: 거의 실패 없음, 결과가 곧바로 쓸 만함
4: 한두 번 재생성하면 됨
3: 재미는 있으나 편차 크거나 근거 약함

🔋 토큰 산정

입력: 한글 1.3자, 영문 4자를 1토큰으로 추정
텍스트 프롬프트는 Qwen2.5-14B 로컬 실행 실측치로 교체
이미지 1장은 Gemini 이미지 모델 기준 1,290토큰
영상·음악은 토큰이 아닌 초당 크레딧 과금

🎯 추천 코스

'뭘 하고 싶은지'를 먼저 고르면 그 목표에 맞는 프롬프트를 쓰는 순서대로 묶어 보여줍니다
카드마다 '이럴 때 쓰세요'와 '어디에 올리나'를 적어 두었습니다
같은 프롬프트가 여러 코스에 들어갈 수 있습니다

⚖️ 라이선스·삭제 요청

원문을 그대로 실은 프롬프트는 재배포가 허용된 출처(CC0·MIT·CC BY 4.0 등)만이며, 항목마다 라이선스와 원작자를 표기합니다
상업 매체에서 소개된 프롬프트는 원문을 옮기지 않고 도감 편집부가 같은 기능으로 다시 썼습니다. 출처 링크는 참고용입니다
결과 이미지는 원작자가 공개한 것을 라이선스에 따라 싣고, 실존 인물의 얼굴이 식별되는 이미지는 싣지 않습니다. 상표·캐릭터가 보이는 이미지는 예시 목적이며 권리는 각 소유자에게 있습니다
권리자의 삭제 요청은 Contact로 보내 주세요. 확인 즉시 내립니다
'빌더로그 직접 작성' 표시가 있는 항목은 © 빌더로그입니다. 개인적·비상업적 용도로 본인의 에이전트에 붙여넣어 쓰는 것만 허용하며, 상업적 이용과 원문 전체·일부의 복제·재게시·재배포(블로그·SNS·강의·유료 자료 포함)를 금지합니다. 소개는 해당 페이지 링크로만 해 주세요. 항목에 다른 라이선스가 적혀 있으면 그것이 우선합니다

📡 실시간 수집

scripts/collect.py 가 GitHub API·사례집 README·Reddit·Hacker News를 긁어 inbox.json 에 쌓습니다 (LLM 없이 결정적 코드)
GitHub Actions(매일 06:00 KST) 또는 로컬 launchd로 자동 실행. 처음 본 항목은 NEW 표시
수집함의 항목은 미검증입니다. 사람이 검토해 도감으로 승격합니다

📸 결과 캡처

텍스트·설정 프롬프트: 로컬 Qwen2.5-14B 실행 출력을 그대로 캡처 (입력값은 카드에 표시)
이미지 프롬프트: CC BY 4.0 / MIT로 공개된 오픈소스 사례집의 결과물. 원작자 링크 표기
같은 프롬프트가 아닌 경우 '유사 사례'로 구분. 캡처가 없는 항목은 출처 링크로 확인

✅ 검증 방식

결과 공개 확인: 매체·계정에서 실제 결과물이 여러 건 공개된 것
직접 테스트: 텍스트·설정 프롬프트를 로컬 모델로 실행해 형식과 의도가 재현되는지 확인