colbyvk/website-dev-skill

website-dev

생각이 있는 사람이 스스로를 위해 만들 개인 웹사이트를 구축합니다. 그 사람이 누구인지, 무엇을 하는지 명확히 말하고, 실제 작업을 모든 화면에 배치하며, 그 사람의 것처럼 보여야 합니다: 포트폴리오 테마도, 인터넷 상의 모든 "안녕하세요, 저는 열정적인 개발자입니다" 사이트의 통계적 평균도, 작업을 숨기는 예술 작품도 아닙니다. 기준은 디자이너, 개발자, 작가, 사진작가, 연구원이 손수 만든 최고의 개인 사이트입니다: 조용하고, 구체적이며, 빠르고, 틀림없이 한 사람의 것임을 드러냅니다.

범위: 개인 웹사이트만 해당됩니다. 한 사람의 포트폴리오, 홈페이지, 블로그, CV 사이트, 학술 페이지 또는 링크 허브. 프리랜서 사이트는 한 사람과 그들의 작업에 관한 것이므로 포함됩니다. 비즈니스, 상점, 제품, 스타트업 또는 에이전시 사이트는 포함되지 않습니다. 작업이 이러한 유형 중 하나라면, 이 스킬이 개인 사이트용임을 말하고 적용하지 마십시오.

이 스킬은 하나의 스킬이며, 그 구성 요소는 assets/ 안에 있습니다. 아래 표는 각 부분이 언제 로드되고, 설정 중에 어떤 역할을 하며, 에이전트가 언제 다시 기록해야 하는지를 보여줍니다. 세 부분은 매번 로드됩니다. 나머지는 작업이 해당 부분을 다룰 때 로드됩니다.

파일들

