Codex
Codex로 인터페이스를 디자인하기 위한 워크플로우, 플러그인, 슬라이드입니다.
에이전트 디자인 디렉터리
당신의 코딩 에이전트.
더 나은 디자인
워크플로우.
22개 코딩 에이전트를 위한 워크플로우 가이드, 설정 노트, 디자인 리소스를 통해 이미 사용 중인 도구로 브리프를 신중하게 설계된 인터페이스로 전환할 수 있습니다.
22개 에이전트 가이드, 하나의 워크스페이스.
› Use the reference. Build the landing page.
Reading DESIGN.md · binding tokens…
Writing landing-page.html ✓
Your agentCodexClaude CodeOpenCode+19
레퍼런스 하나. 당신의 에이전트. 그리고 오직 당신만의 것.
예시용 워크플로이며, 실제 제품 화면이 아닙니다.
디자인 워크플로우
코딩 에이전트 디자인 워크플로우의 세 가지 역할
코딩 에이전트는 지시를 코드로 전환합니다. 디자인 워크플로우는 그 코드를 사용 가능한 인터페이스로 만드는 참조, 제약, 검토를 더합니다.
디자인 에이전트란 무엇인가- 01당신의 코딩 에이전트
- 프로젝트를 읽고, 변경을 수행하고, 피드백에 응답합니다. 이미 사용 중인 도구를 그대로 유지하십시오.
- 02OpenDesign
- 브리프, 디자인 리소스, 시각적 검토를 위한 워크스페이스입니다. 각 에이전트 가이드에서 설정 방법을 설명합니다.
- 03당신의 판단
- 참조를 선택하고, 일관되게 유지해야 할 항목을 정의하고, 실제 화면에서 결과를 확인하십시오.
코딩 에이전트 가이드
22개 코딩 에이전트를 위한 디자인 워크플로우 가이드
이미 사용 중인 도구부터 시작하십시오. 각 가이드는 해당 에이전트의 역할, 준비할 사항, 다음 단계를 다룹니다. 이 목록은 순위가 아니라 디렉터리입니다.
22 개 가이드
Claude Code
첫 브리프부터 최종 리뷰까지, Claude Code를 활용한 프런트엔드 디자인 워크플로입니다.
DeepSeek Harness
하네스 설정, 워크플로에서의 역할, 그리고 활용 가능한 디자인 리소스를 다룹니다.
OpenCode
선택한 도구와 모델 제공업체를 중심으로 구성된 디자인 워크플로입니다.
Grok
Grok Build
Grok Build를 활용한 설정, 사전 요구 사항, 첫 시각 디자인 작업을 다룹니다.
Cursor
Cursor Agent
Cursor 에디터와 디자인 워크플로가 하나의 프로젝트에서 어떻게 결합되는지 다룹니다.
DeepSeek
DeepSeek TUI
DeepSeek TUI, 그 사전 요구 사항, 그리고 DeepSeek Harness와의 차이점을 다룹니다.
Hermes
Hermes 워크플로를 위한 디자인 리소스, 확장 옵션, 사전 요구 사항을 다룹니다.
Antigravity
먼저 설정을 진행한 뒤, Antigravity를 활용한 프런트엔드 디자인 및 리뷰 워크플로를 다룹니다.
Kimi
Kimi CLI
Kimi CLI로 첫 디자인 작업을 시작하기 전에 준비해야 할 입력값, 컨텍스트, 설정을 다룹니다.
Qwen
Qwen Code
Qwen Code, 모델 제공업체, 디자인 워크플로가 서로 어떻게 연결되는지 다룹니다.
Trae CLI
Trae CLI 설정과 인터페이스 디자인을 위한 시작점을 다룹니다.
Qoder
Qoder CLI
Qoder CLI 설정과 이를 보완하는 디자인 워크플로를 다룹니다.
Mistral Vibe
Mistral Vibe CLI
디자인 도구로서의 Mistral Vibe CLI를 다루며, 일반적인 vibe 디자인과는 구분됩니다.
Gemini
Gemini CLI
설정부터 리뷰까지, Gemini CLI를 활용한 레퍼런스 기반 UI 워크플로입니다.
Copilot
GitHub Copilot CLI
GitHub Copilot CLI를 활용한 인터페이스 디자인 워크플로에서의 리포지토리 컨텍스트와 리뷰를 다룹니다.
Kilo
Kilo를 활용한 디자인을 위한 구성, 모드, 실용적인 시작점을 다룹니다.
Aider
Aider로 기존 코드에서 시작하여 신중하게 한 가지 변경을 수행하고 그 차이를 검토합니다.
Pi
Pi를 위한 설정, 확장 기능, 디자인 리소스를 다룹니다.
Kiro
Kiro CLI
Kiro CLI 워크플로에서 요구 사항과 인터페이스 결정이 어디에 위치하는지 다룹니다.
Devin
Devin for Terminal
Devin for Terminal을 활용하여 작업을 정의하고, 핸드오프를 설정하고, 인터페이스를 검토하는 과정을 다룹니다.
Reasonix
DeepSeek Reasonix
DeepSeek Reasonix로 프로젝트와 그 관계를 이해하고 시작점을 파악하는 방법을 다룹니다.
일치하는 가이드가 없습니다
다른 이름을 입력하거나 전체 22개 가이드로 돌아가십시오.
가이드가 호환성을 보장하지는 않습니다. 연결하기 전에 해당 페이지에서 도구, 인증 및 플랫폼 요구 사항을 확인하십시오.
데스크톱 앱
OpenDesign을 다운로드하고 코딩 에이전트를 연결하십시오
OpenDesign을 다운로드하고 에이전트의 설정 가이드를 따른 다음, 첫 번째 프로젝트에 참고 자료를 가져오십시오.
- 01
OpenDesign 다운로드
macOS 또는 Windows용 빌드를 선택하고 앱을 여십시오.
- 02
에이전트 연결하기
위 가이드에서 사전 요구 사항을 확인하고 설명된 설정을 완료하십시오.
- 03
첫 작업 시작하기
아래 리소스에서 참고 자료, 짧은 브리프 또는 템플릿을 가져오십시오.
디자인 리소스
코딩 에이전트를 위한 디자인 리소스
에이전트가 작업에 결합할 수 있는 재사용 가능한 워크플로, 브랜드 토큰 및 시작점입니다.
자주 묻는 질문
코딩 에이전트, 모델, 스킬 설명
이 워크플로에는 새로운 코딩 에이전트가 필요하지 않습니다. 다음 답변은 관련 용어와 페이지를 다룹니다.
에이전트를 전환해야 합니까?
아닙니다. 현재 사용 중인 도구의 가이드부터 시작하십시오. 설정과 사용 가능한 기능은 해당 도구와 버전에 따라 다르며, 디렉터리는 이를 순위화하지 않습니다.
에이전트, 모델, 스킬은 같은 것입니까?
아닙니다. 모델은 추론을 담당하고, 에이전트는 작업을 수행하며, 스킬은 재사용 가능한 작업 방식을 제공합니다. 스킬 디렉터리는 이 마지막 계층을 정리합니다.
디자인 도구를 비교하고 있습니다. 어디로 가야 합니까?
대체 및 공존 관련 질문에는 도구 비교를 이용하십시오. 이 에이전트 가이드는 이미 사용 중인 도구로 작업하는 방법을 설명합니다.
첫 번째 작업은 무엇이어야 합니까?
작은 인터페이스 하나를 선택하고 참고 자료를 준비하십시오. 확장하기 전에 레이아웃, 하나의 인터랙션, 좁은 화면을 확인하십시오. 템플릿이 시작점을 제공할 수 있습니다.
시작하기
이미 사용 중인 코딩 에이전트로 시작하십시오
