랜딩 페이지를 처음부터 조립하지 않고 한 벌 가져와 고쳐 쓰고 싶을 때. 저장된 블록 레지스트리들과 단위가 다르다 — 7Ovr·uiception·Shadcnblocks는 섹션 조각을 골라 쌓는 쪽이고, 이건 명령 하나로 페이지 전체(파일 8~34개)가 깔린다. 대신 13종뿐이라 원하는 톤이 없으면 그걸로 끝이니, 먼저 프리뷰를 훑어 맞는 게 있는지 보고 없으면 조각 단위 레지스트리로 갈 것.

무료 템플릿 중에서는 조건이 좋은 편이다. MIT라 클라이언트 작업과 상업 프로젝트에 제한 없이 쓰고, 계정도 결제도 없다. 저장된 유료 템플릿(Launch UI, Nexus UI, ForgeUI, Ruixen)과 비교할 때 이 지점이 갈린다.

설치하면 바로 만나는 함정이 하나 있고 사이트도 FAQ에 적어 뒀다 — 템플릿이 Unsplash·Postimg·Webflow CDN 같은 외부 호스트에서 이미지를 불러오기 때문에 next.config.ts의 images.remotePatterns에 해당 도메인을 넣지 않으면 "Invalid src prop" 오류가 난다. 각 템플릿 페이지가 설치 명령 아래에 붙여 넣을 스니펫을 준다. 실무에서는 어차피 그 외부 이미지를 자기 자산으로 갈아 끼우게 되니, 그때 remotePatterns도 같이 정리하면 된다.

스택이 Next.js 16 + React 19 + Tailwind v4로 최신에 고정돼 있다. 구버전 프로젝트에 넣을 거면 Tailwind v4 전환부터 걸리므로 확인이 필요하다.

주의: 사이트가 템플릿을 "originals and internet-inspired"라고 스스로 표현하고, triggerly는 제목부터 "Linear-inspired"다. 레이아웃 구조를 참고한 수준으로 보이지만 색·타이포·문구를 그대로 두고 출시하면 원본 제품과 닮아 보일 수 있으니 브랜드를 자기 것으로 바꾸고 쓸 것. 1인 프로젝트라 유지보수와 추가 속도는 제작자 한 명에게 달려 있다는 점도 감안.

랜딩 섹션을 AI에게 시켜서 뽑을 때, 프롬프트를 처음부터 쓰기 싫을 때. 저장된 프롬프트 계열과 위치가 다르다 — GetLayers는 레이어 단위 유료 템플릿, Cue Kit은 컴포넌트에 제작 프롬프트를 곁들인 모션 라이브러리, Zyeon UI는 프롬프트가 딸린 대형 shadcn 레지스트리다. 이쪽은 코드 배포가 목적이 아니라 프롬프트 자체가 상품이고, 대신 결과물 HTML을 같이 보여 줘서 프롬프트가 실제로 뭘 만들어 내는지 사기 전에 확인이 된다.

값을 하는 지점은 프롬프트의 해상도다. "히어로 섹션 만들어 줘" 수준이 아니라 배경색, 자간, 요소 순서, data 속성 이름, 상호작용 시 JS가 할 일까지 문장으로 박아 둔다. 그래서 AI가 매번 다른 걸 뱉는 문제가 줄고, 원하는 부분만 고쳐서 재사용하기도 쉽다. 프롬프트 쓰는 법 자체를 배우는 용도로도 읽을 만하다.

스택을 확인할 것. 순수 Tailwind HTML이라 프레임워크를 가리지 않는 대신 React 컴포넌트로 바로 떨어지지는 않는다. shadcn 프로젝트라면 저장된 대형 블록 레지스트리(7Ovr, uiception, Shadcnblocks)가 더 맞고, 이쪽은 AI에게 처음부터 시킬 때나 Astro·정적 사이트처럼 마크업만 필요할 때 쓴다.