| 파일 | 호출 시점 | 초기 설정 | 읽기 트리거 | 업데이트 트리거 | |---|---|---|---| | design-principles | 항상 | 설정하지 않음. 설정 중에 있는 그대로 읽습니다. 아무것도 묻거나 변경하지 않습니다. | 이 스킬이 로드될 때마다, 첫 번째 디자인 또는 코드 결정 이전에. | 에이전트가 절대 수정하지 않음. 사용자가 명시적으로 원칙 변경을 요청할 때만 편집합니다. 싫어하는 것은 design-dont-dos로 이동합니다. | | design-dont-dos | 항상 | 설정이 실행될 때마다 실행됩니다. 설정 중에 제안되는 모든 방향, 팔레트, 글꼴 및 구성 요소는 사용자에게 보여지기 전에 모든 행과 대조 확인됩니다. 사용자가 설정 답변에서 싫어하는 참조 사이트나 특성은 즉시 사용자 행이 됩니다. 기존 사이트의 경우, 이미 위반한 행을 나열합니다. | 이 스킬이 로드될 때마다, 그리고 사이트의 보이는 부분이 작성되거나 변경되기 전에 다시 한 번. | 사용자가 사이트에 대해 무언가를 싫어한다고 말할 때마다 (색상, 모양, 레이아웃, 효과, 단어, 글꼴, 모션 또는 참조 사이트). 동일한 턴에 맨 아래에 행을 하나 추가하고, 작업을 계속하기 전에 추가합니다. 추가된 모든 행은 사용자 행입니다. | | users-design-system | 항상 | 진정한 디자인 시스템이 없다면, 먼저 설정하십시오. 진정한 디자인 시스템이 없다는 것은: Direction 행이 confirmed 상태가 아니거나, 색상 및 서체 테이블에 confirmed 행이 없는 경우를 의미합니다. 그런 다음 디자인 작업 전에 initial-setup의 설정 질문을 합니다. 사용자는 언제든지 설정을 시작할 수도 있습니다 ("디자인 시스템 설정", "룩 다시 시작"). 사용자가 "당신이 결정" 또는 "나를 위해 설정"이라고 답하면 리서치 경로를 실행합니다. 사용자 답변은 confirmed가 되고, 리서치는 proposed가 되며, 기존 코드에서 읽은 값은 extracted가 됩니다. 진정한 디자인 시스템이 존재하면 다시 묻지 않습니다: 현재 작업에 필요하지만 여전히 비어 있는 행에 대해서만 묻습니다. | 이 스킬이 로드될 때마다. confirmed된 값은 다른 파일의 모든 기본값을 무시합니다. | 사용자가 디자인 시스템에 무언가를 추가하거나 변경할 때마다 (색상, 글꼴, 크기, 간격 단계, 반경, 그림자, 모션 토큰, 컴포넌트 규칙, 로고 또는 모노그램, 이미지 규칙, 음성 규칙). 동일한 턴에 행을 업데이트하고 변경 사항을 기록합니다. 또한 설정이 토큰을 추출하거나 리서치할 때도 마찬가지입니다. | | initial-setup | 다음 경우: 새 웹사이트 또는 리포지토리, 사이트 첫 실행, 리디자인 시작, 또는 users-design-system에 confirmed된 방향이 없는 경우. | 다음 신호 중 하나가 발생하면 설정을 실행합니다: (1) users-design-system에 진정한 디자인 시스템이 없음, (2) 새 웹사이트 또는 리포지토리, (3) 사용자가 디자인 시스템 설정 또는 재설정 요청, (4) 리디자인 시작. 첫 번째 응답에서 모든 질문 라운드를 한 번에 묻습니다. 디자인 작업 전에 수행합니다. 사용자가 "당신이 결정", "해결해줘" 또는 "나를 위해 설정"이라고 말하면 리서치 경로를 대신 실행합니다. 진정한 디자인 시스템이 존재하고 사용자가 요청하지 않은 경우 건너뜁니다. | 작업 시작 시, 페이지나 컴포넌트가 작성되기 전에. | 사용자가 사이트 시작 방식을 변경할 때(질문, 스택, 도구), 또는 설정 단계가 실제로 잘못된 것으로 판명될 때. | | design-directions | 다음 경우: 설정이 전체적인 룩을 묻거나, 리서치 경로가 실행되거나, 사용자가 사이트 룩 변경을 요청할 때. | 설정이 방향 질문을 하거나 리서치 경로를 실행할 때 실행됩니다. 첫 번째 설정 질문은 그 사람에게 가장 잘 맞는 3가지 방향과 "나를 위해 리서치"를 제공합니다. 리서치 경로는 이 카탈로그에서 시작한 다음, 그 너머의 틈새 방향을 검색합니다. | 방향 질문을 하기 전, 그리고 방향에 대한 리서치 전에. | 리서치가 카탈로그에 없는 방향을 찾으면 추가합니다. 사용자가 방향을 선택하거나 거부하면 기록합니다. 거부된 방향의 정의 특성도 design-dont-dos에 추가됩니다. | | hero-design | 다음 경우: 작업이 홈페이지 또는 첫 화면을 구축, 리디자인 또는 리뷰할 때. | 설정이 Q13을 물을 때 실행됩니다 (사용자에게 작업 이미지나 사진이 없는 경우에만). 답변은 users-design-system에서 히어로의 시각적 소스를 설정합니다. | 화면 계획 단계에서, 히어로가 구축되기 전, 그리고 리뷰에서. | 사용자가 히어로를 승인하면 기록하고 users-design-system에 작성합니다. 싫어하는 히어로는 design-dont-dos로 이동합니다. 생성된 히어로의 프롬프트는 해당 로그로 이동합니다. | | visual-modules | 다음 경우: 작업이 페이지나 섹션을 계획하거나, 사이트가 밋밋하게 읽히거나, 사용자가 "더 생동감"을 요청할 때. | 리서치 경로와 함께 실행됩니다: 각 후보는 2~4개의 모듈을 지정합니다. | 화면 계획 단계에서, 섹션이 구축되기 전, 그리고 리뷰에서. | 사용자가 모듈을 좋아하면 기록하고 users-design-system에 추가합니다. 싫어하는 모듈은 design-dont-dos로 이동합니다. 리서치에서 발견된 모듈은 해당 카탈로그에 추가됩니다. | | motion-design | 다음 경우: 작업이 애니메이션, 전환, 호버 또는 프레스 상태, 스크롤 효과, 로더, 페이지 진입 또는 움직이는 모든 것을 다룰 때. | 설정이 모션 질문을 할 때 실행됩니다. 답변은 users-design-system에서 모션 다이얼을 설정합니다. 다이얼이 confirmed되면 다시 묻지 않습니다. | 모션 코드가 작성되거나 리뷰되기 전에. | 사용자가 모션 패턴을 승인하거나 모션 값을 변경할 때: 해당 결정 테이블에 기록합니다. 사용자가 싫어하는 모션은 design-dont-dos로 이동합니다. | | copy-writing | 다음 경우: 작업이 사이트에 표시되는 텍스트(소개, 약력, 프로젝트 설명, 제목, 링크, 대체 텍스트, 메타 태그)를 쓰거나, 다시 쓰거나, 리뷰할 때. | 설정이 음성 질문을 할 때 실행됩니다. 답변은 users-design-system에서 음성을 설정합니다. 음성이 confirmed되면 다시 묻지 않습니다. | 첫 번째 카피 문구가 작성되기 전, 그리고 인계 전에 다시 한 번. | 사용자가 한 문자열 이상에 적용되는 카피 규칙을 명시할 때: 사용자 카피 규칙 테이블에 추가합니다. 싫어하는 구문이나 어조도 design-dont-dos에 추가됩니다. 음성 규칙은 users-design-system으로 이동합니다. | | review-gate | 다음 경우: 페이지, 섹션 또는 컴포넌트를 인계하기 전, 그리고 사용자가 사이트 리뷰 또는 감사를 요청할 때. | 설정하지 않음. 설정 중에는 사용되지 않습니다. | 빌드 후, 사용자에게 보고하기 전에. | 사용자가 인계 후 게이트가 놓친 문제를 발견할 때: 사용자 검사 테이블에 검사를 추가하고 문제를 design-dont-dos에 추가합니다. |

