OpenDesign 디자인 시스템 프로토타입 루프 with coding agents

README 링크에서 발견 · 2 days ago

에이전트가 한 프로젝트에서 UI를 구축하고 다듬는 브리프-투-프로토타입 워크플로우.

What they did

팀은 OpenDesign 워크스페이스에서 작성된 브리프에서 시작한 뒤, 프로젝트의 디자인 시스템, 템플릿, 스킬을 지정한 코딩 에이전트(Cline과 Codex)에게 빌드를 넘겼습니다. 원샷 생성 대신 모든 것을 하나의 프로젝트에 유지했습니다. 에이전트가 첫 프로토타입을 만들면 팀이 공유 워크스페이스에서 검토하고, 피드백을 동일한 에이전트 세션에 다시 전달해 새롭고 일관성 없는 초안이 아니라 기존 디자인 토큰과 컴포넌트에 맞춰 개선이 이루어지도록 했습니다. Plugins 페이지를 사용해 특정 작업(브랜드 에셋 검사, 레이아웃 패스)에 'Try it'으로 공식 스킬을 실행했고, All projects 뷰를 다시 방문해 디자인 시스템, 미디어, 프로토타입을 나란히 비교했습니다. 각 반복 전에 디자인 시스템 페이지를 사용해 브랜드 아이덴티티, 로고, 타이포그래피를 확인함으로써 에이전트가 따를 구체적인 제약 조건을 갖도록 했습니다.

How it went

일관성을 잃지 않고 여러 차례에 걸쳐 다듬을 수 있는, 디자인 시스템에 부합하는 일관된 프로토타입을 만들었으며, 스킬과 템플릿, 디자인 시스템이 개방적이고 유연하기 때문에 워크플로를 계속 검사할 수 있었습니다. 완성도는 내부 리뷰와 이해관계자 피드백을 받기에 충분했지만, 브랜드의 미묘한 차이와 최종 시각적 QA에 대해서는 여전히 사람의 판단이 필요한 루프였습니다.

Worth knowing

실제 디자인 시스템과 브리프가 있어야 유용하다. 그것들이 없으면 에이전트는 일반적인 결과물 쪽으로 흘러간다. 에이전트 품질은 기반 모델과 API 접근에 달려 있으며, README는 설정 세부 사항보다 홍보성 플랜 정보에 치우쳐 있다. 스킬과 템플릿을 자신의 프로세스에 맞게 조정할 것을 예상하고, 리뷰 패스에 쓸 시간을 확보하라.

Wiring

OpenDesign(Apache 2.0)을 설치하고 워크스페이스를 엽니다. 브랜드 자산, 로고, 타이포그래피를 에이전트가 사용할 수 있도록 디자인 시스템을 생성하거나 가져옵니다. 브리프를 프로젝트 파일로 추가한 다음, API 액세스 권한이 있는 코딩 에이전트(Cline 또는 Codex)를 프로젝트에 연결합니다. Plugins 페이지에서 'Try it'을 통해 관련 스킬을 실행하여 작업을 시드합니다. 에이전트는 동일한 프로젝트 디렉터리에 프로토타입 파일을 작성합니다. 공유 워크스페이스에서 검토하고, 피드백을 파일에 기록한 뒤, 동일한 에이전트 세션에 다시 프롬프트하여 개선 사항이 기존 컴포넌트에 적용되도록 합니다. All projects를 사용하여 반복 버전을 비교하고 디자인 시스템, 미디어, 프로토타입을 그룹으로 유지합니다.

Try it yourself

I can't complete this request as specified. I don't have access to your repository, so I can't read the design system, templates, skills, `docs/brief.md`, or `docs/feedback.md`. I also can't build files, create a project folder, or produce a clickable prototype — I can only respond with text in this conversation.

Here's what I *can* do, and how we could proceed:

**What I can help with (if you paste the content in):**
- **Interpret the brief** — once you share `docs/brief.md`, I can break it into screens, flows, and states.
- **Map skills/templates to screens** — if you paste the list of skills and templates (names + short descriptions), I can propose which one applies to each screen and why.
- **Translate tokens into concrete values** — paste your color/type/spacing tokens and I'll produce a spec sheet (CSS variables, Tailwind config, or a token table) you can drop into the prototype.
- **Draft the prototype structure** — HTML/CSS/JS or React scaffolding for each screen, following your tokens, that you then assemble in your project folder.
- **Write the changelog** — once you share `docs/feedback.md`, I can draft a short "what I'd refine next" changelog keyed to the review notes.

**What I can't do:**
- Access your repo or files.
- Create or save a project folder.
- Produce a runnable clickable prototype directly — I can only give you the code as text for you to save.

If you paste the brief, the token definitions, the skills/templates list, and the feedback notes, I'll turn them into a screen-by-screen plan with the skill/template mapping, token-exact specs, and starter code — plus the changelog after the first pass.

Source

English