Q: 디자인을 위한 Kiro CLI 설정, 처음부터 시작하기

설정 순서: 설치 → 인증 → 스티어링과 디자인 스펙 추가 → 스킬 추가 → 브라우저 검증 활성화.디자인 규칙을 담아 두세요: 토큰, 프리미티브, 관례를 스티어링 파일에 넣어 에이전트가 모든 실행에서 읽게 하면, 결과물이 뻔한 모습으로 기본 설정되지 않고 브랜드에 맞춰집니다.브라우저 검증 추가: Playwright나 브라우저 MCP 서버를 연결해 Kiro가 실제 브라우저에서 렌더링하고, 빌드 통과만 확인하는 대신 여러 브레이크포인트에서 결과물을 점검하게 하세요.명령과 버전별 세부 사항은 최신 설정 섹션을 참고하세요. 바뀔 수 있습니다.# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command) # 2. Authenticate — opens your browser to complete sign-in kiro-cli login # choose Builder ID, Google, GitHub, or your organization # 3. Confirm you are signed in kiro-cli whoami # 4. Start an interactive session in your project cd your-project kiro-cli chat # 5. Wire MCP servers (optional, e.g. for design handoff) kiro-cli mcp add ...이전 가이드의 예시 명령입니다. 최신 문법은 링크된 벤더 문서에서 확인하세요.

Question 1

Kiro CLI가 실제로 디자인 작업을 처리하나요?

Accepted Answer

가능합니다 — 미적 감각을 담은 skill, 디자인 시스템, 그리고 컨텍스트 안에 실제 참조 이미지가 있으면 Kiro CLI는 프로덕션 품질의 반응형 UI를 만들어내며, 스펙 기반 워크플로우는 빌드가 명시된 의도에 부합하도록 유지합니다. 이러한 컨텍스트가 없으면 일반적인 모습으로 기본 설정되는 경향이 있는데, 이것이 OpenDesign이 채우는 공백입니다.

Question 2

Kiro CLI를 사용하려면 AWS 계정이 필요합니까?

Accepted Answer

아닙니다 — Kiro는 AWS Builder ID, Google, GitHub, 또는 조직(AWS IAM Identity Center)으로 로그인할 수 있게 해주며, 사용하는 데 AWS 계정이 필요하지 않습니다. Kiro는 프리뷰 단계이며 무료로 시작할 수 있습니다. OpenDesign은 어느 경우에도 사용자의 자격 증명을 프록시하지 않습니다.

Question 3

Kiro CLI의 디자인 강점은 무엇인가요?

Accepted Answer

스펙 기반 워크플로우입니다: Kiro는 코드를 작성하기 전에 요구사항, 디자인 문서, 작업 목록을 작성하므로 빌드가 커밋되기 전에 레이아웃과 범위를 수정할 수 있습니다. Steering 파일이 사용자의 관례를 전달하고 hooks가 검사를 강제할 수 있지만, 취향은 여전히 사용자가 제공하는 디자인 시스템, skill, 참조 자료에서 나옵니다.

Question 4

프런트엔드 디자인: Kiro CLI 또는 Claude Code?

Accepted Answer

둘 다 강력합니다. Claude Code는 구체적이고 코드베이스를 인식하는 디자인 결정으로 알려져 있으며, Kiro CLI의 강점은 steering과 hooks를 갖춘 스펙 기반의 검토 가능한 워크플로우입니다. 많은 팀이 둘 다 사용합니다 — OpenDesign을 사용하면 디자인 워크플로우를 바꾸지 않고도 에이전트를 전환할 수 있습니다.

Question 5

Kiro CLI를 외부 디자인 도구에 연결하려면 어떻게 해야 합니까?

Accepted Answer

Kiro CLI는 Model Context Protocol(MCP) 서버를 관리합니다 — 추가하려면 kiro-cli mcp를 사용하십시오. MCP 서버는 실제 디자인 컨텍스트와 도구를 에이전트로 가져올 수 있어, 생성된 코드가 원본을 근사치로 흉내내는 대신 그대로 일치하게 됩니다.

Question 6

Kiro CLI란 정확히 무엇인가

Accepted Answer

Kiro는 Amazon의 에이전트형 AI로, IDE와 명령줄 인터페이스, 웹 인터페이스로 제공되며, 스펙 기반 개발로 프로토타입에서 프로덕션까지 이끌어 주도록 만들어졌습니다. Kiro CLI는 그 에이전트를 여러분의 터미널로 가져옵니다. 대화형 채팅 세션을 시작하고, 에이전트를 만들고 관리하며, Model Context Protocol 서버를 실행할 수 있습니다 — 모두 명령줄에서 말이죠. Kiro는 프리뷰 단계입니다.

