AI 티 안 나는 웹사이트, 이 순서로 만드세요
원문: 딸깍코드(동원샘) — https://ddalkkak.ssemgong.com/p/design-skill-stack, 허락을 받아 옮겨 실었습니다. 각 도구의 저작권·라이선스는 원작자에게 있습니다.
기준 파일 → 시안 → 구현 → 실제 화면 확인 → 접근성 검사. 디자인 스킬을 겹치지 않게 쓰는 순서를 정리했습니다.
설치 파일은 배포 준비 중이에요.
순서
- 기준 파일 — 색·글꼴·간격을 적은
DESIGN.md를 먼저 만들어 두고 매번 읽게 합니다. - 시안 — 바로 코드로 가지 말고 여러 안을 그려 보고 고릅니다.
- 구현 — frontend-design 같은 스킬로 «템플릿 기본값»을 피합니다.
- 실제 화면 확인 — 브라우저로 열어 보게 합니다(Playwright MCP).
- 검사 — 포커스·대비·폼 같은 접근성 규칙을 마지막에 점검합니다.
핵심
스킬이 정한 «취향»과 내 브랜드 색이 부딪히면 내 기준 파일이 이깁니다. 스킬은 기본값일 뿐입니다.
설치 프롬프트
# AI 티 안 나는 웹사이트, 이 순서로 만드세요
기준 파일 → 시안 → 구현 → 실제 화면 확인 → 접근성 검사. 디자인 스킬을 겹치지 않게 쓰는 순서를 정리했습니다.
- 종류: 가이드 · 분류: 디자인
출처: 딸깍코드 https://ddalkkak.ssemgong.com/p/design-skill-stack
## 순서
1. **기준 파일** — 색·글꼴·간격을 적은 `DESIGN.md`를 먼저 만들어 두고 매번 읽게 합니다.
2. **시안** — 바로 코드로 가지 말고 여러 안을 그려 보고 고릅니다.
3. **구현** — [frontend-design](/p/frontend-design) 같은 스킬로 «템플릿 기본값»을 피합니다.
4. **실제 화면 확인** — 브라우저로 열어 보게 합니다([Playwright MCP](/p/playwright-mcp)).
5. **검사** — 포커스·대비·폼 같은 접근성 규칙을 마지막에 점검합니다.
## 핵심
스킬이 정한 «취향»과 내 브랜드 색이 부딪히면 **내 기준 파일이 이깁니다.** 스킬은 기본값일 뿐입니다.원문: 딸깍코드(동원샘) — https://ddalkkak.ssemgong.com/p/design-skill-stack, 허락을 받아 옮겨 실었습니다. 각 도구의 저작권·라이선스는 원작자에게 있습니다.