AI 활용하여,
디자인시스템 만들기

다른 서비스 화면을 참조하여 디자인 시스템 만들기

by 글쓰는몽글c

Apr 5. 2026

디자인의 일관성을 유지하기 위한 디자인 시스템은 AI시대에 더더욱 중요한 기준이 되어버렸다.

디자인 시스템을 몇 가지 케이스 기준으로 만들 수 있을텐데,

1. 현재 운영 중인 서비스의 디자인 시스템이 아직 없는 경우

2. 타 서비스들의 디자인 시스템을 참조하고 싶지만 공개된 디자인 시스템이 없는 경우

3. 이미 잘 만들어진 디자인 시스템이 있지만 이를 AI학습을 위해 구조화된 파일로 만들어야 하는 경우

정도가 있을거라고 생각한다.

이번 글은 1번과 2번에 해당하는 내용에 대해서 먼저 이야기해보고자 한다.

#이미지 기준으로 디자인 시스템 구축하기

우선 디자인 시스템을 만들고자 하는 서비스가 무엇인지를 정의해보자.

어떤 서비스의 디자인시스템을 만들고 싶은지가 결정되었다면, 관련 화면들을 캡쳐해두도록 하자.

그리고 아래 서비스를 통해 디자인 시스템을 만들고 확인해보고 내가 원하는 서비스에 적용을 해보도록 하자.

첫번째 필요한 Prompt는 아래와 같다.

이미지를 AI서비스 내 첨부하고 아래 프롬프트를 통해 필요한 디자인시스템 초기 파일을 얻도록 하자.

Design System을 구조화(json)하기 위한 Prompt

You are a senior product designer and design system architect.
Analyze the uploaded UI screen and extract a complete design system from it.
Your task is NOT to describe the UI, but to reconstruct a reusable, scalable design system based on it.

Follow the instructions strictly:

1. Design Tokens Extraction
- Colors (primary, secondary, neutral, semantic)
- Typography (font family, size, weight, line-height)
- Spacing scale (4pt/8pt system if applicable)
- Border radius
- Shadow styles
- Opacity usage

2. Component System
Identify and define reusable components:
- Buttons (type, size, state)
- Cards
- Navigation (top bar, tabs, etc.)
- Input fields
- List items
- Tags / chips
- Any recurring UI pattern

For each component, include:
- Name
- Variants
- States (default, hover, active, disabled)
- Structure (hierarchy)

3. Layout System
- Grid system (columns, margins, gutters)
- Layout rules (padding patterns, alignment logic)
- Responsive assumptions if inferable

4. Interaction Patterns
- Tap / click behaviors
- Scroll patterns
- Navigation transitions

5. Visual Style Principles
Summarize the design philosophy in 3~5 keywords (e.g. minimal, bold, card-driven, content-first)

6. Output Format (STRICT)
Return in JSON format structured like this:
{
"design_tokens": {...},
"components": {...},
"layout": {...},
"interactions": {...},
"style_principles": [...]
}

7. Important Rules
- Do not guess randomly — infer based on visible patterns only
- If uncertain, mark as "assumed"
- Make it reusable for real product design systems (like Figma variables/tokens)

Google Stitch

https://stitch.withgoogle.com/

우선 내가 확인하고 싶은 디자인시스템이 있는 사이트의 스크린을 캡쳐한 후 구글 스티치 사이트에 들어가 이미지를 첨부하고 위 Prompt를 넣어본다.

그럼 아래와 같이 바로 디자인 시스템을 뽑아서 보여준다.

뿐만 아니라, 해당 디자인 시스템 파일은 오른쪽 도구의 Design System 아이콘을 통해 바로 확인할 수 있고 md파일을 복사하여 이후 해당 시스템을 다른 AI에 학습시켜 활용할 수도 있다.

마지막으로 만들어진 디자인시스템을 활용하여 간단한 todo app을 만들어달라고 해봤고, 그 결과물은 아래와 같다.

#Motiff

https://motiff.com

마찬가지로 내가 원하는 사이트의 스크린을 캡쳐하여 Motiff 사이트에 첨부하고 위 Prompt를 넣는다.

스크린샷 2026-04-05 오전 12.00.10.png

그렇게 하여 얻어진 디자인 시스템의 구조화된 Json 형태의 포맷을 얻게되면, 이후 아래 Prompt를 통해 디자인시스템의 시각화를 유도할 수 있다. 아래 프롬프트를 다시금 대화창에 넣어보도록 하자.

Design System Dashboard 만들기 위한 Prompt

You are a design system visualization expert.
Using the provided design system JSON, create a visual design system board.
DO NOT recreate the original UI screen
Instead, visualize the system itself.

Include:
1. Color palette section
- Primary / Secondary / Neutral / Semantic
- Show color swatches with hex values

2. Typography scale
- Font sizes, weights, hierarchy (H1, H2, Body, Caption)

3. Spacing system
- Show spacing scale visually (4, 8, 12, 16, etc.)

4. Components
- Buttons (all variants & states)
- Cards
- Navigation
- Inputs
- Tags / chips

Each component should be shown as:
- clean isolated examples
- with labels

5. Layout system
- Grid visualization (columns, margins)

6. Style direction
- Keywords displayed visually

Style guidelines:
- Clean, minimal
- Figma-style layout
- White or light background
- Clearly grouped sections
- System board / style guide format

Important:
- This is NOT a product UI
- This is a DESIGN SYSTEM DOCUMENT