디자인 작업에서 결정적인 속성은 워크플로입니다. 프롬프트를 곧바로 코드로 바꾸는 대신, Kiro는 먼저 스펙 — 요구사항, 설계 문서, 순서가 정해진 작업 목록 — 을 작성하고 그것에 맞춰 구현합니다. 덕분에 UI가 만들어지기 전에 에이전트의 계획을 눈으로 확인하고 검토할 수 있으며, 이는 디자인 결정이 이루어져야 하는 방식 — 의도가 먼저, 그다음 실행 — 과 깔끔하게 맞아떨어집니다.

스펙: Kiro는 코드를 작성하기 전에 프롬프트를 구조화된 스펙 — 요구사항, 설계 문서, 개별 작업 — 으로 바꾸므로 계획을 미리 검토할 수 있습니다.

Steering + hooks: 스티어링 파일은 여러분의 표준, 관례, 선호 도구를 모든 실행에 전달하고, 에이전트 훅은 파일 저장 같은 이벤트에 반응해 백그라운드 작업을 자동으로 실행합니다.

무료로 시작, MCP 지원: Builder ID, Google, GitHub 또는 소속 조직으로 로그인하고 무료로 시작하세요. Kiro CLI는 외부 컨텍스트를 가져오기 위한 MCP 서버도 관리합니다.

자격 증명: AWS Builder ID, Google, GitHub 또는 AWS IAM Identity Center를 kiro-cli login으로 사용 (AWS 계정 불필요)

상태: 프리뷰 단계, IDE·CLI·웹 인터페이스로 제공

벤더: Amazon (AWS)

Question 7

스펙 기반 개발이 디자인에 잘 맞는 이유

Accepted Answer

Kiro CLI의 디자인 강점은 워크플로에서 나옵니다 — 하지만 모든 에이전트가 그렇듯, 안목은 여전히 사람이 공급해야 합니다.

픽셀보다 의도가 먼저: Kiro는 스펙과 설계 문서를 먼저 작성하므로, 레이아웃과 위계, 범위를 계획 단계에서 바로잡을 수 있습니다 — 에이전트가 뻔한 구현에 확정적으로 들어가기 전에 말이죠.

스티어링이 브랜드를 실어 나릅니다: 스티어링 파일은 토큰, 컴포넌트, 관례를 모든 실행에서 에이전트 앞에 두므로, 결과물이 기본적인 모습이 아니라 브랜드를 기준으로 만들어집니다.

훅이 루프를 강제합니다: 에이전트 훅은 저장 시 자동으로 검사를 실행할 수 있습니다 — 에이전트가 기억하기를 바라는 대신 검증이나 리뷰 단계를 연결해 둘 자리입니다.

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

교훈은 모든 에이전트가 가르쳐 주는 것과 같습니다: Kiro CLI는 기본적으로 안목을 갖고 있지 않습니다. 스펙은 빌드를 정직하게 유지하지만, 좋은 디자인을 만들어 내려면 제약 — 디자인 시스템, 미학 스킬, 구체적인 참조 — 을 주어야만 합니다. OpenDesign은 바로 그 입력들을 패키징해 제공하며, 그래서 둘이 잘 맞습니다 (아래에서 더 자세히 다룹니다).

Question 8

디자인을 위한 Kiro CLI 설정, 처음부터 시작하기

Accepted Answer

설정 순서: 설치 → 인증 → 스티어링과 디자인 스펙 추가 → 스킬 추가 → 브라우저 검증 활성화.

디자인 규칙을 담아 두세요: 토큰, 프리미티브, 관례를 스티어링 파일에 넣어 에이전트가 모든 실행에서 읽게 하면, 결과물이 뻔한 모습으로 기본 설정되지 않고 브랜드에 맞춰집니다.

브라우저 검증 추가: Playwright나 브라우저 MCP 서버를 연결해 Kiro가 실제 브라우저에서 렌더링하고, 빌드 통과만 확인하는 대신 여러 브레이크포인트에서 결과물을 점검하게 하세요.

명령과 버전별 세부 사항은 최신 설정 섹션을 참고하세요. 바뀔 수 있습니다.

# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command)

# 2. Authenticate — opens your browser to complete sign-in
kiro-cli login   # choose Builder ID, Google, GitHub, or your organization

# 3. Confirm you are signed in
kiro-cli whoami

# 4. Start an interactive session in your project
cd your-project
kiro-cli chat

# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...

이전 가이드의 예시 명령입니다. 최신 문법은 링크된 벤더 문서에서 확인하세요.

# 2. Authenticate — opens your browser to complete sign-in
kiro-cli login   # choose Builder ID, Google, GitHub, or your organization

# 3. Confirm you are signed in
kiro-cli whoami

# 4. Start an interactive session in your project
cd your-project
kiro-cli chat

# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...이전 가이드의 예시 명령입니다. 최신 문법은 링크된 벤더 문서에서 확인하세요.

Question 9

