Flash DSM - 에이전트가 기반으로 삼는 디자인 게놈.
파운데이션을 구성하세요. 모든 컴포넌트와 모듈이 따라옵니다. 디자인 게놈은 각 요소가 어디에 있고, 하나를 바꾸면 무엇이 움직이는지 알고 있습니다.
Figma는 건너뛰세요. 디자인 시스템부터 시작하세요.
Figma를 비롯한 캔버스 중심 도구는 디자인 시스템의 그림을 그리려고 만들어졌지, 시스템을 만들려고 만들어진 게 아닙니다. 먼저 그림을 그리고, 그 아래에 시스템을 역으로 끼워 맞춘 뒤, 그림과 끝내 맞지 않는 코드를 배포하게 됩니다. Flash는 순서를 뒤집습니다. 시스템을 먼저 만들고, 정확히 맞는 코드로 곧장 갑니다. 그리고 시스템이 기계가 읽을 수 있는 형태라서, AI 도구가 만드는 모든 결과물의 가드레일 역할까지 합니다.
색상, 타이포그래피, 간격, 컴포넌트가 서로 연결됩니다.
Flash에 브리프나 URL, Figma 파일을 건네면 옷본을 대신 떠 줍니다. 두 테마의 완전한 색상 스케일, 서체 한 쌍, 간격, 반경, 모션, 그리고 이를 참조하는 컴포넌트까지. 이건 출발점이지 제품이 아닙니다. 제품은 에디터에서 이것으로 무엇을 만드느냐입니다.
설명하기
프롬프트를 입력하거나 실제 URL을 붙여 넣거나 Figma 파일을 연결하세요. 어느 쪽이든 Flash가 디자인 DNA를 추출합니다.
내 것으로 만들기
Flash가 완전한 토큰 스케일을 먼저 잡아 줍니다. 라이트와 다크 색상, 서체 한 쌍, 간격, 반경, 그림자, 모션까지. 그 자리에서 바로 편집하세요. 폰트를 바꾸고, 스케일을 다시 조정하고, 마음에 안 드는 선택은 지우면 됩니다.
배포하기
CSS 변수, Tailwind 설정, Tokens Studio JSON으로 내보내세요. GitHub에 바로 푸시할 수도 있습니다.
- 브랜드 DNA 추출 중
- 색상 스케일 만드는 중
- 타이포그래피 짝짓는 중
- 간격과 반경 잡는 중
- 모션과 효과 조정 중
- 컴포넌트 매핑 중
+ 토큰에 매핑된 도메인 특화 컴포넌트 8–14개
옷본은 하나. 원단은 마음대로.
재단사의 옷본은 핏과 솔기를 담습니다. 원단의 색은 담지 않습니다. 이 분리 덕분에 시스템 하나로 회사 전체에 옷을 입힐 수 있습니다.
모두가 함께 쓰는 옷본
구조는 달라져서는 안 되는 부분입니다. 카드가 무엇으로 이루어지는지, 버튼이 라벨 주위에 여백을 어떻게 두는지, 어떤 상태가 있는지. Flash는 이를 한곳에 두어 모든 제품이 같은 형태로 재단하게 합니다.
제품마다 고르는 원단
색상, 서체, 반경, 모션. 테마는 구조 위에 얹혀 구조를 건드리지 않고 바뀝니다. 그래서 한 팀이 옆 팀과 전혀 다르게 보이면서도 모든 컴포넌트를 함께 쓸 수 있습니다.
시스템이 멈추는 이유
특정한 파란색 하나에 묶인 컴포넌트를 배포하면, 다음 팀은 그건 우리 파란색이 아니라며 자기 것을 새로 만듭니다. 두 달 뒤에는 시스템 두 개를 유지하게 됩니다. 원단을 따로 두는 것이 이를 막습니다.
디자인 시스템이 작업을 밋밋하게 만들까요?
누구도 다시 정할 필요 없는 부분을 정리해 줄 뿐입니다. 그래서 나만 만들 수 있는 부분에 여유가 생깁니다.
모든 디자인 시스템은 저마다 다릅니다
Flash는 템플릿을 건네지 않습니다. 파운데이션, 컴포넌트, 모듈 모두 브랜드에 맞춰 만들어집니다. 브랜드를 틀에 맞추는 게 아닙니다.
나만의 스타일
색상, 타이포그래피, 간격을 직접 정의합니다. 미리 만든 팔레트에서 고르는 일은 없습니다.
아트, 효과, 모션
일러스트, 효과, 애니메이션, 전환이 시스템의 일부입니다. 화면 하나에 덧붙인 일회성 요소가 아닙니다.
컴포넌트와 모듈, 내 방식대로
제품의 비전에 맞는 새 컴포넌트와 모듈을 만드세요. Flash는 고정된 라이브러리에 가두지 않습니다.
아직 고객사 로고가 없습니다.
Flash는 새 제품이고, 후기는 모으기 쉽습니다. 결제하기 전에 직접 확인할 수 있는 세 가지를 준비했습니다.
예시를 열어 보세요
이 페이지의 시스템은 모두 공개되어 있습니다. 하나를 열어 생성된 토큰을 읽고, 내 계정으로 포크해서 뜯어보세요. 스크린샷은 한 장도 없습니다.
파일만 챙겨 떠나도 됩니다
내보내기는 tokens.css, Tailwind 설정, Tokens Studio JSON입니다. 손으로도 쓸 수 있는 평범한 파일이라, 저희가 있든 없든 그대로 작동합니다.
날짜를 확인하세요
모든 수정과 기능에는 배포된 날짜가 적혀 있습니다. 속도가 느려지면 누가 말해 주기 전에 여기서 먼저 보입니다.
궁금한 점이 있나요?
Flash란 무엇인가요?
Flash는 디자인 시스템 빌더입니다. 프롬프트, 실제 URL, Figma 파일에서 완전한 토큰 아키텍처를 잡아 줍니다. 라이트와 다크 색상 스케일, 타이포그래피 페어, 간격, 반경, 그림자, 모션, 그리고 그 토큰에 매핑된 도메인 특화 컴포넌트까지. 편집한 뒤 CSS, Tailwind, Tokens Studio JSON으로 내보내거나 GitHub에 푸시하세요.
AI 빌더에게 디자인 시스템이 왜 필요한가요?
Lovable, v0, Bolt 같은 도구는 화면을 빠르게 만들지만, 무언가로 고정하지 않으면 새 프롬프트마다 제멋대로 색과 간격을 만들어 냅니다. 디자인 시스템이 바로 그 규칙 계층입니다. 이 도구들에 기계가 읽을 수 있는 토큰을 건네면 결과물이 브랜드에 맞고, 접근성 대비를 지키며, 이미 배포한 코드와 일치합니다. Flash는 그 계층을 만들어 도구들이 실제로 읽는 형식인 kit.md, 토큰 파일, MCP로 제공합니다.
Flash는 누구를 위한 도구인가요?
UI 품질을 책임지지만 디자인 시스템까지 챙길 시간은 없는 디자인 엔지니어를 위한 도구입니다. 혼자 일하든 팀으로 일하든 마찬가지입니다. 출시 속도를 따라올 시스템이 필요한 빠른 개발 팀에도 맞습니다.
Flash는 무료인가요?
시작은 무료입니다. 모든 계정이 Genome 1개, 즉 디자인 시스템 하나와 그것을 읽는 모든 것을 카드 없이 무료로 만들 수 있습니다. Pro, Team, Studio는 모듈 가져오기, 업데이트 동기화, 공유 Genome, 클라이언트 인계를 더합니다. 무엇이 어느 플랜에 있는지는 요금제 페이지에서 확인하세요.
기존 디자인을 가져올 수 있나요?
Figma 파일을 연결하거나, 실제 웹사이트 URL을 붙여 넣거나, GitHub과 Storybook에서 가져오세요. Flash가 기존 디자인 DNA를 추출해 편집할 수 있는 구조화된 토큰으로 바꿉니다.
Flash는 Figma와 내 코드에 계속 동기화되나요?
지금 실제로 되는 것은 이렇습니다. Figma, URL, 코드베이스에서 가져오기. CSS, Tailwind, Tokens Studio JSON 내보내기. GitHub 푸시. Flash 플러그인을 통한 Figma 변수 전송. 코드와 Figma의 변경이 자동으로 돌아오는 더 깊은 양방향 동기화는 준비 중이며, 다 됐다고 꾸미기보다 적게 약속하는 쪽을 택했습니다.
무엇을 내보낼 수 있나요?
프로덕션에서 바로 쓰는 형식입니다. CSS 사용자 지정 속성이 담긴 tokens.css, tailwind.config.js 확장, Figma와 주고받을 수 있는 Tokens Studio JSON, 컴포넌트 스펙. GitHub에 직접 푸시할 수도 있습니다.
실제로 쓸 수 있는 코드를 생성하나요?
내보내기 결과는 손으로 작성했을 CSS 변수와 Tailwind 토큰 그대로이며, 코드베이스에 바로 넣을 수 있습니다. 독점 런타임도, 락인도 없습니다.
AI UI 생성기와는 무엇이 다른가요?
화면 생성기는 목업을 줍니다. Flash는 그 아래의 시스템을 줍니다. 일관된 스케일, 시맨틱 토큰, 두 가지 색상 모드, 하드코딩 값 대신 토큰을 참조하는 컴포넌트. 그래서 이후에 만드는 모든 것이 일관되게 유지됩니다.
Flash가 생성한 결과물은 제 소유인가요?
전부 사용자의 것입니다. 모든 토큰, 컴포넌트 스펙, 내보내기 파일을 클라이언트 작업, 상용 제품, 자체 디자인 도구 어디에든 쓰세요.