여기서 취향이 의미하는 것

취향은 스타일이 아닙니다. 모델이 그렇지 않으면 기본값을 취할 때, 이 사람을 위해 의도적으로 내린 결정의 집합입니다.

• 구체적이어야 일반적이지 않습니다. 모델이 작성하는 모든 개인 사이트는 누구에게나 맞는 버전으로 표류합니다: "안녕하세요, 저는 [이름] 👋", "디지털 경험을 만드는 것을 좋아하는 열정적인 개발자", 스킬 막대, 타임라인, GitHub 버튼이 있는 세 개의 프로젝트 카드, 보라색 글로우. 이 각각은 아무도 내리지 않은 결정입니다. 구체적인 것은 그 사람에게서 나와야 합니다: 그들의 작업, 그들의 말, 그들의 사진, 그들의 디자인 시스템. 스타일 규칙에서 절대 나오지 않으며, 절대 발명되지 않습니다.
• 작업이 주인공입니다. 방문자는 이 사람이 만들고, 쓰고, 발견한 것을 보러 옵니다. 최고의 것을 첫 화면이나 한 번 스크롤 안에 배치하십시오. 장식(오브, 파티클, 3D 블롭, 가짜 터미널, 컨셉 데모 위젯)은 작업이 없을 때 페이지를 채우는 것입니다.
• 한 사람, 하나의 목소리. 개인 사이트는 누군가처럼 들려야지, 채용 담당자의 템플릿처럼 들리지 않습니다. 사용자가 선택한 목소리로 짧고, 평이하며, 구체적인 문장. 자기 칭찬 금지: 작업이 칭찬합니다.
• 보관하지 말고 큐레이션하십시오. 3~6개의 강력한 작품이 30개의 썸네일보다 낫습니다. 가장 좋은 것이 앞서고 더 많은 공간을 차지합니다. 나머지는 한 번의 링크로 연결됩니다.
• 절제가 럭셔리입니다. 하나의 팔레트. 하나의 반경 스케일. 하나의 링크 스타일. 하나의 테마. 공간을 재료로 사용하십시오. 더 적고 더 나은 결정을 내린 사이트가 더 고려된 것으로 읽힙니다.
• 생동감 있어야 하며, 밋밋하지 않아야 합니다. 텍스트와 회색만 있는 사이트는 글로우 사이트만큼이나 일반적입니다. 색상을 주십시오: 일치하는 두 가지 색상과 헤더와 히어로에서만 돋보이게 하는 하나의 포인트 색상. 디자인된 히어로와 2~4개의 시각적 모듈: 사용자의 작업을 솜씨 있게 보여주고, 아무것도 주장하지 않는 팔레트의 형태를 사용하십시오. 공간을 채우기 위한 가짜 섹션은 절대 안 됩니다.
• 가늘게 떠봐도 보이는 계층 구조. 스크린샷에 눈을 흐리게 하십시오. 각 화면에서 하나가 이끕니다: 이름, 작업 또는 단어.
• 서체가 사람을 전달합니다. 이 사람을 위한 서체를 선택하고, 타이트한 디스플레이 트래킹, 읽기 쉬운 본문 너비(약 65자), 실제 두께 단계로 설정하십시오. 작가에게 본문 텍스트가 디자인입니다.
• 리듬이지, 획일성이 아닙니다. 한 프로젝트는 길게, 다른 프로젝트는 두 줄로 두십시오. 그리드 안의 동일한 카드는 테마의 모습입니다.
• 모션은 답하는 것이지, 공연이 아닙니다. 인트로는 한 번 도착하고, 하나의 디자인된 순간이 자리를 잡으며, 모든 링크는 포인터에 응답합니다. 아무것도 스스로 타이핑하거나, 회전하거나, 스크롤에 따라 페이드 인하지 않습니다. 할 수 있기 때문이 아니라, 의미가 있을 때만입니다.
• 작고 빠른 것이 기능입니다. 개인 사이트는 눈 깜짝할 사이에 로드되고, 휴대폰에서 잘 읽히며, JavaScript 없이도 작동하고, 5년 후에도 여전히 작동합니다.
• 에이전트가 아닌, 그 사람이 룩을 선택합니다. 사진작가, 시인, 백엔드 엔지니어, 일러스트레이터 각각은 다른 답변을 받을 자격이 있습니다. 동일한 요청이 동일한 사이트를 두 번 생성해서는 안 됩니다.

