Claude Code 웹사이트 디자인 프롬프트 실전 가이드

작고 검토 가능한 작업 흐름

1. 대상 프로젝트에서 Claude Code를 열고 변경 전에 기술 스택, 경로와 컴포넌트를 확인하도록 요청하세요. 기존 백엔드 계약과 동작을 명시하세요.
2. 참고 프롬프트와 별도 적용 요구사항을 제공하세요. 대상 사용자, 페이지 목표, 실제 문구, 자료, 주요 동작과 제약을 명시하고 편집 전에 변경안을 요청하세요.
3. 첫 결과를 브라우저에서 확인하세요. 화면 크기와 영향을 받는 영역을 포함해 구체적인 문제를 보고하고 한 번의 집중 수정을 요청한 뒤 같은 점검을 반복하세요.

직접 작성한 SaaS와 포트폴리오 요구사항

이것은 유료 프롬프트와 별도로 Neruve가 작성한 가상의 요구사항입니다. 재현을 위해 영어 원문을 유지합니다.

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

결과 확인 항목

390px 모바일과 데스크톱에서 명확한 주제목, 읽기 쉬운 텍스트, 작동하는 링크, 보이는 키보드 포커스와 가로 넘침이 없는지 확인하세요. 데모의 주장은 검증된 사실로 바꾸세요.

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

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

이것은 유료 프롬프트와 별도로 Neruve가 작성한 가상의 요구사항입니다. 재현을 위해 영어 원문을 유지합니다.

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

결과와 함께 남길 근거

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

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

• Frontend Design Skill이 보이지 않거나 실행되지 않나요?
• Taste Skill — 프런트엔드 디자인 (v2 실험판)
• 기존 웹사이트 리디자인을 위한 AI 프롬프트

실제 연습: Codex로 만든 Fieldnote

위의 Fieldnote 원본 brief를 Codex에 전달하고 전체 출력을 보관했습니다. 이 가상의 리서치 노트 페이지는 같은 요구사항을 다른 코딩 에이전트에서도 검증하는 예입니다. Claude Code 실행은 로그인 오류로 페이지를 생성하지 못했습니다.

2026년 10월 4일, Codex CLI 0.145.0으로 기록했습니다. 성공한 생성 1회, 소요 시간 35.92초이며 파일·셸 도구를 사용하지 않았습니다. CLI는 모델 식별자를 보고하지 않았습니다. 입력·출력·스크린샷은 영어 원문입니다.

브라우저에서 1280·390·320픽셀 레이아웃, 워크플로 앵커, 키보드 건너뛰기 링크를 확인했습니다. h1은 하나이며 노트를 가상으로 표시했습니다. 가입 폼·가격·고객 평가는 없습니다. 텍스트 대비와 동작 줄이기 규칙도 점검했지만 전체 접근성 감사는 아닙니다.

전체 영어 입력을 내려받아 로그인된 코딩 에이전트에서 실행하세요. 반환된 HTML을 브라우저로 열어 같은 너비와 링크를 점검하고, 실패를 기록한 뒤 한 번의 집중 수정을 요청하세요. 제공 소스는 이번 실제 결과이며 다시 생성하면 모양이 달라질 수 있습니다.

단일 HTML/CSS 연습이며 Claude Code의 성공 사례나 Neruve 생성 서비스 테스트가 아닙니다. DESIGN.md나 frontend-design Skill을 입력에 포함하지 않았습니다. 도구의 우수성·가입 전환·SEO 성장·AI 인용을 입증하지 않습니다.

DESIGN.md와 SKILL.md의 역할 차이

Google의 DESIGN.md는 YAML 디자인 토큰과 Markdown 사용 설명으로 프로젝트의 시각적 정체성을 기술합니다. Claude Code에는 파일을 읽도록 명시적으로 요청하세요. 자동 발견이나 Neruve 내보내기 지원을 주장하지 않습니다. 현재 형식과 CLI는 alpha 단계이며 변경될 수 있습니다.

Claude Code 스킬은 frontmatter와 지침이 있는 SKILL.md로 재사용 가능한 작업 안내를 제공합니다. 설치 전에 출처, 라이선스와 권한을 확인하세요. 디자인 파일은 맥락을, 스킬은 절차나 기능을 제공합니다.

현재 Neruve에서 제공하는 것

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

참고 디자인은 출발점입니다. 결과는 모델, 도구와 버전에 따라 달라지며 파일과 접근 권한은 항목과 플랜에 따릅니다.

공식 참고 자료

• Claude Code
• SKILL.md
• DESIGN.md