메뉴
레퍼런스 웹사이트에서 디자인 토큰을 실측 추출하여 DESIGN.md와 tokens.css를 생성한다. "디자인 시스템 만들어줘", "이 사이트 디자인 따라해", "레퍼런스 디자인 추출", "토큰 추출", "디자인 토큰 뽑아줘", "/design-extract" 등을 말할 때 사용. 디자인 관련 작업에서 LLM이 "평균적인 디자인"을 생성하는 문제를 해결한다 — 생성이 아니라 실측 수치 추출이 핵심.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | design-extract |
| description | 레퍼런스 웹사이트에서 디자인 토큰을 실측 추출하여 DESIGN.md와 tokens.css를 생성한다. "디자인 시스템 만들어줘", "이 사이트 디자인 따라해", "레퍼런스 디자인 추출", "토큰 추출", "디자인 토큰 뽑아줘", "/design-extract" 등을 말할 때 사용. 디자인 관련 작업에서 LLM이 "평균적인 디자인"을 생성하는 문제를 해결한다 — 생성이 아니라 실측 수치 추출이 핵심. |
LLM에게 "디자인해줘"라고 하면 학습 데이터의 평균으로 수렴한다. 해법은 레퍼런스에서 실제 CSS 수치를 추출하여 규칙화하는 것이다. LLM은 생성보다 분석+적용에 훨씬 강하다.
디자인 토큰은 개별이 아니라 번들로 함께 움직이는 축이 있다. 이 스킬의 모든 추출과 분석은 이 5개 번들 기준으로 수행한다.
| 번들 | 축 | 설명 |
|---|---|---|
| surface | bg + border + shadow | 시각적 계층/높이. 6단계. |
| shape | radius + padding | 요소 형태. radius와 padding 비례. |
| type | fontSize + weight + family + lineHeight | 글자 계층. size↑ → weight/family 전환. |
| tone | base + hover + dim + foreground | 의미 색상. 모든 tone이 동일 4축 구조. |
| motion | duration + easing | 전환 속도감. property는 독립. |
사용자가 레퍼런스 URL을 제공하지 않은 경우:
레퍼런스 없이 LLM이 생성하는 것은 이 스킬의 목적에 반한다. 반드시 레퍼런스를 확보한 뒤 진행한다.
각 페이지에서 mcp__claude-in-chrome__javascript_tool로 CSS 수치를 추출한다.
모든 요소의 bg + border + shadow 조합을 수집하여 고유 번들을 식별한다:
// 모든 요소에서 bg + border + shadow 고유 조합 추출
const bundles = new Map();
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth === 0 || el.offsetHeight === 0) return;
const s = getComputedStyle(el);
const bg = s.backgroundColor;
if (bg === 'rgba(0, 0, 0, 0)') return;
const hasBorder = s.borderWidth !== '0px' && !s.borderColor.includes('rgba(0, 0, 0, 0)');
const hasShadow = s.boxShadow !== 'none' && !s.boxShadow.startsWith('rgba(0, 0, 0, 0) 0px');
const key = bg + '|' + (hasBorder ? s.borderWidth + s.borderColor.substring(0,30) : 'no') + '|' + (hasShadow ? 'shadow' : 'no');
if (!bundles.has(key)) {
bundles.set(key, { bg, border: hasBorder ? s.borderWidth + ' ' + s.borderStyle + ' ' + s.borderColor.substring(0,60) : 'none', shadow: hasShadow ? s.boxShadow.substring(0,150) : 'none', count: 0, examples: [] });
}
const b = bundles.get(key);
b.count++;
if (b.examples.length < 2) b.examples.push(el.tagName + '(' + el.offsetWidth + 'x' + el.offsetHeight + ')');
});
JSON.stringify([...bundles.values()].sort((a,b) => b.count - a.count), null, 2)
radius + padding 쌍을 수집하여 상관관계를 확인한다:
// radius + padding 고유 쌍 추출 (padding과 radius가 있는 요소만)
const pairMap = new Map();
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth === 0 || el.offsetHeight === 0) return;
const s = getComputedStyle(el);
if (s.padding === '0px' || s.borderRadius === '0px') return;
const key = s.borderRadius + ' | ' + s.padding;
if (!pairMap.has(key)) pairMap.set(key, { radius: s.borderRadius, padding: s.padding, count: 0, examples: [] });
const e = pairMap.get(key);
e.count++;
if (e.examples.length < 2) e.examples.push(el.tagName + '(' + el.offsetWidth + 'x' + el.offsetHeight + ')');
});
JSON.stringify([...pairMap.values()].sort((a,b) => b.count - a.count), null, 2)
fontSize + fontWeight + fontFamily + lineHeight 조합을 수집한다:
// typography 번들 추출
const typoMap = new Map();
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth === 0 || el.offsetHeight === 0) return;
if (el.textContent.trim().length === 0) return;
const s = getComputedStyle(el);
const key = s.fontSize + '|' + s.fontWeight + '|' + s.fontFamily.split(',')[0].trim().replace(/"/g,'');
if (!typoMap.has(key)) {
typoMap.set(key, { fontSize: s.fontSize, fontWeight: s.fontWeight, fontFamily: s.fontFamily.split(',')[0].trim().replace(/"/g,''), lineHeight: s.lineHeight, colors: new Set(), count: 0, examples: [] });
}
const t = typoMap.get(key);
t.count++;
t.colors.add(s.color);
if (t.examples.length < 3) t.examples.push(el.tagName + ' "' + el.textContent.trim().substring(0,15) + '"');
});
JSON.stringify([...typoMap.values()].sort((a,b) => b.count - a.count).slice(0,15).map(t => ({...t, colors: [...t.colors]})), null, 2)
모든 색상을 수집하고 의미(primary, destructive, success, warning, neutral)별로 분류한다:
// 모든 색상 수집 (text, bg, border, fill별)
const colorMap = { text: {}, bg: {}, border: {} };
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth === 0 || el.offsetHeight === 0) return;
const s = getComputedStyle(el);
const c = s.color;
if (c) colorMap.text[c] = (colorMap.text[c] || 0) + 1;
const bg = s.backgroundColor;
if (bg && bg !== 'rgba(0, 0, 0, 0)') colorMap.bg[bg] = (colorMap.bg[bg] || 0) + 1;
if (s.borderWidth !== '0px' && !s.borderColor.includes('rgba(0, 0, 0, 0)'))
colorMap.border[s.borderColor] = (colorMap.border[s.borderColor] || 0) + 1;
});
const result = {};
for (const [prop, map] of Object.entries(colorMap)) {
result[prop] = Object.entries(map).sort((a,b) => b[1] - a[1]).slice(0,10).map(([color, count]) => ({ color, count }));
}
JSON.stringify(result, null, 2)
transition의 duration + easing 조합을 수집한다:
// transition 패턴 추출
const transitions = {};
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth === 0 || el.offsetHeight === 0) return;
const s = getComputedStyle(el);
const t = s.transition;
if (t === 'all 0s ease 0s' || t === 'none' || t === 'all') return;
const key = t.substring(0, 80);
if (!transitions[key]) transitions[key] = { pattern: key, count: 0, examples: [] };
transitions[key].count++;
if (transitions[key].examples.length < 2) transitions[key].examples.push(el.tagName + '(' + el.offsetWidth + 'x' + el.offsetHeight + ')');
});
JSON.stringify(Object.values(transitions).sort((a,b) => b.count - a.count).slice(0,8), null, 2)
Input, Button, Switch, Sidebar, Card 등 주요 컴포넌트의 정확한 수치를 추출한다:
// 주요 컴포넌트 스펙 추출
function spec(el, label) {
const s = getComputedStyle(el);
return { label, h: el.offsetHeight+'px', w: el.offsetWidth+'px', padding: s.padding, fontSize: s.fontSize, fontWeight: s.fontWeight, borderRadius: s.borderRadius, border: s.borderWidth !== '0px' ? s.borderWidth + ' ' + s.borderColor : 'none', bg: s.backgroundColor, shadow: s.boxShadow === 'none' ? 'none' : s.boxShadow.substring(0,100) };
}
const r = {};
const inp = document.querySelector('input[type="text"], input:not([type])');
if (inp) r.input = spec(inp, 'input');
// ... 필요한 컴포넌트마다 추가
JSON.stringify(r, null, 2)
추출한 수치를 분석하여:
기존 tokens.css가 있으면 1:1 비교 테이블을 작성한다.
DESIGN.md를 프로젝트 루트에 생성한다. 구조:
# Design System — {프로젝트명}
> Reference: {레퍼런스 URL} ({날짜} 실측)
## 0. 번들 체계
5개 번들 요약 테이블
## 1. 레퍼런스 수치
번들별 실측값 테이블 (Color, Type, Shape, Component Specs, Shadow, Radius)
## 2. 토큰 매핑
현재 tokens.css ↔ 레퍼런스 1:1 비교 + 갭 분석
## 3. 조합 규칙 (Composition Rules)
토큰으로 해결 안 되는 "어떻게 조합하는가" 규칙
(예: 면으로 구분, 주인공 1개, 위계 점프, 조연 후퇴, 포인트 컬러 1개 등)
## 4. 적용 우선순위
변경 순서
변경된 사이트를 Chrome으로 열어 레퍼런스와 나란히 비교한다. 스크린샷을 찍어 사용자에게 보여주고, 차이점을 짚는다.
Refactor frontend source trees so layer/slice/segment(role) hierarchy stays clear. Treat FSD names such as shared/entities/features/widgets/app as examples, not as the required target. Use when the user asks to reorganize src, separate app-owned code from reusable packages, remove layer smells, or clarify 책임 경계.
요청이 모호하거나 '왜 하는지'부터 정리가 필요할 때 사용. /discuss, $discuss, 숨은 의도 정렬, 전략 선택, 실행 전 확인 요청, 프로젝트 작업과 개인 도구 작업의 범위 분리가 필요할 때 사용한다. TOC 13요소와 FRT 게이트로 이해도를 순서대로 올린 뒤 goal로 실행 가능한 액션 플랜을 만든다. 질문만 던지는 소크라틱 대화가 아니라, AI가 먼저 범위 안 맥락을 조사하고 추론한 뒤 판단과 근거를 밝히고 필요한 갭 질문만 얹는다.
Use when the user invokes /doubt or $doubt, asks Codex to deliberately reduce unnecessary complexity before introducing a new concept, component, flag, type, file, branch, workflow, document, or procedure, or requests cleanup/review after implementation. Triggers include "이거 다 필요해?", "정리 좀 해줘", "새로 만들어야 할까?", "불필요한 거 없나?", "코드 줄여줘", "why do we need this?", or any review where existence, fit, volume, and efficiency should be challenged before adding or keeping structure.
Use when refactoring frontend entity folders, FSD feature/entity boundaries, exported type names, prefix alignment, or cohesive entity/viewModel/value-object props so files and UI interfaces are grouped by real domain or UI concepts instead of role labels, generic names, or shredded field props. Trigger on requests such as entities 응집도, 접두어 정렬, 인터페이스 중심 폴더링, FSD 위치 점검, feature/entity 경계 리팩토링, props drill, entity shredding, viewModel props, 엔티티를 그대로 넘기기.
파일이나 기능의 개방-폐쇄 원칙(OCP)을 점검하고 리팩토링한다. "OCP", "/ocp", "개방 폐쇄", "switch 너무 많다", "if 분기 정리", "분기 흩어짐", "선언적 맵", "registry", "descriptor", "새 타입/variant 추가마다 여러 곳 수정" 같은 요청에서 사용한다. 열린 집합의 분기가 여러 소비자에 산재해 동반 변경 지점이 2곳 이상인지 분석하고, 확장 시 기존 코드 수정 지점을 0~1곳으로 줄이는 구조를 설계·전환한다.
사용자 발화를 액면 그대로 수행하지 않고 숨은 조사 의도, 배경, 목표를 먼저 추론한 뒤 비교 대상의 범주와 피어셋을 잠그고, 내부 맥락을 감사하고 standard, best practice, de facto, frontier trend를 비교해 읽히는 reference narrative를 만든다. "reference", "레퍼런스", "BP 찾아줘", "best practice", "사실상 표준", "de facto", "요즘 트렌드", "최근 시도", "업계는 어떻게 해", "표준 뭐야", "research", "리서치", "/reference", "/research"처럼 외부 수렴 흐름을 알고 싶을 때 사용한다. 단순 링크 목록이나 표 보고서가 아니라, 소스를 대신 읽고 같은 범주의 BP/de facto와 얼마나 가까운지, 결이 얼마나 비슷한지, 차이가 있다면 더 가까운 유사 레퍼런스는 무엇인지 문단 중심으로 설명하고 필요한 근거 표는 appendix로 내린다.