figma_tutor

귀한 작업시간 아껴주는
무료 코드 소스 라이브러리 5가지 🛠️

1️⃣ Float UI
마케팅에 최적화된 섹션을 제공하는
🔗 floatui.com
언어:HTML / Tailwind CSS / React
✅ Hero, CTA, Pricing, FAQ 등 마케팅 섹션이 풍부
✅ React 없이 HTML/CSS만으로도 사용 가능

2️⃣ Aceternity UI
재미있는 애니메이션이 들어간 컴포넌트
🔗 ui.aceternity.com
언어:React / Next.js / Tailwind CSS / Framer Motion
✅ 200개 이상의 애니메이션 컴포넌트 & 블록
✅ 랜딩페이지에 임팩트 있는 모션 넣기 딱 좋음

3️⃣ Magic UI
SaaS 템플릿을 제공하는
🔗 magicui.design
언어:React / TypeScript / Tailwind CSS / Motion
✅ 150개 이상의 오픈소스 애니메이션 컴포넌트
✅ shadcn/ui와 호환돼서 확장성 좋음

4️⃣ HeroUI
기본 컴포넌트를 제공하는
🔗 heroui.com
언어:React / Next.js / Tailwind CSS / React Aria
✅ 구 NextUI → 테마 커스터마이징 자유로움
✅ 유일하게 React Native(모바일 앱)도 지원

5️⃣ 21st.dev
섹션별 컴포넌트를 제공하는
🔗 21st.dev
언어:React / Tailwind CSS
✅ 복사-붙여넣기로 바로 쓸 수 있는 UI 마켓플레이스
✅ 커뮤니티 기반이라 컴포넌트가 계속 늘어남

💡 요약
→ 전부 무료로 사용 가능
→ React 못 쓰면 Float UI부터 시작
→ 애니메이션 넣고 싶으면 Aceternity UI / Magic UI
→ 앱까지 만들고 싶으면 HeroUI
→ 빠르게 복붙하고 싶으면 21st.dev

저장해두고 필요할 때 꺼내 쓰세요 🔖

#바이브코딩

1.글로벌 기업의 Design.md를 모아둔 사이트
https://getdesign.md/airbnb/design-md

2.Design.md가 뭘까?
Design.md는 AI가 작업할 때 쓰는
디자인 가이드 문서인데
이 문서가 잘 되어 있을수록
좋은 아웃풋을 얻으실 수 있어요.

3.좋은 Design.md 작성하는 3가지 원칙
반드시 구체적인 수치를 넣어 작성합니다.
하네스(claude.md, settings와 같은)(기술적인 원칙)와
겹치지 않게 작성해요
하지 말아야 할 것 섹션을 반드지 포함합니다.

4.사용하는 방법
AI로 코딩 작업하는 폴더에
Design.md 형태의 문서를 작성해서
넣고, 필요할 때마다 불러와서 작업하면 됩니다.

5.claude에게 Design.md파일
작성 요청하는 프롬프트
이 웹사이트를 분석해서 DESIGN.md를 만들어줘
우리 웹사이트 주소 적기

아래 항목을 전부 포함해
1️⃣Overview — 전체 디자인 톤, 브랜드 성격, 핵심 특징 요약
2️⃣Colors — 브랜드, 표면, 텍스트, 보더 색상을 토큰 형태로 정리
3️⃣Typography — 폰트 패밀리, 크기/웨이트/행간/자간을 테이블로
4️⃣Layout — 스페이싱 체계, 그리드, 여백 철학
5️⃣Elevation & Depth — 그림자, blur, 깊이 표현 규칙
6️⃣Shapes — border-radius 체계
7️⃣Components — 버튼, 카드, 네비게이션, 인풋 등 주요 컴포넌트 상세
8️⃣Do’s and Don’ts — 반드시 지킬 것 / 절대 하지 말 것
9️⃣Responsive — 브레이크포인트, 터치 타겟, 반응형 전략
🔟Known Gaps — 분석에서 빠진 부분 명시
모든 색상, 크기, 간격은 토큰 형태로 적어줘.
예: {colors.primary} — 0066cc, {spacing.lg} — 24px
모호한 표현(“적절한”, “깔끔한”) 대신 구체적 수치를 사용해.

첫 시작이 어려우면 클로드에 간단한 원칙과 가이드만 넣어도
클로드가 알아서 파일까지 만들어주니까
위 드린 프롬프트로 시작해보세요!

6.그리고 좋은 디자인을 위한 스킬들
https://impeccable.style/
https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-des

영상편집 클로드 코드로 자동화하기
설치 사이트👉auto-editor.com (무료 오픈소스)
🛠️ auto-editor (무료, 오픈소스)
명령어 한 줄로 무음 구간을 자동 삭제하는 CLI 도구입니다.
📌 Mac 은 터미널에 아래 코드 입력
brew install auto-editor
Homebrew가 없다면 먼저 이걸 실행
/bin/bash -c ”$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)“ 설치 후
안내되는 PATH 설정까지 완료 → 다시 brew install auto-editor

📌 Windows 설치
GitHub 릴리즈 페이지에서 Windows용 바이너리 다운로드
👉 https://github.com/WyattBlue/auto-editor/releases
파일명을 auto-editor.exe로 변경
PowerShell에서 다운로드 폴더 이동 후 실행 확인
cd ~\Downloads .\auto-editor.exe —help 도움말이 뜨면 설치 성공.

Claude Code로 영상 편집 자동화
Claude Code를 사용하면 auto-editor 실행은 물론,
FFmpeg을 활용한 전환 효과 삽입, 자막 추가, 영상 병합 같은 편집 작업도
대화로 처리할 수 있음. ”이 영상에 페이드 효과 넣어줘“ 한마디면 됩니다.

⚡ 그 외 쉽게 무음 삭제 지원하는 유료 서비스 3가지
설치 없이, 또는 GUI로 편하게 쓸 수 있는 도구들입니다.
* Vrew (브루)
한국에서 만든 AI 영상 편집 프로그램.
무음 구간 자동 감지 + 자막 생성 + 컷 편집까지 원스톱.
👉 https://vrew.ai
* Filmora (필모라)
초보자 친화적 영상 편집 프로그램. 무음 구간 탐지 기능 내장
볼륨/기간/버퍼까지 세밀하게 조절 가능.
👉 https://filmora.wondershare.com

* Descript AI
기반 영상/팟캐스트 편집 올인원 툴.
텍스트 기반 편집 + 무음/필러 워드 자동 제거.
👉 https://www.descript.com

#클로드코드 #영상편집 #자동화