주의: 라이선스 표기가 아예 없다. 페이지에 붙어 있는 완성 HTML을 그대로 복사해 쓸 권리가 명시돼 있지 않으므로, 상업 프로젝트에 소스를 통째로 옮길 거면 제작자에게 확인하는 게 안전하다. 프롬프트(문장)를 AI에 넣어 직접 생성한 결과물은 상대적으로 부담이 적다. 제작자 정보도 사이트에 없고 /about과 /license가 둘 다 404라 연락처를 찾기 어렵다는 점도 감안할 것.

삽화가 필요한 랜딩·문서·슬라이드에서 출처 표기 부담 없이 쓸 그림을 찾을 때. 라이선스가 이 모음의 핵심이고 경계가 분명하다 — 일러스트 파일 자체는 CC0 1.0이라 복제·수정·배포를 상업적으로 해도 되고 출처 표기도 필요 없다(크레딧은 감사하다는 수준). 반면 웹사이트 코드, Figma 플러그인 소스, MCP 서버 소스, 카탈로그 파이프라인과 메타데이터는 전부 독점이고 복제·재배포가 금지다. 즉 그림은 마음대로, 플랫폼은 건드리지 말 것.

저장된 Koboyo Icons(손그림 SVG 26만종)와 결이 비슷해 보이지만 단위가 다르다. Koboyo는 아이콘이고 이쪽은 장면을 이루는 오브젝트 일러스트다 — 나무·수레·상인·제어판처럼 여러 개를 모아 하나의 그림을 만드는 쪽이다. 그래서 MCP에 curate_scene과 prepare_asset_pack 같은 도구가 붙어 있다. 에이전트에게 장면을 통째로 맡기려면 이쪽, 아이콘 한두 개면 Koboyo.

실무 주의 하나: 확인 시점(2026-09-26) 기준 홈페이지의 "Illustrated asset library" 갤러리가 "Loading illustrations / The library is getting ready"에서 넘어가지 않는다. 두 번 방문해 각각 9초 이상 기다려도 같았다. 반면 Figma 커뮤니티 키트 링크와 MCP 상태 표시("All systems operational")는 정상이므로 사이트 전체가 죽은 게 아니라 웹 갤러리 위젯만 고장인 것으로 보인다. 지금 브라우징하려면 Figma 커뮤니티 파일이나 플러그인, 또는 MCP로 접근하는 게 확실하다.

브랜드 주의: 키트 중 Barbieland는 이름과 소재가 특정 완구 브랜드를 연상시킨다. CC0라도 상표는 별개 문제이므로 제품에 그대로 쓰기 전에 구성 요소를 살펴볼 것.

Pablo Stanley가 참여 일러스트레이터로 이름을 올리고 있는데, Humaaans·Open Peeps·Blush를 만든 사람이라 그 계열의 무료 일러스트를 찾아본 적이 있다면 결이 익숙할 것이다.

기술 스택 배지, 연동 목록, 결제 수단 표시처럼 브랜드 로고가 무더기로 필요할 때. 저장된 로고 계열의 서열이 이걸로 바뀐다 — 규모 순으로 logos by lndev 15,017종 > theSVG 7,400종 > SVGL 669종이다. 다만 수가 곧 실력은 아니다. SVGL은 라이트·다크 두 변형을 갖춰 어두운 배경에서 바로 쓸 수 있고 생태계에서 기준처럼 쓰이며(저장된 open-slide가 로고 검색에 SVGL을 쓴다), theSVG는 npm·CLI·MCP 설치 경로를 제공해 코드에서 끌어 쓴다. 이쪽은 설치 경로 없이 웹에서 복사·다운로드만 되는 대신 폭이 압도적이다. 그러니 유명 브랜드 몇 개면 SVGL, 코드에서 자동으로 끌어 쓸 거면 theSVG, 무명 서비스까지 찾아야 하면 여기를 본다.

