102.7K+다운로드
Aider OpenDesign

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

OpenDesign에서 Aider로 인터페이스를 디자인하는 방법: 리비전마다 하나의 커밋, 규칙집 역할을 하는 CONVENTIONS.md, 브리프부터 검토된 파일까지 이어지는 체인지로그 페이지 작업 하나, 그리고 시작 전에 알아야 할 한계를 다룹니다.

OpenDesign 다운로드 설정으로 이동

이 AIDER 가이드의 세 가지 시작점

Aider 시작점 선택하기

이 가이드 · UI 디자인

Aider로 제품 인터페이스 구축하기

이 가이드: 브리프, 참고 자료, 디자인 규칙, 그리고 검토된 HTML 산출물.

이 가이드 읽기 설정

처음부터 Aider 설정하기

전체 경로: 깨끗한 머신에서 터미널의 Aider까지, UI를 구축하고 검증할 준비 완료.

설정으로 이동 비교

Aider와 다른 에이전트 비교

디자인에서 Aider가 Codex, Claude Code, Cursor와 어떻게 차별화되는지, 그리고 다른 워크플로가 더 나은 선택인 경우.

비교 보기
이 페이지에서 예시
  1. 예시
  2. 적합성
  3. 호환성
  4. 설정
  5. 워크플로
  6. 참고 자료
  7. 한계
  8. FAQ

Aider 디자인 작업 전체 과정 한 가지

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

하나의 작업을 전체 루프로 추적합니다: Aider에 전달하는 브리프와 제약 조건, 반환되는 HTML, 그리고 완료 전에 여전히 실행하는 검사. 아래 인터페이스는 이 페이지를 위한 예시이며, 기록된 Aider 실행이 아닙니다.

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

브리프

CLI 도구를 위한 변경 로그 및 릴리스 노트 페이지 디자인: 버전 목록, 그룹화된 변경 사항이 있는 강조된 릴리스, 업그레이드 명령. 각 개정이 자체 커밋으로 남게 하세요. 데스크톱과 휴대폰.

  • 디자인 시스템OpenDesign 페이퍼 캔버스: Albert Sans, 그린 강조색 하나
  • 브레이크포인트1440px 데스크톱과 390px 모바일, 가로 스크롤 없음
  • 인터랙션버전 목록, 업그레이드 명령 복사, 릴리스별 앵커
  • 출력물안정적인 data-od-id 훅이 포함된 단일 독립형 HTML 파일

2역할 분담: 당신, Aider 그리고 OpenDesign

  • 사용자

    당신은 브리프를 작성하고, 디자인 시스템을 선택하며, 승인 기준을 설정합니다.

  • Aider

    Aider는 레이아웃을 계획하고, HTML, CSS, JavaScript를 작성하며, 요청 시 수정합니다.

  • OpenDesign

    OpenDesign은 디자인 시스템과 스킬을 제공하고, 미리보기를 렌더링하며, 각 버전을 프로젝트의 파일로 저장합니다.

  • 검토

    당신은 핸드오프 전에 시각적 계층, 8px 그리드의 간격, 두 브레이크포인트, 모든 상호작용을 확인합니다.

3Aider 산출물: 1440px 및 390px의 변경 로그 페이지

Aider 산출물: 1440px 및 390px의 변경 로그 페이지 — 데스크톱
예시

4인수인계 전 검토

레이아웃

그리드와 여백

버전 목록, 노트, 레일이 8px 그리드에 맞춰져 있고, 릴리스 제목이 목록과 정렬됩니다.

계층 구조

시각적 계층 구조

버전과 날짜가 앞서고, 그다음 호환성 중단 콜아웃이 옵니다. 악센트는 현재 버전만 표시합니다.

반응형

모바일 레이아웃

버전 목록은 셀렉트로 바뀌고, 노트는 전체 너비를 차지합니다.

인터랙션

인터랙션 점검

