mickzijdel/design-process

디자인 프로세스

모델은 놀라운 창의력을 가지고 있지만, 그 창의성은 훈련 방식에 의해 억압됩니다. 모델이 디자인을 만들 때 토큰 하나하나를 채워 나가며, 디자인 결정(어떤 색상을 사용할지, 요소를 어떻게 배치할지)을 내려야 할 때마다 모든 사람을 가장 만족시킬 가능성이 높은 토큰으로 채웁니다. 그 결과 디자인은 반복적이고 밋밋해집니다. 바로 디자인 바이 커미티의 극단적인 사례입니다. 훌륭한 디자인은 느낌에서 시작하여 감정적 반응을 일으키는 것을 목표로 합니다. 규칙을 과감히 깨고 기억에 남고 예상치 못한 선택으로 사용자를 즐겁게 합니다. 이는 매 단계 가장 예측 가능한 선택을 하는 것과 정반대입니다.

이 스킬은 AI 에이전트를 위해 재구상된 디자인 프로세스로, 더블 다이아몬드에서 느슨하게 영감을 받았습니다: 발견: 다양한 방향을 탐색하고 대담한 디자인 브리프를 작성하여 평균을 넘어서는 새로운 아이디어를 발견합니다; 정의: 익숙한 패턴을 뛰어넘고 모델들을 함께 연결하여 개별적인 디자인 정체성을 정의합니다; 전달: 조잡한 거친 부분을 다듬어 멋진 최종 결과를 전달합니다. (Anshu Chimala의 "How to turn your AI into a world-class designer"에서 각색되었으며, 가장 높은 평점을 받은 공개 디자인 스킬의 반복 규칙이 references/anti-slop.md에 통합되었습니다.)

모든 단계 위에는 두 가지 규칙이 있습니다:

• 브리프가 우선입니다. 사용자가 방향, 글꼴, 팔레트, 시대를 지정했다면, 그것이 "절대 기본값으로 사용하지 말 것" 목록에 있더라도 정확히 따라야 합니다. 명확한 브리프를 자신의 취향으로 바꾸는 것은 실패입니다. 목록은 브리프가 특정 축을 자유롭게 남겨둔 경우에만 적용됩니다.
• '틸(tell)'은 이유 없이 사용된 기본값이지, 나타난 패턴이 아닙니다. 의도로 판단하십시오. 이것이 틸인지 결정인지 확실하지 않은 경우 결정으로 취급하십시오.

단계

1. 게이트: 이것은 무엇이며, 누구를 위한 것인가? 각각 한 줄: 제품, 대상, 페이지가 존재하는 하나의 행동, 플랫폼, 모든 브랜드 제약 조건. 사용자가 아무 것도 제공하지 않았다면 한 번 질문하십시오(AskUserQuestion) — 여러분이 지어낸 브리프는 평균적인 브리프일 뿐입니다. 주제의 산업, 재료 및 고유한 표현 방식에서 독특한 선택이 나옵니다. 같은 메시지에서 이미지를 결정하십시오: 생성 경로를 확인하십시오(.env.agents의 키, fnox, fal/replicate MCP 서버, Codex CLI, 내장 이미지 도구; define.md 참조). 없음 → 하나를 요청하거나 실제 자산(제품 스크린샷, 사진)을 요청하십시오. 답변을 브리프에 기록하십시오. 타입 전용 페이지는 모델이 기본적으로 선택하는 것이 아니라 사용자가 내리는 결정입니다.

2. 발견 — 깊이 가기 전에 넓게 가십시오. 모델 외부에서 다양성을 얻으십시오. 무작위 문자열(String Seed of Thought)로 방향을 시드하거나 사용자가 가져온 구체적이고 독특한 영감을 사용하십시오. 사용자가 아무 것도 없으면 디자인 언어의 광범위한 목록을 생성하고 사용자가 반응하도록 하십시오. 구성과 계층 구조가 시드된 영감 자체보다 더 중요할 때는 텍스트 전용 브리프 대신 먼저 이미지 모델로 화면을 목업하고 그로부터 빌드하십시오. 코드를 작성하기 전에 선택한 방향을 디자인 브리프로 작성하십시오. 여러 방향이 필요한 경우 → 여러 브리프, 여러 개의 일회용 변형, 각각 분리됨. → references/discover.md