분포를 먼저 보고 기대치를 맞추는 게 좋다. Companies & Services 5,641과 Productivity 2,943, Payments 2,428 셋이 전체의 3분의 2를 차지하고, 정작 개발자가 자주 찾는 Frameworks & UI Libraries는 498, Languages & Runtimes는 161, AI & ML은 144뿐이다. 즉 "15,000종"의 두께는 일반 기업·SaaS 쪽에 쏠려 있다. 국기가 필요하면 별도 국기 라이브러리를 찾을 것 없이 여기 248종이 있다는 것도 알아 둘 만하다.

라이선스를 분리해서 볼 것. 저장소의 MIT는 이 프로젝트의 코드와 수집물 구성에 적용되는 것이고, 개별 로고는 각 회사의 상표다. 색을 바꾸거나 변형하지 말고, 제휴·보증으로 오인될 배치를 피하고, 필요하면 각사 브랜드 가이드라인을 확인해야 한다. 이 구분은 SVGL·theSVG에도 똑같이 적용된다.

사소한 불일치: 상단 표기는 15,017종(아이콘 13,072 + 워드마크 1,945)인데 필터 합계는 15,015로 뜬다. 카테고리 20개의 실측 합은 15,017과 맞는다.

스크롤 연출이나 히어로 전환처럼 직접 만들면 하루씩 잡아먹는 GSAP 작업을 사서 끝내고 싶을 때. 저장된 GSAP 계열(Tween UI, Cue Kit, Sora UI, Hyperiux Vault, Emerald UI, Morphiq)과 결정적으로 다른 점 두 가지가 있다 — 같은 컴포넌트를 React·Vue·순수 HTML 세 형태로 주기 때문에 Nuxt나 Astro, 심지어 프레임워크 없는 정적 사이트에도 그대로 들어가고, GSAP 생명주기(cleanup, context, ScrollTrigger 해제)를 직접 다루지 않아도 되게 감싸 놨다. 대부분의 무료 모음이 React 전용인 것과 대비된다.

다만 이건 구독이다. 월 29유로(분기 결제)이고 연 249유로이며 평생 등급이 없다. 구독을 끊어도 이미 붙여 넣은 코드는 계속 쓸 수 있다고 명시하지만 새 컴포넌트와 업데이트는 끊긴다. 프로젝트 하나를 위해 산다면 연 결제보다 분기 결제가 맞고, 반대로 상시로 랜딩을 찍어 내는 작업이면 연 결제가 낫다. Landmark Kits(Reveal 149유로)는 구독과 별개의 일시불 영구 라이선스라 섞이지 않는다는 점도 계산에 넣을 것.

사기 전에 무료 13종을 먼저 보면 된다. 필터에 Free가 있어 바로 걸러지고, 이메일만 넣으면 받는 스타터 팩도 있다. 코드 품질과 GSAP 래핑 방식이 취향에 맞는지는 여기서 판단이 가능하다.

짚어 둘 것: GSAP 자체는 이제 상업 이용을 포함해 무료이므로 여기서 내는 돈은 GSAP 라이선스가 아니라 이 컴포넌트들의 제작비다. 즉 같은 연출을 시간 들여 직접 짜는 선택지가 항상 열려 있고, 사이트의 "직접 만들면 8시간 640유로" 같은 비교표는 파는 쪽의 계산이니 그대로 받아들이지 말 것. 실제로 필요한 게 한두 개뿐이라면 저장된 무료 GSAP 모음을 먼저 훑는 쪽이 싸다.

스튜디오 이력(코카콜라·BodyArmor·파워에이드)은 사이트 주장이며, 연출 성향도 그쪽이다 — 브랜드 캠페인성 화려한 모션이 중심이고 대시보드나 업무용 화면에 쓸 조각은 거의 없다.

광고 크리에이티브나 랜딩 히어로의 카피·레이아웃을 잡아야 할 때, 남들이 돈 써서 검증한 것을 먼저 보고 싶을 때. 저장된 레퍼런스 갤러리 24종 중 유료 광고 크리에이티브를 다루는 건 이것뿐이다 — posts.design은 기업이 올린 소셜 게시물(오가닉)이고, CTA Gallery는 웹사이트의 CTA 문구, UXSnaps는 제품 UI 분해라서 영역이 겹치지 않는다. 해설 방식은 UXSnaps와 가장 비슷하다(주석 오버레이).

