DSDesignSkill
|

디자인스킬

AI에게 주입하는 실행 지침(SKILL.md) — 생성·검수·추출·변환을 일관된 기준으로 맡기세요

접근성 감사 스킬

검수

WCAG 2.2 A/AA/AAA 적합성 감사와 심각도 평가

AI 검색 최적화 스킬

SEO·마케팅

LLM 답변에 인용되도록 콘텐츠 최적화 (AEO·GEO)

알고리즘 아트 스킬

생성

시드 난수·플로우 필드·파티클 기반 p5.js 제너러티브 아트

애니디자인 추출 스킬

변환·추출

이미지·웹사이트·Figma 분석 → 토큰·컴포넌트 인벤토리 design.md 생성

아트 디렉션 스킬

생성

캠페인·사진·일러스트·영상 비주얼/크리에이티브 디렉션

바오위 디자인 스킬

스타일·브랜드

고품질 웹 디자인 기준과 구현 지침

아티클 단일 HTML 편집 스킬

콘텐츠

URL·PDF·문서를 오프라인 단일 HTML 아티클로 편집

브랜드 가이드라인 적용 스킬

스타일·브랜드

브랜드 컬러·타이포를 산출물에 일관되게 적용

브랜드 네이밍 스킬

생성

후보 생성부터 상표·도메인 점검까지 네이밍 절차

브랜드 스타일 가이드 스킬

생성

브랜드 스토리·로고 시스템·컬러·타이포·보이스 전체 가이드 구축/감사

브랜드킷 이미지 생성 스킬

스타일·브랜드

브랜드 가이드 보드·로고 시스템·아이덴티티 덱 생성

인더스트리얼 브루탈리스트 UI 스킬

스타일·브랜드

스위스 타이포 + 터미널 미학의 러프한 인터페이스

캔버스 아트 디자인 스킬

생성

디자인 철학 기반 PNG/PDF 시각 아트 — 포스터·커버·아트웍 제작

시네마틱 UI 스킬

생성

영화적 웹 디자인 — 감독 주도 아트디렉션·스토리보드 레이아웃·시네마틱 모션

인지 부하 스킬

검수

내재·외재·본유 부하로 화면 복잡도 진단

콘텐츠 전략 스킬

SEO·마케팅

무엇을 어떤 순서로 만들지 정하는 콘텐츠 계획

마케팅 카피라이팅 스킬

SEO·마케팅

홈·랜딩·가격·소개 페이지 카피 작성

전환율 최적화 스킬

SEO·마케팅

랜딩·가격·폼의 전환율 개선

CSS 아키텍처 스킬

변환·추출

BEM·ITCSS·CUBE와 유동 반응형으로 스타일 구조 잡기

디자인 크리틱 스킬

검수

사용성 휴리스틱·UX 법칙·IA·콘텐츠 품질 기준 UI 평가

디자인 DNA 추출 스킬

변환·추출

레퍼런스 UI → 토큰·정성 스타일·비주얼 이펙트 3차원 디자인 DNA

디자인 엘리베이션 스킬

변환·추출

기능만 하는 시각 결과물을 완성도 높은 디자인으로 끌어올림

디자인 옵스 스킬

프로세스

디자인 스프린트·핸드오프·팀 리추얼·문서 표준 운영

디자인 QA 체크리스트 스킬

검수

시안과 구현의 차이를 항목별로 검증하는 QA 목록 생성

디자인 시스템 구축 스킬

생성

디자인 토큰·컴포넌트 스펙·패턴 라이브러리·네이밍·거버넌스

공감 지도 스킬

검수

말·생각·행동·감정 4분면으로 사용자 리서치 정리

디자인 시스템 추출 스킬

변환·추출

공개 웹사이트에서 컬러·타이포·간격 등 디자인 프리미티브 추출

피그마 투 코드 스킬

변환·추출

Figma 디자인 → 프로덕션 React/Next.js (컴포넌트 재사용·배리언트 매핑)

프론트엔드 디자인 스킬

생성

탈템플릿 UI 시각 방향·타이포그래피 지침 — 과감한 디자인 결정 유도

프론트엔드 슬라이드 스킬

생성

애니메이션 풍부한 HTML 프레젠테이션 — 신규 제작·PPT 변환

게슈탈트 원리 스킬

검수

근접·유사·연속·폐쇄 등 시지각 원리로 레이아웃을 판단

홀마크 안티슬롭 디자인 스킬

스타일·브랜드

신규 페이지·진단·리디자인·URL 디자인 추출

개발 핸드오프 스펙 스킬

변환·추출

치수·동작·에셋·엣지케이스를 담은 개발 전달 문서 작성

화수 디자인 스킬

구현·개발

