플러그인 · 디자인
프론트엔드 디자인완성도 높은 프론트엔드 디자인
템플릿 티 나지 않는, 완성도 높은 프론트엔드 화면을 만들도록 도와주는 공식 플러그인입니다.
디자인·이미지 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.
이럴 때 씁니다
만든 화면이 다 비슷비슷한 AI 티가 날 때
frontend-design 플러그인 설치 한 줄
Claude Code 에서 마켓플레이스를 먼저 등록한 뒤, 플러그인을 설치합니다.
/plugin marketplace add anthropics/claude-plugins-official
/plugin install frontend-design@claude-plugins-official
frontend-design 플러그인 설치 절차 전체
순서대로 하나씩 확인하고 싶으실 때 보십시오. 눌러서 펼치면 전체가 나옵니다.
# frontend-design 설치
## 1. 마켓플레이스를 등록합니다
/plugin marketplace add anthropics/claude-plugins-official
## 2. 플러그인을 넣습니다
/plugin install frontend-design@claude-plugins-official
## 3. Claude 를 다시 시작합니다
창만 닫으면 반영되지 않습니다.
Windows 는 작업 표시줄 아이콘에서 종료, macOS 는 Cmd+Q 로 완전히 끄십시오.
## 4. 확인
/plugin 명령으로 설치된 목록에 있는지 확인할 수 있습니다.
넣고 나면 관련 작업에서 알아서 불러 씁니다. 매번 지정하지 않아도 됩니다.이렇게 시켜 보세요
넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.
알아 둘 것
같은 이름의 스킬(anthropics/skills 저장소)과는 별개 항목입니다. 이 플러그인은 공식 플러그인 마켓플레이스(claude-plugins-official) 소속입니다.
frontend-design 플러그인 안 될 때 확인할 것
기존 디자인 시스템이 있으면 먼저 알려 주십시오
알려 주지 않으면 새 스타일을 만들어 버려 기존 화면과 따로 놉니다.
취향 문제는 말로 좁혀야 합니다
'예쁘게' 대신 참고할 방향이나 피하고 싶은 느낌을 구체적으로 주십시오.
언제 쓰고, 언제 안 쓰나
만든 화면이 다 비슷비슷해 보일 때 씁니다. 대시보드나 관리 화면처럼 기능이 우선인 UI 에는 덜 맞습니다.
비슷한 것 중에 왜 이걸
이 사이트에 frontend-design 이 두 번 나옵니다. 여기와 frontend-design 인데 만든 곳도 형태도 다릅니다. 저쪽은 커뮤니티 스킬이고 이건 공식 플러그인입니다. 겨냥하는 문제는 같습니다. 화면이 다 비슷비슷해 보이는 것입니다. 플러그인이라 넣기가 간단한 쪽이 이쪽이고, 스킬만 골라 쓰고 싶다면 저쪽입니다. 둘을 같이 넣으면 지시가 겹칩니다. 기능이 우선인 관리 화면에는 둘 다 덜 맞습니다.
디자인 도구를 고를 때
Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.
원본 보기
플러그인 안에는 스킬·명령어·훅·MCP 서버가 함께 들어 있을 수 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다.
별점과 댓글
이 플러그인을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.
- 불러오는 중…
자주 묻는 것
완성도 높은 프론트엔드 디자인 플러그인(frontend-design)은 어떻게 설치합니까?
클로드 코드 대화창에 두 줄을 차례로 치십시오. 먼저 /plugin marketplace add anthropics/claude-plugins-official 으로 장터를 등록하고, 그다음 /plugin install frontend-design@claude-plugins-official 으로 플러그인을 넣습니다. 넣은 뒤에는 클로드를 완전히 껐다 켜야 반영됩니다. 창만 닫으면 안 됩니다. 윈도우는 작업 표시줄 아이콘에서 종료하시고, 맥은 Cmd+Q 로 끄십시오.
완성도 높은 프론트엔드 디자인 플러그인은 무엇을 합니까?
템플릿 티 나지 않는, 완성도 높은 프론트엔드 화면을 만들도록 도와주는 공식 플러그인입니다.
완성도 높은 프론트엔드 디자인 플러그인은 언제 씁니까?
만든 화면이 다 비슷비슷한 AI 티가 날 때입니다. 만든 화면이 다 비슷비슷해 보일 때 씁니다. 대시보드나 관리 화면처럼 기능이 우선인 UI 에는 덜 맞습니다.
완성도 높은 프론트엔드 디자인 플러그인을 쓸 때 걸리는 데가 있습니까?
기존 디자인 시스템이 있으면 먼저 알려 주십시오. 알려 주지 않으면 새 스타일을 만들어 버려 기존 화면과 따로 놉니다. 취향 문제는 말로 좁혀야 합니다. '예쁘게' 대신 참고할 방향이나 피하고 싶은 느낌을 구체적으로 주십시오.
완성도 높은 프론트엔드 디자인 플러그인이 제대로 깔렸는지 어떻게 확인합니까?
클로드 코드에서 /plugin 을 치면 설치된 목록이 나옵니다. 거기에 보이면 된 것입니다. 넣고 나면 관련 작업에서 알아서 불러 쓰므로 매번 지정하지 않으셔도 됩니다.
함께 보면 좋은 플러그인
지시문만 필요하시면 스킬 쪽이 가볍습니다. 계정 연결이 없습니다. 프론트엔드 디자인 스킬