디자인보다 카피와 앵글을 얻는 쪽에 값이 있다. 광고마다 업종·플랫폼·오퍼·앵글로 걸러지기 때문에 "HR SaaS가 계산기를 미끼로 쓴 LinkedIn 광고" 같은 식으로 좁혀 볼 수 있고, 랜딩 페이지 원본 링크가 붙어 있어 광고에서 랜딩까지 메시지가 어떻게 이어지는지 한 벌로 확인된다. 같은 브랜드의 다른 광고가 묶여 있어 한 회사가 앵글을 어떻게 바꿔 가며 테스트하는지도 보인다.

실측해 보니 "explained"라는 간판만큼 해설이 채워져 있지는 않다. breakdowns 244건 중 20건을 표본으로 열어 보니 9건만 주석이 있고 11건은 "Ad breakdown coming soon"이라 광고 이미지와 브랜드 설명만 나온다. 절반 가까이는 해설 없는 스크랩이라고 보고 들어가는 게 맞다.

주의: 여기 실린 것은 전부 남의 브랜드 광고다. 사이트도 푸터에 "공개된 광고를 모았을 뿐이며 권리는 각 소유자에게 있다"고 밝힌다. 카피 구조나 레이아웃 원리를 가져오는 건 괜찮지만 이미지·문구를 그대로 쓰면 안 된다. 그리고 이 갤러리는 Diligent Studios의 유료 광고 디자인 서비스로 유입시키는 창구라서(상단 고정 배너와 AD DESIGN SERVICE 버튼) 해설의 결론이 "잘 만든 광고가 필요하다"로 기우는 경향을 감안해 읽을 것. 첫 방문 시 쿠키 배너가 뜨는데 DECLINE 선택지가 있다.

움직이는 그라디언트 배경을 코드가 아니라 파일(PNG·MP4·WebM)로 뽑아야 할 때. 저장된 배경 계열과는 층이 다르니 헷갈리지 말 것 — bg.ibelick·Aura Gradients는 CSS, UVCanvas는 WebGL 컴포넌트로 전부 앱에 심는 코드다. 이쪽은 결과물이 미디어 파일이라 프레젠테이션, 소셜 이미지, 영상 편집 타임라인, 화상회의 배경처럼 코드를 넣을 수 없는 곳에 쓴다.

실제로 값을 하는 쪽은 유료 팩이 아니라 무료 Gradient Lab이다. 로그인도 이메일도 설치도 없이 브라우저에서 바로 돌고, 4K 30초 MP4까지 워터마크 없이 내보내며, 만든 결과물은 상업적으로 써도 되고 출처 표기도 필요 없다고 FAQ에 명시돼 있다. 배경 팩을 살 이유가 없어도 이 도구만 북마크할 값이 있어서 역할을 asset이 아니라 tool로 뒀다 — 결제 없이 쓸 수 있는 부분이 생성기 하나뿐이기 때문이다. 바로 여는 주소는 /gradient-lab 이다.

라이선스가 두 갈래로 다르다. Gradient Lab으로 만든 것은 내 것이고 제약이 없다. 반면 구매한 배경 파일은 클라이언트 작업·웹·앱·광고·소셜·프레젠테이션·모션에 쓸 수 있지만 독립 상품으로 재판매·재배포하는 것은 금지다. 그리고 디지털 상품이라 환불이 안 된다고 못 박아 뒀으니 $49는 되돌릴 수 없다고 보고 결정할 것.

