菜单
모던 데이터 시각화 웹페이지의 디자인 시스템(컬러·타이포·스페이싱·모션 토큰)과 정보 아키텍처(섹션 구조·내러티브)를 설계하고, 보고서 데이터를 시각화용 data.json으로 추출하는 스킬. 디자인 시스템 정의, 정보 아키텍처 설계, data.json 추출, 컴포넌트 카탈로그 작성 요청 시 반드시 사용.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | web-design-system |
| description | 모던 데이터 시각화 웹페이지의 디자인 시스템(컬러·타이포·스페이싱·모션 토큰)과 정보 아키텍처(섹션 구조·내러티브)를 설계하고, 보고서 데이터를 시각화용 data.json으로 추출하는 스킬. 디자인 시스템 정의, 정보 아키텍처 설계, data.json 추출, 컴포넌트 카탈로그 작성 요청 시 반드시 사용. |
모던 웹페이지의 디자인 시스템·정보 아키텍처·데이터 구조를 단일 진실(single source of truth)로 정의하는 워크플로우. design-lead가 후속 팀원(visualization/frontend/motion/qa) 모두의 작업 기준을 만든다.
reports/SK하이닉스_분석보고서_20260512.md Read_workspace/01~05_*.md Read (시각화 가능한 정량 데이터 추출용)컬러 팔레트 (다크 모드 우선):
배경
- bg-primary: #0a0e1a (깊은 네이비)
- bg-secondary: #111827 (카드 배경)
- bg-elevated: #1f2937 (호버/액티브)
텍스트
- text-primary: #f8fafc (헤딩)
- text-secondary: #cbd5e1 (본문)
- text-tertiary: #94a3b8 (caption)
브랜드/강조
- accent-primary: #06b6d4 (시안 네온, HBM 강조)
- accent-secondary: #8b5cf6 (퍼플, AI 강조)
- accent-tertiary: #f59e0b (앰버, 데이터 강조)
상태
- bull/up: #10b981 (에메랄드)
- bear/down: #ef4444 (레드)
- neutral: #6b7280 (그레이)
- warning: #f59e0b (앰버)
데이터 시각화 (8색 시리즈)
- viz-1: #06b6d4 (sk-hynix)
- viz-2: #a78bfa (samsung)
- viz-3: #fb923c (micron)
- viz-4: #fbbf24
- viz-5: #4ade80
- viz-6: #f472b6
- viz-7: #38bdf8
- viz-8: #c084fc
타이포그래피:
폰트
- sans-display: 'Inter', 'Pretendard', sans-serif (영문·한글 페어)
- sans-body: 'Inter', 'Pretendard', sans-serif
- mono: 'JetBrains Mono', 'D2Coding', monospace (숫자·코드)
크기 (clamp 반응형)
- display-1: clamp(48px, 8vw, 96px) — Hero 메인
- display-2: clamp(36px, 6vw, 72px) — Hero 보조
- h1: clamp(32px, 4vw, 48px) — 섹션 헤딩
- h2: clamp(24px, 3vw, 36px) — 서브섹션
- h3: 20px — 카드 타이틀
- body-lg: 18px
- body: 16px
- body-sm: 14px
- caption: 12px
weight: 300/400/500/600/700
line-height: 1.1 (display), 1.3 (heading), 1.6 (body)
letter-spacing: -0.02em (display), 0 (body)
스페이싱 그리드 (8px base):
space-1: 4px / space-2: 8px / space-3: 12px / space-4: 16px / space-5: 20px / space-6: 24px / space-8: 32px / space-10: 40px / space-12: 48px / space-16: 64px / space-20: 80px / space-24: 96px / space-32: 128px
반경·그림자·블러:
radius-sm: 6px / radius: 12px / radius-lg: 20px / radius-xl: 32px / radius-full: 9999px
shadow-sm: 0 1px 3px rgba(0,0,0,0.3)
shadow: 0 4px 16px rgba(0,0,0,0.4)
shadow-lg: 0 16px 48px rgba(0,0,0,0.6)
shadow-glow: 0 0 32px rgba(6,182,212,0.25)
blur-sm: 8px / blur: 16px / blur-lg: 32px (글래스모피즘)
모션:
duration-fast: 150ms
duration: 300ms
duration-slow: 600ms
duration-hero: 1200ms
easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1)
easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1)
easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1)
stagger: 80ms (요소 간 stagger)
이 토큰을 web/_design/design-tokens.json에 JSON으로 저장.
[0] Sticky Header
- 로고/제목 + 섹션 nav + 다크/라이트 토글
[1] Hero (Full viewport)
- 배경: WebGL/Canvas 모션
- 메인: "SK하이닉스 다각도 분석" + 보조 (2026-05-12)
- 임팩트 메트릭 3개: 현재가 / 1Y 수익률 / 시가총액
- 스크롤 인디케이터
[2] Executive Summary
- 한 줄 요약
- 강점 3 카드 + 우려 3 카드 (그리드)
- 합의 신호 (Neutral-to-Bullish)
[3] 5개 분석 영역 (세로 스택, 또는 탭)
3-1. 시장 데이터 — 차트: 1Y 가격 차트
3-2. 펀더멘털 — 차트: 5년 매출/OP/OPM 콤보
3-3. 산업 — 차트: HBM 점유율 도넛 + NVIDIA 공급 매트릭스
3-4. 시장 심리 — 차트: 컨센서스 분포 도트 + 이벤트 캘린더
3-5. 리스크 — 차트: 영향력 × 가능성 매트릭스 히트맵
[4] 시나리오 (인터랙티브 카드)
- Bear / Base / Bull 토글
- 각 시나리오의 트리거·확률·주가 범위·근거
- Fan chart로 12개월 주가 시나리오
[5] 모니터링 타임라인
- 향후 90일 핵심 이벤트 (5/13 → 12/31)
- 가로 스크롤 또는 세로 타임라인
[6] 부록 (Accordion)
- 데이터 출처 (그리드 링크)
- 분석 한계 (Caveats)
- 데이터 불일치 (양쪽 기록)
[7] Footer
- 작성자 / 다음 갱신 시점 / disclaimer
web/_design/information-architecture.md에 저장 (각 섹션의 와이어프레임 텍스트 묘사 포함).
- StickyHeader (logo, nav, theme-toggle)
- HeroSection (background-canvas, headline, meta-metrics, scroll-indicator)
- MetricCard (label, value, delta, icon, theme: bull/bear/neutral)
- SummaryCard (icon, title, body, theme: strength/concern)
- AnalysisSection (heading, body, chart-slot, source-list)
- ChartContainer (title, subtitle, chart-canvas, legend, tooltip)
- ScenarioCard (label: bear/base/bull, probability, price-range, triggers, body)
- TimelineEvent (date, title, body, impact-indicator)
- Accordion (header, body, expand-icon)
- SourceLink (label, url, date)
- Disclaimer (icon, body)
- ThemeToggle
- ScrollIndicator
각 컴포넌트의 props·variants·예시 마크업을 web/_design/component-catalog.md에 명시.
보고서에서 시각화 가능한 데이터를 JSON 구조로 정리:
{
"meta": {
"reportDate": "2026-05-12",
"asOfDate": "2026-05-12",
"ticker": "000660.KS",
"name": "SK하이닉스"
},
"snapshot": {
"price": 1861000,
"change": -19000,
"changePct": -1.01,
"marketCap_KRW_trillion": 1319,
"marketCap_USD_billion": 819,
"yearReturnPct": 871,
"high52w": 1967000,
"low52w": 193500,
"forwardPER": 5.93,
"trailingPER": [12.06, 17.64],
"PBR": 7.06,
"ROE": 61.2,
"beta": 2.03
},
"priceHistory": [ /* 1Y 일별 종가 (대표 포인트만) */ ],
"revenueByYear": [
{"fy": "FY21", "revenue": 43.0, "op": 12.4, "np": 9.6, "opm": 29},
{"fy": "FY22", "revenue": 44.6, "op": 7.0, "np": 2.4, "opm": 16},
{"fy": "FY23", "revenue": 32.8, "op": -7.7, "np": -9.1, "opm": -24},
{"fy": "FY24", "revenue": 66.2, "op": 23.5, "np": 19.8, "opm": 35},
{"fy": "FY25", "revenue": 97.1, "op": 47.2, "np": 42.9, "opm": 49},
{"fy": "FY26E", "revenue": 245, "op": 256, "np": 200, "opm": 71}
],
"hbmShare2026": {
"bit_basis": {"sk": 50, "samsung": 28, "micron": 22},
"revenue_basis": {"sk": 62, "samsung": 17, "micron": 21},
"hbm4_forecast": {"sk": 54, "samsung": 28, "micron": 18}
},
"nvidiaSupplyMatrix": [ /* GPU별 공급사 */ ],
"consensus": {
"average": 1817130,
"min": 1300000,
"max": 3000000,
"buyHoldSell": {"buy": 36, "hold": 1, "sell": 0},
"targets": [
{"firm": "SK증권", "tp": 3000000, "date": "2026-05-07", "opinion": "Buy"},
/* ... */
]
},
"scenarios": {
"bear": {"probability": [20, 25], "priceRange": [1000000, 1300000], "triggers": ["..."]},
"base": {"probability": [55, 60], "priceRange": [1500000, 2100000], "triggers": ["..."]},
"bull": {"probability": [20, 25], "priceRange": [2300000, 2800000], "triggers": ["..."]}
},
"riskMatrix": [ /* {category, impact: 'high/mid/low', likelihood: 'high/mid/low', label} */ ],
"events90d": [
{"date": "2026-05-13", "title": "美 하원 외교위 MATCH Act 심의", "impact": "negative"},
/* ... 11개 이벤트 */
],
"strengths": [ /* Top 3 */ ],
"concerns": [ /* Top 3 */ ],
"sources": [ /* 부록 A 출처 링크 */ ],
"caveats": [ /* 부록 B 한계 */ ]
}
web/_design/data.json에 저장. 보고서 정수 값을 임의로 가공하지 말고 가능한 한 원형 보존.
후속 팀원이 일관된 디자인 결정을 내릴 수 있도록 가이드라인 작성:
web/_design/style-guide.md에 저장.
이전 web/_design/*.json/md 존재 시 Read 후, 변경 사항만 갱신. 토큰 변경 시 후속 팀원에게 영향 분석 후 일괄 알림.
SK하이닉스의 분기·연간 실적, 사업부문별(DRAM/NAND/HBM) 매출 구조, 현금흐름, 부채, 밸류에이션, 가이던스, 컨센서스를 수집·분석하는 펀더멘털 분석 스킬. SK하이닉스 실적·재무·밸류에이션·HBM 매출·가이던스 분석 요청 시 반드시 사용.
메모리 반도체 산업 사이클·DRAM/NAND 가격·HBM 시장 점유율·AI 데이터센터 수요·경쟁사(삼성·마이크론·키옥시아)·기술 로드맵·산업 정책을 분석하는 스킬. 반도체 산업·HBM 시장·경쟁사 비교·AI 수요·메모리 사이클 분석 요청 시 반드시 사용.
SK하이닉스(000660.KS)의 시세·거래량·수급·기술적 지표를 수집·정리하는 스킬. 종가/시가총액/PER/PBR/외국인지분율/이동평균/RSI/MACD 등을 표준 형식으로 산출. SK하이닉스 시세 조사, 주가 현황, 차트 분석, 수급 분석 요청 시 반드시 사용.
SK하이닉스의 지정학·환율·공급망·고객집중·사이클·기술·규제·재무·ESG·변동성 리스크를 식별·평가하고 Bear/Base/Bull 시나리오를 작성하는 리스크 분석 스킬. SK하이닉스 리스크·미중 규제·환율 노출·HBM 수율·시나리오 분석·다운사이드 평가 요청 시 반드시 사용.
SK하이닉스 최근 30일 뉴스, 애널리스트 컨센서스/목표가, 증권사 의견 변화, 시장 심리 지표, 주요 이벤트 캘린더, 커뮤니티 분위기, 단기 카탈리스트를 정리하는 시장 심리·뉴스 분석 스킬. SK하이닉스 뉴스 흐름·목표가·애널리스트 의견·시장 분위기·다음 이벤트 분석 요청 시 반드시 사용.
SK하이닉스 주가 다각도 분석 에이전트 팀(시세·펀더멘털·산업·심리·리스크 5명)을 조율하여 통합 분석 보고서를 생성하는 오케스트레이터. 트리거: 'SK하이닉스 분석', '하이닉스 주가 보고서', 'SK Hynix 분석', '000660 분석', '하이닉스 다각도 분석', '하이닉스 투자 보고서'. 후속 작업: 보고서 수정/업데이트/보완/재실행/부분 재실행(예: 'risk 섹션만 다시', '실적 발표 반영해서 업데이트'), 이전 결과 기반 개선 요청 시에도 반드시 이 스킬을 사용.