Question 1

Kilo Code는 실제로 디자인 작업을 하나요?

Accepted Answer

네 — 심미적 스킬, 디자인 시스템, 그리고 실제 참조 이미지가 컨텍스트에 포함되면 Kilo Code는 프로덕션 품질의 반응형 UI를 생성하며, 비전 기능을 갖춘 모델이 출력을 참조 이미지와 대조하여 검증합니다. 이러한 컨텍스트가 없으면 일반적인 형태로 기본값이 적용되는 경향이 있는데, 이것이 바로 OpenDesign이 채우는 공백입니다.

Question 2

Kilo Code로 디자인하는 데 비용이 드나요?

Accepted Answer

Kilo Code는 오픈소스이며 설치가 무료입니다. 직접 준비한 제공업체 API 키(BYOK)를 사용하여 해당 제공업체에 직접 비용을 지불하거나, Kilo 자체 게이트웨이를 제공업체 비용으로 이용할 수 있습니다. OpenDesign은 어떤 경우에도 사용자의 자격 증명을 중계하지 않습니다.

Question 3

Kilo Code가 디자인에 적합한 이유는 무엇인가요?

Accepted Answer

모델에 구애받지 않는 오픈소스이므로, 참조 스크린샷을 가장 잘 읽어내는 비전 기능을 갖춘 모델을 자유롭게 선택하여 사용할 수 있고, 전송되는 컨텍스트를 정확히 확인할 수 있으며, 비용과 자격 증명을 직접 통제할 수 있습니다. 심미적 감각은 여전히 사용자가 제공하는 디자인 시스템, 스킬, 참조 이미지에서 나옵니다.

Question 4

프런트엔드 디자인에는 Kilo Code, Claude Code 중 무엇이 나을까요?

Accepted Answer

둘 다 강력합니다. Claude Code는 코드베이스를 인식한 구체적인 디자인 결정으로 알려져 있으며, Kilo Code의 강점은 오픈소스이면서 BYOK 기반으로 모델에 구애받지 않아 원하는 모델을 직접 선택할 수 있다는 점입니다. 많은 팀이 둘 다 사용하며, OpenDesign을 이용하면 디자인 워크플로를 바꾸지 않고도 에이전트를 전환할 수 있습니다.

Question 5

Kilo Code는 Figma에 어떻게 연결되나요?

Accepted Answer

Kilo의 MCP 마켓플레이스나 MCP 설정에서 Figma MCP 서버를 추가합니다. 그러면 Kilo가 컴포넌트, 변수, 레이아웃 데이터 등 실제 디자인 컨텍스트를 가져올 수 있어, 생성된 코드가 원본을 근사하는 대신 원본과 정확히 일치하게 됩니다.

Question 6

Kilo Code란 무엇인가

Accepted Answer

Kilo Code는 Kilo Code, Inc.가 만든 오픈소스 AI 코딩 에이전트입니다. VS Code 확장, JetBrains IDE, 그리고 명령줄 인터페이스로 실행되며 — 코드 라인을 완성하는 데 그치지 않고 자연어 작업으로부터 저장소를 읽고, 파일을 편집하고, 명령을 실행하고, 작업을 계획하고 검증합니다. 이 에이전트의 결정적 특징은 모델에 구애받지 않는다는 점입니다: 어떤 모델이 이를 구동할지 선택하고, 자체 제공자 키를 가져옵니다.

디자인 작업에서는 두 가지 속성이 두드러집니다. 모델에 구애받지 않으므로 참조 스크린샷을 가장 잘 읽고 레이아웃에 대해 추론하는 강력한 비전 지원 모델을 지정할 수 있습니다. 그리고 오픈소스이자 BYOK이므로 어떤 컨텍스트가 전송되는지 정확히 검사하고 자격 증명과 비용을 직접 통제할 수 있습니다.

에이전트 모드: Kilo는 특화 모드를 제공합니다 — 계획을 위한 Architect, 구축을 위한 Code, 수정을 위한 Debug, 질문을 위한 Ask — 그리고 사용자 지정 모드도 제공하므로, 디자인을 계획한 다음 별도의 집중된 패스로 구현할 수 있습니다.

사용자 지정 규칙 + MCP: 지속적인 컨텍스트를 위해 프로젝트 수준 사용자 지정 규칙을 읽고 MCP 서버(및 MCP 마켓플레이스)를 지원하므로, 라이브 Figma 파일이나 디자인 도구 같은 외부 컨텍스트를 추가할 수 있습니다.

자체 키 가져오기: Kilo는 여러 제공자에 걸쳐 BYOK입니다 — Anthropic, OpenAI, Google, OpenRouter 등 — 또는 제공자 원가로 500개 이상의 모델을 제공하는 Kilo 자체 게이트웨이를 사용할 수 있습니다.

