사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/madebymustafa/design-taste --skill playful-color시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
playful-color
One identity: a poster you can't walk past — loud, but never sloppy.
1. PALETTE (Fixed)
- Ground: cream
#FDF6ECor bright paper#FFF9EF. Never plain white. - Ink:
#101014coat-black for type and outlines. - Color fields — two saturated inks max, chosen deliberately: cobalt
#2E4BFF, tomato#FF4D2E, banana#FFD100, mint#2BD99B, fuchsia#FF3ED2. One dominant (spread across large fields) + one supporting (accents, marks). - Outlines: 2–3px solid ink everywhere shapes meet paper — sticker cut-line aesthetic.
- No gradients, no drop-shadow blur; hard offset shadows ONLY (
6px 6px 0 ink), and only on 2–3 hero elements — one per viewport max.
2. TYPOGRAPHY (Fixed)
- Display: ultra-heavy — Archivo Black, Bricolage Grotesque 800, or system bold-900. Sizes
clamp(3rem, 8vw, 7rem), leading 0.95, tracking −0.02em. Uppercase or sentence-case with a rotated word for emphasis. - Body: same family at 500/400, 16–18px, 1.55. Or mono for the technical bits.
- Labels: mono or bold caps,
letter-spacing: 0.06em, 11–12px, always readable on its color field. - One emphasis trick allowed: a word underlined with a 6px accent bar, or set on a rotated solid field. Pick one, use it ≤ 3 times per page.
3. COMPOSITION (Fixed)
- Off-grid energy, on-grid bones: everything aligns to a 12-col grid EXCEPT deliberate 2–4° rotations on 2–3 hero elements (badge shapes, single words, button pair). Rotation is the spice; overuse = broken.
- Color-blocked sections: alternate paper sections with full-bleed ink or accent fields (ink sections get paper text). This is the structure that makes loud colors feel designed.
- Sticker components: badges and chips are solid fields with 2.5px ink outlines, square or pill — never gradient, never glass.
- Hero: huge type + sticker badge + one chunky CTA + color-blocked product panel. Two colors max in the hero viewport.
- Pricing: 3 chunky cards, each a solid field (paper / accent / paper), ink outlines, hard offset shadow on the featured one only.
4. CONTENT TREATMENT
- No emoji. Draw simple marks: dot grids, asterisks, arrows (→ with 3px strokes), and hand-drawn-feel SVG squiggles — underlines, scribble circles.
- Illustration allowed and encouraged: flat geometric shapes (circles, half-circles, spokes) in the two ink colors. No gradients, no 3D, no photorealism.
- Copy: short, direct, exclamation-mark budget ONE per page. Hype comes from color, not syntax.
- CTA: chunky — min 56px height, 2.5px ink outline, hard offset shadow, pressed state = shadow removed + 2px translate.
5. MOTION (Bouncy But Brief)
- Springs: overshoot allowed —
cubic-bezier(0.34, 1.56, 0.64, 1)on entrances, 350–500ms, one wave per element (no repetition). - Hover: buttons translate −3px with shadow growing +2px. Logo wiggle ≤ 1 time. No infinite loops, no marquees.
6. CHECKLIST (Fail the page if…)
- [ ] More than two saturated colors + cream + ink on the palette.
- [ ] Any gradient or soft blur shadow.
- [ ] More than ~3 rotated elements per page.
- [ ] Any emoji.
- [ ] Body text below 16px or lacking contrast (4.5:1 minimum).
- [ ] Display type under 3rem.
- [ ] Any element of the design that looks scared to be there.
