Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/madebymustafa/design-taste --skill playful-colorAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