자격 증명: 자체 제공자 API 키(BYOK — Anthropic, OpenAI, Google, OpenRouter 등) 또는 Kilo 자체 게이트웨이

공급업체: Kilo Code, Inc. (오픈소스)

라이선스: 오픈소스

Question 7

개방적이고 모델 비종속적인 에이전트가 디자인에 적합한 이유

Accepted Answer

Kilo Code의 디자인 우위는 개방성과 모델 선택에서 비롯됩니다 — 하지만 모든 에이전트와 마찬가지로, 취향은 여전히 공급되어야 합니다.

설계상 모델에 구애받지 않음: 모델을 선택하므로 참조 스크린샷을 가장 잘 읽는 비전 지원 모델로 Kilo를 구동할 수 있고 — 더 나은 모델이 나타나면 워크플로를 바꾸지 않고 전환할 수 있습니다.

개방적이고 검사 가능: Kilo는 오픈소스이므로 어떤 컨텍스트와 프롬프트가 전송되는지 정확히 볼 수 있습니다 — 일회성 스타일을 만들어 내기보다 에이전트가 실제 디자인 프리미티브를 재사용하길 원할 때 유용합니다.

사용자 지정 규칙의 컨벤션: 프로젝트 사용자 지정 규칙(Figma용 MCP 서버 포함)은 에이전트를 토큰, 컴포넌트, 실제 스펙으로 안내하므로 기본 룩이 아니라 브랜드에 맞춰 작업합니다.

취향은 여러분이 제공하는 세 가지 입력에서 나옵니다: 디자인 시스템, 스킬, 실제 참조 이미지.

교훈은 모든 에이전트가 가르치는 것과 같습니다: Kilo Code는 기본적으로 취향을 갖고 있지 않습니다. 제약 — 디자인 시스템, 미적 스킬, 구체적 참조 — 을 주면 좋은 디자인을 만들어 냅니다. OpenDesign은 바로 그러한 입력을 패키징하며, 그래서 둘이 잘 맞습니다(자세한 내용은 아래).

Question 8

처음부터 디자인을 위한 Kilo Code 설정하기

Accepted Answer

설정 순서: 설치 → 프로바이더 연결 → 사용자 지정 규칙 추가 → 스킬 추가 → 브라우저 검증 활성화.디자인 규칙을 코드화하세요: 토큰, 프리미티브, 컨벤션을 Kilo의 사용자 지정 규칙에 넣고 에이전트가 이를 참조하도록 지정하세요. 그러면 출력이 일반적인 모습으로 기본 설정되는 대신 브랜드에 맞게 나옵니다.브라우저 검증 추가: Playwright 또는 브라우저 MCP를 연결하여 Kilo가 실제 브라우저에서 렌더링하고 빌드 통과만 확인하는 대신 여러 브레이크포인트에서 출력을 검사하도록 하세요.명령과 버전별 세부사항은 변경될 수 있으므로 현재 설정 섹션을 사용하세요.# 1. VS Code
#    (또는 JetBrains) 마켓플레이스에서 Kilo Code 확장 프로그램을 설치하거나, CLI를 설치합니다.

# 2. 프로젝트를 열고 로그인하거나 프로바이더 키를 추가합니다
cd your-project
kilo              # 프로바이더(BYOK) 또는 Kilo의 게이트웨이를 연결합니다

# 3. 프로젝트 컨텍스트를 추가합니다
#    이 프로젝트의 디자인 컨벤션에 대한 사용자 지정 규칙을 만듭니다

# 4. Figma MCP 서버를 연결합니다(선택 사항, 디자인 핸드오프용)
#    MCP 마켓플레이스 / MCP 설정에서 추가합니다이전 가이드의 과거 명령 예시입니다. 현재 구문은 링크된 벤더 문서에서 확인하세요.

Question 9

스크린샷에서 UI로 가는 루프

Accepted Answer