기본 규칙

이 규칙들은 사용자의 직접적인 말과 confirmed된 디자인 시스템을 제외한 모든 assets의 내용보다 우선합니다.

1. 개인 사이트만 해당됩니다. 한 사람과 그들의 작업. 그 외의 모든 것은 범위를 벗어납니다.
2. 디자인하기 전에 설정하십시오. 진정한 디자인 시스템이 없다면 (users-design-system의 Direction 행이 confirmed가 아니거나, 색상 및 서체에 confirmed 행이 없는 경우), initial-setup을 먼저 실행하고 첫 번째 응답에서 질문 라운드를 하십시오. 사용자는 언제든지 설정을 시작하거나, "당신이 결정"이라고 말하여 에이전트가 시스템을 리서치하고 제안하도록 할 수 있습니다. 추정된 취향으로 사이트를 시작하지 마십시오.
3. 절대 글로우, 절대 알약-글로우, 절대 AI 보라색을 사용하지 마십시오. 사용자가 이름을 지어 금지했습니다. 사용자의 디자인 시스템이 확인하지 않는 한, 어떤 표면에서도 외부 글로우, 네온, 빛나는 구, 빛나는 테두리, 보라색 및 바이올렛 그라데이션을 절대 사용하지 마십시오.
4. 명단은 법입니다. 보이는 것을 작성하기 전에 design-dont-dos와 대조 확인하십시오. 사용자 행은 절대 위반되지 않습니다.
5. 듣고 기록하십시오. 사용자가 무언가를 싫어한다고 말하면, 수정하기 전에 같은 턴에 명단 행을 추가하십시오. 사용자가 색상, 글꼴 또는 토큰을 지정하면 같은 턴에 users-design-system을 업데이트하십시오. 이 스킬은 같은 사람에게 같은 실수를 두 번 해서는 안 됩니다.
6. 토큰이지, 값이 아닙니다. 모든 색상, 크기, 반경, 그림자 및 지속 시간은 하나의 CSS 변수 블록 또는 테마를 통해 디자인 시스템에서 가져옵니다. 컴포넌트에 원시 hex 값이 없어야 합니다.
7. 실제 작업을 보여주십시오. 실제 프로젝트 이미지, 실제 글, 원한다면 그 사람의 실제 사진. 회색 상자로 만든 가짜 프로젝트 UI, 그들의 것인 척하는 재고 또는 AI 이미지는 절대 안 됩니다. 오픈 라이선스 또는 생성된 이미지는 히어로 분위기로만 허용되며, 사용자가 생성된 이미지에 동의한 후에만, 그리고 그 사람이나 그들의 작업을 절대 보여주지 않아야 합니다.
8. 아무것도 발명하지 마십시오. 발명된 추천사, 고객, 고용주, 수상, 숫자 또는 인생 이야기는 금지입니다. 추정된 것은 코드에 표시하고 보고서에 나열하십시오.
9. 첫 화면은 누구인지와 무엇을 하는지 1440x900 및 390x844에서 말해야 합니다: 이름, 한 줄로 하는 일, 작업 또는 연락처로 가는 방법.
10. 기본적으로 접근성이 보장되어야 합니다. 명암비 4.5:1, 보이는 포커스 링, 모든 작업에 대체 텍스트, 44px 터치 대상, 축소된 동작 존중. 절대 외관을 위해 희생하지 마십시오.
11. 인계하기 전에 확인하십시오. review-gate를 실행하십시오. 실패했거나 확인되지 않은 사항을 먼저 보고하십시오.

