preview-prose-audit

Solid

프리뷰 캡션(public/preview/*/preview.html — 라이트·다크 한 파일)이 services/*.md 나 상류 원본이 뒷받침하지 않는 주장을 하는지 대조·판정할 때 쓴다. 판정 근거의 등급, 상류(Claude Design 번들 vs 브랜드 발행물) 확인 절차, 슬러그별 상류 판정표, 되돌리기 대장 위치를 담는다. 캡션을 고치거나 "md에 없다"를 근거로 프리뷰를 정정하려 할 때 반드시 먼저 읽을 것.

Code & Development 45 stars 4 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
55
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 프리뷰 산문 감사 — 판정 근거의 등급 프리뷰 캡션이 `services/*.md`가 뒷받침하지 않는 주장을 하는지 사람이 대조하는 작업이 이어져 왔다(`docs/superpowers/specs/*-preview-prose-audit-*`). **그 판정에는 근거 등급이 있고, 낮은 등급을 근거로 쓰면 프리뷰를 망가뜨린다.** - ❌ **"md에 없음"은 결함의 근거가 아니다.** md와 프리뷰는 **둘 다 같은 Claude Design 핸드오프 번들에서 갈라졌고**, md는 컴포넌트 상태·수치·변형명을 상당 부분 옮기지 않은 **손실 전사**다. md의 침묵은 "프리뷰가 지어냈다"가 아니라 "md가 안 적었다"인 ��우가 많다. - ✅ **"md 또는 상류 원본이 반증함"만 결함이다.** 값이 다르거나, 다른 컴포넌트의 값을 귀속했거나, 원본에 그 이름이 없을 때. **상류를 확인하는 법**: `DesignSync` MCP(`list_projects` → `list_files` → `get_file`)로 슬러그별 Claude Design 프로젝트를 읽는다. 거의 모든 카탈로그 항목에 대응 프로젝트가 있다. **다만 번들이 상류인 것은 md가 번들에서 나왔을 때뿐이다.** md가 브랜드 공개 문서· 오픈소스 저장소·npm 패키지에서 직접 만들어졌다면 **그것들이 상류이고 번들은 형제**다 — 같은 출처에서 갈라진 또 하나의 재구성물이라 md를 뒤엎을 권위가 없다. **md의 sources를 먼저 보라**: 번들을 가리키지 않고 공개 URL만 열거하면 이 경우다. | 슬러그 | 상태 | | --- | --- | | `seed-design` | 번들 **없음** — 공개 문서와 npm 패키지에서 직접 만들었다 | | `class101` | 번들 **있으나 상류 아님** — 번들 README가 스스로를 *"a faithful recreation of CLASS101's open-source Vibrant Design System"* 이라 적고, 출처로 크롤 코퍼스 58쪽 · `vibrant-design.com` · `github.com/pedaling/opensource`(MIT)를 든다. md도 같은 공개 출처 48개를 인용 190개로 쓴다 — **둘이 형제다.** 판정은 공개 문서·오픈소스 코드로 한다 | | `vapor-ui` | 번들에서 **만들었으나 전량 뒤집혔다** — md 머리말이 번들을 1차 출처로 밝혔지만 sources 5개는 전부 공개(`vapor-ui.goorm.io` · goorm 블로그 · Figma Community · npm · 공개 저장소 `goorm-dev/vapor-ui`). 번들값이 공개 발행값과 크게 어긋나 **토큰 절과 컴포넌트 절을 차례로 교체했다** — `## Colors` 110개(2026-07-29), 그리고 `## Typography` · `## Spacing` · `## Rounded` · `## Elevation & Depth` · `## Components`(2026...

Details

Author
CaesiumY
Repository
CaesiumY/ko-design-md
Created
4 months ago
Last Updated
2 days ago
Language
HTML
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

detail-page-core

커머스 상세페이지를 브랜드 프로파일 기반으로 Figma에 만들거나 수정하는 디자인 시스템 스킬. 색·조형·타이포·카���·섹션·이미지의 결정 규칙을 "값"이 아니라 "상대·조건 패턴"으로 정리했다. "상세페이지", "detail page", "상세페이지 만들어줘", "섹션 만들어줘", "리뷰 섹션", "개성 섹션", "장점 요약 섹션", "기능 설명 섹션", "FAQ 섹션", "성분표 섹션", "소개 메인페이지", "피그마로 상세", "피그마 상세페이지" 같은 요청에서 발동. Figma MCP(use_figma)로 실제 캔버스에 프레임을 생성·편집한다.

1 Updated 5 days ago
HarinJin
Web & Frontend Listed

synk-design

SYNK 시각 디자인 진입로 — 눈에 보이는 산출물(HTML·인쇄물·발표물·웹앱·앱 화면·SNS 이미지·영상·차트·지도·표·포스터)을 만들거나 수정할 때 항상 먼저 참고. 루트 DESIGN.md(브랜드 킷 요약+정본 링크)를 읽게 하고, 완성도 스킬·외부킷(uupm)·dataviz·Remotion 스킬의 사용 순서와 「킷 우선」 충돌 규칙을 안내한다.

0 Updated today
unmet23-lab
Web & Frontend Listed

design-md

프로젝트 루트에 DESIGN.md — AI 코딩 에이전트가 UI를 일관되게 만들도록 브랜드의 시각 언어 (컬러·타이포·스페이싱·컴포넌트)를 실행 가능한 결정값으로 박은 "디자인 시스템 SSOT" — 를 생성하는 스킬. 기존 코드베이스를 스캔해 실제 값을 추출(현실 기술)하고, 스캔으로 못 채운 부분만 대화로 보완한다(하이브리드). 코드가 없으면 대화 중심으로 폴백한다. 산출 끝에는 프로젝트 지침 파일에 "UI 생성 전 DESIGN.md 읽기" 참조 줄 추가를 반드시 안내한다(DESIGN.md는 자동 로드되지 않기 때문). 그린필드거나 사용자가 육안검증·공유를 원하면 자기완결 preview.html(스와치·타입스케일·컴포넌트 갤러리, 라이트/다크 토글)을 조건부로 함께 생성한다. "미리보기도 만들어줘", "preview.html", "디자인 시스템 미리보기 페이지" 같은 표현에도 반응한다. 다음 표현이 나오면 반드시 이 스킬을 사용한다: "DESIGN.md 만들어줘", "design.md 생성", "디자인 시스템 문서 만들어줘", "디자인 가이드 문서 만들어줘", "디자인 토큰 문서화", "AI가 UI 일관되게 따를 문서 만들어줘", "브랜드 스타일 가이드 마크다운", "UI 컨벤션 문서", "우리 앱 디자인 규칙 문서로 박아줘". 사용자가 "AI/에이전트가 우리 앱 스타일을 일관되게 따르게 하고 싶다"거나, 프로젝트의 색·폰트·간격·컴포넌트를 문서로 고정해 매 UI 생성이 흔들리지 않게 하려 할 때는, 명시적으로 "DESIGN.md"라고 부르지 않아도 이 스킬을 쓴다.

0 Updated today
gagip