업그레이드 명령 복사, 이전 릴리스로 이동, 호환성 중단 콜아웃 링크 열기를 시도해 보세요.

적합성

Aider가 작업에 적합할 때와 그렇지 않을 때

Aider가 적합한 경우

  • 모델 비종속적, BYOK. 자신의 키를 가져와 거의 모든 LLM을 연결하세요. 비전 지원 모델은 참조 이미지를 반응형 마크업으로 바꿀 수 있습니다.
  • Git 네이티브 반복. Aider의 자동 커밋은 각 디자인 패스를 되돌릴 수 있는 검토 가능한 diff로 만들어, 출력을 깔끔하고 추적 가능하게 유지합니다.
  • CONVENTIONS.md 컨텍스트. 읽기 전용 컨벤션 파일이 토큰, 프리미티브, 디자인 규칙을 모든 실행에 로드합니다.
  • 오픈 소스. Apache-2.0 및 로컬 우선으로, 자신의 리포지토리에 있는 코드에서 직접 작동합니다.

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

  • 편집 가능한 벡터 파일이 필요합니다. Aider는 편집 가능한 디자인 문서가 아니라 HTML을 반환합니다. 해당 자산 형식에는 별도의 벡터 워크플로를 찾으세요.
  • 참조도 제약도 없습니다. 디자인 시스템이나 예시가 없으면 출력이 일반적인 모습으로 흐르게 됩니다. 먼저 브리프를 작성하세요.
  • 이 에이전트에 필요한 자격 증명이 없습니다. 필요: 자신의 제공자 API 키 — BYOK (OpenAI, Anthropic, DeepSeek, Gemini 또는 로컬). OpenDesign은 자격 증명을 제공하거나 프록시하지 않습니다.
  • 팀이 OpenCode 또는 Kilo에서 작업합니다. 해당 에이전트에는 자체 페이지가 있습니다. 워크스페이스는 비슷하게 유지되지만 설정이 달라집니다. 관련 에이전트를 참고하세요.

호환성

시작 전 Aider 요구 사항

이 페이지는 OpenDesign 데스크톱 앱을 통해 연결된 Aider를 다룹니다. 게시된 참조는 2026년 9월 6일에 확인되었습니다.

도구 범위Aider, by Aider

Aider는 터미널에서 실행되는 Apache-2.0 오픈 소스 AI 페어 프로그래밍 도구입니다. 코드베이스를 매핑하고, 파일을 제자리에서 편집하며, 각 변경을 적절한 메시지와 함께 자동 커밋합니다. 이 페이지는 Aider 자체 인터페이스가 아니라 OpenDesign을 통해 Aider로 인터페이스를 디자인하는 것에 관한 것입니다. OpenDesign의 설정 노트에 사용 가능한 에이전트가 나열되어 있습니다.

