# 프론트엔드 디자인 (frontend-design)

> 디자인 스튜디오 리드의 시각으로 주제에 맞는 색상, 서체, 레이아웃을 골라 틀에 박히지 않은 UI 를 만듭니다.

- 카테고리: [UI·인터랙션](https://www.myskills.tools/ko/categories/ui-interaction/)
- 출처: 공식 · Anthropic
- 저장소: https://github.com/anthropics/skills/tree/main/skills/frontend-design (commit 41bbe19)
- SKILL.md: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
- 설치 명령: `npx skills add anthropics/skills --skill frontend-design`
- 라이선스: Apache-2.0
- 호환 도구: Claude Code
- 권한: read-repo ✓, write-files ✓, shell ✗, network ✗
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.

## 핵심 규칙

브리프의 표현이 항상 우선하며, 정해지지 않은 부분을 흔한 기본값으로 채우지 않습니다.

## 실행 단계

1. **주제에 기반하기** — 주제가 불분명하면 구체적인 주제, 대상, 주요 목적을 제안해 확인하고, 그 분야의 소재와 어휘에서 시각적 선택을 끌어냅니다.
2. **디자인 계획 수립** — 이름 붙인 4~6개 hex 색상, 서체와 역할, ASCII 와이어프레임으로 비교한 레이아웃 개념, 원칙으로 된 간결한 토큰 체계를 만듭니다.
3. **브리프와 대조** — 비슷한 요청이면 누구나 도달할 기본값 같은 부분이 있는지 확인하고, 있으면 고친 뒤 무엇을 왜 바꿨는지 설명합니다.
4. **구현과 자기 검토** — 수정한 계획대로 구현하며 CSS 선택자 우선순위에 주의하고 반응형, 포커스 표시, 모션 감소를 지키며, 가능하면 스크린샷으로 점검합니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | 디자인 계획에 따라 프론트엔드 코드와 화면 문구를 작성합니다. |
| 명령 실행 | 필요 없음 | 명령 실행을 요구하지 않습니다. |
| 네트워크 송신 | 필요 없음 | 네트워크 접근이 필요하지 않습니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/frontend-design/