Kiro를 사용한 스크린샷→UI 워크플로

Accepted Answer

Kiro CLI에서 가장 효과가 큰 디자인 루프는 참조 이미지를 실제로 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다 — 스펙이 의도를 먼저 담게 하고, 그에 맞춰 만드는 것이죠.가장 명확한 시각 참조에서 시작하세요 — 그리고 하나의 대표 이미지만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.Kiro가 여러분의 프롬프트로 스펙과 설계 문서를 작성하게 하고, 만들기 전에 계획을 검토하세요 — 레이아웃과 범위 문제를 일찍 잡아내는 지점입니다.디자인 시스템과 관례는 스티어링 파일에 두고, 토큰과 표준 프리미티브가 어디 있는지 Kiro에게 알려 주세요.개발 서버를 실행하고 Kiro가 실제 브라우저에서 렌더링하게 하면서, 브레이크포인트에 맞춰 크기를 바꿔 결과를 확인하세요.Kiro가 자신의 구현을 참조와 다시 비교하게 하며 반복하세요 — 빌드가 된다는 것만 확인하는 게 아니라.대화형 세션을 열고 구체적인 제약을 미리 제시해, Kiro가 작성하는 스펙이 여러분의 실제 의도를 반영하게 하세요:작업은 작고 집중적으로 유지하고, 좋은 반복은 커밋하고 나쁜 것은 되돌리세요(되돌릴 때는 Kiro에게 알려 주세요). 그래야 매 시도가 깨끗한 기반 위에서 쌓입니다.kiro-cli chat
# in the prompt:
> Here are my references: reference-desktop.png and reference-mobile.png.
  Write a spec, then implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see my steering files).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.이전 가이드의 예시 명령입니다. 최신 문법은 링크된 벤더 문서에서 확인하세요.

Question 10

스펙, 스티어링, 훅, MCP

Accepted Answer

네 가지 확장 지점이 Kiro CLI를 지속적인 디자인 작업에 실용적으로 만들어 주며, 네 가지 모두 열린 디자인 워크플로에 깔끔하게 대응합니다.

스펙: 요구사항, 설계 문서, 순서가 정해진 작업 목록 — 기능이 무엇이어야 하는지에 대한 오래 남는 기록이며, 빌드 전과 빌드 중에 검토할 수 있습니다.

스티어링 파일: 에이전트가 모든 실행에서 읽는 컨텍스트, 코딩 표준, 선호 워크플로나 도구를 추가합니다 — 디자인 관례와 토큰이 자연스럽게 머무는 자리입니다.

에이전트 훅: 파일 저장 같은 이벤트에 반응해 검사나 문서 생성 같은 백그라운드 작업을 실행하는 자동화 — 검증 단계를 자동으로 강제할 자리입니다.

MCP 서버: Kiro CLI는 Model Context Protocol 서버를 관리합니다. Kiro뿐 아니라 여러 에이전트에서 통하는 외부 디자인 컨텍스트와 도구를 가져오는 이식성 높은 방법입니다.

이들은 이식성 있는 멀티 에이전트 기능입니다 — 프로젝트마다 다시 만드는 대신 OpenDesign이 조율하도록 만들어진 바로 그런 것입니다.

Question 11

디자인 비교: Kiro vs Codex vs Claude Code vs Cursor vs Gemini CLI

Accepted Answer

디자인 작업에 단일한 승자는 없습니다 — 각 에이전트는 강점이 다르고, 경험 많은 팀은 이들을 함께 쌓아 씁니다. 공정한 요약은 다음과 같습니다:

Kiro CLI — 스펙 기반 워크플로 — 코드보다 앞서 요구사항, 설계 문서, 작업 목록을 작성하고, 스티어링 파일과 훅이 빌드를 브랜드에 맞게 유지 — 구현 전에 의도와 범위가 확정되는 구조적이고 검토 가능한 빌드

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

Claude Code — 구체적인 디자인 결정(hex, 간격, 타이포그래피)과 코드베이스를 이해하는 UX — 프런트엔드 추론과 대규모 컨텍스트 리팩터링

Cursor — 라이브 프리뷰와 인라인 편집을 통한 시각적 빌드 앤 시 루프 — IDE 안에서 촘촘하게 반복하며 지켜보는 UI 작업

Gemini CLI — 강력한 멀티모달 이미지 이해와 매우 큰 컨텍스트, 무료 티어가 있는 오픈 소스 — 스크린샷이 많은 작업과 전체 디자인 시스템을 컨텍스트에 담아 두는 일

커뮤니티에서 반복적으로 나오는 결론은 안목은 사람에게서 온다는 것입니다: 스킬, 참조, 제약이 없으면 모두 뻔한 미학으로 기본 설정됩니다. 그것이 풀어야 할 진짜 문제이며, 모델의 문제가 아니라 디자인 도구의 문제입니다.

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