세 가지 다이얼

설정 후, 세 가지 다이얼이 모든 레이아웃, 모션 및 밀도 결정을 안내합니다. 그 값은 사용자의 디자인 시스템에 있습니다 (설정 시 설정되며, 사용자는 "더 차분하게", "모션 더", "더 빽빽하게"와 같은 한 문장으로 변경할 수 있습니다).

다이얼	1 ~ 3	4 ~ 6	7 ~ 10
변동성 (대칭에서 비대칭까지)	중앙 정렬, 대칭, 한 열 텍스트. 작가, 학자, CV 사이트.	왼쪽 정렬 읽기, 분할 인트로, 혼합 이미지 크기, 다양한 섹션 레이아웃.	비대칭 그리드, 큰 빈 영역, 이미지로 설정된 서체, 편집적 중단. 모든 수준에서 768px 이하 단일 열.
모션 (정적에서 시네마틱까지)	호버 및 프레스 상태만.	기본값. 인트로 진입과 하나의 디자인된 순간 추가.	사용자 자신의 작업이 상호작용적이거나 움직일 때만 (크리에이티브 코딩, 모션 디자인, 비디오). 그렇지 않으면 4~6 수준 이상으로 올리지 마십시오. 빠른 페이지 전환을 허용합니다.
밀도 (넓음에서 촘촘함까지)	넓은 여백, 많은 공백. 큰 헤드라인. 미니멀리스트 사이트 (예: 한 페이지에 2~3개의 작업).	기본 간격.	작은 여백, 작은 헤드라인. 많은 작업: 페이지당 12개 이상의 항목, 목록 보기, 필터. 뉴스 사이트, 아카이브, 대규모 블로그.

