기존 페이지에는 구체적으로 개선할 점과 지킬 점이 있습니다. VoltAgent의 Awesome DESIGN.md 모음은 공개 웹사이트를 분석한 일반 텍스트 자료로, AI 코딩 에이전트의 맥락으로 쓸 수 있습니다. 이 안내서는 2026년 10월 14일 커밋의 파일 하나를 제한적인 Claude Code 수정의 시각적 참고로 사용합니다. 수정 코드와 실제 화면을 직접 확인해야 완료로 볼 수 있습니다.
BIG CHANGE는 고정 버전 저장소와 Claude Code 문서를 검토했습니다. Claude Code 실행, 페이지 수정, 시간 측정이나 생성 결과 검사는 하지 않았습니다. 해당 트리에는 design-md/*/DESIGN.md 바로 아래에 파일 84개가 있습니다. 이는 그 커밋의 수이며 영구적인 목록 규모가 아닙니다.
큰 변화
- 달라진 점: 버전을 고정한 설계 분석 하나를 명시적 맥락으로 제공해 허용된 페이지 하나를 수정할 수 있습니다.
- 중요한 이유: 소유자는 유용한 배치나 간격 아이디어를 참고하면서 실제 콘텐츠, 정체성, 동작에 비추어 결과를 확인할 수 있습니다.
- 주의할 점: 참고 자료는 커뮤니티 분석입니다. 브랜드 세부 사항과 일부 내부 지침이 틀리거나 페이지에 맞지 않을 수 있습니다.
시작 전 준비
수정 권한이 있는 페이지와 저장소, 작업 사본 또는 브랜치, 페이지를 로컬에서 표시할 방법, 적격 계정이나 제공업체를 통한 Claude Code 이용 권한이 필요합니다. 수정할 페이지 파일과 프로젝트의 통상적인 실행·검사 방법을 알아두세요. 대상 독자, 필수 문구와 링크, 승인된 색·글꼴·로고와 해결할 시각적 문제 하나를 적으세요. 변경안을 평가하도록 소유자의 결정을 작업 사본 곁에 보관합니다.
고객의 비공개 자료를 주기 전에 계정의 데이터 정책 및 도구 권한을 확인하세요. Claude Code는 계정 약관에 따라 프롬프트와 프로젝트 내용을 처리합니다. 로컬 프로젝트라고 모델 세션도 로컬에서만 처리되는 것은 아닙니다. 작업으로 드러날 비공개 문구, 자료나 코드의 공유 권한을 확인하세요.
한 페이지에 한 참고 자료 사용
- 먼저 고정 버전 모음의 README를 여세요. 정한 문제에 도움이 되는
design-md/<name>/DESIGN.md하나를 선택하고 사용 전에 전체 파일을 읽으세요. Notion 예제는 배치, 서체, 간격, 구성 요소 제안의 형식을 보여줍니다. 그런데 버튼을 캡슐형과 직사각형으로 모두 설명합니다. 이는 Claude Code에 모든 줄을 따르게 할 것이 아니라 직접 결정해야 할 이유입니다. - 선택한 고정 버전
DESIGN.md하나만 작업 프로젝트에 복사하세요. 위치의 예는design-reference/DESIGN.md입니다. 원본 URL, 경로와 커밋3b605329240ce735b510037cca322f1831fdd7f8를 함께 기록하고, 복사본에 저장소의 MIT 저작권 및 허가 고지를 보존하세요. Markdown 참고 파일 자체는 패키지 설치가 필요 없습니다. 라이선스는 저장소 자료에 적용되며 해당 회사의 로고, 글꼴 파일, 이미지나 상표 사용권을 주지 않습니다. - 허용된 프로젝트에서 Claude Code를 열고 복사 파일을 명시적으로 맥락에 제공하세요. Anthropic은 파일 참조와 별도의 프로젝트 지침 파일을 설명합니다. 독립적인
DESIGN.md를 폴더에 넣었다고 Claude Code가 읽었다는 증거는 아닙니다. 아래 대괄호의 페이지 경로와 소유자 규칙을 실제 값으로 바꾸고, 수정을 수락하기 전에 자료를 읽었는지 확인하세요.
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.- 실행하거나 수락하기 전에 제안된 차이를 읽으세요. 변경된 모든 파일, 문구와 링크를 확인하고 요청하지 않은 의존성, 자료나 다른 페이지 수정은 거절하세요. 프로젝트에 문서화된 기존 실행 명령으로 페이지를 표시하세요. 데스크톱과 휴대전화 너비로 열어 에이전트의 의도 설명이 아닌 실제 페이지를 검사합니다.
- 화면을 적어둔 요구 사항과 비교하세요. 필요한 문구와 링크가 남았는지, 제목 순서가 유용한지, 글자·컨트롤 대비가 충분한지, 휴대전화에서 내용 잘림과 가로 스크롤이 없는지 확인합니다. 키보드로 영향을 받은 링크, 버튼, 메뉴와 양식에 접근해 사용하세요. 보이는 초점과 오류 상태를 포함한 변경 상호작용을 시험하세요. 페이지 리비전, 너비, 수행 검사와 결함을 기록하고 해당 페이지가 검사를 통과한 뒤에만 수락합니다.
Claude Code가 자료를 놓쳤다면 파일을 다시 지정하고 사용한 부분을 밝혀 달라고 하세요. 브랜드 규칙과 충돌하면 해당 지시를 요청에서 빼고 관련 코드를 고칩니다. 링크, 초점 이동이나 상호작용이 깨지면 이전 동작을 복원하고 수정 범위를 줄이세요. 페이지를 표시하거나 결과를 확인할 수 없다면 가능해질 때까지 수락하지 않습니다.
이 모음은 다른 사이트에 관한 커뮤니티 설명을 관리자가 있는 그대로 제공한 자료입니다. Notion 파일에는 상충하는 버튼 모양, 문서로 입증되지 않은 마우스 올림 동작과 이 안내서에서 검증하지 않은 코드 검사 명령이 있습니다. 그 제안 대신 프로젝트에서 알려진 검사를 쓰세요. Claude Code 사용료와 후속 호스팅·자료 비용은 계정과 프로젝트에 달렸으며, 편집 시간이나 완성 디자인 품질은 여기서 입증하지 않았습니다.
다른 AI 지원 페이지 작업 방법은 Genspark 프로토타입 안내서에서 호스팅된 프로토타입 복사와 내보낸 소스 ZIP 검사를 설명합니다. 출발 자료와 완료 조건이 다른 작업입니다.
출처 및 추가 읽을거리
- VoltAgent의 고정 버전 README는 모음과 있는 그대로 제공되는 공개 사이트 분석을 설명합니다. 파일 수는 고정된 재귀 트리에서 나온 것으로 이후 버전에 대한 주장이 아닙니다.
- 고정 버전 Notion
DESIGN.md는 형식과 내부 모순을 보여줍니다. Notion이 승인한 규격이나 자료 사용권의 근거가 아닙니다. - 저장소의 MIT 라이선스는 사본이나 상당 부분에 저작권·허가 고지를 유지하도록 요구합니다.
- Anthropic의 Claude Code 빠른 시작, 파일 참조 지침 및 프로젝트 지침 문서는 접근과 명시적 맥락을 설명합니다. 이번 페이지 수정이나 독립 자료의 자동 로딩을 검증하지 않습니다.
- Anthropic의 비용, 데이터 사용 및 권한 문서는 계정에 따른 사용과 제어를 설명합니다. 이 안내서에서는 세션, 청구서나 결과 페이지를 시험하지 않았습니다.
