Windframe

필요한 것을 적으면("히어로가 있는 모던 랜딩 페이지", "3개 플랜 가격표") 섹션이나 페이지 전체가 돌아온다. 반응형 레이아웃에 실제 간격, 읽기 좋은 타이포그래피가 붙는다. Tailwind CSS 생성기는 내장된 디자인 기준을 따르므로 첫 결과부터 의도가 느껴지는 모습이 나오고, 스타일이 안 입혀진 상자 더미가 되기 어렵다. 생성 한 번에 AI 크레딧 하나를 쓰니 오래 실험하는 날에는 소모를 살펴야 한다.

디자인 이미지나 목업, 운영 중인 사이트의 스크린샷을 올리면 Windframe이 분석해 Tailwind 클래스가 붙은 HTML로 바꾼다. 디자인이 이미 있고 코드만 없을 때 가장 빠른 길이다. 공식 페이지는 대가도 밝힌다. 내보낸 파일이 픽셀 단위로 맞지 않을 수 있고, 직접 만든 아이콘과 이미지, 차트는 원본과 다르게 나오기도 한다.

캔버스에서 고친 내용이 Tailwind 코드에 그대로 반영된다. 요소를 짚어 색이나 크기, 간격을 바꾸면 마크업이 따라온다. 드래그 앤 드롭 캔버스와 속성 패널로 일상적인 조정이 충분하고, 에디터가 반응형 변형을 처리해 하나의 디자인이 데스크톱과 태블릿, 스마트폰에서 다 쓸 수 있게 한다.

디자인 하나가 React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, SolidJS, Rails ERB, 순수 HTML 코드가 된다. React 코드 내보내기도 Vue나 Svelte도 같은 캔버스에서 시작하니 레이아웃을 다시 짤 필요가 없다. 표준 유틸리티 클래스만 쓰고 전용 런타임이 없어서, 개발자가 리뷰에서 읽고 그대로 가져간다. 공식 사이트는 내보낸 코드가 사용자 것이며 출처 표기도 필요 없다고 밝힌다.

라이브러리에는 헤더, 히어로, 가격표, 대시보드, 폼, 푸터, 전체 페이지에 이르는 Tailwind CSS 템플릿이 있고 매주 새 버전이 들어온다. 빈 화면에서 시작하는 것이 아니라 전문가가 만든 디자인에서 출발하니, 흰 캔버스 앞에서 멈추는 일이 줄어든다. 블록, 관리자 페이지, 콜투액션 레이아웃은 따로 분류되어 페이지 전체가 필요하기 전에 조각만 찾아 쓸 수 있다.

Tailwind UI나 Flowbite, DaisyUI 컴포넌트를 던져 넣거나 내 프로젝트를 불러오면 에디터가 열어서 시각적으로 다룰 수 있게 한다. Windframe은 이미 내 것인 코드 위에 얹는 층이 되고, 닫힌 정원이 되지 않는다. 새 페이지뿐 아니라 유지보수에도 쓸모가 있는 이유가 여기에 있다.

Windframe MCP 서버는 Claude Code, Cursor, VS Code, Codex에 실제 디자인 토큰과 스타일 시스템을 준다. Linear, Shadcn, Notion, Stripe, Apple에서 영감을 받은 스타일이 포함된다. 에이전트는 값을 찍지 않고 타이포그래피와 간격, 색상 결정을 받는다. 처음 3회 호출은 무료이고 Pro나 평생 라이선스 계정은 무제한으로 쓴다.