계정 및 인증자신의 공급자 API 키 — BYOK (OpenAI,

자신의 제공자 API 키 — BYOK (OpenAI, Anthropic, DeepSeek, Gemini 또는 로컬). 해당 키로 인증하세요. 자격 증명은 사용자 머신에 남습니다. 여기서는 할당량이나 가격을 약속하지 않습니다.

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

데스크톱 빌드는 다운로드 페이지에 있습니다. 소스 빠른 시작의 Node.js 및 pnpm 요구 사항은 소스에서 실행할 때 적용되며, 데스크톱 패키지 설치에는 적용되지 않습니다. 최소 호환 Aider 버전: 여기서는 확인되지 않음.

연결 확인성공 신호

설치된 버전이 표시하는 연결 지침을 사용한 다음 작은 작업을 실행하세요. Aider가 처리했고 산출물이 열리는지 확인하세요. 다운로드만으로는 연결이 작동함을 증명하지 않습니다.

데스크톱 앱으로 시작하기

세 단계로 완료하는 Aider 설정

먼저 다운로드하고, 설치한 버전에 맞게 Aider 설정을 완료한 다음, 작은 결과를 검증하세요. 이 경로를 따르는 데 OpenDesign을 소스에서 빌드할 필요는 없습니다.

  1. 1

    OpenDesign 데스크톱 앱 다운로드

    컴퓨터에 맞는 패키지를 선택하고 설치한 뒤 앱을 여세요.

    OpenDesign 다운로드
    체크포인트
    데스크톱 앱이 열립니다. 이미 설치되어 있나요? 다음 단계로 건너뛰세요. 다시 다운로드할 필요가 없습니다.
  2. 2

    Aider 연결 준비하기

    설치한 버전에 맞는 Aider 지침을 따르세요. 자신의 제공자 API 키(BYOK)로 인증하세요. 자격 증명은 로컬에 남습니다.

    Aider — 터미널에서의 AI 페어 프로그래밍 
    # 1. Install Aider (recommended installer; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# or with pipx: pipx install aider-chat

# 2. Start it in your git project and bring your own key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# or: aider --api-key openai=<your-key>   (also deepseek=, gemini=)

    게시된 가이드의 Aider 설정 노트에서 발췌. 현재 명령은 공급업체 문서를 확인하세요.

    체크포인트
    의도한 에이전트와 계정을 확인하세요. 사용할 수 없다면 더 큰 작업을 시도하기 전에 호환성을 확인하세요.
  3. 3

    작은 Aider 작업 하나 실행하기

    한 번의 수정을 포함해 전체 루프를 판단할 수 있을 만큼 작은 브리프로 시작하세요.

    시작 브리프

    프로필 양식과 저장 확인이 있는 설정 화면을 만들어 줘. 내 디자인 규칙을 따라. 데스크톱과 모바일 너비에서 확인해 줘.

    체크포인트
    결과를 열고, 저장 상태를 테스트하고, 구체적인 변경 하나를 요청하세요. 생성은 검토를 시작할 뿐, 끝내지 않습니다.

소스에서 OpenDesign을 실행하려면 대신 기술 빠른 시작을 따르세요.

Aider 디자인 워크플로

다섯 단계로 보는 Aider의 디자인 워크플로

아래의 변경 로그 페이지 작업은 작성된 브리프에서 검토한 파일까지 진행됩니다. 각 단계는 당신의 입력, Aider의 터미널 및 git 작업, OpenDesign의 기여, 그리고 당신이 해야 할 검토를 명시합니다.

  1. 1

    디자인 브리프

    평이한 언어로 세 줄에서 여섯 줄. 대상, 화면의 역할, 플랫폼을 명시하세요.

    • 사용자브리프를 작성하세요. 참조 스크린샷이 있으면 첨부하세요.
    • Aider브리프와 프로젝트의 CONVENTIONS.md 지침 파일을 읽고, 모호한 점이 있으면 질문합니다.
    • OpenDesign프로젝트, 프롬프트 표면, 그리고 해당 산출물 유형에 맞는 skill을 제공합니다.
    • 확인브리프에 수락 기준이 명시되어 있는지 확인하십시오. 지금 추가하는 것이 생성 이후보다 비용이 적게 듭니다.
  2. 2

    디자인 제약 조건

    디자인 시스템과 몇 가지 확고한 규칙입니다. 이것이 브랜드에 맞는 결과물과 일반적인 결과물을 가르는 요소입니다.

    • 사용자디자인 시스템을 선택합니다. 브레이크포인트와 반드시 사용해야 하는 컴포넌트를 명시하십시오.
    • Aider한 줄도 작성하기 전에 DESIGN.md의 토큰과 태도 규칙을 컨텍스트에 로드합니다.
    • OpenDesign디자인 시스템 라이브러리를 제공하고, 선택된 시스템을 skill 템플릿에 연결합니다.
    • 확인토큰이 브랜드와 일치하는지 확인하십시오. 강조색 하나, 올바른 폰트, 올바른 라운드 처리인지 확인하십시오.
  3. 3

    인터페이스 생성

    Aider는 레이아웃, 스타일, 인터랙션, 안정적인 훅을 포함한 자체 완결형 HTML 파일을 작성합니다.

    • 사용자기다리거나 명확화 질문에 답합니다. 설정할 것은 없습니다.
    • Aider섹션을 계획하고, HTML, CSS, JavaScript를 작성하며, 파일을 실행하고 실패한 부분을 수정합니다.
    • OpenDesign산출물을 프로젝트 폴더에 저장하고 미리보기를 위해 색인화합니다.
    • 확인아직 확인할 것이 없습니다. 렌더링된 후에 파일을 평가하십시오, 소스 코드로는 판단하지 마십시오.
  4. 4

    미리보기

    파일은 요청한 너비로 OpenDesign 내부에 렌더링됩니다. 디자인은 바로 여기서 판단됩니다.

    • You너비를 전환하고, 인터랙션을 클릭해 보고, 요소에 댓글을 남깁니다.
    • Aider프리뷰에 대한 사용자의 의견을 읽고 다음 수정 작업을 준비합니다.
    • OpenDesign프리뷰를 렌더링하고, 댓글과 수정을 위한 data-od-id 대상을 노출합니다.
    • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 강조색이 과하지 않게 사용되었는지 확인합니다.
  5. 5

    수정 및 검증

    미리보기에서 요소를 가리켜 변경을 요청하세요. Aider가 각 개정을 커밋하므로, 아무것도 조용히 덮어써지지 않습니다.

    • You댓글을 요청으로 전환하고, 작업이 완료되었는지 판단합니다.
    • Aider변경 사항을 그대로 적용하고 파일을 다시 실행합니다.
    • OpenDesign버전을 나란히 보관하고, 완료되면 이미지나 HTML로 내보냅니다.
    • Check변경된 영역만 다시 확인한 뒤, 각 브레이크포인트에서 전체 페이지를 한 번씩 확인합니다.

리소스

Aider 디자인 리소스

스킬

디자인 스킬

Aider가 OpenDesign에서 생성할 수 있는 산출물 유형으로, 유형마다 하나의 스킬이 있습니다.

스킬 둘러보기 디자인 시스템

디자인 시스템

Aider가 무언가를 생성하기 전에 바인딩해야 할 브랜드 토큰과 컴포넌트입니다.

시스템 둘러보기 템플릿

템플릿

덱, 랜딩 페이지, 제품 화면을 위한 시작점입니다.

템플릿 둘러보기

제한 사항

Aider의 한계, 수동 점검 및 대안

  • 범위이 페이지는 OpenDesign에 연결된 에이전트로서의 Aider를 다루며, Aider의 모든 기능을 다루지 않습니다.
  • 사용 한도사용 한도와 비용은 가져온 자격 증명(자신의 제공자 API 키 — BYOK (OpenAI, Anthropic, DeepSeek, Gemini 또는 로컬))을 따릅니다. 여기서는 무료 할당량을 주장하지 않습니다.
  • 네트워크로컬 프로젝트 파일이 곧 오프라인 추론을 의미하지는 않습니다. 민감한 입력을 공유하기 전에 사용 중인 에이전트의 제공업체 설정과 데이터 정책을 검토하십시오.
  • 출력물은 HTML입니다산출물은 HTML 파일이며, 벡터 디자인 파일이 아닙니다.
  • 수동 검토접근성, 실제 콘텐츠, 브랜드 적합성, 인터랙션의 정확성은 미리보기에서 사용자가 직접 검토해야 합니다. 에이전트의 자체 점검은 첫 번째 검토 단계로만 취급하십시오.
  • 대체 방법에이전트를 사용할 수 없거나 작업이 실패하면 설치된 버전의 연결 안내와 인증을 확인하십시오. 설정을 변경하기 전에 오류 내용과 마지막으로 정상 작동한 산출물을 보존하십시오.

자주 묻는 질문

Aider와 OpenDesign에 관한 일반적인 질문

Aider가 실제로 디자인 작업을 할 수 있나요?
그렇습니다 — 미학 스킬, 디자인 시스템, 그리고 실제 참조 이미지가 컨텍스트에 포함되면 Aider는 프로덕션 품질의 반응형 UI를 생성하며, 비전 지원 모델에서는 스크린샷을 읽어 결과물을 참조와 대조하여 검증합니다. 그러한 컨텍스트가 없으면 일반적인 모습으로 기본 설정되는 경향이 있으며, 이것이 바로 OpenDesign이 채우는 공백입니다.
디자인을 위해 Aider와 함께 어떤 모델을 사용할 수 있습니까?
Aider는 모델에 구애받지 않습니다. 사용자는 자신의 API 키를 가져와 거의 모든 LLM — Claude, GPT-4o, DeepSeek, Gemini 또는 로컬 모델 — 에 연결할 수 있습니다. 이미지 기반 디자인 작업에는 GPT-4o나 Claude와 같은 비전 지원 모델을 사용하십시오. OpenDesign은 사용자의 자격 증명을 결코 대신 전달하지 않습니다.
특히 디자인에 있어 Aider의 장점은 무엇입니까?
두 가지입니다: 모델에 구애받지 않아 작업에 가장 적합한 모델을 선택할 수 있으며, git 네이티브 방식이어서 모든 변경을 커밋해 각 디자인 반복 작업을 검토하고 되돌릴 수 있습니다. 둘 다 도움이 되지만, 취향은 여전히 사용자가 제공하는 디자인 시스템, 스킬, 참조에서 나옵니다.
Aider가 제 파일을 편집하고 Git에 커밋합니까?
그렇습니다. Aider는 리포지토리 내 파일을 직접 편집하고 각 변경 사항을 적절한 메시지와 함께 자동으로 커밋하므로, 이미 사용 중인 git 도구로 AI의 작업을 diff하고 관리하고 되돌릴 수 있습니다.
제 디자인 규칙을 Aider에 어떻게 전달합니까?
토큰, 프리미티브, 규칙을 담은 CONVENTIONS.md를 작성한 다음, /read CONVENTIONS.md 또는 aider --read CONVENTIONS.md로 읽기 전용으로 불러오십시오(매 실행마다 불러오려면 .aider.conf.yml에 read: CONVENTIONS.md를 설정하십시오). 그러면 Aider는 기본 모습이 아니라 사용자의 브랜드를 기준으로 작업합니다.
Aider란 실제로 무엇인가
Aider는 터미널에서 실행되는 오픈 소스(Apache-2.0) AI 페어 프로그래밍 도구입니다. 기존 코드베이스를 읽고, 컨텍스트를 위해 전체 리포지토리를 매핑하고, 파일을 제자리에서 편집하며, 각 변경 사항을 적절한 메시지와 함께 자동으로 커밋합니다. 따라서 이미 사용 중인 git 도구로 AI의 작업을 diff하고, 관리하고, 되돌릴 수 있습니다. 100개 이상의 프로그래밍 언어를 지원하며 새 프로젝트를 시작하거나 기존 프로젝트를 기반으로 구축합니다.

디자인 작업에서 두 가지 속성이 돋보입니다. Aider는 모델에 구애받지 않습니다. 자신의 키를 가져와 거의 모든 LLM — Claude, GPT-4o, DeepSeek, Gemini 또는 로컬 모델 — 에 연결할 수 있으므로 한 공급자에 묶이지 않습니다. 또한 GPT-4o와 Claude 같은 비전 지원 모델에서는 이미지 파일을 읽을 수 있어 참조 스크린샷을 프롬프트의 일부로 바꿀 수 있습니다.

컨벤션 파일: Aider는 /read CONVENTIONS.md(또는 aider --read CONVENTIONS.md)로 로드하는 CONVENTIONS.md 파일을 읽습니다. 이는 디자인 컨벤션, 토큰, 리뷰 체크리스트를 읽기 전용 컨텍스트로 인코딩하기에 자연스러운 곳입니다.

Git 네이티브 편집: 모든 변경 사항은 리포지토리의 파일에 적용되고 자동으로 커밋되므로, 각 디자인 반복은 익숙한 git 도구로 검토하고 되돌릴 수 있습니다.

자체 모델 사용: OpenAI, Anthropic, DeepSeek, Gemini 또는 로컬 모델을 자신의 API 키로 연결하세요. Aider는 단일 공급자나 호스팅 백엔드에 묶여 있지 않습니다.

자격 증명: 자신의 공급자 API 키 — BYOK (OpenAI, Anthropic, DeepSeek, Gemini 또는 로컬 모델)

공급자: Aider(Aider-AI, 오픈 소스) — 모델에 구애받지 않음

라이선스: Apache-2.0, 오픈 소스
모델에 구애받지 않는 Git 네이티브 도구가 디자인에 적합한 이유
Aider의 디자인 강점은 리포지토리와 모델 선택을 어떻게 다루는지에서 나옵니다. 하지만 모든 에이전트와 마찬가지로, 안목은 여전히 공급되어야 합니다.

모델에 구애받지 않음, BYOK: 당신의 작업과 예산에 가장 적합하게 디자인하는 모델 — Claude, GPT-4o, DeepSeek, Gemini — 을 고르고, 워크플로를 바꾸지 않고 자유롭게 전환하세요. 모두 자신의 키로 가능합니다.

Git 네이티브 반복: 자동 커밋은 모든 디자인 패스를 되돌릴 수 있는 검토 가능한 diff로 만들어, 추적되지 않는 편집 더미 대신 깨끗한 베이스에 대해 반복할 수 있습니다.

CONVENTIONS.md의 컨벤션: (읽기 전용으로 로드된) CONVENTIONS.md가 에이전트가 당신의 토큰, 컴포넌트, 규칙을 향하도록 하므로, 기본 룩이 아니라 브랜드에 맞춰 작업합니다.

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

교훈은 모든 에이전트가 가르치는 것과 같습니다: Aider는 기본적으로 안목이 없습니다. 제약 — 디자인 시스템, 미적 스킬, 구체적인 레퍼런스 — 을 주면 좋은 디자인을 만들어냅니다. OpenDesign는 바로 그러한 입력을 패키징하며, 그래서 둘이 잘 맞물립니다(자세한 내용은 아래).
디자인 작업을 위해 Aider를 처음부터 설정하기
설정 순서: 설치 → 자체 키 사용 → CONVENTIONS.md 로드 → 레퍼런스 추가 → 브라우저 검증 활성화.

디자인 규칙을 문서화하세요: 토큰, 프리미티브, 규칙을 CONVENTIONS.md에 넣고 읽기 전용으로 로드하여, 결과물이 일반적인 모습으로 기본 설정되지 않고 브랜드에 맞게 나오도록 하세요.

브라우저 검증을 추가하세요: 개발 서버를 실행하고 Aider가 실제 브라우저에서 렌더링하도록 하여, 빌드 통과만 확인하는 대신 여러 브레이크포인트에서 결과물을 확인하세요.

명령어와 버전별 세부 사항은 변경될 수 있으므로 현재 설정 섹션을 사용하세요.

# 1. Aider 설치 (권장 설치 프로그램; Python 3.8–3.13) python -m pip install aider-install aider-install # 또는 pipx 사용: pipx install aider-chat # 2. git 프로젝트에서 시작하고 자체 키 사용 cd your-project aider --model sonnet --api-key anthropic=<your-key> # 또는: aider --api-key openai=<your-key> (deepseek=, gemini=도 가능) # 3. 디자인 규칙을 읽기 전용 컨텍스트로 로드 aider --read CONVENTIONS.md # 4. 레퍼런스 이미지 추가 (비전 지원 모델에서) # 채팅 안에서: /add reference-desktop.png
이전 가이드의 과거 명령 예시입니다. 현재 구문은 연결된 공급업체 문서에서 확인하세요.
스크린샷을 UI로 만드는 워크플로
Aider를 활용한 가장 효과적인 디자인 루프는 레퍼런스 이미지를 실제로 작동하는 반응형 UI로 바꾸고, 일치할 때까지 반복하는 것입니다 — 비전 지원 모델을 사용해 결과물을 레퍼런스와 비교하고, 각 반복을 git에 커밋합니다.

가장 명확한 시각적 레퍼런스에서 시작하세요 — 그리고 하나의 대표 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.

프롬프트에 구체적으로 작성하세요. 모호한 프롬프트는 강력한 모델을 사용하더라도 일반적인 UI를 만들어냅니다.

디자인 시스템과 규칙을 CONVENTIONS.md에 유지하고, 토큰과 표준 프리미티브가 어디에 있는지 Aider에게 알려주세요.

개발 서버를 실행하고 실제 브라우저에서 렌더링된 결과를 확인하며 브레이크포인트에 맞게 크기를 조정하세요.

Aider가 구현 결과를 스크린샷과 비교하도록 하여 반복하세요 — 단순히 빌드되는지만 확인하는 것이 아닙니다.

비전 지원 모델에서 /add(또는 클립보드에서 /paste)로 이미지를 추가한 다음, 구체적인 제약 조건을 제시하세요:

프롬프트는 작고 집중적으로 유지하세요. Aider는 각 변경을 커밋하므로 좋은 반복은 유지하고, git(또는 /undo)으로 나쁜 변경은 되돌릴 수 있습니다 — 따라서 모든 반복이 깨끗한 기반 위에서 이루어집니다.

aider --model gpt-4o --read CONVENTIONS.md # 채팅에서: > /add reference-desktop.png > /add reference-mobile.png > React + Vite + Tailwind + TypeScript로 이 디자인을 구현하세요. CONVENTIONS.md의 기존 디자인 시스템 컴포넌트와 토큰을 재사용하세요. 간격, 레이아웃, 계층 구조를 맞추고 반응형으로 만드세요. 브라우저에서 렌더링해서 브레이크포인트 전반에서 레퍼런스와 일치할 때까지 수정할 부분을 알려주겠습니다.
이전 가이드의 과거 명령 예시입니다. 현재 구문은 연결된 공급업체 문서에서 확인하세요.
CONVENTIONS.md, 이미지, 명령어
세 가지 기능이 Aider를 지속적인 디자인 작업에 실용적으로 만들어 주며, 세 가지 모두 개방형 디자인 워크플로에 깔끔하게 맞아떨어집니다.

CONVENTIONS.md 컨텍스트: /read CONVENTIONS.md 또는 aider --read CONVENTIONS.md로 코딩 및 디자인 관례를 불러오거나, .aider.conf.yml에 read: CONVENTIONS.md를 설정해 실행할 때마다 불러올 수 있습니다. 이는 토큰, 프리미티브, 규칙을 위한 지속적인 저장소입니다.

이미지와 웹 페이지: 비전 지원 모델에서는 이미지 파일을 /add하거나 클립보드에서 /paste하여 Aider에 실제 참고 자료를 제공할 수 있습니다. /web 은 페이지의 텍스트를 채팅으로 스크레이핑해 추가 컨텍스트를 제공합니다.

채팅 내 명령어: 파일을 컨텍스트로 가져오는 /add, 읽기 전용 참조를 위한 /read, 마지막 커밋을 되돌리는 /undo 같은 명령어를 통해 터미널을 떠나지 않고 참조를 모으고 검증 루프를 실행할 수 있습니다.

이들은 이식 가능한 리포지토리 네이티브 기능입니다 — 프로젝트마다 다시 만드는 대신 OpenDesign가 오케스트레이션하도록 만들어진 바로 그런 종류입니다.
디자인을 위한 Aider와 Codex, Claude Code, Cursor, Gemini CLI 비교
디자인 작업에는 단일 승자가 없습니다 — 각 에이전트는 서로 다른 강점을 지니고 있으며, 숙련된 팀은 이들을 함께 쌓아 씁니다. 공정한 요약:

Aider — 오픈 소스, 모델에 구애받지 않는(BYOK), git 네이티브; 자동 커밋으로 모든 반복을 검토하고 되돌릴 수 있음 — 가장 잘 디자인하는 모델이 무엇이든 기존 코드베이스에서 리포지토리 네이티브 반복 작업

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

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

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

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

커뮤니티에서 반복적으로 나오는 평결은 취향은 인간에게서 나온다는 것입니다: 스킬, 참고 자료, 제약이 없으면 이들 모두 기본적으로 일반적인 미학으로 수렴합니다. 그것이 풀어야 할 진짜 문제입니다 — 그리고 그것은 모델 모양이 아니라 디자인 도구 모양입니다.

에이전트 — 디자인 강점 — 가장 적합한 용도
함정, 그리고 “AI 슬롭” 같은 느낌을 피하는 방법
AI가 생성한 디자인에 대한 가장 흔한 불만은 그것이 흔해 보인다는 점입니다 — 부드러운 그라데이션, 떠 있는 패널, 지나치게 큰 둥근 모서리, 극적인 그림자, 그리고 “AI가 이걸 만들었다고 소리치는” Inter와 보라색 분위기 말이죠. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 지침이 UI 문구로 새어 나오는 것이 있습니다. 이런 문제는 Aider에만 국한된 것이 아닙니다. 이는 어떤 에이전트든 선별된 디자인 컨텍스트 없이 실행될 때 벌어지는 일입니다.

미적 스킬 추가: 선별된 디자인 스킬은 에이전트가 기본 모양 대신 실제 방향성에 전념하도록 강제합니다.

실제 브라우저에서 검증: 여러 브레이크포인트에서 렌더링하고 자체 점검하여 모바일에서 레이아웃이 조용히 깨지지 않도록 하세요 — 비전을 지원하는 모델에서는 스크린샷을 다시 입력하세요.

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

CONVENTIONS.md에 규칙 인코딩: “히어로 카드 금지, 최대 두 개의 서체, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 매 실행마다 읽는 위치에 두세요.

모든 완화책이 에이전트에게 선별된 디자인 컨텍스트를 제공하는 것에 관한 것임을 주목하세요. 프로젝트마다 이 컨텍스트를 수작업으로 유지하는 것이 바로 OpenDesign가 제거하는 노동입니다.
OpenDesign 안에서 Aider로 디자인하기
OpenDesign은 위 워크플로가 계속 요구하는 오픈소스 디자인 레이어입니다. 이는 Aider를 퍼스트파티 어댑터로 취급하고, 선별된 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 Aider를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하며, 매번 수작업으로 조립할 필요가 없습니다. 둘 다 오픈소스이자 로컬 우선이어서 이 조합은 자연스럽게 맞습니다.

자신의 공급자 API 키(BYOK)로 인증하세요 — OpenAI, Anthropic, DeepSeek 또는 Gemini; 자격 증명은 사용자의 머신에 남아 있으며 우리를 통해 프록시되지 않습니다.

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

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

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

OpenDesign을 설치하고 Aider를 에이전트로 선택하세요.
OpenDesign은 Aider와 제휴 관계인가요?
아니요. OpenDesign은 독립적이며 Aider와 제휴 관계가 없습니다.