GN⁺: Show HN : Tips.io - AI, 페이지 관리 및 테마 기능을 갖춘 Tailwind 플레이그라운드

• Tailwind playground의 유연성과 페이지 관리 기능을 결합 하여, 간단하고 무료로 웹사이트를 만들 수 있는 플랫폼
• 강력한 테마 및 재사용성 기능을 통해 랜딩 페이지, 마이크로사이트, 마케팅 사이트 등을 쉽게 제작 가능

핵심 아이디어

• HTML이 곧 CMS임
  • 필드나 제한 없이, HTML 요소 위에서 마우스를 올리고 클릭하여 즉각적으로 수정 가능. 특정 요소에 클릭하면 특별한 편집 기능이 자동으로 제공됨:
    • <img>: 업로더, 스톡 사진 선택기 또는 HTML 수정 지원.
    • <video>: 업로더, 스톡 비디오 선택기 또는 HTML 수정 지원.
    • <svg>: 아이콘 선택기 또는 HTML 수정 지원.
    • <div class="prose">: WYSIWYG 편집기 또는 HTML 수정 지원.
• Slices
  • Slice는 페이지의 개별 HTML 섹션 또는 단일 파일로 이루어진 컴포넌트. 독립적이고 자체 포함되어 있어 드래그하여 쉽게 재배치 가능.
  • 재사용성과 페이지 간 연결성을 제공하며, 예를 들어 HTML 푸터를 하나만 업데이트해도 전체적으로 적용 가능.
• 페이지가 아닌 Element 단위의 AI
  • HTML Slice 내의 개별 요소를 선택하여 수정 가능. 전체 컴포넌트를 다시 렌더링하거나 재구성할 필요 없음.
  • 현재 5가지 AI 모델 지원. 향후 더 강력하고 진보된 AI 통합 기능 추가 예정.
• 모든 것이 Tailwind, 빌드 과정 없음, 테마까지
  • 커스텀 Themer 도구 제공
    • Tailwind 구성 파일을 거의 즉각적으로 생성 가능. 실시간으로 폰트, 색상 팔레트 및 사전 설정을 테스트 가능.
  • 자동화된 Tailwind 적용
    • 클라이언트와 서버에서 자동으로 Tailwind 동작. 서버 측에서 빌드 과정이 숨겨져 있어 사용자 경험에 영향을 미치지 않음.
  • Tailwind와 AI의 조합
    • Tailwind의 유연성과 AI의 기능이 결합하여 더욱 강력한 사용자 경험 제공.
• 기타 기능
  • 애니메이션
  • 페이지 트리 확대/축소
  • 기본 폼 (정적 사이트에서도 가능)
  • 분석 도구
  • 리디렉션, 사이트 비밀번호 설정 등
• 기술 스택
  • Cloudflare Workers + Svelte + UnoCSS