PortfolioFlow Skill

한 문장으로 디자이너의 완벽한 포트폴리오 웹사이트를 만들어 드립니다.

PortfolioFlow는 5대 디자인 분야(조경 / 그래픽 / 인테리어 / 산업 / UX)를 위한 포트폴리오 웹사이트 빌딩 Skill입니다. 사용자가 한글이나 영어로 요청을 설명하면, 이 Skill이 자동으로 생성합니다:

완전한 포트폴리오 프론트엔드 사이트(Hero + 작품 그리드 + 상세 페이지 + 소개 + AI 어시스턴트 대화 상자)
디자이너 관리 백엔드(로그인 + 작품 CRUD + AI 생성 소개 + 통계 대시보드)
테마 색상 커스터마이징(5개 프리셋 테마 + 사용자 지정 hex 색상 자유 조합)
Edge Functions / KV / Middleware / JWT 인증 풀스택 기능

최종적으로 edgeone-pages-deploy를 통해 EdgeOne Pages에 원클릭 배포됩니다.

트리거 후 실행 흐름(의사 결정 트리)

본 Skill의 트리거 조건에 해당하는 사용자 요청을 받으면 다음 순서로 실행합니다:

Step 1 — 필수 정보 수집

사용자 설명에 다음 필드 중 하나라도 누락된 경우, 사용자에게 한 번에 모든 필드를 질문(반복 질문 금지):

필드	필수	예시	기본값
디자이너 이름	✅	"이보" / "Alex Chen"	사용자 이름
디자인 분야	✅	조경 / 그래픽 / 인테리어 / 산업 / UX	분야 선택 요청
사이트 제목	❌	"Lee · 조경 디자인 포트폴리오"	"{이름} 포트폴리오"
한 줄 포지셔닝	❌	"디자인을 사람과 땅으로 되돌리다"	분야별 기본값
테마 선택	❌	"어두운 숲" / hex 색상	"어두운 숲"
미리 채울 작품 수	❌	3-6	기본 3개 예시 작품

질문 예시:

몇 가지 정보를 확인하겠습니다:

디자인 분야는 무엇인가요?(조경/그래픽/인테리어/산업/UX)

디자이너 이름은?

테마는 무엇으로 할까요?(어두운 숲/새벽 베이지/딥 블루/따뜻한 오렌지/순백 미니멀, 또는 hex 색상 직접 입력)

Step 2 — 프로젝트 구조 결정

다음 참고 파일 중 하나를 확인하여 사용자 분야에 맞는 콘텐츠 템플릿을 로드:

조경 / 인테리어 / 산업 → references/portfolio-knowledge.md의 해당 섹션
그래픽 / UX → 위와 동일

Step 3 — 프로젝트 스켈레톤 생성

/tmp/portfolio-{slug}/ 아래에 다음 파일들을 생성(특수 문자가 포함된 경로로 cd 금지, 모든 경로는 절대 경로 또는 ~/Desktop/ 아래 깨끗한 경로 사용):

portfolio-{slug}/
├── index.html              # 프론트엔드 홈페이지(templates/index.html 템플릿 사용)
├── portfolio-detail.html   # 작품 상세 페이지
├── admin.html              # 관리 백엔드
├── login.html              # 로그인 페이지
├── assets/                 # 이미지 파일(사용자 업로드 또는 placeholder)
├── functions/
│   ├── api/
│   │   ├── auth.js         # 로그인 인증 + JWT 발급(references/auth-jwt.md 참고)
│   │   ├── portfolios.js   # 작품 CRUD(references/portfolio-crud.md 참고)
│   │   ├── generate.js     # AI 생성 소개(references/ai-generate.md 참고)
│   │   └── stats.js        # 방문 통계(references/stats-kv.md 참고)
│   └── _middleware.js      # JWT 검증 + CORS
└── README.md

Step 4 — 테마 색상 적용

사용자가 선택한 테마를 동시에 다음 파일에 적용:

index.html의 <style> 내 CSS 변수
admin.html의 동일 위치
login.html의 동일 위치

5개 프리셋 테마의 구체적인 CSS 변수 값은 references/design-system.md 참조.

