웹 디자인

웹 디자인은(는) 무엇을 하나요?

생성형 UI는 예측 가능한 방식으로 실패합니다. 같은 글꼴, 같은 보라색 그라데이션, 카드 안의 카드, 가운데 정렬 히어로에 세 개의 아이콘 타일, 관점 대신 장식. 이 스킬은 기본값을 결정으로 대체한 다음 렌더링된 결과를 확인합니다.

<skill-dir>는 이 스킬 자체의 폴더를 의미합니다. 프로젝트 루트에서 스크립트를 실행하여 출력물이 설치된 스킬이 아닌 프로젝트에 생성되도록 합니다.

1. 디자인 컨텍스트 로드 또는 생성

DESIGN.md(및 docs/DESIGN.md, BRAND.md) 파일을 찾습니다. 존재한다면 UI를 건드리기 전에 읽습니다. 파일의 토큰과 규칙이 당신의 취향보다 우선합니다. 파일이 존재하지 않고 작업이 사소한 수정 이상이라면, 코드(CSS/테일윈드 설정의 실제 토큰, 실제 글꼴, 실제 컴포넌트)를 읽어 템플릿에서 하나를 생성합니다. 추론한 모든 것은 추론됨으로 표시합니다.

세션이 지속 가능한 결정(새로운 토큰, 기각된 방향과 그 이유)을 내릴 때마다 DESIGN.md를 업데이트합니다. 이렇게 하면 다음 세션이 기본값으로 퇴보하는 것을 방지합니다.

2. 방향 결정

먼저 모드의 이름을 정합니다. 모드는 표면이 얻는 대담함의 정도를 설정합니다.

• Persuade(랜딩, 가격, 출시 페이지): 디자인이 곧 제품입니다. 하나의 관점에 전념합니다.
• Operate(앱 UI, 대시보드, 설정, 양식): 정밀함과 절제입니다. 친숙한 패턴은 그 자리를 얻습니다. 브랜드는 세부 사항에 살아 있습니다.
• Read(문서, 기사, 변경 로그): 이해를 위한 구조, 그런 다음 읽는 것을 즐겁게 만듭니다.
• Experience(포트폴리오, 쇼케이스, 게임): 작업이 주도합니다. 인터페이스는 뒤로 물러납니다.

개선인가 리디자인인가? 개선은 현재의 정체성, 복사본 및 동작을 유지하고 그 안에서 개선합니다. 리디자인은 제품의 사실과 기능은 유지하지만 외관을 완전히 교체합니다. 버리려는 디자인을 다듬는 모호한 타협을 하지 마십시오.

그런 다음 코드를 작성하기 전에 두 번의 패스로 계획합니다.

첫 번째 패스, 계획:

• 잡: 누가 여기 있으며, 그들이 먼저 필요로 하는 것, 다음 행동.
• 팔레트: 악센트가 허용되는 위치와 함께 네에서 여섯 개의 명명된 16진수 값.
• 타이포그래피: 글꼴과 그 역할, 스케일, 숫자.
• 레이아웃: 한 문장과 대략적인 ASCII 와이어프레임, 정렬 명시.
• 하나의 대담한 요소: 기억에 남는 단일 요소. 그 주변의 모든 것은 조용히 유지됩니다.

두 번째 패스, 일반성 테스트: 이 계획을 비슷한 어떤 브리핑에도 만들었을까요? 현재의 AI 기본 스타일(시간에 따라 변함)에 대해 확인합니다. 크림 배경+세리프 디스플레이+테라코타 악센트, 거의 검은색+하나의 산성 악센트, 브로드시트 가는 선이 오늘날의 클러스터이며, 작년의 보라색 그라데이션과 같습니다. 계획의 일부가 브리핑에서 요청하지 않은 기본값과 일치하면 이를 교체하고 무엇을 변경했는지, 왜 변경했는지 기록합니다. 브리핑 자체의 단어가 항상 우선하며, 이러한 스타일 중 하나를 요청하는 경우도 포함됩니다.

주제의 세계에서 선택하십시오: 그 재료, 장소, 인공물 및 어휘. 개 산책자의 사이트와 분석가의 대시보드는 팔레트를 교환할 수 없어야 합니다.

