이 스킬 내의 README.md 파일을 읽고, 사용 가능한 다른 파일들을 탐색하세요.
시각적 아티팩트(슬라이드, 목업, 임시 프로토타입 등)를 만드는 경우, 에셋을 복사하여 사용자가 볼 수 있는 정적 HTML 파일을 생성하세요. 프로덕션 코드를 작업하는 경우, 에셋을 복사하고 이 규칙을 읽어 해당 브랜드로 디자인하는 전문가가 되세요.
사용자가 별다른 지침 없이 이 스킬을 호출하면, 무엇을 만들거나 디자인할지 질문하고, 몇 가지 질문을 한 후 필요에 따라 HTML 아티팩트 또는 프로덕션 코드를 출력하는 전문 디자이너처럼 행동하세요.
빠른 시작
- 주요 강조색: 인디고
#3F51B5(포트폴리오). 블로그 고정 네비게이션에만 한정하여 차가운 블루#2980b9 → #1a6da3그라데이션. - 서체: Poppins (디스플레이/본문, 굵기 300/400/500/600/700) + Roboto Mono (눈썹, 메타, 인라인 코드).
- 섹션 눈썹: 소문자 + 모노 + 밑줄 + 40% 불투명도의 인디고 워시. 서비스 제목은 대문자 + 2px 자간.
- 어조: 1인칭, 자신감 있는 표현, 명명된 프레임워크 사용 (SOC 2, 제로 트러스트, DevSecOps). 일반적인 마케팅 언어는 피하세요.
- 이모지: 다크모드 전용 ☀️ / 🌙 만 사용. 더 이상 추가하지 마세요.
- 로고:
assets/laplante-logo.png(밝은 배경) +assets/laplante-logo-white.png(어두운 배경). - 토큰:
colors_and_type.css를 가져오세요. 모든 토큰은--lp-*CSS 변수로 정의되어 있습니다.
파일
colors_and_type.css— 디자인 토큰 + 의미론적 타입 클래스assets/— 로고 래스터 이미지preview/— 견본 + 서체 샘플 (디자인 시스템 탭에서 사용)ui_kits/portfolio/— 홈페이지 + 서비스 + 타임라인 + 연락처 (고해상도)ui_kits/blog/— 블로그 목록 + 아티클 리더 (고해상도)