의 특징/무료 도구
디자인 토큰 생성기
semantic color, spacing, 반경 및 태전 토큰을 생성하여 라이브 컴포넌트 미리보기를 제공합니다. 수출입 CSS 사용자 정의 속성 또는 JSON, AI 없이 자유로운.
디자인 토큰
design-tokens.css
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}단어 수: 38상세 정보 ↑
내보내기 텍스트는 영어로 유지되며, 입력한 내용은 그대로 보존됩니다.
가입 없음. AI 크레딧 없음. 이 도구는 브라우저에서 출력을 조립합니다.
뭔가 유용한 아이디어에서.
- 01
당신의 semantic 색깔 및 기본적인 가치를 놓으십시오.
- 02
라이브 샘플 및 생성 된 간격 스케일을 검사합니다.
- 03
복사 CSS 변수 또는 일치하는 수출 JSON 가치.
약간의 맥락.
Semantic 토큰은 반복된 디자인의 이름을 결정합니다. 이 도구는 컴팩트한 팔레트와 스싱 스케일을 선택에서 구축합니다. CSS 으로 JSON 수출은 동일한 가치를 공유합니다. 의 특징 JSON 단순 키 가치 토큰 문서는 특정 토큰 교환 표준에 따라 규정을 주장하지 않습니다.
좋은 질문.
기존 테마로 이것을 사용할 수 있나요?
예. 여러분의 테마의 컨벤션에 수출된 토큰을 밝히거나, 설치된 시스템의 장님으로 대체하기 보다는 오히려 이름을 붙여 넣으십시오.
빛과 어두운 테마를 만들 수 있습니까?
그것은 한 번에 한 팔레트를 수출합니다. 각 팔레트를 별도로 만들고 검토하고 각 모드에서 대조합니다.