사용자가 참조를 제공할 때 제대로 연구합니다: 참조 연구는 라이브 사이트에서 계산된 스타일을 가져와 표면 장식이 아닌 관계(스케일, 리듬, 밀도)를 차용합니다.

3. 제품 시스템 내에서 구축

• 기존 토큰, 프리미티브, 컴포넌트를 사용합니다. 일회성 값보다는 토큰을 추가합니다.
• 실제 콘텐츠만: 실제 이름, 긴 이름, 실제 숫자, 빈 데이터. 절대 로렘 입숨을 사용하지 말고, 레이아웃을 채우기 위해 지표를 만들어내지 마십시오.
• 화면과 함께 상태를 설계합니다: 로딩, 빈 상태, 오류, 성공, 비활성화, 오버플로. 깨진 것처럼 보이는 빈 상태는 버그입니다.
• 할 말이 없는 것은 숨깁니다. 0행, 0잔액, 빈 차트는 정직한 빈 상태가 되거나 사라집니다. 0의 벽은 없습니다.
• 헤더는 레이블입니다. 헤더를 다시 설명하는 부제목은 삭제됩니다.
• 모바일은 자체 레이아웃입니다: 우선순위에 따라 재정렬하고, 데스크탑이 그리드를 사용하는 곳에서는 수평 스냅 레일을 사용하며, 100vh 대신 dvh/svh를 사용하고, 입력은 16px 이상, 터치 대상은 44px입니다.

구축하는 동안 장인 수준을 유지하며, 마지막 패스로 미루지 않습니다. 애니메이션이나 전환이 있으면, 먼저 모션을 읽습니다: 하나의 조정된 순간, 작은 타이밍 시스템, 인터럽션에 안전하고, 축소 모션 처리, 필름스트립처럼 감상.

4. 살펴보기

node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --full          # 390 + 1440, 라이트 + 다크
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --widths 320,390,768,1440 --themes light
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --click '[aria-controls=menu]' --widths 390

모든 스크린샷을 열고 실제로 읽습니다. 그런 다음 다음 순서대로 진행합니다:

1. 첫인상: 눈을 가늘게 뜹니다. 가장 중요한 것이 가장 두드러집니까? 3초 안에 이것이 무엇이고 무엇을 해야 하는지 알 수 있습니까?
2. 깨짐: 오버플로, 잘린 텍스트, 겹치는 레이어, 고립된 단어, 보이지 않는 포커스, 다크 모드 대비. shoot.mjs가 여러 가지를 플래그합니다. 그 출력을 확인하십시오.
3. 계층과 리듬: 제목 아래보다 위에 더 많은 공간; 그룹 내 일관된 간격, 그룹 간 더 큰 간격; 보기당 하나의 기본 동작.
4. 일반적: deslop의 스캔을 실행하거나 안티패턴을 확인합니다. 로고를 제거한 스크린샷에서 낯선 사람이 이 제품을 짐작할 수 있습니까?
5. 정교함: 2배율에서 픽셀 단위 정렬, 아이콘과 텍스트의 광학적 균형, 열에서 표 형식 숫자.

가장 심각한 문제를 수정하고, 다시 스크린샷을 찍고, 반복합니다. 같은 너비와 상태의 참조와 비교합니다. 새로운 작업의 경우 두세 번의 전체 루프가 일반적입니다.

5. 완료

검사한 화면과 상태(너비, 테마), 내린 결정, 검사하지 않은 것(도달할 수 없는 인증 상태, 없는 실제 데이터)을 보고합니다. UI와 함께 DESIGN.md 변경 사항을 커밋합니다.

규칙

• 사용자의 브리핑과 DESIGN.md가 이 스킬보다 우선합니다. 브랜드가 보라색 그라데이션이라면 보라색 그라데이션입니다.
• 로컬 변경에 새 UI 라이브러리, 아이콘 세트 또는 글꼴을 도입하지 마십시오.
• 사회적 증명, 사용후기, 로고, 사용자 수 또는 "신뢰하는 기업"을 만들어내지 마십시오.
• 라이브를 가장하지 마십시오: 맥박치는 "라이브" 점, 티커 또는 활동은 실제 데이터가 그 속도로 지원되지 않으면 사용하지 마십시오("10초마다 업데이트"가 실제로 사실일 때만).
• 별개의 상태(제출됨, 승인됨, 확인됨)를 하나의 성공 체크 표시로 절대 병합하지 마십시오.