주의: 사이트 안에서 숫자가 서로 맞지 않는다 — 홈 히어로·가격표는 29컬렉션 1,273종, 홈 FAQ는 24컬렉션 1,167종, Freebies 페이지는 31컬렉션 1,359종이라고 쓴다. Freebies 쪽이 가장 최신으로 보이지만 어느 숫자도 확정으로 읽지 말 것. 또 Gradient Lab은 BETA 표기이고 셰이더를 실시간으로 돌리므로 사양이 낮은 기기에서는 프리뷰가 버벅인다(화면에 fps가 표시된다). 컬렉션 상당수가 AI 생성물이라는 것도 사이트가 밝히고 있으니, AI 이미지 사용을 제한하는 클라이언트라면 확인이 필요하다.

랜딩 페이지와 콘텐츠 섹션을 한곳에서 대량으로 훑고 싶을 때. 카테고리 분포를 보면 자기 소개("animation-first")와 실제 무게중심이 다르다 — 섹션·블록 계열(content-blocks 96, core-landing-pages 89, grids 52, navigations 54)이 291개로 가장 크고 연출 계열(backgrounds 57, animations 54, special 63, media 43, crazy 24)이 241개, 순수 프리미티브는 68개뿐이다. 즉 프리미티브 세트 대용이 아니라 랜딩·마케팅 화면을 빨리 채우는 쪽이다.

라이선스를 먼저 봐야 한다. npm의 uilora 패키지는 MIT지만 그건 CLI일 뿐이고, 컴포넌트는 약관의 커스텀 라이선스를 따른다 — 상업적 사용·클라이언트 작업·SaaS·사내 도구에 쓰고 소스를 수정하는 것은 허용되지만, 컴포넌트를 독립된 UI 라이브러리나 컴포넌트 팩으로 재배포하는 것은 무료든 유료든 서면 동의 없이 금지다. 저장된 gridcn과 같은 종류의 제약이라, 자기 레지스트리나 사내 공용 라이브러리로 재포장할 계획이면 걸린다.

함정 둘. 첫째, "One source, dual runtime"과 "Full mobile component library"를 내세우지만 React Native 쪽은 실측 24개(버튼 4·카드 8·로더 3·토스트 6·스플래시 3)뿐이다. 모바일을 이유로 고르면 안 되고, React Native가 목적이면 저장된 tetra ui(44종 전용)를 먼저 보는 게 맞다. 둘째, 사이트·llms.txt의 700+는 sitemap 실측 624와 맞지 않는다.

브랜드 주의: 모바일 스플래시가 netflix-intro-splash·instagram-splash로 실제 서비스의 인트로를 재현한 것이고, crazy-components에도 특정 사이트를 흉내 낸 항목이 있다. 그대로 출시하면 상표·저작권 문제가 되니 참고용으로만 보고 자기 브랜드로 바꿔 쓸 것.

비슷한 대형 모음으로는 Beste UI(2,095 블록·의미 검색), Zyeon UI(1,014항목), Shadcnblocks, UIAble(790종)이 이미 있다. 이쪽의 차별점은 MCP 서버를 직접 운영해 에이전트가 검색·미리보기·설치까지 한다는 것과, 무료 범위가 넓다는 점이다(Pro는 pro.uilora.com에서 개발 중이고 코어는 영구 무료라고 밝힌다 — 약속이므로 시간이 지나면 다시 확인할 것).

스크린샷에 주석을 달거나 프레임을 마크업하거나 "여기가 잘못됐다"고 동그라미 치는 기능이 필요할 때. 제작자가 창작 도구를 만들다 같은 걸 반복해서 짜다가 패키지로 뽑았다고 밝히고 있고, 실제로 그 용도에 맞춰져 있다.

선택 기준은 사이트가 직접 적어 뒀다 — 부품을 조립해 그리기 도구를 만들고 싶으면 tldraw나 Excalidraw가 낫고, 이건 기본값 그대로 출시할 수 있게 의견을 박아 둔 완성형이다. 저장된 것 중에는 ilinxa pro-ui의 blackboard·flow-canvas와 Mischief UI의 주석 레이어·서명 패드가 같은 영역인데, 둘 다 큰 레지스트리의 일부라 전체를 끌어와야 한다. 캔버스 하나만 필요하면 이쪽이 가볍다.