Kilo Code에서 가장 효과가 큰 디자인 루프는 참조 이미지를 작동하는 반응형 UI로 바꾸고, 일치할 때까지 반복하는 것입니다. 이때 출력을 참조와 다시 비교하기 위해 비전 지원 모델을 활용합니다.가장 명확한 시각적 참조에서 시작하세요. 그리고 하나의 히어로 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 빈 상태, 로딩)를 포함하세요.프롬프트에 구체적으로 작성하세요. 모호한 프롬프트는 강력한 모델에서도 일반적인 UI를 만들어냅니다.디자인 시스템과 컨벤션을 Kilo의 사용자 지정 규칙에 유지하고, 에이전트에게 토큰과 표준 프리미티브가 어디에 있는지 알려주세요.개발 서버를 실행하고 Kilo가 실제 브라우저에서 렌더링하도록 하며, 브레이크포인트 크기로 조정해 결과를 확인하세요.Kilo가 구현을 스크린샷과 다시 비교하도록 하여 반복하세요. 단지 빌드되는지만 확인하는 것이 아닙니다.Architect 모드로 빌드를 계획한 다음 Code 모드로 전환하고, 구체적인 제약 조건과 함께 참조를 첨부하세요:프롬프트를 작고 집중적으로 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(Kilo에게 되돌렸다고 알려주세요). 그래야 각 패스가 깨끗한 기반 위에서 진행됩니다.# Architect 모드에서 계획한 다음 Code 모드에서 빌드합니다:
> @reference-desktop.png 및
  @reference-mobile.png의 이 디자인을 React + Vite + Tailwind + TypeScript로 구현하세요.
  기존 디자인 시스템 컴포넌트와 토큰을
  사용자 지정 규칙에서 재사용하세요.
  간격, 레이아웃, 계층을 일치시키고 반응형으로 만드세요.
  브라우저에서 렌더링하고 브레이크포인트 전반에서 참조와 일치할 때까지 반복하세요.이전 가이드의 과거 명령 예시입니다. 현재 구문은 링크된 벤더 문서에서 확인하세요.

Question 10

모드, 사용자 지정 규칙, MCP

Accepted Answer

세 가지 확장 지점은 Kilo Code를 지속적인 디자인 작업에 실용적으로 만들며, 세 가지 모두 개방형 디자인 워크플로에 깔끔하게 매핑됩니다.

모드(Architect → Code): Architect 모드에서 화면 구조를 계획한 다음, Code 모드에서 구현하고 Debug 모드에서 문제를 수정합니다. 디자인 의도와 구현을 분리하는 방식입니다. 사용자 지정 모드를 사용하면 나만의 디자인 리뷰 단계를 구성할 수 있습니다.

사용자 지정 규칙: 프로젝트 사용자 지정 규칙은 디자인 컨벤션—토큰, 프리미티브, 리뷰 체크리스트—을 위한 지속적인 기반이며, 매 실행마다 읽혀 에이전트가 브랜드에 맞춰 작업하도록 합니다.

MCP 서버: Kilo는 마켓플레이스를 통해 MCP 서버를 지원합니다. 이는 디자인 컨텍스트와 외부 도구를 가져오는 이식 가능한 방법이며, 가장 관련성 높게는 Figma MCP 서버로, Kilo뿐 아니라 여러 에이전트에서 작동합니다.

이들은 이식 가능한 멀티 에이전트 기능이며, 프로젝트마다 다시 만드는 대신 OpenDesign이 오케스트레이션하도록 만들어진 바로 그런 종류입니다.

Question 11

디자인을 위한 Kilo Code 대 Codex, Claude Code, Cursor, Gemini CLI

Accepted Answer

디자인 작업에 단 하나의 승자는 없습니다. 각 에이전트는 서로 다른 강점을 지니고 있으며, 숙련된 팀은 이들을 조합해 사용합니다. 공정한 요약은 다음과 같습니다:

Kilo Code — 여러 제공자 전반에서 BYOK를 지원하는 오픈 소스이자 모델 비종속적; Architect/Code 모드 및 MCP — 작업별로 자체 모델을 선택하고 비용과 자격 증명을 통제

Codex — 프런트엔드 스킬을 통한 강력한 시각적 완성도; 샌드박스화된 비동기 빌드 — 위임된 비동기 빌드와 이식 가능한 AGENTS.md 규칙

Claude Code — 구체적인 디자인 결정(hex, 간격, 타입)과 코드베이스 인식 UX — 프런트엔드 추론 및 대규모 컨텍스트 리팩터링

Cursor — 라이브 프리뷰와 인라인 편집이 있는 시각적 빌드 후 확인 루프 — IDE 안에서의 긴밀한 반복 및 관찰 UI 작업

Gemini CLI — 강력한 멀티모달 이미지 이해와 1M 토큰 컨텍스트 — 스크린샷이 많은 작업과 전체 디자인 시스템을 컨텍스트에 유지하기

커뮤니티의 반복되는 결론은 취향은 인간에게서 나온다는 것입니다. 이들 모두는 스킬, 레퍼런스, 제약이 없으면 일반적인 미학으로 기본 설정됩니다. 그것이 해결해야 할 진짜 문제이며, 이는 모델 형태가 아니라 디자인 도구 형태의 문제입니다.

에이전트 — 디자인 강점 — 최적 용도

Question 12

함정, 그리고 “AI slop” 외형에서 벗어나기

Accepted Answer

