Stitch 웹사이트 디자인 프롬프트: SaaS와 포트폴리오
Stitch는 Google의 AI 디자인 도구입니다. 구체적인 웹사이트 구상을 정하고 시각 디자인과 실제 동작을 구분하세요. 아래 가상 페이지는 제안 입력이며 Neruve 연동 결과나 Stitch 실행 결과가 아닙니다.
2026년 10월 8일 확인했습니다. 사용하는 도구 버전에 맞는 공식 문서를 확인하세요.
작동하는 페이지에서 시작하세요
작동하는 HTML 페이지를 미리 보고, 소스와 함께 제공되는 프롬프트로 코딩 에이전트에서 이 기법을 연습하세요.
Skills는 계속 로그인 없이 무료로 읽고 복사할 수 있습니다. 템플릿 미리보기는 공개되어 있으며 소스와 함께 제공되는 프롬프트 다운로드에는 계정과 해당 구매 권한 또는 요금제가 필요합니다. 소스 이용 권한과 가격 보기
Stitch에 구체적인 웹사이트 작업 전달하기
장식보다 먼저 대상 사용자, 페이지 목표, 영역 순서, 주요 행동을 정하세요. 실제 문구와 사용 권한이 있는 자료를 제공하고 임시 자료는 표시하세요. 랜딩 페이지, 포트폴리오, 보조 화면 중 요청 대상을 명확히 하세요.
SaaS 랜딩 페이지 프롬프트로 제품 설명하기
문제, 구체적인 제품 예시, 사용 순서를 설명하고 검증된 기능과 상업 정보만 쓰세요. Fieldnote 연습은 가상 연구 메모와 작업 흐름 링크를 사용하며 가짜 후기, 고객 수, 작동하는 가입 폼을 추가하지 않습니다.
프로젝트 근거를 담은 포트폴리오 프롬프트
각 프로젝트의 역할, 제약, 설명용 결과를 적으세요. 모바일에서 설명과 해당 이미지를 가깝게 두고 임시 자료를 표시하세요. Mira는 가상의 웹사이트 포트폴리오이며 이력서, Notion 템플릿, 실제 디자이너의 추천이 아닙니다.
모바일을 수정한 뒤 구현 검토하기
수정할 영역 하나를 지정하고 나머지 방향은 유지하세요. 좁은 화면의 읽기 순서, 줄바꿈, 행동 이름을 확인하세요. 웹사이트로 구현한 후 탐색, 폼, 반응형 배치, 콘텐츠를 다시 검증해야 합니다. 시각적 구상만으로 운영 동작이 입증되지는 않습니다.
수정해서 사용할 수 있는 독창적인 연습
Neruve가 작성한 영어 입력 예시입니다. 실제 도구 실행 결과나 유료 템플릿 프롬프트가 아닙니다. 사용하기 전에 가상의 정보를 실제 정보로 바꾸세요.
SaaS 웹사이트 구상
Design a website concept for Fieldnote, a fictional research-notes workspace.
Audience: small product teams. The page explains collect → compare → decide.
Create a warm-paper and ink direction with one realistic, clearly fictional note.
Sections: compact introduction, note specimen, three-step workflow and a final
link to the workflow. The primary action reads “Explore the workflow”.
Keep typography and button treatments consistent across the screens.
Create desktop and narrow-screen variants with readable copy and no horizontal
overflow. Do not add signup forms, prices, logos, testimonials or user counts.
This is a visual concept. Identify which interactions need implementation later.포트폴리오 웹사이트 구상
Create a website concept for Mira Chen, a fictional product designer.
Show three explicitly fictional projects. Each explains role, constraint and
illustrative outcome without fabricated business metrics or employer logos.
Use a restrained warm-neutral direction, clear project hierarchy and readable
image captions. The primary action is “View selected work”.
Show desktop and narrow-screen layouts; on mobile, keep project details near
their corresponding image. Use placeholder media labelled as placeholder.
Do not invent real contact details, awards or working application forms.모바일 영역 수정
Refine only the mobile project section in this concept.
Keep the selected palette, typography, project order and desktop direction.
At 390 px, stack each project image, title and supporting text in reading order.
Keep controls easy to distinguish from captions. Do not shorten the project facts
or add new sections. Show the changed section and list what still needs to be
implemented and checked in the exported website.실제 연습: Codex로 만든 Fieldnote
Fieldnote에는 원본 입력, 수정하지 않은 Codex HTML, 데스크톱·모바일 확인 기록이 있습니다. frontend-design Skill은 제공하지 않았으며 ChatGPT 또는 Claude Design 테스트가 아닙니다.
실제 연습: Codex로 만든 Fieldnote자주 묻는 질문
Neruve 프롬프트가 Stitch에 자동으로 연동되나요?
자동 연동을 주장하지 않습니다. 독창적인 입력 예시는 본인의 도구에 맞게 바꿔 사용할 수 있습니다. 유료 프롬프트에는 항목과 요금제의 접근 규칙이 적용되며 호환성과 최종 웹사이트는 별도로 검증해야 합니다.
디자인과 함께 제공되는 프롬프트 살펴보기
Neruve 공개 카탈로그는 웹사이트 디자인, 이용 가능한 연결 프롬프트 및 Skills 디렉터리를 제공합니다. 인터랙티브 미리보기에는 로그인이 필요하지 않으며, 연결된 프롬프트에는 항목과 요금제 이용 권한이 적용됩니다. 이 워크플로는 본인의 개발 도구를 사용하므로 공개 Neruve 사이트 생성 기능이 필요하지 않습니다.
공식 참고 자료
외부 도구와 스킬은 각 제작자에게 귀속됩니다. 참고 링크는 제휴나 이용 권한 제공을 의미하지 않습니다.