클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
← 목록으로

ss-build — StyleSeed 화면 빌드 워크플로

StyleSeed 규칙 세트를 먼저 확정한 뒤 화면을 만들고, 코드 점수와 픽셀 검증 게이트를 통과시킨 결과만 보고하게 하는 빌드 워크플로 스킬입니다.

디자인·UI고급★ 968⑂ 89AI 점수 7/10마지막 업데이트: 2026. 9. 29.

무엇을 해주나

  • .styleseed/project.json과 artifacts/index.json 유무를 확인해 레지스트리 우선으로 적용 규칙(번들·매니페스트)을 해석합니다. 레지스트리 프로젝트에서 레거시 번들로 우회하는 것을 금지합니다.
  • 코드 작성 전에 operations-console × SaaS × dashboard × swiss × locked brand tokens 처럼 유효 규칙 세트를 한 줄로 선언하게 합니다.
  • 문법(grammar) 계약(구성·밀도·타입·색·상태·반응형·모션)과 브랜드 레시피의 형태 규칙에 맞춰 화면을 구현합니다.
  • /ss-score 코드 게이트를 최대 3회 보정 루프(80점 이상이면 조기 종료)로 돌리고, /ss-verify 픽셀 게이트로 뷰포트별 시각 검증을 수행합니다.
  • 렌더러나 러너가 없으면 "검증 생략"을 명시하게 하여 통과한 것처럼 보고하는 것을 차단합니다.

이런 분께 추천

  • StyleSeed 디자인 시스템 엔진을 이미 도입했거나 도입을 검토 중인 프론트엔드/제품 개발자
  • AI가 만든 UI 품질이 매번 들쭉날쭉해서 점수·스크린샷 기반 게이트를 강제하고 싶은 팀
  • 디자인 토큰·브랜드 락을 어기지 않는 일관된 화면 산출물이 필요한 조직

활용 예시

  1. "운영 콘솔 대시보드 화면을 새로 만들어줘" → 레지스트리에서 해당 아티팩트를 해석하고 규칙 세트를 선언한 뒤 구현, /ss-score로 채점, /ss-verify로 뷰포트 확인 후 보고.
  2. 기존 설정 페이지를 리빌드할 때 → "설정 저장 후 새로고침해도 유지된다", "저장 실패 시 초안이 보존된다" 같은 기능 시나리오를 먼저 정의하고 실제 테스트로 검증.
  3. 레거시 프로젝트에서 STYLESEED.md가 없을 때 → 먼저 /ss-setup을 실행해 규칙을 확보한 뒤 UI 코드를 작성.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-build/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 bitjaru/styleseed 의 engine/.claude/skills/ss-build 폴더를 내 ~/.claude/skills/ss-build/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/bitjaru/styleseed.git && mkdir -p ~/.claude/skills && cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/bitjaru/styleseed.git
  3. 스킬 폴더를 준비합니다: mkdir -p ~/.claude/skills
  4. 엔진 스킬 전체를 복사합니다: cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/
    • ss-build는 ss-setup, ss-resolve, ss-score, ss-verify, ss-update 등 형제 스킬과 상대 경로 참조로 연결되어 있으므로 개별 파일만 복사하지 말고 폴더째 복사하세요.
  5. Claude Code를 재시작한 뒤 프로젝트 루트에서 /ss-build 대시보드 화면 형태로 호출합니다.
  6. 처음 쓰는 프로젝트라면 /ss-setup부터 실행해 .styleseed/ 설정이나 STYLESEED.md를 먼저 만들어 두세요.