HTML 고충실 프로토타입·슬라이드·시각화 + 전문가 리뷰

이미지→코드 구현 스킬

구현·개발

디자인 이미지를 먼저 만들고 그대로 구현

웹 프런트엔드 이미지 생성 스킬

구현·개발

구현 전 웹 화면 시안 이미지를 먼저 생성

인터랙션 디자인 스킬

구현·개발

마이크로 인터랙션·상태 머신·제스처·오류 예방 설계

여정 지도·서비스 디자인 스킬

리서치·전략

고객 여정 지도·서비스 블루프린트·공감 지도 작성

랜딩 생성 스킬

생성

랜딩 한 장을 구조 계약 안에서 생성 — 섹션 순서·카피 톤·CTA 규칙 포함

로고 디자인 스킬

생성

워드마크·락업·심볼·모노그램 아키텍처별 프로덕션급 로고 배리언트

MCP 서버 제작 스킬

구현·개발

외부 서비스를 연결하는 MCP 서버 설계·구현

미니멀 UI 스킬

스타일·브랜드

웜 모노크롬·타이포 대비·플랫 벤토 그리드

모션·애니메이션 스킬

생성

12원칙·이징·스프링으로 UI 모션 설계

닐슨 휴리스틱 스킬

검수

야콥 닐슨 10대 사용성 원칙으로 인터페이스 점검

낫띵 디자인 시스템 스킬

스타일·브랜드

Nothing 특유의 도트 매트릭스·모노크롬 스타일

온보딩 최적화 스킬

SEO·마케팅

가입 이후 첫 경험과 활성화 개선

산출물 정리 스킬

프로세스

작업 결과를 일관된 형식으로 정리·전달

프로그래매틱 SEO 스킬

SEO·마케팅

템플릿과 데이터로 SEO 페이지 대량 생성

기존 프로젝트 리디자인 스킬

프로세스

현행 디자인 진단 후 기능을 깨지 않고 품질 상향

구조화 데이터 스킬

SEO·마케팅

JSON-LD 스키마 마크업 추가·수정·최적화

SEO 진단 스킬

SEO·마케팅

사이트 SEO 문제 진단·기술 SEO 점검

사이트 구조 설계 스킬

SEO·마케팅

페이지 위계·내비게이션·URL·내부 링크 설계

스킬 제작 스킬

프로세스

새 스킬 작성·개선·성능 측정

하이엔드 비주얼 디자인 스킬

스타일·브랜드

폰트·여백·그림자·카드 구조로 고급스러움 만들기

스타일시드 디자인 리뷰

검수

UI가 'AI 티 나는' 이유를 짚고 교정 방법을 제시하는 리뷰

SwiftUI 디자인 스킬

생성

iOS/macOS SwiftUI 시각 디자인 — AI 슬롭 방지 규칙과 디자인 방향

디자인 테이스트 프런트엔드 스킬

스타일·브랜드

브리프를 읽고 방향을 잡아 템플릿 티 안 나게 구현

테마 팩토리 스킬

변환·추출

슬라이드·문서·HTML에 10종 프리셋 폰트/컬러 테마 적용

UX 리서치 스킬

리서치·전략

리서치 설계·인터뷰 스크립트·정성 데이터 분석

UX 전략 스킬

리서치·전략

경쟁 분석·JTBD·가치 제안·UX 지표로 방향 설정

UX 라이팅 스킬

콘텐츠

버튼·오류 메시지·온보딩 등 인터페이스 문구 작성

비주얼 디렉션 스킬

생성

레퍼런스에서 시각 방향을 정리해 디렉션 문서로

시각 검수 스킬

검수

렌더 결과를 뷰포트별로 점검 — 겹침·오버플로·대비·여백 리듬

Waza 코드 리뷰 스킬

검수

디프·PR·이슈 큐·릴리스 준비 상태 점검

Waza UI 스킬

구현·개발

페이지·컴포넌트·타이포를 운영 수준으로 마감

Waza 문장 다듬기 스킬

콘텐츠

AI 말투를 걷어내고 문장을 다시 쓰기

웹 아티팩트 빌더 스킬

생성

React·Tailwind·shadcn/ui 기반 복합 다중 컴포넌트 HTML 아티팩트 구축

웹 에셋 생성 스킬

생성

파비콘·PWA 앱 아이콘·OG/소셜 메타 이미지 일괄 생성

웹 디자인 엔지니어 스킬

구현·개발

페이지·대시보드·프로토타입·슬라이드를 브라우저로 구현

웹 영상형 프레젠테이션 스킬

콘텐츠

글·대본을 영상처럼 보이는 16:9 웹 발표물로

웹앱 테스트 스킬

검수

Playwright로 로컬 웹앱 검증·디버깅·스크린샷