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

docs-product-landing.html · 1440pxsearch · analyticssearch · analytics

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

   사용 중인 컴퓨터에 맞는 패키지를 선택하여 설치하고 앱을 여십시오.

   OpenDesign 다운로드

   체크포인트

   데스크톱 앱이 열립니다. 이미 설치되어 있습니까? 다음 단계로 이동하십시오. 다시 다운로드할 필요는 없습니다.
2. 2

   Trae CLI 연결 준비하기

   설치된 버전의 Trae CLI 안내를 따르십시오. 본인의 LLM 제공업체 키(BYOK)로 인증하며, 자격 증명은 사용자의 기기에 남습니다.

   Trae 문서

   # 1. Get Trae CLI (trae-agent) from source — needs uv
   git clone https://github.com/bytedance/trae-agent.git
   cd trae-agent
   uv sync --all-extras
   source .venv/bin/activate
   
   # 2. Authenticate by pointing it at your LLM provider key
   #    set it in the environment (or a trae_config.yaml file)
   export OPENAI_API_KEY=...        # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.

   게시된 가이드의 Trae CLI 설정 안내에서 발췌한 내용입니다. 최신 명령어는 공급업체 문서를 확인하십시오.

   체크포인트

   의도한 에이전트와 계정을 확인합니다. 사용할 수 없는 경우, 더 큰 작업을 시도하기 전에 호환성을 확인합니다.
3. 3

   작은 Trae CLI 작업 하나 실행하기

   수정 한 번을 포함한 전체 루프를 판단할 수 있도록 작은 브리프를 사용하십시오.

   시작 브리프 복사

   프로필 폼과 저장 확인이 포함된 설정 화면을 만드십시오. 제 디자인 규칙을 사용하십시오. 데스크톱과 모바일 너비에서 확인하십시오.

   체크포인트

   결과를 열어 저장 상태를 테스트하고 구체적인 변경 사항 하나를 요청합니다. 생성된 파일은 검토의 끝이 아니라 시작입니다.

소스에서 OpenDesign을 실행하려면 대신 기술 퀵스타트를 따르십시오.

1. 1

   디자인 브리프

   평이한 언어로 세 줄에서 여섯 줄 사이로 작성합니다. 대상 사용자, 화면의 목적, 플랫폼을 명시하십시오.

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

   New project · PromptTrae CLI

   You

   Design the Docsmith landing page: hero, search demo, three benefits, logos. Check each pass in a real browser at 1440 and 390.

   Trae CLI

   Understood. Should the search demo be interactive or a static frame with a focus state? The brief says live-looking.
2. 2

   디자인 제약 조건

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

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

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   인터페이스 생성

   Trae CLI는 독립적인 HTML 파일을 작성합니다: 레이아웃, 스타일, 인터랙션, 안정적인 훅(hook).

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

   Project files3 files

   • docs-product-landing.htmlnew
   • trae_config.yamlbound
   • DESIGN.mdread
4. 4

   미리보기

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

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

   Preview · 390pxComment mode

   Comment on · demo

   Static frame with a real focus state is enough; no fake typing animation.

   Comment on · logos

   Logo row scrolls on the phone; do not shrink logos below 24px.
5. 5

   수정 및 검증

   프리뷰의 요소를 가리켜 변경을 요청합니다. 모든 수정본은 새 파일로 생성되며, 아무것도 조용히 덮어씌워지지 않습니다.

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

   Verification · v23 of 4

   • ✓Demo has a focus state
   • ✓Logo row scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Browser pass at both widths — checked by you