Question 12

흔한 함정과 “AI slop” 느낌을 피하는 방법

Accepted Answer

AI가 생성한 디자인에 대한 가장 흔한 불만은 뻔해 보인다는 것입니다 — 부드러운 그라디언트, 떠 있는 패널, 지나치게 큰 모서리 반경, 과장된 그림자, “AI가 만든 게 틀림없다”고 외치는 듯한 Inter 폰트에 보라색 분위기까지. 그 밖에 보고되는 문제로는 깨진 모바일 레이아웃과 UI 문구로 새어 나오는 지시 사항이 있습니다. 이 중 어느 것도 Kiro CLI만의 문제가 아닙니다. 이는 어떤 에이전트든 잘 정돈된 디자인 컨텍스트 없이 실행될 때 벌어지는 일입니다 — 스펙은 빌드를 제 궤도에 붙잡아 두지만, 안목을 공급해 주지는 않습니다.

미학 스킬 추가: 잘 정돈된 디자인 스킬은 에이전트가 기본적인 모습 대신 실제 방향에 확실히 몰입하게 만듭니다.

실제 브라우저에서 검증: 여러 브레이크포인트에서 렌더링하고 스스로 점검하세요 — 가능하면 훅으로 연결하세요 — 그래야 모바일에서 레이아웃이 조용히 깨지지 않습니다.

토큰과 참조 제공: 실제 디자인 토큰과 참조 스크린샷은 결과물 품질에 가장 큰 영향을 주는 단일 지렛대입니다.

규칙을 스티어링 파일에 담기: “히어로 카드 금지, 서체 최대 두 종, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 모든 실행에서 읽는 곳에 두세요.

모든 완화책이 에이전트에게 잘 정돈된 디자인 컨텍스트를 주는 일이라는 점에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 것이 바로 OpenDesign이 없애 주는 수고입니다.

Question 13

OpenDesign 내에서 디자인을 위해 Kiro CLI 사용하기

Accepted Answer

OpenDesign은 위 워크플로가 계속 요구해 온 오픈 소스 디자인 레이어입니다. Kiro CLI를 자사 기본 어댑터로 다루고, 잘 정돈된 스킬과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 Kiro를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 있고, 매번 손으로 조립할 필요가 없습니다. OpenDesign은 로컬 우선이라 조합이 단순합니다: 여러분의 파일과 로그인 정보는 여러분의 컴퓨터에 남습니다.

AWS Builder ID나 다른 로그인으로 인증하세요 — 자격 증명은 여러분의 컴퓨터에 남고, 우리를 통해 프록시되지 않습니다.

디자인 시스템과 스킬을 고른 뒤, 일관된 안목으로 덱과 프로토타입, 랜딩 페이지를 생성하세요.

모든 결과물과 DESIGN.md 파일은 호스팅된 클라우드가 아니라 여러분의 저장소에 있습니다.

같은 Kiro CLI 에이전트, 같은 로그인 — 여기에 실제로 쓸 수 있고 이식성 있는 오픈 소스 디자인 워크플로가 더해집니다. OpenDesign은 로컬 우선이며 Apache-2.0이므로, 여러분의 작업이나 자격 증명에 관한 어떤 것도 컴퓨터를 떠나지 않습니다.

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

Question 14

OpenDesign은 Amazon이나 AWS와 제휴 관계인가요?

Accepted Answer

아니요. OpenDesign은 독립적이며, Kiro는 Amazon의 상표입니다.

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

Kiro를 어디서부터 시작할까

Kiro로 제품 인터페이스 만들기

처음부터 Kiro 설정하기

Kiro와 다른 에이전트 비교하기

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

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

2작업 분담: 여러분, Kiro, 그리고 OpenDesign

3Kiro 결과물: 1440px 및 390px의 체크아웃 흐름

4인수인계 전 검토

그리드와 여백

시각적 계층 구조

모바일 레이아웃

인터랙션 점검

Kiro가 작업에 맞을 때와 맞지 않을 때

Kiro가 적합한 경우

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

시작 전 Kiro 요구 사항

툴 범위Kiro, by Amazon

계정 및 인증AWS Builder ID, Google, GitHub 또는 AWS IAM

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

연결 확인성공 신호

세 단계로 진행하는 Kiro 설정

OpenDesign 데스크톱 앱 다운로드

Kiro 연결 준비하기

작은 Kiro 작업 하나 실행하기

Kiro의 5단계 디자인 워크플로

디자인 브리프

디자인 제약 조건

인터페이스 생성

미리보기

수정 및 검증

Kiro 디자인 리소스

Kiro 관련 추가 자료

디자인 스킬

디자인 시스템

템플릿

Kiro의 한계, 수동 확인 및 대체 방법

Kiro와 OpenDesign에 관한 자주 묻는 질문

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