yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

소개 페이지 — 스킬을 스스로 적용해 만든 첫 사례

Browse source 
designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md,
결정 기록은 apps/site/design.md 에 있다.

한 문장 컨셉
- 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다

번호 없이 순서 표현 (C-07 회피)
- 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다
- 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다
- 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째"

멀티링구얼
- / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다
- 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개)
- 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다

실측
- JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB
- radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개
- 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과

감사에서 걸려 고친 것
- eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로
- clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정
- 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11)
- 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정
This commit is contained in:
Yun Chan 2026-08-20 11:00:38 +09:00
parent 8808c672dc
commit 6103700d38
18 changed files with 1497 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

386
apps/site/src/i18n/content.ts Normal file
View file

@ -0,0 +1,386 @@
/**
* 두 언어판은 번역이 아니라 각각 따로 쓴 것이다.
* 특히 §5(조판)는 한국어판에서 주장이고 영어판에서 사례다 — 구조 자체가 다르다.
*/
export interface Stage {
/** 단계 이름 */
name: string;
/** 그 단계가 하는 일 한 줄 */
does: string;
/**
* 같은 브리프 하나가 이 단계를 지나며 무엇으로 변하는가.
* 번호 대신 이 변화가 순서를 만든다 (IKEA 조립 설명서 방식).
*/
becomes: string;
/** becomes 를 코드로 보여줄 때 */
mono?: boolean;
}
export interface Metric {
label: string;
value: string;
note: string;
}
export interface Rule {
rule: string;
why: string;
}
export interface Content {
meta: { title: string; description: string };
hero: {
h1: string;
lead: string;
install: string;
installNote: string;
links: { label: string; href: string }[];
};
pipeline: {
eyebrow: string;
h2: string;
lead: string;
briefLabel: string;
brief: string;
stages: Stage[];
after: string;
};
metrics: { eyebrow: string; h2: string; lead: string; items: Metric[]; caveat: string };
preflight: {
eyebrow: string;
h2: string;
lead: string;
items: { caught: string; fixed: string }[];
note: string;
};
typography: { eyebrow: string; h2: string; lead: string; body: string; demoLabels: [string, string]; demoText: string; rules: string[] };
rules: { eyebrow: string; h2: string; lead: string; items: Rule[] };
install: { eyebrow: string; h2: string; lead: string; command: string; targets: { name: string; path: string }[]; commands: { cmd: string; what: string }[] };
footer: { made: string; repo: string; license: string };
ui: { copy: string; copied: string; skipToContent: string };
}
const STAGES_KO: Stage[] = [
{
name: "브리프 게이트",
does: "무엇을·누구에게·제약을 세 줄로 압축한다. 규모를 판정해 경로를 고른다.",
becomes: "누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분한다",
},
{
name: "레퍼런스 조사",
does: "실제로 존재하는 사이트 3개를 서로 다른 층위에서 고른다. 구조·톤·디테일.",
becomes: "R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져온다",
},
{
name: "방향 결정",
does: "레퍼런스를 하나의 축으로 합성한다. 감수할 리스크를 하나 고른다.",
becomes: "감상은 이름에만, 화면에는 수치만",
},
{
name: "디자인 토큰",
does: "코드를 쓰기 전에 숫자를 정한다. 성능 예산도 여기서 확정한다.",
becomes: "--measure: 33em / --leading-normal: 1.7 / JS 예산 0KB",
mono: true,
},
{
name: "구현",
does: "레이아웃 → 재질 → 입체 → 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 한다.",
becomes: '<h1>산미 8.5 · 바디 6.0 · 로스팅 라이트</h1>',
mono: true,
},
{
name: "프리플라이트",
does: "자기 결과물을 남의 것처럼 본다. 게이트 12개는 전부 '아니오'여야 한다.",
becomes: "게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px → 수정",
mono: true,
},
];
const STAGES_EN: Stage[] = [
{
name: "Brief gate",
does: "Compress the brief into three lines: what, for whom, constraints. Pick a path by scope.",
becomes: "For whom: home baristas of 3+ years who can taste the roast profile",
},
{
name: "Reference research",
does: "Pick three real sites at three different layers — structure, tone, detail.",
becomes: "R2 = an independent literary publisher. Tone comes from outside the category",
},
{
name: "Direction",
does: "Synthesize the references into one axis. Choose exactly one risk worth taking.",
becomes: "Sentiment stays in the name. The screen carries numbers.",
},
{
name: "Design tokens",
does: "Decide the numbers before writing code. The performance budget is fixed here too.",
becomes: "--measure: 65ch / --leading-normal: 1.55 / JS budget 0KB",
mono: true,
},
{
name: "Build",
does: "Layout → surface → depth → motion. It must be finished with every effect switched off.",
becomes: "<h1>Acidity 8.5 · Body 6.0 · Light roast</h1>",
mono: true,
},
{
name: "Preflight",
does: "Read your own work as a stranger's. All twelve gates must answer no.",
becomes: "12/12 gates passed · 0 slop fingerprints · 31px overflow at 320px → fixed",
mono: true,
},
];
export const ko: Content = {
meta: {
title: "designpaca — 웹 디자인 파이프라인 스킬",
description:
"AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계. Claude Code · Codex · Cursor · Windsurf 에 한 줄로 설치한다.",
},
hero: {
h1: "designpaca",
lead:
"에이전트에게 “예쁘게 만들어줘”라고 하면 자기가 아는 기본값을 쏟아낸다. 못 만들어서가 아니라 결정을 안 해서다. 이 스킬은 그 결정을 순서대로 강제한다.",
install: "npx designpaca",
installNote: "Node 20.11+ · 설치 대상을 감지해 골라준다",
links: [
{ label: "저장소", href: "https://git.chanpaca.net/yunchan/designpaca" },
{ label: "npm", href: "https://www.npmjs.com/package/designpaca" },
],
},
pipeline: {
eyebrow: "여섯 단계",
h2: "브리프 한 줄이 검증된 페이지가 될 때까지",
lead:
"각 단계에는 통과 조건이 있다. 통과하지 못하면 다음으로 가지 않는다. 아래는 실제로 이 스킬을 돌려 만든 커피 로스터리 랜딩에서 같은 브리프가 단계마다 무엇으로 변했는지다.",
briefLabel: "들어온 브리프",
brief: "수제 커피 로스터리의 원두 정기구독 랜딩 만들어줘",
stages: STAGES_KO,
after:
"여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다. 다음 사람이 그 파일을 읽고 같은 결정을 이어간다.",
},
metrics: {
eyebrow: "이 페이지의 수치",
h2: "카피만 고쳐서는 슬롭이 없어지지 않는다",
lead:
"문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.",
items: [
{ label: "radius 어휘 수", value: "2종", note: "3px · 6px. 그 외 값을 쓰지 않는다" },
{ label: "반투명 패널(backdrop-filter)", value: "0개", note: "실기기 FPS를 15~30% 깎는다" },
{ label: "타입 스케일 단계", value: "5단계", note: "디스플레이 1개는 스케일 밖에 따로 정의" },
{ label: "폰트 패밀리", value: "2개", note: "본문 1 + 코드용 모노 1. 언어판마다 자기 것만 받는다" },
{ label: "강조색", value: "1개", note: "딥 틸. 라이트·다크는 같은 색의 대응값이다" },
{ label: "히어로까지 JS", value: "314B", note: "gzip. 예산 50KB의 0.6%. 복사 버튼 하나뿐이다" },
{ label: "슬롭 지문 grep", value: "0건", note: "9개 패턴 검사" },
{ label: "하드 게이트", value: "8/12", note: "정적으로 검사 가능한 8개. 나머지 4개는 브라우저 측정 대기" },
{ label: "첫 인터랙션", value: "—", note: "미측정. 프로덕션 배포 후 Lighthouse 로 잰다" },
],
caveat: "값은 프로덕션 빌드에서 측정한다. 아직 측정하지 않은 항목은 비워둔다 — 지어낸 숫자보다 구멍이 정직하다.",
},
preflight: {
eyebrow: "프리플라이트 로그",
h2: "이 페이지를 만들며 실제로 걸린 것",
lead: "남을 검사한 결과가 아니라 자신을 검사한 결과다.",
items: [
{
caught: "eyebrow 라벨이 6개 — 카운트 규칙 상한은 ceil(섹션 7 / 3) = 3개",
fixed: "세 섹션만 남기고 나머지는 헤드라인만으로 구분했다. 라벨이 없어도 섹션은 읽힌다",
},
{
caught: "스크롤 리빌에 clip-path 를 쓰려 했다 — 하드 게이트 8은 transform·opacity 만 허용한다",
fixed: "덮개를 translateX 로 미는 방식으로 바꿨다. 보이는 결과는 같고, clip-path 보간 제약도 함께 사라졌다",
},
{
caught: "구분선 색의 대비가 1.30:1 — 장식선으로는 괜찮지만 입력 테두리로 쓰면 WCAG 1.4.11(3:1) 위반",
fixed: "6.11:1 짜리 별칭을 하나 더 두고 용도를 갈랐다. 새 색을 만든 게 아니라 팔레트 수는 그대로다",
},
{
caught: "본문 컬럼이 960px — 우리가 정한 한 줄 길이(561px)를 넘는다",
fixed: "그리드의 본문 폭을 --measure 로 바꿨다. 스킬 문서의 예시 코드도 같이 고쳤다",
},
],
note: "네 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 이 목록이 짧아 보인다면 그건 이 페이지가 작기 때문이다.",
},
typography: {
eyebrow: "한글 조판",
h2: "라틴 기준으로 만든 도구는 한글에서 멈춘다",
lead:
"영어권 디자인 도구는 한글 조판 규칙을 갖고 있지 않다. 9~11px 텍스트는 라틴에서 라벨이지만 한글에서는 읽을 수 없다. line-height 1.5는 라틴에서 표준이지만 한글에서는 답답하다.",
body:
"가장 자주 깨지는 것은 줄바꿈이다. 기본값은 단어 중간에서 줄을 끊는다. 아래 두 문단은 같은 글자, 같은 폭, 같은 폰트다. 차이는 word-break 한 줄뿐이다.",
demoLabels: ["기본값", "keep-all"],
demoText: "원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.",
rules: [
"word-break: keep-all — 없으면 단어가 아무 데서나 잘린다",
"line-height 1.6~1.8 — 라틴보다 넉넉하게",
"음수 자간 금지 — 한글은 이미 고정폭에 가까워 즉시 뭉개진다",
"한 줄 25~40자 — 라틴 기준 65~75자를 그대로 쓰면 너무 길다",
"한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다",
],
},
rules: {
eyebrow: "규칙",
h2: "규칙마다 왜 그런지 적혀 있다",
lead: "근거 없는 금지는 지켜지지 않는다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이긴다.",
items: [
{ rule: "레퍼런스 없이 시작하지 않는다", why: "머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 된다." },
{ rule: "강조색은 하나다", why: "두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다." },
{ rule: "대담함은 한 곳에만", why: "두 곳에서 소리치면 둘 다 죽는다." },
{ rule: "화려함은 4순위다", why: "심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다." },
{ rule: "지어낸 수치를 쓰지 않는다", why: "숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎는다." },
{ rule: "이펙트를 다 꺼도 완성돼 있어야 한다", why: "그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것이다." },
],
},
install: {
eyebrow: "설치",
h2: "한 줄이면 된다",
lead: "설치 대상을 감지해 기본 선택해준다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않는다.",
command: "npx designpaca",
targets: [
{ name: "Claude Code", path: "~/.claude/skills/designpaca/" },
{ name: "Codex CLI", path: "~/.codex/skills/designpaca/" },
{ name: "Cursor", path: ".cursor/rules/designpaca.mdc" },
{ name: "Windsurf", path: ".windsurf/rules/designpaca.md" },
{ name: "AGENTS.md", path: "블록 주입 — 에이전트 무관" },
],
commands: [
{ cmd: "npx designpaca update", what: "최신 스킬로 갱신. 직접 고친 파일은 건너뛴다" },
{ cmd: "npx designpaca doctor", what: "설치 상태와 드리프트 진단" },
{ cmd: "npx designpaca uninstall", what: "매니페스트 기반 정확한 제거" },
],
},
footer: {
made: "이 페이지는 designpaca 로 만들어졌다.",
repo: "git.chanpaca.net/yunchan/designpaca",
license: "MIT",
},
ui: { copy: "복사", copied: "복사됨", skipToContent: "본문으로 건너뛰기" },
};
export const en: Content = {
meta: {
title: "designpaca — a web design pipeline skill",
description:
"A skill that makes AI coding agents do web design in order — from reference research to self-audit, six stages. Installs into Claude Code, Codex, Cursor and Windsurf in one line.",
},
hero: {
h1: "designpaca",
lead:
"Ask an agent to “make it look good” and it pours out the defaults it knows. Not because it can't do better — because nothing was decided. This skill forces those decisions, in order.",
install: "npx designpaca",
installNote: "Node 20.11+ · detects and preselects your install targets",
links: [
{ label: "Repository", href: "https://git.chanpaca.net/yunchan/designpaca" },
{ label: "npm", href: "https://www.npmjs.com/package/designpaca" },
],
},
pipeline: {
eyebrow: "Six stages",
h2: "From one line of brief to a page that passed its own audit",
lead:
"Every stage has a pass condition. Fail it and you don't move on. Below is what one brief actually became at each stage, from a coffee roastery landing page built with this skill.",
briefLabel: "The brief that came in",
brief: "Build a subscription landing page for a small-batch coffee roastery",
stages: STAGES_EN,
after:
"What remains after six stages is one page and one design.md. The next person reads that file and continues the same decisions.",
},
metrics: {
eyebrow: "This page, measured",
h2: "Fixing the copy does not remove the slop",
lead:
"Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.",
items: [
{ label: "radius vocabulary", value: "2", note: "3px and 6px. Nothing else" },
{ label: "translucent panels (backdrop-filter)", value: "0", note: "costs 15–30% FPS on real devices" },
{ label: "type scale steps", value: "5", note: "the display size is defined outside the scale" },
{ label: "font families", value: "2", note: "one text + one mono. Each language loads only its own" },
{ label: "accent colours", value: "1", note: "deep teal. Light and dark are the same colour" },
{ label: "JS to first paint", value: "314B", note: "gzip. 0.6% of the 50KB budget. One copy button" },
{ label: "slop fingerprints", value: "0", note: "9 patterns checked" },
{ label: "hard gates", value: "8/12", note: "the 8 that are statically checkable. 4 await browser measurement" },
{ label: "time to interactive", value: "—", note: "not measured yet. Lighthouse, after deploy" },
],
caveat: "Measured on the production build. Unmeasured entries stay empty — a hole is more honest than an invented number.",
},
preflight: {
eyebrow: "Preflight log",
h2: "What this page actually got caught on",
lead: "Not the result of auditing someone else. The result of auditing itself.",
items: [
{
caught: "6 eyebrow labels — the count rule caps them at ceil(7 sections / 3) = 3",
fixed: "Kept three, dropped the rest. Sections read fine without a label above the heading",
},
{
caught: "The scroll reveal used clip-path — hard gate 8 allows only transform and opacity",
fixed: "Switched to a cover pushed with translateX. Same result, and clip-path's interpolation limits went away with it",
},
{
caught: "Divider colour sits at 1.30:1 — fine as decoration, a WCAG 1.4.11 failure as an input border",
fixed: "Added a 6.11:1 alias and split the two uses. No new colour, so the palette count is unchanged",
},
{
caught: "The text column was 960px — wider than the measure we had just set (561px)",
fixed: "Bound the grid's main column to --measure. The skill's own example code was wrong too, so that got fixed as well",
},
],
note: "All four were caught while building this page, and fixed after being caught. If the list looks short, that is because the page is small.",
},
typography: {
eyebrow: "Your language is probably not Latin",
h2: "Tools built on Latin assumptions stop at the script boundary",
lead:
"Design tooling written in English carries no rules for other scripts. 9–11px text is a label in Latin and unreadable in Korean. A line-height of 1.5 is standard in Latin and cramped in Korean.",
body:
"Line breaking fails first. The default breaks Korean mid-word — the equivalent of breaking English mid-syllable, in the middle of a sentence. Both paragraphs below use the same text, width and font. The only difference is one line of word-break.",
demoLabels: ["default", "keep-all"],
demoText: "원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.",
rules: [
"word-break: keep-all — without it, words break at arbitrary points",
"line-height 1.6–1.8 — more generous than Latin needs",
"no negative letter-spacing — Korean glyphs are near-monospaced and collapse immediately",
"25–40 characters per line — Latin's 65–75 is far too long",
"not specifying a Korean font is itself a sign of unfinished work",
],
},
rules: {
eyebrow: "Rules",
h2: "Every rule states why",
lead: "A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.",
items: [
{ rule: "Never start without references", why: "Starting from memory produces the category average." },
{ rule: "One accent colour", why: "Wanting a second one means the hierarchy failed." },
{ rule: "Be bold in exactly one place", why: "Shout in two places and both go unheard." },
{ rule: "Spectacle ranks fourth", why: "Judging weights are Design 40 / Usability 30 / Creativity 20 / Content 10." },
{ rule: "Never invent a number", why: "A number-shaped hole is honest. An invented number costs trust." },
{ rule: "It must be finished with every effect off", why: "That state is the basis of every fallback. If it collapses, the effects were doing the structure's job." },
],
},
install: {
eyebrow: "Install",
h2: "One line",
lead: "Targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.",
command: "npx designpaca",
targets: [
{ name: "Claude Code", path: "~/.claude/skills/designpaca/" },
{ name: "Codex CLI", path: "~/.codex/skills/designpaca/" },
{ name: "Cursor", path: ".cursor/rules/designpaca.mdc" },
{ name: "Windsurf", path: ".windsurf/rules/designpaca.md" },
{ name: "AGENTS.md", path: "block injection — agent agnostic" },
],
commands: [
{ cmd: "npx designpaca update", what: "Pull the latest skill. Files you edited are skipped" },
{ cmd: "npx designpaca doctor", what: "Diagnose install state and drift" },
{ cmd: "npx designpaca uninstall", what: "Exact removal, driven by the manifest" },
],
},
footer: {
made: "This page was built with designpaca.",
repo: "git.chanpaca.net/yunchan/designpaca",
license: "MIT",
},
ui: { copy: "Copy", copied: "Copied", skipToContent: "Skip to content" },
};