make-interfaces-feel-better로 카드·버튼 CSS 다듬는 법

설치하고 부르기

make-interfaces-feel-better는 카드·버튼이 "뭔가 어색하다"는 느낌을 숫자가 붙은 규칙으로 바꿔 둔 Claude Code 스킬입니다. "바깥 반경은 안쪽 반경 더하기 패딩", "누를 때는 0.96배까지만" 같은 규칙입니다. 프로젝트 폴더에서 명령 한 줄로 깝니다.

github.com↗

GitHub - jakubkrehel/make-interfaces-feel-better: An agent skill that helps make your interface feel better.

An agent skill that helps make your interface feel better. - jakubkrehel/make-interfaces-feel-better

1npx skills add jakubkrehel/make-interfaces-feel-better

깔고 나면 슬래시 명령 뒤에 모드와 폴더를 적어 부릅니다. quick은 고칠 곳과 바꿀 값만 보여 주고 파일은 그대로 둡니다. full은 더 작은 다듬기까지 짚고, 적용해 달라고 하면 CSS를 고칩니다. 모드를 빼면 full로 돕니다.

예시는 SaaS 요금제 카드입니다. 둥근 카드 안 회색 상자에 "Team plan" 제목과 좌석 수에 따라 바뀌는 가격, 좌석을 더하는 + 버튼이 있고 그 아래 Upgrade 버튼이 있습니다. 이 카드가 든 폴더에서 full로 부르고, 찾은 것을 적용해 달라고 합니다.

1/make-interfaces-feel-better full src/

고치기 전고친 뒤

고친 카드는 안쪽 상자와 Upgrade 버튼이 바깥 모서리를 같은 간격으로 따라 돌고, 테두리 대신 아래쪽 그림자가 카드를 띄웁니다.

full은 반경·그림자·전환·누름을 고친다

파일을 건드리기 전에 고칠 곳만 보려면 quick으로 부릅니다.

1/make-interfaces-feel-better quick src/

quick은 HIGH·MEDIUM 심각도만 다섯 건까지 내고, 파일은 고치지 않은 채 적용할지 묻고 끝납니다. 이번에는 모두 MEDIUM이었습니다.

full이 plan-card.css에서 주로 바꾼 값은 반경·그림자·전환·누름 넷입니다.

Upgrade 버튼도 같은 계산으로 12px가 됐습니다. 회색 테두리는 다른 배경에선 선만 떠 보여서, 어느 배경에서나 같은 깊이로 보이는 투명 그림자 3겹으로 바꿨습니다. 버튼은 transition: all 대신 transform 하나만 바로 반응하는 ease-out으로 움직이고, 누름은 0.96배로 눌렸다는 신호만 남깁니다.

1.card {
2  border-radius: 20px;  /* rounded-[20px] */
3  padding: 8px;         /* p-2 */
4  box-shadow:           /* shadow-card */
5    0 0 0 1px oklch(0 0 0 / 0.06),
6    0 1px 2px -1px oklch(0 0 0 / 0.06),
7    0 2px 4px 0 oklch(0 0 0 / 0.04);
8}
9.icon-button { position: relative; }  /* relative */
10.icon-button::after {
11  /* after:absolute after:top-1/2 after:left-1/2
12     after:-translate-1/2 after:size-11 */
13  content: "";
14  position: absolute;
15  top: 50%;
16  left: 50%;
17  transform: translate(-50%, -50%);
18  width: 44px;
19  height: 44px;
20}
21.button {
22  border-radius: 12px;  /* rounded-xl */
23  /* transition-transform duration-150 ease-[ease-out] */
24  transition: transform 150ms ease-out;
25}
26.button:active {
27  transform: scale(0.96);  /* active:scale-[0.96] */
28}

1<p className="price">
2  <span className="amount">${seats * 12}</span>/mo
3</p>

1.amount {
2  display: inline-block;  /* inline-block */
3  min-width: 5ch;         /* min-w-[5ch] */
4  text-align: right;      /* text-right */
5}

quick으로 거르고 full로 고친다

PR마다 고장을 거를 때는 quick, 카드가 왜 어색한지 찾아 고칠 때는 full을 씁니다. 스킬이 맞는 곳은 요금제·설정 카드, 버튼이 모인 툴바, 숫자가 바뀌는 대시보드처럼 컴포넌트를 다듬는 화면입니다. 스킬 없이 같은 폴더에서 "카드와 버튼이 어색해 보인다"고만 물어도 Claude는 반경 규칙, transition: all, scale(0.9)를 짚습니다. 값은 "120ms 정도", "0.96~0.98"처럼 범위로 나오고, 카드를 띄우려고 둔 회색 테두리는 짚지 않습니다.