붙일 때 걸리는 것들: styles.css를 별도로 import해야 하고, 부모에 height가 없으면 아무것도 안 보인다. "React 외 의존성 없음"은 peer dependency가 없다는 뜻이고 unpacked 365 kB라 번들이 작다는 말은 아니다. 획 데이터가 평문이라 onChange로 받아 그대로 저장하고 setStrokes()로 되돌려 넣을 수 있는데, setStrokes()는 undo 이력까지 교체하니 자동 저장과 되돌리기를 같이 쓸 때 순서를 확인해야 한다.

주의: v0.1.2에 별 323개로 초기 단계이고 문서에 접근성(키보드만으로 그리기, 스크린리더) 언급이 없어 접근성 요건이 있는 화면에는 검증이 필요하다. 외형은 Apple 마크업 도구의 스큐어모피즘에서 가져왔다고 본인이 footnote에 밝혀 뒀으니, 제품 톤과 안 맞으면 look을 studio로 바꾸거나 chrome:false로 툴바를 직접 만드는 쪽을 보면 된다.

버튼·토글·성공/실패 같은 순간에 소리 피드백을 얹고 싶을 때. 이미 저장된 Foley(usefoley.dev)와 정면으로 겹치니 둘 중 하나를 고르는 기준을 적어 둔다 — 큐 종류가 더 많고 사운드 디자이너 툴까지 필요하면 Foley(28종, 7.6 kB), 더 작고 더 널리 검증된 쪽을 원하면 Cuelume(17종, 5 kB 미만, 별 1,834개 대 105개)이다. 둘 다 오디오 파일이 없어 네트워크 요청도 음원 라이선스 문제도 없고 agents.md를 제공한다.

함정: 사이트와 실제 패키지는 17종인데 /agents.md는 14종 기준으로 쓰여 있어 pulse·scan·arrival이 빠져 있다. 코딩 에이전트에게 agents.md만 물리면 그 셋을 모른 채 작업하므로 큐 목록은 sounds 배열이나 사이트에서 직접 확인시켜야 한다.

실무에서 값을 하는 지점은 기본 제공되는 안전장치다 — 호버 소리는 전역 150 ms 스로틀이라 메뉴를 쓸어도 시끄럽지 않고, 호버·프레스는 fine pointer(마우스)에서만 울리며, AudioContext는 지연 생성된 하나를 공유하고 브라우저가 허용할 때 자동 재개한다. 잘못된 큐 이름·차단된 자동재생·Web Audio 미지원은 예외가 아니라 조용한 no-op이라 방어 코드가 덜 필요하다.

주의: 브라우저 정책상 사용자의 첫 상호작용 전에는 소리가 나지 않는다. setEnabled()·setVolume()은 값을 저장해 주지 않으므로 음소거·볼륨 설정의 영속화는 앱이 직접 해야 하고, 업무용 화면이라면 기본 꺼짐 + 사용자가 켜는 방식이 안전하다. 랜딩의 실명 후기와 "Vercel이 fx에서 사용" 표기는 사이트 주장이니 도입 근거로 삼기 전에 직접 확인할 것(Foley는 후기가 합성이라고 스스로 밝힌 전례가 있다).

무엇이 다른가

• 고정 시간 애니메이션보다 의미를 전달하는 상호작용에 초점을 둔다. Fluid Hover는 커서에 가장 가까운 항목을 미리 강조하고, 스프링은 조작을 되돌릴 때 진행 중인 상태에서 방향을 바꾼다.
• 모션·표면·스크롤바·크기·스킬·Fluid Hover의 시스템 가이드 6개가 있으며 fast / moderate / slow 스프링 프리셋을 공유한다.
• 기존 shadcn/ui 테마 토큰을 활용하고 Radix 및 Base UI 구현을 선택할 수 있다. 각각의 구현이 필요한 프리미티브 의존성을 설치한다.

현재 규모