사용자가 hex 색상을 입력(예: #FF6B6B)한 경우, references/design-system.md의 "hex를 전체 테마로 변환" 알고리즘에 따라 보완 색조를 생성합니다.

Step 5 — 배포 Skill 호출

모든 파일 생성 완료 후, edgeone-pages-deploy Skill을 호출하여 배포:

트리거 문구: deploy this portfolio to EdgeOne Pages
프로젝트 디렉터리: ~/Desktop/portfolio-{slug}/

배포 성공 후 반드시 수행:

EdgeOne Pages 콘솔에서 사용자에게 다음 KV 네임스페이스를 바인딩하도록 안내(수동 1회 작업):
- 변수명 PORTFOLIO_USERS ← 사용자 계정 저장소
- 변수명 PORTFOLIO_WORKS ← 작품 저장소
- 변수명 PORTFOLIO_STATS ← 방문 통계
- 중요: 변수명은 반드시 정확히 일치해야 하며, KV 바인딩 후 Edge Function에서는 전역 변수로 접근(env.PORTFOLIO_WORKS가 아님, EdgeOne Pages의 특수 규칙).
KV 바인딩 적용을 위해 한 번 더 재배포.
접근 URL + 기본 관리자 계정/비밀번호 반환(최초 배포 시 KV에 자동 기록).

라우팅 테이블(필요 시 `references/` 로드)

다음 표는 AI가 어떤 레퍼런스를 열지 결정하는 데 도움을 줍니다:

사용자 시나리오 키워드	로드할 레퍼런스
"테마/색상/비주얼 스타일/hex/사용자 정의 색상"	`references/design-system.md`
"로그인/인증/JWT/비밀번호/token"	`references/auth-jwt.md`
"작품/CRUD/추가/편집/삭제/증감/수정/삭제"	`references/portfolio-crud.md`
"AI 생성/작품 소개/설명 생성/스마트 입력"	`references/ai-generate.md`
"통계/조회수/PV/인기 작품/대시보드"	`references/stats-kv.md`
"배포/런칭/EdgeOne/도메인/KV 바인딩"	`references/deploy-workflow.md`
"조경/그래픽/인테리어/산업/UX 업계 용어"	`references/portfolio-knowledge.md`

핵심 제약 사항(반드시 준수)

절대 외부 API Key에 의존하지 않음 — 기본 모드에서는 모든 기능(AI 생성 포함)이 제로 구성으로 실행 가능해야 함. references/ai-generate.md는 선택적 DeepSeek 강화 모드를 설명하지만, 기본 동작이 아님.
절대 특수 문자가 포함된 사용자 경로에 쓰지 않음 — ~/Desktop/ 아래 × ' " /가 없는 깨끗한 경로를 우선 사용.
이미지 필드에 startsWith('http') 폴백 판단을 하지 않음 — 전달된 img 필드를 그대로 신뢰하며, 로컬 /assets/xxx.jpg나 원격 https://... 모두 원본 그대로 사용.
JWT 시크릿을 코드에 하드코딩하지 않음 — EdgeOne Pages 환경 변수 JWT_SECRET에서 읽어오며, 배포 후 사용자에게 콘솔에서 수동 설정하도록 안내.
최초 배포 완료 후 반드시 반환:
- 공개 접근 URL
- 콘솔 링크
- 기본 관리자 계정(최초 로그인 후 즉시 비밀번호 변경 안내 포함)

선택적 강화(사용자가 명시적으로 요청할 때 활성화)

사용자 요청	활성화
"진짜 AI 연결" / "DeepSeek 사용" / "AI 성능 강화"	`references/ai-generate.md`의 Plan B: DeepSeek 듀얼 엔진
"한영 전환 지원" / "이중 언어"	`index.html`에 i18n 사전 + 전환 버튼 추가
"RSS / 구독 기능 추가"	`functions/api/rss.js` 신규 추가
"작품 댓글 지원"	`functions/api/comments.js` + 댓글 KV 네임스페이스 신규 추가

반례: 본 Skill을 트리거하지 말아야 할 요청

"조경 프로젝트 전시 사이트 만들어줘"(특정 프로젝트 사이트, 디자이너 포트폴리오 아님) → landscapeflow Prompt 사용
"랜딩 페이지/SaaS/쇼핑몰 사이트 만들어줘" → 포트폴리오 시나리오 아님
"내 기존 이력서를 웹페이지로 바꿔줘" → 이력서, 포트폴리오 아님
단순 "AI가 작품 소개 한 줄 생성"(사이트 구축 없음) → 사이트 빌딩 Skill 필요 없음

출력 계약

실행 완료 후, 사용자에게 다음 구조화된 결과를 출력:

✅ PortfolioFlow 포트폴리오 준비 완료

🌐 접속 URL: https://portfolio-{slug}.edgeone.cool
🔐 관리 백엔드: https://portfolio-{slug}.edgeone.cool/admin
   - 기본 계정: [email protected]
   - 기본 비밀번호: PortfolioFlow_{무작위 6자리}
   - ⚠️ 최초 로그인 후 즉시 비밀번호를 변경하세요.

📊 배포된 기능:
   ✅ 프론트엔드 포트폴리오 홈페이지({N}개의 예시 작품)
   ✅ 작품 상세 페이지
   ✅ 관리 백엔드(로그인 / CRUD / AI 생성)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT 인증 + CORS Middleware

🎨 현재 테마: {테마 이름}
📁 프로젝트 디렉터리: {로컬 경로}

다음 단계 제안:
1. 백엔드에 로그인하여 실제 작품을 추가하세요.
2. /assets/에 프로필 사진과 커버 이미지를 업로드하세요.
3. footer의 저작권과 연락처 정보를 수정하세요.

TencentEdgeOne/awesome-website-prompts-and-skills

awesome-website-prompts-and-skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서