DESIGN.md와 SKILL.md: 시각적 맥락과 작업 절차
프로젝트 외관은 시각적 맥락 파일에, 반복 절차는 스킬에, 현재 변경은 요구사항에 담으세요. 페이지별 레이아웃을 유지하면서 사이트 전체의 방향을 일관되게 전달할 수 있습니다.
2026년 10월 8일 확인했습니다. 사용하는 도구 버전에 맞는 공식 문서를 확인하세요.
작동하는 페이지에서 시작하세요
작동하는 HTML 페이지를 미리 보고, 소스와 함께 제공되는 프롬프트로 코딩 에이전트에서 이 기법을 연습하세요.
Skills는 계속 로그인 없이 무료로 읽고 복사할 수 있습니다. 템플릿 미리보기는 공개되어 있으며 소스와 함께 제공되는 프롬프트 다운로드에는 계정과 해당 구매 권한 또는 요금제가 필요합니다. 소스 이용 권한과 가격 보기
DESIGN.md에 무엇을 담을까요?
Google의 DESIGN.md는 시각적 아이덴티티를 설명하며 현재 alpha 규격입니다. 색상 역할, 글꼴, 간격, 컨트롤, 반응형 동작과 그 이유를 적으세요. 아래 예시는 일반 Markdown이며 Google 토큰 스키마를 검증한 파일이 아닙니다.
SKILL.md에 무엇을 담을까요?
검토 시점, 확인 대상, 보존할 동작, 실패 보고 방법처럼 반복 가능한 절차를 적으세요. 프로젝트 사실과 이번 요청은 별도로 둡니다. 아래 지침 전용 예시는 역할 구분을 설명하며 배포용 외부 스킬 패키지가 아닙니다.
구체적인 웹사이트 요구사항과 함께 사용하기
페이지, 방문자, 주요 행동, 실제 콘텐츠, 보호할 동작을 지정하세요. 시각적 맥락과 선택한 절차를 명시적으로 읽고 편집 전에 제약을 설명하게 하세요. 같은 파일명이라도 모든 도구가 자동으로 읽거나 강제 적용하지는 않습니다.
웹사이트 변경에 맞춰 맥락 유지하기
수락한 변경의 디자인 설명과 실제 검토 결과를 갱신하세요. 공통 컨트롤 규칙은 안정적으로 유지하되 영역별 배치는 달라질 수 있습니다. 동작과 접근성은 소스와 브라우저에서도 검증해야 하며 메모만으로 강제할 수 없습니다.
수정해서 사용할 수 있는 독창적인 연습
Neruve가 작성한 영어 입력 예시입니다. 실제 도구 실행 결과나 유료 템플릿 프롬프트가 아닙니다. 사용하기 전에 가상의 정보를 실제 정보로 바꾸세요.
시각적 아이덴티티 메모
# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.
This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.절차만 담은 검토 스킬
---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---
1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.
This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.실제 연습: Codex로 만든 Fieldnote
Fieldnote에는 원본 입력, 수정하지 않은 Codex HTML, 데스크톱·모바일 확인 기록이 있습니다. frontend-design Skill은 제공하지 않았으며 ChatGPT 또는 Claude Design 테스트가 아닙니다.
실제 연습: Codex로 만든 Fieldnote자주 묻는 질문
Claude Code, Codex, Stitch에서 사용할 수 있나요?
각 도구 문서의 형식과 로딩 방식을 따르세요. 일반 맥락 예시는 텍스트로 제공할 수 있으나 변환, 자동 검색, 확장 필드는 따로 확인해야 합니다. 이 가이드는 Neruve의 DESIGN.md 내보내기나 자동 연동을 약속하지 않습니다.
디자인과 함께 제공되는 프롬프트 살펴보기
Neruve 공개 카탈로그는 웹사이트 디자인, 이용 가능한 연결 프롬프트 및 Skills 디렉터리를 제공합니다. 인터랙티브 미리보기에는 로그인이 필요하지 않으며, 연결된 프롬프트에는 항목과 요금제 이용 권한이 적용됩니다. 이 워크플로는 본인의 개발 도구를 사용하므로 공개 Neruve 사이트 생성 기능이 필요하지 않습니다.
공식 참고 자료
외부 도구와 스킬은 각 제작자에게 귀속됩니다. 참고 링크는 제휴나 이용 권한 제공을 의미하지 않습니다.