3. 브리프에 맞춰 첫 번째 버전을 빌드하십시오. 방향에 강하게 헌신하십시오: 실제 타이포그래피(이 주제에 맞게 선택되고 로드 및 확인됨), 드물게 사용되는 하나의 악센트, 히어로 → 세 가지 기능 → CTA → 푸터가 아닌 전체 페이지 모양, 방문자가 기억할 시그니처 요소, 모든 상태가 설계됨. 작업하면서 references/anti-slop.md의 "절대 기본값으로 사용하지 말 것" 표와 비교하여 선택 사항을 확인하고, 첫 번째 스크린샷 전에 6축 자체 점검을 실행하십시오.

4. 정의 — 비평가 루프. 페이지를 스크린샷으로 찍으십시오(데스크탑과 폰, 파일로). 사용 가능한 가장 강력한 모델에서 디자인 비평가 서브 에이전트를 새로운 컨텍스트로 보내십시오. 스크린샷과 의도된 미적 감각만 제공하고(절대 코드나 대상 점수는 제공하지 않음). 스튜디오 수준의 기준에 비해 부족한 점을 지적하거나, 더 나아가 실제 참조 디자인과 블라인드 비교하여 부족한 점을 지적하고 /10 점수를 매깁니다. 가장 큰 격차를 수정하고, 다시 스크린샷을 찍고, 동일한 프롬프트로 다시 실행하십시오. 루프는 제한적입니다: 기본 2라운드, 그 다음 기준 충족 / 변경 사항이 없는 라운드 / 예산 소진 중 첫 번째 조건에서 중단하고 사용자에게 보여줍니다. 점수 임계값만으로 종료할 수 없습니다; 공개된 루프 중 점수만으로 종료된 사례는 없습니다. → references/define.md, 프롬프트는 references/critic-prompt.md

5. 정의 — 실제 자산. 시각적 요소(히어로, 기능 아트, 텍스처, 일러스트레이션 슬롯)가 있는 모든 페이지는 기본적으로 생성되거나 실제 이미지를 사용하며, 그라데이션, 도형 또는 CSS 패턴을 사용하지 않습니다. 에이전트는 지시하지 않으면 이 단계를 건너뛰며, 코드로 그린 장식은 들키기 쉽습니다. 모션이 필요한 경우 비디오(크로마키 루프, 키프레임 보간 전환)를 사용합니다. 키는 gitignored된 env 파일이나 fnox에 저장하며, 소스 코드에 절대 저장하지 않습니다. 게이트에서 경로를 찾지 못했고 사용자가 타입 전용을 선택한 경우 → 핸드오프 시 알려진 격차로 명시하고, 히어로가 타이포그래피와 구성만으로 지탱될 수 있도록 디자인하십시오. → references/define.md

6. 전달 — 빼고, 확인하십시오. 모든 요소를 살펴보며 그것이 없으면 무엇이 깨지는지 질문하십시오; 글로우, 그라데이션, 중복 레이블, 내용 없는 복사본, 네이티브보다 나쁜 사용자 정의 컨트롤, 템플릿이 넣은 섹션을 제거하십시오. 그런 다음 반응형, 다크/라이트, accessibility 감사, 성능 및 각 중단점에서의 실제 브라우저 스크린샷을 확인하십시오. → references/deliver.md

7. 전달 — 음성 패스. 표시되는 모든 문자열(헤드라인, 리드, 버튼, 빈 상태 및 오류 상태)에 writing:voice-profile 스킬을 실행하여 카피가 모델의 기본값이 아닌 사용자의 어조로 읽히도록 하십시오. 프로필이 없어도 기본 규칙과 writing:humanizer가 여전히 적용됩니다. → references/deliver.md

flowchart LR
    G[게이트: 제품, 대상,
한 가지 행동] --> D1[발견:
시드 또는 독특한 프롬프트]
    D1 --> B[디자인 브리프]
    B --> V[브리프에 맞춰 v1 빌드]
    V --> S[스크린샷]
    S --> C{비평가 /10
새 컨텍스트}
    C -- "격차" --> F[가장 큰 격차 수정]
    F --> S
    C -- "9+ 또는 정체" --> A[개성이 부족한 곳에
실제 이미지/비디오]
    A --> P[전달: 빼고,
그 다음 확인]
    P --> W[모든 카피에
음성 패스]

