# Teenage Design > 틴에이지디자인·teenage-design — teenage engineering풍 카탈로그 HTML, 웹페이지, 덱, 제품 시각화 디자인 시스템. 소문자, 직사각, 니어모노크롬, 제품 액센트, 룰드 테이블, deadpan 스펙으로 구성한다. 트리거: 틴에이지디자인, teenage-design, TE style, 카탈로그 페이지, 제품 카탈로그, 스펙시트, model card, release notes, technical landing. NOT: 대시보드, apple-canvas, 카피 생성, 문체 변환. - Skill: `jasonnamii/teenage-design` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add jasonnamii/teenage-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/jasonnamii/teenage-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: Proprietary. teenage engineering brand observed from public sour - Author: jasonnamii (https://skillmd.com/u/jasonnamii) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jasonnamii/teenage-design --- # Teenage Design Catalog energy for HTML: lowercase, dry product language, rectangular structure, mono specs, and one product accent. ## 문체 불가침 vs 정보 재구성 — 경계 기존 "verbatim·표로 쪼개지 마라" 규약의 과잉을 교정합니다. 문장은 불가침, 정보의 배치는 재구성 대상입니다. **불가침 (한 글자도 바꾸지 않음)** — 본문 문장의 어미·어휘·문장구조·문단·문체(UP 입니다체)를 그대로 둡니다. TE의 소문자·deadpan·telegraph 무드 때문에 본문을 fragment·명사구·소문자 카피로 다시 쓰는 것은 금지입니다. 소문자 룩은 본문을 고쳐 쓰지 말고 CSS(`text-transform`)로 냅니다 — 복사하면 원문 그대로 나와야 합니다. **재구성 권장 (시각문법으로 재배치)** — 정보의 배치·구조는 시각문법으로 재배치합니다. 절차·비교·관계·수치·시간·분포·항목 정보는 매핑 게이트가 고른 시각문법으로 구조화합니다. 데이터를 표·차트·다이어그램으로 옮기는 일은 문장을 바꾸는 일이 아니라 문장이 담은 구조를 드러내는 일입니다. **경계** — 산문 문단은 문장 그대로 둡니다. 데이터·단계·항목·관계·수치는 시각문법으로 구조화합니다. 한 섹션 안에 산문 설명과 구조화 가능한 데이터가 섞여 있으면, 산문은 문단으로 두고 데이터만 시각문법으로 뽑아 올립니다. 문장을 다시 쓰지 말고, 문장이 담은 구조를 드러냅니다. en-dash·mono·spec 표기는 사양·제품코드 표기에만 적용하고, 본문 문장을 그 형식으로 압축·재작성하지 않습니다. 상세: `references/text-handling.md`. ## Use When 형이 teenage engineering·TE 스타일·카탈로그톤·스펙시트·제품 카탈로그·릴리즈노트·모델카드·기술 랜딩·딥딘 무드를 요청하거나, 'OO처럼 정밀하고 조용한 카탈로그/제품 시트로' '틴에이지처럼'을 hit할 때 발동합니다. 페이지가 정밀하고 조용하며 유용하고 약간 낯선 결이어야 할 때 씁니다. NOT — 데이터 밀도 높은 대시보드·관리자 UI는 catalog 톤에 안 맞으므로 `ui-designer`로, 비비드 풀채도 스펙터클은 `apple-canvas`로, 카피 생성은 `copywriting-skill`로, 본문 문체 손질은 `shaper-skill`로 보냅니다. 'teenage'와 '비비드 랜딩'이 함께 hit하면 어느 결인지 ASK 합니다. ## 매핑 게이트 — 스타일 입히기 전 강제 통과 (카드그리드 회귀 방지) 컴포넌트는 메뉴가 아니라 매핑의 결과입니다. 빌드 전 STEP1~5를 통과하고, 섹션 매핑표를 명세로 남깁니다. 매핑표 없이 컴포넌트를 고르면 카드그리드로 회귀합니다. **STEP1 인벤토리** — 페이지의 모든 섹션을 나열하고, 각 섹션이 담은 정보를 한 줄로 식별합니다. **STEP2 논리 판별** — 각 섹션이 8패밀리 중 어떤 논리인지 정합니다 — 흐름(FLOW)·계층(HIERARCHY)·비교(COMPARE)·수치(METRIC)·관계(RELATION)·시간(TIME)·분포(DISTRIBUTION)·표(TABLE). 산문 문단은 어느 패밀리도 아니며 그대로 둡니다. **STEP3 문법 선택** — 그 논리에 가장 직관적인 시각문법 1개를 결정트리로 고릅니다. - 단계·절차가 한 방향이면 → pipeline·process step / 분기가 있으면 → flowchart / 행위자 간 주고받기면 → sequence / 레인별 책임이면 → swimlane - 상하 포함이면 → pyramid·layer-stack / 부모-자식이면 → tree·orgchart - 둘 항목 대조면 → comparison·before-after / 다축 평가면 → specs table·scorecard / 두 변수 위치면 → matrix 2x2 - 단일 지표면 → statgrid / 항목 크기 비교면 → bar / 시간 추이면 → line / 비율 한 개면 → stroke-ring / 진행률이면 → gauge / 단계별 이탈이면 → funnel - 노드 연결이면 → networkmap / 집합 겹침이면 → venn / 허브-역할이면 → ecosystem-map - 시점 나열이면 → timeline / 우선순위 구간이면 → roadmap / 버전 이력이면 → changelog / 일정 막대면 → gantt - 분포·밀도면 → positioningmap·heatmap / 지역 분포면 → geomap / 신호등 평가면 → scorecard - 정렬 레코드면 → datatable / 용어 정의면 → glossary **STEP4 리듬** — 인접 섹션이 같은 문법으로 연속되지 않게 배치합니다. 카드그리드 3연속을 금지하고, 페이지 전체에 최소 3개 이상 패밀리가 고루 분포되게 합니다. 같은 패밀리가 연속이면 한쪽을 다른 직관적 문법으로 교체합니다. **STEP5 스타일** — 선택된 문법을 teenage-design 미감으로 렌더합니다 — 소문자(CSS text-transform)·en-dash 제품코드·룰드 테이블·mono 스펙·near-monochrome+제품 액센트 1·radius 0·페이드 240ms. **산출 형식** — 빌드 전 다음 매핑표를 명세로 남깁니다. | # | 섹션 | 정보유형(패밀리) | 시각문법 | 컴포넌트(파일) | |---|---|---|---|---| | 1 | (예) 제품 라인업 | 비교 | specs table | 04-compare | | 2 | (예) 출시 로드맵 | 시간 | roadmap | 05-time | | 3 | (예) 채택 추이 | 수치 | line-chart | 03-numbers | ## 미감 디렉티브 — 디폴트를 최대 미감으로 디폴트를 teenage-design이 낼 수 있는 최대 미감으로 끌어올립니다. forbidden(그라데이션·글로우·소프트 카드 크롬)은 안티패턴 방어용이지 표현 위축용이 아닙니다 — 시그니처는 더 세게 밀어붙입니다. 1. **대형 타이포 활성화** — `display-xl`(72px)·`display`(56px)·`h1`(44px)을 hero에만 두지 말고, 각 패밀리의 섹션 오프너·핵심 수치(statgrid val, stroke-ring 중앙값)에 끌어 씁니다. mono 큰 수치(tnum)와 소문자 대형 디스플레이의 대비가 catalog 시그니처입니다. 2. **시그니처 6무브를 8패밀리 전 컴포넌트에 일관 적용** — 소문자(text-transform)·en-dash 제품코드(EP–133)·룰드 테이블/1px rule 격자·mono uppercase 스펙 라벨(spec-label)·제품 액센트 1색(섹션당 단 1개 강조)·dark invert 섹션(`var(--ink)` 풀채움 패널을 페이지당 1~2회 — 레이어 스택 최상단·생태계맵 허브·funnel 첫 단계 등에 배치). 3. **단순 박스 나열 추방** — 반복 항목도 룰드 테이블·specs grid·scorecard로 구조화하고, 수치는 bar/line/stroke-ring/gauge로 다양화합니다. 직관적이고 세련된 시각문법이 기본이 되게 합니다. 4. **여백·밀도 리듬** — 섹션 사이 1px rule 디바이더(--s-7 간격)로 호흡을 잡고, 룰드 테이블 행 패딩을 10~12px로 조여 tabular-nums로 정렬합니다. 5. **그라데이션 금지 준수** — 컴포넌트 내부에서부터 솔리드 `var(--bg-3)`·`var(--paper-2)`·`var(--ink)` 단색 또는 1px rule 프레임으로 플레이스홀더를 냅니다. 6. **차트도 TE 언어로 번안** — 도넛은 흑백 stroke-ring(stroke-dasharray), 히트맵은 흑백 4~5단계 솔리드 농도, 게이지는 stroke 아크. 컨셉에 안 맞아 보이는 차트도 monochrome+제품 액센트 1 언어로 반드시 보유합니다. ## Design Rules - Lowercase almost everywhere. Product codes may stay uppercase. - Product codes use en dash between letters and numbers: `EP-133` becomes `EP–133`, except historic `PO-32`. - Use near-monochrome foundations plus one product accent. - No gradients, glass effects, glowing backgrounds, or soft card chrome. - Rectilinear by default: radius 0 except tiny form radius or capsule buttons. - Use Hanken Grotesk for display/body and JetBrains Mono for specs. - Keep motion minimal: fade only, around 240ms, no bounce. - Keep `letter-spacing` at `0` except for small positive mono labels. - Korean text must use `word-break: keep-all; line-break: strict; overflow-wrap: break-word;`. ## Codex Workflow 1. Start from `samples/landing-page.html` or `samples/long-form-report.html`. 2. Copy `tokens.css` and only the needed component snippets into the output. 3. Edit with `apply_patch`. 4. Verify with `bash /Users/jason/.codex/skills/teenage-design/scripts/qc.sh `. 5. Inspect in Browser when the output is visual. ## Components — 8패밀리 인덱스 (메뉴가 아니라 매핑 결과) 컴포넌트는 매핑 게이트가 STEP1~3으로 고른 결과이지 자유 선택 메뉴가 아닙니다. 아래는 8대 시각문법 패밀리가 어느 파일에 실재하는지 보여주는 인덱스입니다 — 모든 패밀리가 teenage-design 미감으로 실재합니다. | 패밀리 | 시각문법(컴포넌트) | 파일 | |---|---|---| | FLOW 흐름·절차 | flowchart · pipeline · sequence · swimlane | `06-flow` | | HIERARCHY 계층·구성 | pyramid `07-shapes` · orgchart `06-flow` · layer-stack · tree `07-shapes` | `06-flow` · `07-shapes` | | COMPARE 비교·대조 | comparison · specs table · matrix 2x2 · before-after | `04-compare` | | METRIC 수치·그래프 | statgrid · bar · line-chart · stroke-ring · gauge-arc · funnel | `03-numbers` | | RELATION 관계·망 | networkmap · venn `07-shapes` · ecosystem-map | `06-flow` · `07-shapes` | | TIME 시간·변화 | timeline · roadmap · changelog · gantt | `05-time` | | DISTRIBUTION 분포·위치 | positioningmap · heatmap · geomap · scorecard | `07-shapes` | | TABLE 표·구조화 | datatable · specs table · glossary | `08-document` · `04-compare` · `09-reference` | 스토리·반복 항목·롱폼 블록은 `01-marketing`·`02-cards`·`08-document`·`09-reference`에 둡니다 — 단, 반복 항목은 카드 나열 대신 룰드 테이블·specs grid·scorecard로 구조화하는 쪽을 디폴트로 합니다. ## References | Need | Files | |---|---| | Text handling (문체 불가침) | `references/text-handling.md` | | Glyphs | `references/glyph-cheatsheet.md` | | Scope | `references/NOT-scope.md` |