홈

기존 웹사이트 리디자인을 위한 AI 프롬프트

웹사이트 리디자인 프롬프트에는 바꿀 표현과 유지할 요소를 모두 적으세요. 현재 화면을 기록하고 구체적인 결함을 골라 제한된 계획을 제공하면 변경 결과를 검토하기 쉽습니다.

Neruve 작성 · 수정일

작동하는 HTML 페이지를 미리 보고, 소스와 함께 제공되는 프롬프트로 코딩 에이전트에서 이 기법을 연습하세요.

Aster Hale — 프로덕트 디자이너 포트폴리오 HTML 템플릿

서비스 소개, 프로젝트 이야기와 문의 흐름을 자신의 작업에 맞추세요.

템플릿 미리보기

MeStudio — 사진 포트폴리오 HTML 템플릿

프로젝트 그리드, 이미지 리듬과 반응형 갤러리를 비교하세요.

템플릿 미리보기

Skills는 계속 로그인 없이 무료로 읽고 복사할 수 있습니다. 템플릿 미리보기는 공개되어 있으며 소스와 함께 제공되는 프롬프트 다운로드에는 계정과 해당 구매 권한 또는 요금제가 필요합니다. 소스 이용 권한과 가격 보기

AI 리디자인 전에 현재 웹사이트 점검하기

기술 구성, 경로, 공통 컨트롤, 문구, 주요 행동을 기록하세요. 실제 데스크톱·모바일 화면에서 계층, 가독성, 배치, 동작의 문제를 구분하세요. 장식을 늘리기보다 원인을 해결하는 요청을 작성하세요.

탐색, 폼, SEO 보존하기

링크 목적지, 로그인·결제 동작, 가격, 분석 이벤트를 명확히 하세요. 작업 범위가 아니라면 제목, 설명, canonical/hreflang, 내부 링크를 유지하고 수정 후 재확인하세요. 새 배치 자체가 검색 성장이나 전환 향상을 입증하지는 않습니다.

스크린샷을 복제 지시가 아닌 근거로 사용하기

본인 또는 허가된 참고 이미지를 사용하고 영역과 화면 너비를 지정하세요. 순서, 간격, 대비, 이미지 위치의 변경을 설명하고 현재 제품과 컴포넌트에 맞추게 하세요. 다른 회사의 정체성이나 홍보 내용을 가져오지 마세요.

모바일 배치를 한 번의 제한된 수정으로 고치기

전체 스타일을 바꾸기 전에 넘침을 유발하는 요소를 찾으세요. 의미 있는 콘텐츠를 유지하고 320, 390, 768, 1280 px에서 포커스, 링크, 이미지를 검토하세요. 아래 예시는 제안 입력이며 본인 사이트의 검증 완료를 뜻하지 않습니다.

수정해서 사용할 수 있는 독창적인 연습

Neruve가 작성한 영어 입력 예시입니다. 실제 도구 실행 결과나 유료 템플릿 프롬프트가 아닙니다. 사용하기 전에 가상의 정보를 실제 정보로 바꾸세요.

웹사이트 리디자인 요구사항

Audit this existing website before redesigning it.
Read its stack, routes, page copy, API calls, forms and shared components.
Protected: canonical URLs, navigation destinations, login/checkout behavior,
prices, analytics events and existing product facts.
Goal: make the offer and primary action easier to understand without new claims.

Record the current desktop and mobile layouts. Identify the three most useful
presentation changes, with section names and screenshot evidence.
Propose a small plan: hierarchy, typography, spacing and reusable component rules.
After approval, change one section first and show the result before expanding.
Retest the original links/forms, 1280/390/320 px layouts, keyboard focus and images.
Preserve headings, metadata, canonical/hreflang and internal links unless the
brief explicitly calls for an SEO change. Report actual checks, not assumed passes.

모바일 레이아웃 수정

Repair horizontal overflow at 320 px in the existing hero.
Find the element causing overflow before changing styles.
Preserve desktop layout, copy, image meaning, primary action and all destinations.
Use wrapping, responsive sizing or a stacked layout appropriate to this section;
do not hide meaningful content or disable horizontal scrolling on the whole page.
Check the same hero at 320, 390, 768 and 1280 px, including keyboard focus.
Return the changed files, before/after evidence and unresolved failures.

실제 연습: Codex로 만든 Fieldnote

Fieldnote에는 원본 입력, 수정하지 않은 Codex HTML, 데스크톱·모바일 확인 기록이 있습니다. frontend-design Skill은 제공하지 않았으며 ChatGPT 또는 Claude Design 테스트가 아닙니다.

생성된 가상의 Fieldnote 페이지 데스크톱 실제 캡처. 크림색 배경, 리서치 노트, 워크플로 링크
데스크톱 뷰포트 · 1280 × 720
실제 연습: Codex로 만든 Fieldnote

기존 프로젝트용 Claude 웹사이트 개편 Prompt

하나의 Hero, 기존 컴포넌트 라이브러리, 원래 동작 목적지부터 시작하세요. 완전한 요청은 제품 사실과 동작을 보호하면서 Claude Code에 구체적인 화면 작업을 제공합니다.

전체 Claude 개편 요청 보기

결과와 함께 남길 근거

변경 파일, 같은 너비의 스크린샷, 원래 동작 목적지, 키보드·모바일·보호해야 할 계약의 검사 결과를 남기세요. 검사하지 못한 항목은 미검증으로 표시하세요.

직접 작성한 Claude Code 제안 입력이며 Claude의 실측 출력은 아닙니다. 작업별로 Skill을 선택하고 의존성과 제품 사실을 확인하세요. Taste는 독립 커뮤니티 프로젝트입니다.

자주 묻는 질문

결함 하나 때문에 전체 사이트를 다시 생성해야 하나요?

보통 실제 원인을 해결하는 가장 작은 변경부터 시작하세요. 큰 리디자인은 검토된 계획과 공통 컨트롤·보호 동작의 회귀 검사가 필요합니다. 이전 버전을 보관하고 같은 화면으로 비교한 뒤 수락하세요.

디자인과 함께 제공되는 프롬프트 살펴보기

Neruve 공개 카탈로그는 웹사이트 디자인, 이용 가능한 연결 프롬프트 및 Skills 디렉터리를 제공합니다. 인터랙티브 미리보기에는 로그인이 필요하지 않으며, 연결된 프롬프트에는 항목과 요금제 이용 권한이 적용됩니다. 이 워크플로는 본인의 개발 도구를 사용하므로 공개 Neruve 사이트 생성 기능이 필요하지 않습니다.

공식 참고 자료

외부 도구와 스킬은 각 제작자에게 귀속됩니다. 참고 링크는 제휴나 이용 권한 제공을 의미하지 않습니다.