어떤 방식으로 할지

모든 디자인 작업이 전체 루프를 필요로 하는 것은 아닙니다. 디자인을 할지 말지가 아니라 방식을 선택하십시오:

작업	수행할 작업
컴포넌트, 설정 패널, 문서 페이지, 작은 리스타일	1~3단계 + 한 번의 확인: 완전히 빌드하고 데스크탑과 모바일 스크린샷을 함께 찍고, 스크린샷에 나타난 모든 것을 한 번에 수정하고, 한 번 확인하고 중단
랜딩 페이지, 히어로 화면, 사용자가 "평범하다"고 말하거나 돋보이게 하고 싶어 하는 모든 것	전체 루프, 1~6단계, 위와 같이 제한된 비평가
사용자가 선택할 수 있는 여러 디자인을 원할 때	2단계를 세 번 이상 별도의 변형으로 수행하고, 각각 하나의 스크린샷을 찍고, 사용자가 선택하게 한 후 선택된 디자인으로 3단계부터 계속

빠른 참조

증상	조치
매번 실행 결과가 비슷함(보라색 그라데이션, 히어로 분할)	무작위 문자열로 시드하거나 독특한 영감을 지정 — discover.md
"독특하게/무작위로"가 도움이 되지 않음	요청해서 무작위가 될 수 없음; 다양성은 모델 외부에서 와야 함
어떤 방향으로 갈지 전혀 모르겠음	광범위한 목록 프롬프트 → 사용자 반응 → 구체화 → 프롬프트 빌드
레이아웃/계층 구조가 어색하지만 방향은 맞음	이미지 모델로 화면을 목업하고, 그것과 작성된 브리프를 함께 사용하여 빌드 — discover.md
에이전트가 자신의 작업에 대해 계속 "좋아 보인다"고 말함	비평가 서브 에이전트, 새 컨텍스트, 스크린샷만, 매 라운드 동일한 프롬프트
비평가가 절대 만족하지 않고 토큰이 소모됨	먼저 2라운드로 제한; 점수가 정체되면 중단; 기준을 구체적으로 설정(실제 참조와 블라인드 비교)
기본값이 아닌 선택이 항상 동일한 기본값이 아님(Space Grotesk, 크림 + 세리프)	2차 기본값도 여전히 기본값임; 순환 — anti-slop.md
개성이 CSS 그라데이션과 블롭에서 나옴	실제 이미지 생성; 셰이더/3D는 이미지와 함께만 사용
이미지 생성 키가 없음	게이트에서 요청하거나 사용자로부터 실제 자산을 받음; 타입 전용으로 배송하는 것은 사용자의 명시적 선택일 때만
복잡해 보이고 "프리미엄"이 없음	제거 패스 — deliver.md
코드 리뷰에서는 괜찮아 보임	스크린샷을 볼 때까지 완료되지 않음

완료 조건

• 작성된 브리프가 존재하고 배송된 디자인이 여전히 일치해야 합니다.
• 브리프에서 제품 이름을 제거하십시오: 누군가 페이지가 무엇을 위한 것인지 여전히 알 수 있어야 합니다.
• 비평가가 새 컨텍스트에서 9+ 점수를 받았거나(또는 블라인드 비교에서 승리), 루프가 제한에 도달하고 사용자가 현재 상태를 수락했습니다.
• "절대 기본값으로 사용하지 말 것" 표의 항목 중 브리프에 이유가 기록되지 않은 것은 없습니다.
• 모든 시각적 슬롯에 생성되거나 실제 이미지가 있거나, 브리프에 사용자의 타입 전용 결정이 기록되어 있고 핸드오프 시 격차로 명시되어 있습니다.
• 남아 있는 모든 요소에는 역할이 있습니다. 카피는 제품이 하는 일만 말합니다.
• 폰 및 데스크탑 너비, 라이트 및 다크 모드의 스크린샷을 확인했으며 accessibility 감사가 깨끗합니다.
• 표시되는 모든 문자열이 음성 패스를 거쳤습니다. 카피는 사용자가 쓴 것처럼 읽히며 음성 감사에서 금지된 단어가 보고되지 않았습니다.