AI 생성 디자인에 대한 가장 흔한 불만은 그것이 일반적으로 보인다는 점입니다 — 부드러운 그라디언트, 떠 있는 패널, 지나치게 큰 둥근 모서리, 과장된 그림자, 그리고 “AI가 만들었다”고 외치는 듯한 Inter와 보라색 분위기 말이죠. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 UI 문구로 새어 나온 지침 등이 있습니다. 이 중 어느 것도 Kilo Code만의 문제가 아닙니다. 이는 어떤 에이전트든 큐레이션된 디자인 컨텍스트 없이 실행될 때 벌어지는 일입니다.

미적 스킬 추가: 큐레이션된 디자인 스킬은 에이전트가 기본 모양 대신 실제 방향성을 확고히 잡도록 강제합니다.

실제 브라우저에서 검증: 비전 지원 모델을 사용해 렌더링하고 브레이크포인트 전반에서 자체 점검하여 레이아웃이 모바일에서 조용히 깨지지 않도록 하세요.

토큰과 레퍼런스 제공: 실제 디자인 토큰과 참고 스크린샷은 출력 품질에 가장 큰 영향을 주는 단일 요소입니다.

사용자 지정 규칙에 규칙 인코딩: “히어로 카드 없음, 최대 두 개의 서체, 브랜드 우선 계층 구조” 같은 스타일 규칙을 에이전트가 매 실행마다 읽는 곳에 두세요.

모든 완화책은 에이전트에게 큐레이션된 디자인 컨텍스트를 제공하는 것에 관한 것임을 주목하세요. 프로젝트마다 그 컨텍스트를 수작업으로 유지하는 것은 OpenDesign이 제거하는 노동입니다.

Question 13

OpenDesign에서 Kilo Code로 디자인하기

Accepted Answer

OpenDesign은 위 워크플로가 계속 요구하는 오픈소스 디자인 레이어입니다. Kilo Code를 퍼스트파티 어댑터로 취급하고, 큐레이션된 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸줍니다 — 그래서 Kilo를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하며, 매번 수작업으로 조립할 필요가 없습니다. 둘 다 오픈소스이자 로컬 우선이라 이 조합은 자연스럽습니다.

자체 제공자 키(BYOK) 또는 Kilo의 게이트웨이로 인증하세요 — 자격 증명은 사용자의 머신에 남아 있으며 우리를 통해 프록시되지 않습니다.

디자인 시스템과 스킬을 선택한 다음, 일관된 취향으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.

모든 아티팩트와 DESIGN.md 파일은 호스팅 클라우드가 아니라 사용자의 자체 저장소에 있습니다.

동일한 Kilo Code 에이전트, 동일한 키 — 여기에 더해 그 주변의 실제적이고 이식 가능한 오픈소스 디자인 워크플로까지. 로컬 우선이자 오픈소스이므로 작업이나 자격 증명에 관한 어떤 것도 사용자의 머신을 떠나지 않습니다.

OpenDesign을 설치하고 Kilo Code를 에이전트로 선택하세요.

Question 14

OpenDesign는 Kilo Code와 제휴 관계가 있나요?

Accepted Answer

아니요. OpenDesign은 독립적인 프로젝트입니다. 둘 다 오픈 소스이지만, 서로 별개입니다.

OpenDesign에서
Kilo(으)로
디자인하기.

Kilo 시작점을 정하세요

Kilo에서 제품 인터페이스를 브리프에서 HTML까지 만들기

처음부터 Kilo 설정하기

Kilo를 다른 에이전트와 비교하기

Kilo 디자인 작업 하나: 브리프에서 인터페이스까지

1디자인 브리프와 제약 조건

2누가 무엇을 하는가: 여러분, Kilo, OpenDesign

3Kilo의 결과물: 1440px 및 390px에서의 제품 페이지

4인수인계 전 검토

그리드와 여백

시각적 계층 구조

모바일 레이아웃

인터랙션 점검

Kilo가 맞는 곳 — 그리고 맞지 않는 곳

Kilo가 적합한 경우

다른 워크플로를 선택해야 하는 경우

시작하기 전에 확인해야 할 Kilo 요구 사항

도구 범위Kilo, by Kilo Code, Inc.

계정 및 인증여러분이 제공하는 제공업체 API 키(BYOK) 또는 Kilo의

시스템 및 버전데스크톱 앱 또는 소스

연결 확인성공 신호

세 단계로 진행하는 Kilo 설정

OpenDesign 데스크톱 앱 다운로드

Kilo 연결 준비하기

작은 Kilo 작업 하나 실행하기

Kilo 디자인 작업을 통과하는 다섯 단계

디자인 브리프

디자인 제약 조건

인터페이스 생성

미리보기

수정 및 검증

Kilo 디자인 리소스

Kilo를 위한 추가 자료

디자인 스킬

디자인 시스템

템플릿

Kilo가 멈추는 지점: 한계, 수동 확인, 대체 방안

Kilo와 OpenDesign에 대한 자주 묻는 질문

OpenDesign에서 Kilo(으)로 디자인하기.