오푸스 5.5로 웹사이트 만들 때
AI 티 싹 빼주는 사이트 6개 + 프롬프트
1. 스타일 정할 때
styles.refero.design
실제 서비스 2천 곳의 색·글꼴·간격을 "AI가 읽는 DESIGN 파일"로 정리해둔 곳
→ "레트로", "SaaS" 같은 분위기로 찾고, 마음에 드는 스타일 파일을 받아서 프로젝트에 넣으면 됨
애플·스트라이프·리니어·피그마 등 브랜드 74곳 디자인을 같은 형식으로 정리한 모음 (무료, 별 11만)
→ 원하는 브랜드 폴더의 파일을 프로젝트 루트에 복사하면 AI가 그 스타일에 맞춰 화면을 만듦
[댓글 @automation_claire]
2. 컴포넌트 고를 때
21st.dev
리액트·테일윈드 컴포넌트·템플릿 1만 2천 개
→ MCP를 연결하면 클로드코드가 직접 검색해서 가져옴. 검색은 무료, 코드 복사는 무료로 하루 2개까지
component.gallery
버튼·탭·모달 같은 컴포넌트 60종을 디자인 시스템 95곳이 각각 어떻게 만들었는지 모아둔 곳
→ 만들기 전에 잘 만든 예시부터 보고 기준 잡기 좋음
/
component.gallery
The Component Gallery
[댓글 @automation_claire]
3. 모션 넣을 때
kinetics.colorion.co
스프링처럼 튕기는 물리 기반 애니메이션 153개
→ 효과마다 CSS·React 코드와 AI 프롬프트를 바로 복사할 수 있고, 튕기는 정도도 조절 가능
4. 마지막 다듬을 때
impeccable.style
클로드코드에 설치하는 디자인 명령어 모음 (무료 오픈소스)
→ /plugin marketplace add pbakaus/impeccable 로 설치하고 polish(마무리), distill(덜어내기), bolder(더 과감하게) 같은 명령어로 다듬음
/
impeccable.style
The missing design vocabulary for agents.
[댓글 @automation_claire]
클로드코드에 이거 붙여넣어
~/.claude/CLAUDE.md에 '프론트엔드 참고' 섹션을 추가해줘. 새 페이지를 만들 때, 내가 디자인이 별로라고 할 때, 아래 사이트 이름을 말할 때만 쓰고 작은 수정은 그냥 해.
- 스타일: styles.refero.design이나 깃허브 VoltAgent/awesome-design-md에서 제품에 맞는 DESIGN 파일(.md)을 골라 프로젝트 루트에 넣고, 프로젝트 CLAUDE.md에서 @로 불러와. 그다음부터 색, 글꼴, 간격은 그걸 따라.
- 컴포넌트: 21st.dev부터 보고 MCP가 있으면 바로 불러. 무료 한도가 있으니 부르기 전에 뭘 찾는지 말해줘. 그다음 component.gallery에서 다른 디자인 시스템은 어떻게 만들었는지 봐.
- 모션: kinetics.colorion.co에서 프롬프트나 React 코드를 가져와.
- 다 했는데 어색하면 impeccable.style의 polish, distill로 다듬어.
[댓글 @automation_claire]
(위에 이어서 붙여넣기)
지켜야 할 것:
- 프로젝트에 이미 있는 디자인 시스템과 컴포넌트가 먼저야. 바깥 자료는 아직 안 정한 부분만 채워.
- 필요한 MCP, 스킬, CLI가 없으면 설치할지 물어보고 흉내 내지 마.
- 페이지 내용을 못 읽으면 멈추고 붙여넣어 달라고 해. 기억으로 채우지 마.
- 바깥 자료를 쓸 때마다 어디서 뭘 바꿨는지 알려줘.
- 추가할 내용을 먼저 보여주고, 내가 확인하면 그때 써.
출처 · Threads/@automation_claire
