be343cdab5
design-taste-frontend, high-end-visual-design, redesign-existing-projects 를 로드해 리디자인 모드로 진행했다. 이전 페이지는 디자인 스킬을 파는 자리가 문서처럼 생겼다는 지적을 받았다. Design Read - redesign-overhaul / 개발자 대상 / 정밀기기 언어 - DESIGN_VARIANCE 8 · MOTION_INTENSITY 6 · VISUAL_DENSITY 3 방향 - 다크 잉크 바탕에 three.js 셰이더 광원. 유리 패널이 그 위에 뜬다 - 리퀴드 글래스는 이 브리프에서 장식이 아니라 제품 시연이다. SVG 필터와 three.js 의 결합 그 자체이기 때문이다 - 밝은 밴드는 조판 섹션 하나뿐. 한글이 종이 위에 있어야 하는 자리다 제품 증명 - 히어로 배경에 셰이더(초기 번들 밖, 첫 페인트 후 지연 로드) - 재료 섹션에 SVG 필터 3종을 실제로 먹인 타일: 그레인, 굴절, 듀오톤 - 도그푸딩 산출물 2개를 실제 스크린샷으로. 가짜 목업이 아니다 감사에서 걸려 고친 것 - backdrop-filter 에 SVG 를 얹으면 Chrome 이 선언 전체를 버린다. CSS.supports 는 참을 주면서 computed 는 none 이 된다 - main 에서 그리드 클래스가 빠져 subgrid 가 붕괴, 가로 444px 오버플로 - 진입 연출이 두 번 콘텐츠를 삼켰다. opacity 를 버리고 transform 만 남겼다 - eyebrow 4개, 제목 em-dash 2건 수치는 불리해진 것도 그대로 싣는다 - 반투명 패널 1개 -> 29개. 유리가 주제가 됐으므로 - three.js 185KB(gzip). 데모라서 JS 예산을 올렸고 그 사실을 페이지에 적었다
2 lines
No EOL
30 KiB
HTML
2 lines
No EOL
30 KiB
HTML
<!DOCTYPE html><html lang="en" data-astro-cid-5hce7sga> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>designpaca — a web design pipeline skill</title><meta name="description" content="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."><link rel="canonical" href="https://designpaca.chanpaca.net/en/"><link rel="alternate" hreflang="ko" href="https://designpaca.chanpaca.net/"><link rel="alternate" hreflang="en" href="https://designpaca.chanpaca.net/en/"><link rel="alternate" hreflang="x-default" href="https://designpaca.chanpaca.net/"><link rel="preconnect" href="https://api.fontshare.com" crossorigin><link rel="stylesheet" href="https://api.fontshare.com/v2/css?f%5B%5D=switzer@400,500,600&display=swap"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" media="print" onload="this.media='all'"><meta property="og:title" content="designpaca — a web design pipeline skill"><meta property="og:description" content="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."><meta property="og:type" content="website"><meta name="color-scheme" content="light dark"><style>:root{--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--mono-size: .9375em;--surface: #FAF9F6;--surface-raised: #F2F0EA;--surface-inverse: #14161A;--ink: #16181C;--ink-muted: #5A5F66;--ink-inverse: #E9E7E2;--ink-muted-inverse: #9AA0A6;--line: #DFDCD4;--line-inverse: #2A2E34;--line-strong: var(--ink-muted);--accent: #0E6B63;--accent-ink: #FFFFFF;--accent-inverse: #3FA89D;--accent-ink-inverse: #0B1A18;--radius-sm: 3px;--radius-md: 6px;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2.5rem;--space-6: 4rem;--space-7: 6rem;--space-8: 8rem;--dur-instant: .1s;--dur-quick: .2s;--dur-normal: .32s;--dur-slow: .6s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.64, 0, .78, 0);--ease-soft: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--surface: #14161A;--surface-raised: #1C1F24;--surface-inverse: #FAF9F6;--ink: #E9E7E2;--ink-muted: #9AA0A6;--ink-inverse: #16181C;--ink-muted-inverse: #5A5F66;--line: #2A2E34;--line-inverse: #DFDCD4;--line-strong: var(--ink-muted);--accent: #3FA89D;--accent-ink: #0B1A18;--accent-inverse: #0E6B63;--accent-ink-inverse: #FFFFFF}}[lang=ko]{--font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;--step-0: 1.0625rem;--step-1: 1.328rem;--step-2: 1.66rem;--step-3: 2.076rem;--step-4: 2.595rem;--display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem);--leading-tight: 1.15;--leading-normal: 1.7;--measure: 33em;--tracking-display: -.01em;--tracking-body: 0;--tracking-label: .08em;word-break:keep-all;overflow-wrap:break-word}[lang=en]{--font-sans: "Switzer", system-ui, -apple-system, sans-serif;--step-0: 1rem;--step-1: 1.25rem;--step-2: 1.5625rem;--step-3: 1.953rem;--step-4: 2.441rem;--display: clamp(2.441rem, 1.5rem + 4vw, 4rem);--leading-tight: 1.1;--leading-normal: 1.55;--measure: 65ch;--tracking-display: -.025em;--tracking-body: 0;--tracking-label: .08em}.band-inverse{--surface: var(--surface-inverse);--ink: var(--ink-inverse);--ink-muted: var(--ink-muted-inverse);--line: var(--line-inverse);--accent: var(--accent-inverse);--accent-ink: var(--accent-ink-inverse);background:var(--surface);color:var(--ink);padding-block:var(--space-8)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:var(--leading-normal);letter-spacing:var(--tracking-body);font-synthesis-weight:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}[lang=ko] body,[lang=ko] p,[lang=ko] li,[lang=ko] h1,[lang=ko] h2,[lang=ko] h3{word-break:keep-all;overflow-wrap:break-word}.page{display:grid;grid-template-columns:[full-start] minmax(var(--space-4),1fr) [wide-start] minmax(0,var(--space-8)) [main-start] minmax(0,var(--measure)) [main-end] minmax(0,var(--space-8)) [wide-end] minmax(var(--space-4),1fr) [full-end]}.page>*{grid-column:main}.page>.wide{grid-column:wide}.page>.full{grid-column:full}.section{display:grid;grid-template-columns:subgrid;grid-column:full;padding-block:var(--space-7)}.section>*{grid-column:main}.section>.wide{grid-column:wide}h1,h2,h3{margin:0;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:600;text-wrap:balance}h1{font-size:var(--display);font-weight:620}h2{font-size:var(--step-3)}h3{font-size:var(--step-1)}p{margin:0 0 var(--space-3);text-wrap:pretty}p:last-child{margin-bottom:0}.lead{font-size:var(--step-1);color:var(--ink-muted)}.eyebrow{font-size:var(--step-0);letter-spacing:var(--tracking-label);color:var(--ink-muted);font-weight:500;margin:0 0 var(--space-3)}code,kbd,samp,pre{font-family:var(--font-mono);font-size:var(--mono-size)}a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:from-font;transition:color var(--dur-instant) var(--ease-out)}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}hr{border:0;border-top:1px solid var(--line);margin-block:var(--space-6)}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{text-align:left;padding:var(--space-2) var(--space-3) var(--space-2) 0;border-bottom:1px solid var(--line);vertical-align:baseline}th{font-weight:500;color:var(--ink-muted);font-size:var(--step-0);letter-spacing:var(--tracking-label)}.table-scroll{overflow-x:auto;min-width:0}.page>*,.section>*{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.muted{color:var(--ink-muted)}.mono{font-family:var(--font-mono);font-size:var(--mono-size)}.skip[data-astro-cid-5hce7sga]{position:absolute;left:var(--space-3);top:calc(var(--space-3) * -4);padding:var(--space-2) var(--space-3);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);z-index:10;transition:transform var(--dur-quick) var(--ease-out)}.skip[data-astro-cid-5hce7sga]:focus{transform:translateY(calc(var(--space-3) * 5))}.site-header[data-astro-cid-5hce7sga]{padding-block:var(--space-4)}.site-header[data-astro-cid-5hce7sga]>[data-astro-cid-5hce7sga]{grid-column:main}.site-header[data-astro-cid-5hce7sga]{align-items:baseline}.wordmark[data-astro-cid-5hce7sga]{font-weight:600;letter-spacing:-.01em;text-decoration:none}.site-header[data-astro-cid-5hce7sga] nav[data-astro-cid-5hce7sga]{justify-self:end;grid-row:1;grid-column:main;font-size:var(--step-0);color:var(--ink-muted)}.site-footer[data-astro-cid-5hce7sga]{padding-block:var(--space-6);border-top:1px solid var(--line);color:var(--ink-muted)}.cmd[data-astro-cid-f2mrhd7z]{display:flex;min-width:0;align-items:stretch;gap:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;max-width:34em}.cmd-text[data-astro-cid-f2mrhd7z]{flex:1 1 0;min-width:0;padding:var(--space-3);overflow-x:auto;white-space:nowrap}.cmd-copy[data-astro-cid-f2mrhd7z]{flex:0 0 auto;min-width:5.5em;min-height:44px;white-space:nowrap;padding-inline:var(--space-3);border:0;border-left:1px solid var(--line-strong);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:var(--step-0);cursor:pointer;transition:opacity var(--dur-instant) var(--ease-out)}.cmd-copy[data-astro-cid-f2mrhd7z]:hover{opacity:.88}.cmd-note[data-astro-cid-f2mrhd7z]{margin-top:var(--space-2);font-size:var(--step-0)}.hero[data-astro-cid-bbe6dxrz]{display:grid;grid-template-columns:subgrid}.hero-inner[data-astro-cid-bbe6dxrz]{grid-column:main}.hero-lead[data-astro-cid-bbe6dxrz]{max-width:30em;margin-block:var(--space-4) var(--space-5)}.hero-links[data-astro-cid-bbe6dxrz]{display:flex;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--step-0);color:var(--ink-muted)}.pipeline-lead[data-astro-cid-u4jjhbhg]{margin-bottom:var(--space-6)}.brief[data-astro-cid-u4jjhbhg]{border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-2)}.brief-label[data-astro-cid-u4jjhbhg]{display:block;font-size:var(--step-0);letter-spacing:var(--tracking-label);color:var(--ink-muted);margin-bottom:var(--space-2)}.brief-text[data-astro-cid-u4jjhbhg]{margin:0;font-size:var(--step-1)}.spine[data-astro-cid-u4jjhbhg]{list-style:none;margin:0;padding:0 0 0 var(--space-5);position:relative}.spine[data-astro-cid-u4jjhbhg]:before{content:"";position:absolute;left:5px;top:var(--space-4);bottom:var(--space-4);width:1px;background:var(--line-strong)}.stop[data-astro-cid-u4jjhbhg]{position:relative;padding-block:var(--space-4)}.stop[data-astro-cid-u4jjhbhg]+.stop[data-astro-cid-u4jjhbhg]{border-top:1px solid var(--line)}.stop[data-astro-cid-u4jjhbhg]:before{content:"";position:absolute;left:calc(var(--space-5) * -1);top:calc(var(--space-4) + .55em);width:11px;height:11px;border-radius:var(--radius-sm);background:var(--surface);border:3px solid var(--accent);box-sizing:border-box}.stop-name[data-astro-cid-u4jjhbhg]{font-size:var(--step-1);margin-bottom:var(--space-2)}.stop-does[data-astro-cid-u4jjhbhg]{color:var(--ink-muted);margin-bottom:var(--space-3)}.stop-becomes[data-astro-cid-u4jjhbhg]{margin:0;padding-left:var(--space-3);border-left:2px solid var(--accent)}.stop-becomes[data-astro-cid-u4jjhbhg].mono{font-family:var(--font-mono);font-size:var(--mono-size);overflow-wrap:anywhere}.after[data-astro-cid-u4jjhbhg]{margin-top:var(--space-5)}.metrics-lead[data-astro-cid-te4qcdxs]{margin-bottom:var(--space-5)}.metric-value[data-astro-cid-te4qcdxs]{white-space:nowrap}.metric-note[data-astro-cid-te4qcdxs]{font-size:var(--step-0)}.caveat[data-astro-cid-te4qcdxs]{margin-top:var(--space-4);font-size:var(--step-0)}th[data-astro-cid-te4qcdxs][scope=row]{font-weight:400;color:var(--ink);letter-spacing:0}.pf-lead[data-astro-cid-jpbodcnf]{margin-bottom:var(--space-5)}.log[data-astro-cid-jpbodcnf]{margin:0;padding:0;list-style:none}.entry[data-astro-cid-jpbodcnf]{padding-block:var(--space-3);border-top:1px solid var(--line)}.entry[data-astro-cid-jpbodcnf]:last-child{border-bottom:1px solid var(--line)}.caught[data-astro-cid-jpbodcnf]{margin:0 0 var(--space-1)}.fixed[data-astro-cid-jpbodcnf]{margin:0;font-size:var(--step-0)}.pf-note[data-astro-cid-jpbodcnf]{margin-top:var(--space-4);font-size:var(--step-0)}.type-lead[data-astro-cid-blyuyqza]{margin-bottom:var(--space-4)}.type-body[data-astro-cid-blyuyqza]{margin-bottom:var(--space-5)}.demo[data-astro-cid-blyuyqza]{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));margin-bottom:var(--space-5)}.demo-col[data-astro-cid-blyuyqza]{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3)}.demo-label[data-astro-cid-blyuyqza]{font-size:var(--mono-size);letter-spacing:var(--tracking-label);margin-bottom:var(--space-2)}.demo-text[data-astro-cid-blyuyqza]{margin:0;max-width:13em;line-height:1.7}.demo-default[data-astro-cid-blyuyqza]{word-break:break-all}.demo-keepall[data-astro-cid-blyuyqza]{word-break:keep-all;overflow-wrap:break-word}.type-rules[data-astro-cid-blyuyqza]{margin:0;padding:0;list-style:none}.type-rules[data-astro-cid-blyuyqza] li[data-astro-cid-blyuyqza]{padding-block:var(--space-2);border-top:1px solid var(--line);color:var(--ink-muted)}.type-rules[data-astro-cid-blyuyqza] li[data-astro-cid-blyuyqza]:last-child{border-bottom:1px solid var(--line)}.rules-lead[data-astro-cid-64rxrvhn]{margin-bottom:var(--space-5)}.rules[data-astro-cid-64rxrvhn]{margin:0}.rule[data-astro-cid-64rxrvhn]{padding-block:var(--space-4);border-top:1px solid var(--line)}.rule[data-astro-cid-64rxrvhn]:last-child{border-bottom:1px solid var(--line)}dt[data-astro-cid-64rxrvhn]{font-weight:560;margin-bottom:var(--space-1)}dd[data-astro-cid-64rxrvhn]{margin:0;color:var(--ink-muted)}.install[data-astro-cid-ryjlwm3k]{display:grid;grid-template-columns:subgrid}.install-inner[data-astro-cid-ryjlwm3k]{grid-column:main}.install-lead[data-astro-cid-ryjlwm3k]{margin-block:var(--space-3) var(--space-5)}.targets[data-astro-cid-ryjlwm3k]{margin-top:var(--space-6)}.targets[data-astro-cid-ryjlwm3k] th[data-astro-cid-ryjlwm3k][scope=row]{font-weight:400;color:var(--ink);letter-spacing:0}.cmds[data-astro-cid-ryjlwm3k]{margin:var(--space-5) 0 0}.cmd-row[data-astro-cid-ryjlwm3k]{padding-block:var(--space-3);border-top:1px solid var(--line)}.cmd-row[data-astro-cid-ryjlwm3k]:last-child{border-bottom:1px solid var(--line)}dt[data-astro-cid-ryjlwm3k]{margin-bottom:var(--space-1)}dd[data-astro-cid-ryjlwm3k]{margin:0;font-size:var(--step-0)}
|
||
</style></head> <body data-astro-cid-5hce7sga> <a class="skip" href="#main" data-astro-cid-5hce7sga>Skip to content</a> <header class="page site-header" data-astro-cid-5hce7sga> <a class="wordmark" href="/en/" data-astro-cid-5hce7sga>designpaca</a> <nav aria-label="Language" data-astro-cid-5hce7sga> <a href="/" hreflang="ko" lang="ko" data-astro-cid-5hce7sga> 한국어 </a> </nav> </header> <main id="main" class="page" data-astro-cid-5hce7sga> <section class="full band-inverse hero" data-astro-cid-bbe6dxrz> <div class="hero-inner" data-astro-cid-bbe6dxrz> <h1 data-astro-cid-bbe6dxrz>designpaca</h1> <p class="lead hero-lead" data-astro-cid-bbe6dxrz>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.</p> <div class="cmd" data-astro-cid-f2mrhd7z> <code class="cmd-text" data-astro-cid-f2mrhd7z>npx designpaca</code> <button type="button" class="cmd-copy" data-copy="npx designpaca" data-copied="Copied" data-astro-cid-f2mrhd7z> Copy </button> </div> <p class="cmd-note muted" data-astro-cid-f2mrhd7z>Node 20.11+ · detects and preselects your install targets</p> <script type="module">document.querySelectorAll(".cmd-copy").forEach(e=>{e.addEventListener("click",async()=>{const n=e.dataset.copy??"",a=e.dataset.copied??"OK",i=e.textContent;try{await navigator.clipboard.writeText(n)}catch{const t=document.createRange(),o=e.previousElementSibling;if(o){t.selectNodeContents(o);const c=getSelection();c?.removeAllRanges(),c?.addRange(t)}return}e.textContent=a,e.setAttribute("aria-live","polite"),setTimeout(()=>{e.textContent=i},1600)})});</script> <p class="hero-links" data-astro-cid-bbe6dxrz> <a href="https://git.chanpaca.net/yunchan/designpaca" data-astro-cid-bbe6dxrz>Repository</a><a href="https://www.npmjs.com/package/designpaca" data-astro-cid-bbe6dxrz>npm</a> </p> </div> </section> <section class="section" aria-labelledby="pipeline-h" data-astro-cid-u4jjhbhg> <p class="eyebrow" data-astro-cid-u4jjhbhg>Six stages</p> <h2 id="pipeline-h" data-astro-cid-u4jjhbhg>From one line of brief to a page that passed its own audit</h2> <p class="lead pipeline-lead" data-astro-cid-u4jjhbhg>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.</p> <div class="brief" data-astro-cid-u4jjhbhg> <span class="brief-label" data-astro-cid-u4jjhbhg>The brief that came in</span> <p class="brief-text" data-astro-cid-u4jjhbhg>Build a subscription landing page for a small-batch coffee roastery</p> </div> <ol role="list" class="spine" data-astro-cid-u4jjhbhg> <li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Brief gate</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Compress the brief into three lines: what, for whom, constraints. Pick a path by scope.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>For whom: home baristas of 3+ years who can taste the roast profile</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Reference research</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Pick three real sites at three different layers — structure, tone, detail.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>R2 = an independent literary publisher. Tone comes from outside the category</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Direction</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Synthesize the references into one axis. Choose exactly one risk worth taking.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>Sentiment stays in the name. The screen carries numbers.</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Design tokens</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Decide the numbers before writing code. The performance budget is fixed here too.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg>--measure: 65ch / --leading-normal: 1.55 / JS budget 0KB</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Build</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Layout → surface → depth → motion. It must be finished with every effect switched off.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg><h1>Acidity 8.5 · Body 6.0 · Light roast</h1></p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>Preflight</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>Read your own work as a stranger's. All twelve gates must answer no.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg>12/12 gates passed · 0 slop fingerprints · 31px overflow at 320px → fixed</p> </li> </ol> <p class="after muted" data-astro-cid-u4jjhbhg>What remains after six stages is one page and one design.md. The next person reads that file and continues the same decisions.</p> </section> <section class="section" aria-labelledby="metrics-h" data-astro-cid-te4qcdxs> <p class="eyebrow" data-astro-cid-te4qcdxs>This page, measured</p> <h2 id="metrics-h" data-astro-cid-te4qcdxs>Fixing the copy does not remove the slop</h2> <p class="lead metrics-lead" data-astro-cid-te4qcdxs>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.</p> <div class="table-scroll" data-astro-cid-te4qcdxs> <table data-astro-cid-te4qcdxs> <tbody data-astro-cid-te4qcdxs> <tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>radius vocabulary</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>2</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>3px and 6px. Nothing else</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>translucent panels (backdrop-filter)</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>0</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>costs 15–30% FPS on real devices</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>type scale steps</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>5</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>the display size is defined outside the scale</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>font families</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>2</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>one text + one mono. Each language loads only its own</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>accent colours</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>1</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>deep teal. Light and dark are the same colour</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>JS to first paint</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>314B</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>gzip. 0.6% of the 50KB budget. One copy button</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>slop fingerprints</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>0</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>9 patterns checked</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>hard gates</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>12/12</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>all twelve checked. Four were measured on a real 320px render</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>time to interactive</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>—</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>not measured yet. Lighthouse, after deploy</td> </tr> </tbody> </table> </div> <p class="caveat muted" data-astro-cid-te4qcdxs>Measured on the production build. Unmeasured entries stay empty — a hole is more honest than an invented number.</p> </section> <section class="section" aria-labelledby="preflight-h" data-astro-cid-jpbodcnf> <h2 id="preflight-h" data-astro-cid-jpbodcnf>What this page actually got caught on</h2> <p class="lead pf-lead" data-astro-cid-jpbodcnf>Not the result of auditing someone else. The result of auditing itself.</p> <ul class="log" data-astro-cid-jpbodcnf> <li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>6 eyebrow labels — the count rule caps them at ceil(7 sections / 3) = 3</p> <p class="fixed muted" data-astro-cid-jpbodcnf>Kept three, dropped the rest. Sections read fine without a label above the heading</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>The scroll reveal used clip-path — hard gate 8 allows only transform and opacity</p> <p class="fixed muted" data-astro-cid-jpbodcnf>Switched to a cover pushed with translateX. Same result, and clip-path's interpolation limits went away with it</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>Divider colour sits at 1.30:1 — fine as decoration, a WCAG 1.4.11 failure as an input border</p> <p class="fixed muted" data-astro-cid-jpbodcnf>Added a 6.11:1 alias and split the two uses. No new colour, so the palette count is unchanged</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>The text column was 960px — wider than the measure we had just set (561px)</p> <p class="fixed muted" data-astro-cid-jpbodcnf>Bound the grid's main column to --measure. The skill's own example code was wrong too, so that got fixed as well</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>13px of horizontal overflow at 320px — even with the table inside an overflow container</p> <p class="fixed muted" data-astro-cid-jpbodcnf>A grid item's default min-width is auto, so content pushes the parent wider. overflow-x only works once min-width:0 is set</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>The button inside the dark band sat at 2.88:1 — the threshold is 4.5:1</p> <p class="fixed muted" data-astro-cid-jpbodcnf>The band inverted the accent colour but left the text on it white. Added an inverted counterpart token and switched both together</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>Scrolling to the very bottom still left the last 3 of 6 pipeline stages at opacity 0 — half of this page's core section was gone</p> <p class="fixed muted" data-astro-cid-jpbodcnf>Elements near the page bottom never reach cover 22% in animation-range. Visible with effects off but missing with them on is not the same as having a fallback. The effect was removed</p> </li> </ul> <p class="pf-note muted" data-astro-cid-jpbodcnf>All seven were caught while building this page, and fixed after being caught. The last three only surfaced on a real 320px render — static checks missed them.</p> </section> <section class="section" aria-labelledby="type-h" data-astro-cid-blyuyqza> <p class="eyebrow" data-astro-cid-blyuyqza>Your language is probably not Latin</p> <h2 id="type-h" data-astro-cid-blyuyqza>Tools built on Latin assumptions stop at the script boundary</h2> <p class="lead type-lead" data-astro-cid-blyuyqza>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.</p> <p class="type-body" data-astro-cid-blyuyqza>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.</p> <div class="demo" data-astro-cid-blyuyqza> <div class="demo-col" data-astro-cid-blyuyqza> <p class="demo-label muted mono" data-astro-cid-blyuyqza>default</p> <p lang="ko" class="demo-text demo-default" data-astro-cid-blyuyqza>원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.</p> </div> <div class="demo-col" data-astro-cid-blyuyqza> <p class="demo-label muted mono" data-astro-cid-blyuyqza>keep-all</p> <p lang="ko" class="demo-text demo-keepall" data-astro-cid-blyuyqza>원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.</p> </div> </div> <ul class="type-rules" data-astro-cid-blyuyqza> <li data-astro-cid-blyuyqza>word-break: keep-all — without it, words break at arbitrary points</li><li data-astro-cid-blyuyqza>line-height 1.6–1.8 — more generous than Latin needs</li><li data-astro-cid-blyuyqza>no negative letter-spacing — Korean glyphs are near-monospaced and collapse immediately</li><li data-astro-cid-blyuyqza>25–40 characters per line — Latin's 65–75 is far too long</li><li data-astro-cid-blyuyqza>not specifying a Korean font is itself a sign of unfinished work</li> </ul> </section> <section class="section" aria-labelledby="rules-h" data-astro-cid-64rxrvhn> <h2 id="rules-h" data-astro-cid-64rxrvhn>Every rule states why</h2> <p class="lead rules-lead" data-astro-cid-64rxrvhn>A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.</p> <dl class="rules" data-astro-cid-64rxrvhn> <div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>Never start without references</dt> <dd data-astro-cid-64rxrvhn>Starting from memory produces the category average.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>One accent colour</dt> <dd data-astro-cid-64rxrvhn>Wanting a second one means the hierarchy failed.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>Be bold in exactly one place</dt> <dd data-astro-cid-64rxrvhn>Shout in two places and both go unheard.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>Spectacle ranks fourth</dt> <dd data-astro-cid-64rxrvhn>Judging weights are Design 40 / Usability 30 / Creativity 20 / Content 10.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>Never invent a number</dt> <dd data-astro-cid-64rxrvhn>A number-shaped hole is honest. An invented number costs trust.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>It must be finished with every effect off</dt> <dd data-astro-cid-64rxrvhn>That state is the basis of every fallback. If it collapses, the effects were doing the structure's job.</dd> </div> </dl> </section> <section class="full band-inverse install" aria-labelledby="install-h" data-astro-cid-ryjlwm3k> <div class="install-inner" data-astro-cid-ryjlwm3k> <h2 id="install-h" data-astro-cid-ryjlwm3k>One line</h2> <p class="lead install-lead" data-astro-cid-ryjlwm3k>Targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.</p> <div class="cmd" data-astro-cid-f2mrhd7z> <code class="cmd-text" data-astro-cid-f2mrhd7z>npx designpaca</code> <button type="button" class="cmd-copy" data-copy="npx designpaca" data-copied="Copied" data-astro-cid-f2mrhd7z> Copy </button> </div> <div class="table-scroll targets" data-astro-cid-ryjlwm3k> <table data-astro-cid-ryjlwm3k> <tbody data-astro-cid-ryjlwm3k> <tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Claude Code</th> <td class="mono" data-astro-cid-ryjlwm3k>~/.claude/skills/designpaca/</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Codex CLI</th> <td class="mono" data-astro-cid-ryjlwm3k>~/.codex/skills/designpaca/</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Cursor</th> <td class="mono" data-astro-cid-ryjlwm3k>.cursor/rules/designpaca.mdc</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Windsurf</th> <td class="mono" data-astro-cid-ryjlwm3k>.windsurf/rules/designpaca.md</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>AGENTS.md</th> <td class="mono" data-astro-cid-ryjlwm3k>block injection — agent agnostic</td> </tr> </tbody> </table> </div> <dl class="cmds" data-astro-cid-ryjlwm3k> <div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca update</dt> <dd class="muted" data-astro-cid-ryjlwm3k>Pull the latest skill. Files you edited are skipped</dd> </div><div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca doctor</dt> <dd class="muted" data-astro-cid-ryjlwm3k>Diagnose install state and drift</dd> </div><div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca uninstall</dt> <dd class="muted" data-astro-cid-ryjlwm3k>Exact removal, driven by the manifest</dd> </div> </dl> </div> </section> </main> <footer class="page site-footer" data-astro-cid-5hce7sga> <p>This page was built with designpaca.</p> <p class="mono"> <a href="https://git.chanpaca.net/yunchan/designpaca">git.chanpaca.net/yunchan/designpaca</a> · MIT </p> </footer> </body></html> |