OnetheTheme

커스텀 Tailwind 테마를 제작하고, 실시간으로 프리뷰하고, 배포하세요.

Theme Design

색상, 타이포그래피, 간격, 그림자 등 Tailwind 디자인 토큰을 커스터마이징합니다.

Live Preview

Vite HMR을 활용한 실시간 프리뷰로 변경사항을 즉시 확인합니다.

Deploy

완성된 테마를 빌드하고 패키지로 배포합니다.

All-in-One

Color Tokens + Component Preview 종합 샘플 페이지. 모든 디자인 토큰과 컴포넌트를 한 페이지에서 확인합니다.

Sample Page

All-in-One

Sample Page

NEW

Color Tokens (Brand, Semantic, Surface, Text) + Components (Inputs, Buttons, States, Feedback, Layout, Navigation).

Preview

Forest

All-in-One

Forest

NEW

Forest Green & Amber 컬러 토큰 + 컴포넌트. Stone 뉴트럴, Warm Surface, Teal Info.

Preview

Color

컬러 토큰 전용 프리뷰. Pantone Card 스타일로 색상 팔레트를 확인합니다.

Color Token

Token Only

Color Token

NEW

Color Tokens (Pantone Card) + Storybook Color Token. 컬러 토큰만 집중 확인.

Preview

Mint

Token Only

ColorToken-Mint

NEW

Mint Green (#80ED99) + Deep Ocean (#22577A). 민트 컬러 토큰 프리뷰.

Preview

Solar

Token + Preview

ColorToken-Solar

NEW

Golden (#F9DC5C) + Blue (#3185FC) + Slate (#403F4C). 솔라 컬러 토큰 + 프리뷰.

Preview

Component

UI 컴포넌트 + Storybook 토큰 프리뷰. 다양한 디자인 시스템의 컴포넌트를 비교합니다.

Components

Component Only

Component Sample

NEW

12개 UI 컴포넌트 + 11개 Storybook 컴포넌트 토큰.

Preview

Material

Component Material

NEW

Material Design 3 스타일 12개 컴포넌트 + 11개 Storybook 토큰.

Preview

Apple HIG

HIG

Component HIG

HIG NEW

Apple HIG 스타일 12개 컴포넌트 + 18개 Storybook 토큰.

Preview

Fluent

Component Fluent

Fluent NEW

Microsoft Fluent Design 12개 컴포넌트 + 18개 Storybook 토큰.

Preview

미리보기

Color와 Component를 독립적으로 선택하여 조합 결과를 확인하세요.

Color

Component

preview-builder

375px

npm Install

$ npm install @onethetheme/default

Usage

<!-- index.html -->
<link rel="stylesheet" href="node_modules/@onethetheme/default/index.css">

// App.jsx
import '@onethetheme/default/index.css';

Example Page

Installed Toolchain

Tailwind

v4.1.18

Vite

v7.3.1

Storybook

v10.2.8

PostCSS

v8.5.6

AI Support

OnetheTheme 패키지에는 AI 코딩 도구가 읽을 수 있는 README.md가 포함되어 있습니다.
Claude Code, Cursor, GitHub Copilot 등에서 테마 토큰을 자동으로 이해하고 활용할 수 있습니다.

README.md 위치

npm install 후 node_modules 안에 자동 설치됩니다.

node_modules/

@onethetheme/

color-mint/

index.css

README.md

sample.html

component-hig/

index.css

README.md

sample.html

README.md 내용

1. Token Table — 변수명, 용도, 값 목록
2. Usage Rules — Tailwind class vs inline style 구분 규칙
3. Element-Token Map — 버튼, 카드, 인풋 등 요소별 토큰 매핑
4. Code Examples — 복사 가능한 HTML/JSX 예시

AI 활용 방법

AI에게 README를 읽도록 지시하면 테마에 맞는 코드를 자동 생성합니다.

// AI prompt example

"node_modules/@onethetheme/

color-mint/README.md 를 읽고

이 테마로 로그인 페이지

만들어줘"

AI Workflow

Install

npm install 패키지

Read

AI가 README.md 읽기

Prompt

"이 테마로 OO 만들어줘"

Generate

테마 적용된 코드 생성