작업 흐름: 한 번에 한 화면씩

계획, 구축, 수정의 리듬: 한 번에 한 화면 또는 섹션씩, 사용자에게 보여주고, 승인을 받고, 다음 화면으로 넘어갑니다.

1. 계획. 하나의 화면 또는 섹션을 계획합니다. 작업 흐름, 레이아웃 및 모듈을 스케치합니다. 그 사람의 작업 중 그 섹션에 맞는 것을 선택합니다.
2. 구축. 계획을 구현합니다. 디자인 시스템에서 모든 토큰을 가져옵니다. 각 행동을 design-dont-dos와 대조 확인합니다.
3. 수정과 이동. 사용자에게 보여줍니다. 그들이 좋아하지 않는 것을 기록합니다. 승인되면 다음 화면 또는 섹션으로 넘어갑니다.

이것을 세 가지 기본 규칙으로 생각하십시오: 각 화면의 레이아웃을 계획하고, 그것을 구축하며, 다른 화면으로 이동하기 전에 사용자에게 보여줍니다. 사용자가 이 흐름 밖에서 무언가를 요청하면 (예: "글꼴을 변경해줘"), 요청을 이행하고, 디자인 시스템을 업데이트하며, 현재 화면으로 돌아가거나 사용자에게 어디로 갈지 묻습니다.

사이트가 이미 존재하는 경우

사용자가 기존 사이트를 가져오면 (리포지토리 URL, 파일 세트 또는 실시간 사이트), 이 스킬에 로드하기 전에 설명하십시오: (1) 사이트에서 디자인 시스템을 추출하고 (색상, 글꼴, 간격 - 사용 가능한 모든 것), (2) 가정을 표시하며 (추측된 내용과 그 추측의 근거), (3) 디자인 금지 사항을 확인하며 (위반 사항 목록), (4) 게이트 보고서를 실행합니다 (시작하기 전에 무엇이 깨졌거나 누락되었는지 확인).

그런 다음 사용자에게 질문하십시오: "지금 무엇을 하고 싶으신가요? 리디자인, 스타일 변경, 리뷰, 기존 모습 유지하며 새 페이지 추가?" 리디자인 또는 스타일 변경이라면, 진정한 디자인 시스템이 아직 없으므로 initial-setup을 실행하십시오. 해당 사이트의 기존 파일은 디자인 시스템을 추출할 수 있는 경우를 제외하고는 읽지 마십시오. 기존 콘텐츠 (작업, 전기, 프로젝트 링크)는 이 스킬의 범위 밖에서 로드됩니다.

첫 번째 프로젝트 페이지

프로젝트 페이지의 첫 번째 화면은 의도적으로 더 깁니다: 주인공 이미지, 짧은 설명, 그리고 그 사람의 역할. 이것은 단일 작업에 대한 관심의 순간입니다. 후속 페이지는 간결해집니다: 제목, 이미지, 필요한 경우 한 문장. 사용자가 이 리듬을 깨고 싶다면, 그들의 결정을 디자인 시스템에 기록하십시오.

검토 및 인계

작업이 완료되면 (또는 사용자가 "검토"를 요청하면), review-gate를 실행하고 결과를 보고하십시오. 그런 다음 사용자에게 다음에 무엇을 하고 싶은지 물으십시오: 변경, 새 페이지 추가, 라이브 배포, 또는 종료.

assets

모든 부분은 assets/ 아래에 있습니다. 각 부분을 변경해야 하는 경우를 대비하여 사용자가 읽을 수 있도록 설계되었습니다. 파일은 독립적입니다: 하나의 파일을 변경해도 다른 파일이 중단되지 않습니다.

에이전트는 이러한 파일에 씁니다. 그들은 지침입니다. 한 파일이 다른 파일과 모순되면, 사용자의 confirmed된 디자인 시스템 행이 모든 것을 무시합니다. 에이전트가 읽고 쓰는 주요 파일은 design-dont-dos와 users-design-system입니다.