• 2026-10-04 문서 탐색 목록: 컴포넌트 28종.
• 실제 공개 /r/registry.json: 72항목 = registry:ui 48, lib 11, block 7, hook 4, theme 2.
• 72개는 독립적인 화면 컴포넌트 수가 아니다. 같은 UI의 -base 변형, 공유 유틸·훅·블록·테마가 함께 포함된다.
• CommandMenu·Combobox, 기본 폼·팝업·탭·테이블·사이드바와 AskUserQuestions·ChatMessage·InputMessage·ThinkingIndicator·ThinkingSteps 등의 AI 인터페이스 조각을 다룬다.
• queued-stack·file-thumbnail·mobile-drawer·scroll-area 등은 레지스트리에 있지만 문서의 28개 목록과 일대일로 대응하지 않는다.

설치·제공 방식

• 레지스트리 추가: npx shadcn@latest registry add @fluid
• 기본 Radix 버튼: npx shadcn@latest add @fluid/button
• Base UI 버튼의 공식 URL 형식: npx shadcn@latest add https://www.fluidfunctionalism.com/r/base/button.json
• 레지스트리 내부 목록의 button-base 이름과 설치 URL의 base/button 경로를 구분한다.
• 실제 버튼 JSON의 의존성 확인: 공통 framer-motion·class-variance-authority·lucide-react, Radix판은 @radix-ui/react-slot, Base UI판은 @base-ui/react.
• 공통 font-weight·shape-context·icon-context·size-context·tokens 등을 함께 가져오므로 TSX 한 파일만 분리해서 동작한다고 가정하지 않는다.
• 폰트 굵기 모션에는 Inter 가변 폰트가 필요하다. 아이콘은 named slot + IconProvider로 바꿀 수 있다. 사이트의 아이콘 전환은 미리보기이며 설치본의 기본 아이콘 의존성은 Lucide다.

에이전트 스킬

• 공식 안내: npx skills add mickadesign/fluid-functionalism
• 기존 프로젝트의 스택을 파악하고 사용자에게 눈에 띄는 개선 2~5개를 제안한 뒤 컴포넌트와 나머지 UI를 맞추는 워크플로를 설명한다.
• 컴포넌트 목록뿐 아니라 간격·정렬·모션·피드백의 구현 규칙을 제공한다. 이번 작업에서는 스킬을 설치하거나 사용자 프로젝트를 수정하지 않고 자료로 확인했다.

기존 북마크와 비교

• seamui와 같이 모션을 시스템 레이어로 사용하고 AI 대화 조각도 제공한다. 저장된 seamui는 Base UI 기반의 누르는 깊이감·햅틱을 강조하며, Fluid Functionalism은 Radix/Base UI 선택과 커서 접근 예고·스프링 반전이 주요 차이다.
• usva는 테마·표면·분위기를 포함한 디자인 언어 중심이다. Fluid Functionalism은 입력·팝업·탭·표면의 상호작용 규칙을 기존 shadcn 프로젝트에 적용할 때 참고하기 좋다.
• Optics도 에이전트용 규칙을 배포한다. Fluid Functionalism의 스킬은 자체 컴포넌트와 상호작용 세부 규칙을 프로젝트 개선에 연결한다.
• Arlan Vault는 개별 시각 실험과 프롬프트 중심이다. Fluid Functionalism은 설치 가능한 공통 프리미티브·토큰·레지스트리를 갖춘 시스템으로 분류한다.

출처·라이선스

• 공식 저장소의 LICENSE와 GitHub 라이선스 메타데이터에서 MIT를 확인했다. 제작자는 Micka Touillaud.
• 문서: https://www.fluidfunctionalism.com/docs
• 공개 레지스트리: https://www.fluidfunctionalism.com/r/registry.json
• 저장소: https://github.com/mickadesign/fluid-functionalism
• 라이선스: https://github.com/mickadesign/fluid-functionalism/blob/main/LICENSE
• 스킬 안내: https://www.fluidfunctionalism.com/docs/skill
• 확인일: 2026-10-04.