184 likes, 232 comments - uxdesign_today - August 17, 2026: " design.md가 뭔가요?
Google이 만든 오픈 포맷으로, 우리 브랜드의 색상·폰트·간격·컴포넌트 규칙을 텍스트로 옮겨둔 문서입니다.
Cursor나 Claude Code가 화면을 만들 때마다 이 파일을 읽고 그 규칙 안에서 UI를 만들어줘요
파일은 두 겹으로 되어있어요
위쪽 YAML — AI가 바로 읽는 색상·폰트·간격 값
아래쪽 마크다운 — 사람이 읽는 설명과 ”왜 이 값인지“
내…184 likes, 232 comments - uxdesign_today - August 17, 2026: " design.md가 뭔가요?
Google이 만든 오픈 포맷으로, 우리 브랜드의 색상·폰트·간격·컴포넌트 규칙을 텍스트로 옮겨둔 문서입니다.
Cursor나 Claude Code가 화면을 만들 때마다 이 파일을 읽고 그 규칙 안에서 UI를 만들어줘요
파일은 두 겹으로 되어있어요
위쪽 YAML — AI가 바로 읽는 색상·폰트·간격 값
아래쪽 마크다운 — 사람이 읽는 설명과 ”왜 이 값인지“
내 상황에서는 어떻게 만들까요?
1 디자인 시스템이 없다 → 최소 단위 토큰만 뽑아서 AI에게 초안 요청
2 피그마 파일이 있다 → Figma MCP나 Stitch로 Variables 읽어오기
3 이미 공개된 다른 회사 design.md 참고하기
참고한 자료와 디자인 시스템 레퍼런스 사이트,
프롬프트를 노션에 정리해두었어요.
필요하신 분은 댓글 남겨주세요!
#designmd#디자인시스템#피그마#ux디자이너".
출처 · www.instagram.com
스킬 파일 다운로드
이 게시글은 본문을 복사해서 쓰는 프롬프트이면서, 압축 파일로도 받을 수 있습니다. ZIP 안의 SKILL.md를 ChatGPT, Claude, Gemini, Codex의 대화창이나 프로젝트 지침에 붙여넣고 입력값만 바꿔 실행하세요.
무료 공개 패키지입니다. 다운로드 후 SKILL.md를 복사해 바로 사용할 수 있습니다.
커뮤니티-게시판-기능-보강-프롬프트.zip 다운로드
커뮤니티 게시판 기능 보강 프롬프트
커뮤니티 게시판을 실제로 쓰기 편하게 만드는 기능 검…스킬 파일 다운로드
이 게시글은 본문을 복사해서 쓰는 프롬프트이면서, 압축 파일로도 받을 수 있습니다. ZIP 안의 SKILL.md를 ChatGPT, Claude, Gemini, Codex의 대화창이나 프로젝트 지침에 붙여넣고 입력값만 바꿔 실행하세요.
무료 공개 패키지입니다. 다운로드 후 SKILL.md를 복사해 바로 사용할 수 있습니다.
커뮤니티-게시판-기능-보강-프롬프트.zip 다운로드
커뮤니티 게시판 기능 보강 프롬프트
커뮤니티 게시판을 실제로 쓰기 편하게 만드는 기능 검수·보강 프롬프트입니다. 댓글 수정/삭제, 추천 토글, 자동 링크, 유튜브 임베드, Tiptap 작성 에디터, 이미지 붙여넣기, 파일 첨부, 유료 콘텐츠 노출 문맥처럼 사용자가 바로 체감하는 기능을 체크하고, 없으면 기존 코드 패턴에 맞춰 추가하도록 지시합니다.
버전
v1.1.0 · 2026-07-14 · 무료
Tiptap 에디터 적용 여부, 툴바, 링크/이미지 삽입, 이미지 클립보드 붙여넣기 검수를 추가했습니다.
이미지 외 PDF/ZIP/DOC/XLS/TXT 등 일반 파일 첨부, 신규 글 임시 첨부 연결, 수정 화면 첨부 삭제/추가 체크를 추가했습니다.
유료 콘텐츠가 공개 본문, HTML 소스, 메타/JSON-LD, 복사용 코드에 노출되지 않는지 확인하는 문맥 검수를 포함했습니다.
v1.0.0 · 2026-07-14 · 무료
댓글 수정/삭제를 더보기 메뉴와 인라인 편집 흐름으로 점검합니다.
댓글 추천, 게시글 추천, 자동 링크, 유튜브 임베드 체크리스트를 포함합니다.
권한 API, CSRF, XSS, 기존 링크/코드블록 보호 여부를 함께 확인합니다.
기능이 없으면 기존 라우터·모델·템플릿 패턴을 우선 재사용해 보강하도록 구성했습니다.
이럴 때 사용하세요
커뮤니티 게시판을 스레드처럼 빠르게 반응하고 수정할 수 있게 만들고 싶을 때
댓글 수정/삭제/추천 기능이 화면에 보이지 않거나 이동식으로 불편할 때
본문이나 댓글에 URL을 붙였을 때 자동 링크 또는 유튜브 임베드가 필요할 때
작성 화면을 Tiptap 같은 리치 에디터로 바꾸고 이미지 붙여넣기와 첨부파일을 지원하고 싶을 때
유료 글, 구매자 전용 자료, 첨부파일 노출 정책처럼 문맥상 위험한 공개 상태를 점검하고 싶을 때
게시판 공개 전 편의 기능과 권한 흐름을 한 번에 점검하고 싶을 때
복사용 프롬프트
커뮤니티 게시판 기능 보강 스킬을 사용해서 아래 게시판의 사용자 편의 기능을 검수하고, 누락된 기능은 기존 코드 패턴에 맞춰 추가해줘.
대상 URL: {URL}
대상 mid/document_srl: {예: community / 491437}
수정 범위: {전체 / 댓글 기능만 / 본문 편의 기능만 / 작성 에디터·첨부만}
레이아웃: {예: dev/eondcms/templates/layouts/el_aithres}
필수 체크:
1. 댓글 작성, 수정, 삭제, 추천 토글이 화면 이동 없이 되는지 확인
2. 수정/삭제는 작성자 또는 관리자에게만 보이고 서버 API도 권한을 막는지 확인
3. 댓글 더보기 메뉴에서 수정/삭제가 드롭다운으로 보이는지 확인
4. 본문/댓글 URL 자동 링크와 외부 링크 보안 속성 확인
5. 유튜브 링크가 자동 임베드되고 기존 링크, code, pre, iframe을 깨지 않는지 확인
6. Tiptap 등 게시판 정책에 맞는 작성 에디터가 적용되어 있는지 확인
7. 에디터 툴바의 굵게, 기울임, 제목, 목록, 인용, 링크, 이미지 삽입 확인
8. 일반 텍스트, HTML, 이미지 클립보드 붙여넣기가 저장 후 깨지지 않는지 확인
9. 이미지 외 PDF/ZIP/DOC/XLS/TXT 등 파일 첨부가 가능하고 목록에서 확인/삭제되는지 확인
10. 새 글 작성 전에 업로드한 임시 첨부가 저장 후 새 document_srl에 연결되는지 확인
11. 수정 화면에서 기존 첨부가 보이고 새 첨부/삭제가 화면 이동 없이 반영되는지 확인
12. 유료 콘텐츠 전문, 다운로드 링크, 복사용 코드가 비구매자 공개 본문/소스/메타/JSON-LD에 노출되지 않는지 확인
13. 모바일에서 에디터, 첨부 목록, 더보기 메뉴, 추천 버튼이 겹치지 않는지 확인
14. 비로그인, 권한 없음, 작성자/관리자, 정상 성공 흐름을 나눠 재검수
출력은 반영 기능, 보류 기능, 검증 결과, 현재 점수, 남은 리스크로 정리해줘.
체크리스트 요약
댓글: 작성, 인라인 수정, 인라인 삭제, 더보기 메뉴, 추천 토글, 댓글 링크화
본문: 자동 링크, 유튜브 임베드, 기존 HTML 보호, 긴 URL 모바일 처리
작성 UX: Tiptap 에디터, 툴바, 이미지 업로드, 이미지 붙여넣기, 일반 파일 첨부
첨부: 신규 글 임시 첨부 연결, 수정 글 첨부 표시/삭제, 파일 권한
권한/보안: 작성자·관리자 체크, 비로그인 차단, XSS, CSRF/Origin, 유료 잠금
검증: HTTP 상태, 렌더링 HTML, API 응답, 모바일 화면, 저장 후 상세 화면
