AI 연동
사용 중인 AI에게 이 디자인 시스템을 알려주세요. 그다음부터는 말만 하면 됩니다.
1. 로그인하고 토큰 받기
내 계정에서 로그인하면 개인 토큰이 발급됩니다. 토큰이 담긴 연동 문장도 그 자리에서 복사할 수 있습니다.
https://design.thenoun.ai/agents?token=내토큰 를 읽고,
앞으로 모든 화면은 이 디자인 시스템 기준으로 만들어줘.이 문장을 Claude·Cursor 등 쓰고 계신 AI에 붙여넣으면 연동 끝입니다. 별도의 설치나 설정이 없습니다.
로그인하고 토큰 받기2. 말로 요청하기
원하는 화면을 평소 말하듯 설명하세요. AI가 이 시스템의 부품으로 화면을 그립니다.
카드 입력, 결제 버튼까지 — 이미 만들어진 결제 카드 부품이 그대로 쓰입니다.
날짜 선택, 좌석 선택, 확인 버튼 — 패턴 그대로 조립됩니다.
도넛·막대·게이지 차트가 같은 톤으로 들어갑니다.
3. 확인하고 바로 사용
나온 화면이 이 사이트의 컴포넌트와 같은 모습인지 확인하세요. 조금 다르게 나왔다면 "TheNoun 디자인 시스템 기준으로 다시 맞춰줘" 한마디면 됩니다.
4. 세상에 공개하기
화면이 마음에 드셨다면, 배포도 AI에게 맡기세요. 아래 문장을 붙여넣으면 AI가 코드 보관(GitHub)과 무료 호스팅(Cloudflare) 연결까지 순서대로 안내하며 진행합니다.
이 프로젝트를 배포하고 싶어. 초보자니까 순서대로 안내해줘.
1. 프로젝트를 GitHub 저장소에 올리고
2. Cloudflare Pages에 연결해서 무료로 배포해줘.
완료되면 접속 주소를 알려줘.코드를 안전하게 보관하는 곳입니다. 계정 하나만 만들면 됩니다 (무료).
저장소를 연결하면 주소가 생기고, 이후 수정은 자동으로 반영됩니다 (무료).
AGENTS.md에 배포 가능한 표준 프로젝트 구조가 들어 있어, AI가 처음부터 그 구조로 만듭니다.
더 깊은 연동 준비 중
TheNoun은 Agent를 위한 플랫폼을 준비하고 있습니다. 로그인 한 번으로 연동부터 배포까지 이어지도록.
파일 하나를 내려받아 넣으면 Claude가 이 시스템을 항상 기억한 채로 작업합니다.
AI가 컴포넌트 실코드·규칙·토큰을 실시간 조회하며 화면을 만듭니다. 연결 명령은 콘솔에서 복사하세요.
플랫폼에 로그인하면 클릭 한 번으로 AI 연동과 배포가 끝납니다. Agent를 위한 플랫폼.
직접 개발하시나요?
기반은 전부 무료입니다. CSS 한 줄이면 TheNoun 룩을 얻습니다.
<link rel="stylesheet" href="https://design.thenoun.ai/tokens.css">또는 tokens.css 내려받기 후 프로젝트에 복사 (오프라인·내부망용). 컴포넌트 코드는 Components에서 그대로 복사해 쓰세요.
색·radius를 하드코딩하지 않는다. var(--primary)만 쓴다.
기본 상태는 흑백. hover·포커스·강조에서만 파랑이 등장한다.
과잉 안내·이모지 금지. 격식 있는 한국어 한 줄이면 충분하다.