리소스

스타터 킷 ★ 여기서 시작하세요

토큰이 이미 연결된 빈 프로젝트입니다. 매번 처음부터 세팅하면 매번 조금씩 달라집니다.

킷	내려받기	들어 있는 것
순수 HTML	jt-starter-html.zip	`index.html` 하나. 빌드도 설치도 없이 더블클릭하면 브라우저에서 열림
Next.js	jt-starter-next.zip	`npm install && npm run dev`

둘 다 같은 예제 화면이 들어 있습니다 — 앱 셸 · 검색 · 표(정렬·판정 배지) · 페이지네이션 · 모바일 하단 탭바 · 다크 전환 · 빈 상태. 그리고 AGENTS.md(AI 규칙 파일)가 함께 들어 있어 AI 도구에 바로 등록할 수 있습니다.

받은 뒤 무엇을 해야 하는지는 트랙 A 가 단계별로 안내합니다.

파일을 직접 가져다 쓰기

킷을 안 쓰고 기존 프로젝트에 붙일 때는 링크 두 줄이면 끝입니다. 파일을 복사할 필요가 없습니다.

<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">

경로	언제 쓰나
`/v5/jt-tokens.css` · `/v5/jt-utilities.css`	버전 고정. 운영 중인 앱은 이쪽 — 우리가 v6를 내도 화면이 갑자기 바뀌지 않습니다
`/jt-tokens.css` · `/jt-utilities.css`	항상 최신. 개발 중이거나 늘 최신을 따라가고 싶을 때
`/jt-tailwind-v4.css`	Tailwind v4 앱만 (v3는 `tailwind.config.js`)
`/brand/icons/*.svg`	핵심 아이콘 29종. 전부 `currentColor`

jt-tokens.css 하나만 링크해도 웹폰트(Pretendard·Figtree)가 함께 옵니다. 폰트 링크를 따로 넣지 마세요.

AI로 개발한다면

붙여넣는 문장 11장. 즐겨찾기는 여기로프롬프트 지갑 ★도구별 규칙 파일 이름 · 복사용 프롬프트AI 규칙 · 프롬프트 프로젝트 루트에 AGENTS.md 로 저장jt-core — 신규 앱 규칙 구조를 건드리지 않는 규칙jt-legacy — 기존 앱 규칙

하드코딩 검사

AI가 만든 코드에는 거의 항상 색과 크기가 직접 박혀 있습니다. 터미널을 열 필요 없습니다 — 아래 문장을 AI에게 주세요.

AI 대화창에 그대로 붙여넣기

이 프로젝트에서 직접 박아 넣은 색(hex, rgb)과 크기(대괄호 px)를
전부 찾아서 파일 이름·줄 번호와 함께 표로 보여줘. 아직 고치지는 마.

잡힌 줄을 보고 “이걸 JDS 토큰으로 바꿔줘” 라고 하면 됩니다.

터미널을 쓰는 개발자용

# 하드코딩된 색
grep -rnE '#[0-9a-fA-F]{3,8}' src/ --include=*.jsx --include=*.tsx --include=*.html --include=*.css
 
# 하드코딩된 크기
grep -rnE '\[[0-9]+px\]' src/ --include=*.jsx --include=*.tsx --include=*.html --include=*.css

도구

실제 값·대비를 눈으로토큰 뷰어 모양으로 찾고 클래스 복사컴포넌트 그림 색인 Stitch → Antigravity툴체인 가이드

기계가 읽는 파일 (초보자는 안 써도 됩니다)

AI 도구나 스크립트가 읽는 파일입니다. 사람이 직접 열어볼 일은 없습니다.

파일	무엇
`/llms.txt`	토큰·클래스·규칙을 압축한 AI용 요약. 프롬프트에 통째로 붙여넣습니다
`/jt-tokens.json`	토큰 JSON — Figma Variables · Style Dictionary · 스크립트용

준비 중

	무엇
Figma 킷	토큰을 Variables로 넣은 파일
예제 앱	47종을 전부 쓴 실제 앱 하나

AI 규칙 · 프롬프트