탐색MotionAI 데이터 도구 디자인 시스템 — 3열 UI 쇼케이스 모션

1 / 1

3열 그리드에 프롬프트 입력, 사이드바, 데이터 표, 모델 선택 드롭다운, 상태 색 점이 순차로 등장하고 검은 타이포 카드가 대비를 만드는 디자인 시스템 소개 영상이다.

Motion

AI 데이터 도구 디자인 시스템 — 3열 UI 쇼케이스 모션

2024-04-12 · 동영상 1

AI 분석

AI 표 기반 제품의 디자인 시스템 구성 요소를 3열 그리드로 순차 시연하는 모션이다.

화면을 3열 그리드로 나누고 각 칸에 프롬프트 입력, 사이드바 내비게이션, 데이터 표, 모델 선택 드롭다운, 상태 색 점 데모를 각각 배치한다. 밝은 회백 배경 위에 얇은 회색 구분선과 낮은 대비의 뉴트럴 UI를 쓰고, 좌하단 검은 카드에만 대형 산세리프 헬베티카류 타이포를 흰색으로 크게 얹어 리듬을 만든다. 표의 열 하이라이트가 파란 상단 바로 이동하고, 드롭다운 항목이 위에서 아래로 하나씩 호버·선택되며, 보라·빨강·노랑·초록 상태 점이 순차로 나타나 선택 속성의 색 규칙을 설명한다. 데이터 밀도가 높은 AI 제품에서 색을 상태 신호로만 절제해 쓰는 방식과 디자인 시스템을 짧은 모션으로 요약하는 방식의 레퍼런스로 유용하다.

minimal · light-mode · techy · editorial

ai-tool animation data-table dense-table design-system dropdown light-mode micro-interaction minimal productivity sidebar-nav tokens typography-focused

claude-opus-5 · 2026-09-08 00:44 · 신뢰도 0.82

Paul Faivret

@paulfaivret · 팔로워 2,744

작가 페이지 X

원본 트윗

V7 Go’s new Design System is called Mission Control. From the beginning, we knew that data-heavy AI couldn’t rely only on a chat interface. Natural language is fantastic for high-level information but it lacks control over the desired output when you need it to be more accurate. So we had to reuse existing UI paradigms for users to control and understand AI. With this, color plays a huge role in Mission Control. It is used very carefully to communicate statuses and intentions, so you can tell at a glance the status of a field and the configuration of a property. Color is also used for Select properties, where options’ colors automatically match stages’ colors so that while the table gets filled by AI, you can quickly analyze the repartition of your data and how it will convert into stages. The goal when designing Go was to make scalable AI available to everyone, beyond technical users. No API key, no prompt engineering training. Just your data, a table and a task to solve. We hope you’ll enjoy using it 🖤

좋아요 62 · 리트윗 7

x.com/paulfaivret/status/1778790302733496672