Opus 5.5·Claude Code 프런트엔드 디자인 참고 사이트 8곳: DESIGN.md부터 모션까지

git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git
# design-md/<브랜드>/DESIGN.md를 프로젝트에 복사

npx @21st-dev/cli@latest init --client cursor

npx skills add heygen-com/hyperframes
npx hyperframes init my-video
npx hyperframes render --output output.mp4

npx impeccable install
/impeccable init

Add a section called Frontend references to ~/.claude/CLAUDE.md. Use it only when building a new page, when I say something looks bad, or when I name one of these sites. For small changes, just do the work:
- Style: pick a DESIGN.md that fits the product from http://styles.refero.design or VoltAgent/awesome-design-md on GitHub. Put it in the project root and add an @ import for it in the project's CLAUDE.md, so from then on everything follows its colors, typography and spacing.
- Components: check http://21st.dev first, and call its MCP directly if it's installed. It has a free usage limit, so tell me what you're looking for before you call it. Then check http://component.gallery to see how mature design systems handle the same component.
- Motion: get a ready-made prompt or React code from http://kinetics.colorion.co.
- Demo videos: I'll pick reference videos on http://whatships.com and send them to you. Tile the frames into one image to see the pacing and transitions, then build it with HyperFrames (http://hyperframes.dev).
- If it still feels off when it's done: run it through polish and distill from Impeccable (http://impeccable.style).
The project's existing design system and components come first. Outside references only fill in what hasn't been decided yet. If an MCP, skill or command-line tool you need isn't installed, ask me whether to install it, and don't imitate it yourself. If you can't read a page's actual content, stop and ask me to paste it in. Don't fill anything in from memory. Every time you use an outside reference, tell me which one and what you changed. Show me what you'll add first, and don't write it until I confirm.

~/.claude/CLAUDE.md에 Frontend references 섹션을 추가하세요. 새 페이지를 만들 때, 제가 결과가 별로라고 할 때, 또는 이 사이트 중 하나를 직접 말할 때만 사용하세요. 작은 수정은 바로 처리하세요:
- 스타일: 제품에 맞는 DESIGN.md를 styles.refero.design 또는 GitHub의 VoltAgent/awesome-design-md에서 고르세요. 프로젝트 루트에 두고 프로젝트 CLAUDE.md에서 @ import해 색상, 타이포그래피, 간격을 계속 따르게 하세요.
- 컴포넌트: 먼저 21st.dev를 확인하고 MCP가 설치돼 있으면 직접 호출하세요. 무료 사용 한도가 있으니 호출 전에 무엇을 찾는지 알려 주세요. 그런 다음 component.gallery에서 성숙한 디자인 시스템이 같은 컴포넌트를 어떻게 다루는지 확인하세요.
- 모션: kinetics.colorion.co에서 바로 쓸 수 있는 프롬프트나 React 코드를 가져오세요.
- 데모 영상: 제가 whatships.com에서 참고 영상을 골라 보내겠습니다. 프레임을 한 이미지로 타일링해 속도와 전환을 살펴본 다음 HyperFrames로 만드세요.
- 완성 후에도 어색하면 Impeccable의 polish와 distill로 다듬으세요.
프로젝트의 기존 디자인 시스템과 컴포넌트를 우선하세요. 외부 참고 자료는 아직 정해지지 않은 부분만 채웁니다. 필요한 MCP·스킬·CLI 도구가 설치되지 않았다면 설치할지 물어보고, 직접 흉내 내지 마세요. 페이지의 실제 내용을 읽을 수 없으면 멈추고 내용을 붙여 달라고 요청하세요. 기억으로 채우지 마세요. 외부 참고를 쓸 때마다 어떤 자료를 써서 무엇을 바꿨는지 알려 주세요. 추가할 내용을 먼저 보여 주고 제 확인을 받은 뒤에 작성하세요.