HQ디자인 총괄 진행자
요청을 받아 수집 → 디자인 정의 → 에셋 → 빌드 순으로 보내고, 각 단계가 일관되게 이어지도록 묶으며, 슬롭·금지사항 게이트를 지킵니다.
← Marketplace
No-slop Designer
by Hugo Tanaka
The team
One lead + 3 specialists
디자인 총괄 진행자레퍼런스 수집·디자인 정의 담당에셋 생성 담당결과물 빌드 담당
The members
Who does what
1레퍼런스 수집·디자인 정의 담당
의도를 검색어로 바꿔 핀터레스트에서 실제 레퍼런스를 이미지째 모으고, 그중 좋은 것을 골라 톤·색·레이아웃·철학을 design.md로 정리합니다.
Produces · design.md (톤·색·레이아웃·철학), 선별된 레퍼런스 이미지, 출처 매핑
2에셋 생성 담당
design.md 톤에 맞춰 아이콘·배경·일러스트 등 이미지 에셋을 생성합니다. Codex 이미지 → 나노바나나(Gemini) → 힉스필드 순으로 시도합니다.
Produces · 래스터 이미지 에셋, 에셋 매니페스트(용도·도구·프롬프트)
3결과물 빌드 담당
design.md와 생성 에셋으로 실제 HTML/CSS 결과물을 만듭니다. 웹·모바일 화면·카드뉴스·포스터를 anti-slop 규칙(SVG·이모지 금지)으로 빌드합니다.
Produces · HTML/CSS 결과물, 반응형·접근성·콘솔 점검 증거
How they work
How work flows
레퍼런스 수집·디자인 정의 담당에셋 생성 담당design.md + 선별 레퍼런스
에셋 생성 담당결과물 빌드 담당생성된 래스터 에셋 + 매니페스트
Best for
What it's good for
디자인을 잘 모르는데 '그냥 만들어줘' 했다가 밋밋한 결과만 받던 바이브 코더
핀테크 앱·SaaS 랜딩·카드뉴스·포스터를 빠르게 그럴듯하게 뽑아야 하는 1인 개발자/창업자
레퍼런스를 직접 모으고 무드보드 잡는 시간을 아끼고 싶은 사람
What's inside
What's in this agent
4 agents
Outputs
What it produces
톤·색·레이아웃·디자인 철학이 정리된 design.md (+ 참고 레퍼런스 출처)
design.md 톤에 맞춰 생성된 이미지 에셋 (SVG·이모지 없이 전부 래스터 이미지)
실제로 동작하는 HTML/CSS 결과물 (웹/모바일 화면/카드뉴스/포스터)
Prerequisites
Before you start
만들고 싶은 것 한 줄 (예: '핀테크 앱 온보딩', '런칭 포스터')
정해진 게 있다면 브랜드 색·폰트·참고 URL
이미지 에셋 생성에 쓸 도구 키가 있으면 더 좋아요 (없으면 Codex 이미지 등 가능한 것으로 폴백)
Safety
What it can touch
Where a human approves
수집 레퍼런스는 분석용이며 재배포·1:1 복제하지 않습니다
유료 이미지 도구 대량 사용 전에 가능한 도구·키를 알리고 확인합니다
SVG·이모지 금지, 다중 뷰포트·콘솔·접근성 증거 없이는 완료로 보지 않습니다
Cost guardrails
핀터레스트 수집은 본인 세션·소량 분석 캐시로 제한합니다
이미지 생성 도구 비용은 도구·키 가용성을 표시하고 대량 전 확인합니다
Access
Files: scoped
Network: none
External API: yes
Be careful with
수집한 레퍼런스는 스타일·원리 추출용이며 그대로 재배포하지 않습니다(원작 1:1 복제 요청은 거절)
유료 이미지 도구는 비용이 들 수 있어, 대량 생성 전에 어떤 도구·키가 가능한지 알려주고 확인합니다
키 값·비밀 정보는 결과물에 담지 않고 환경에서 참조만 합니다
Safety
Inspect everything before it runs
A security scan runs before publish or install, and Agentlas never hosts or proxies models — it runs on your own account and keys.