Perfect for Visual AI Agents needing bespoke illustration and UI design capabilities with a focus on watercolor aesthetics and organic typography. Repo for the AI Recap Newsletter

How do I install design?

Run the command: npx killer-skills add Velocity-Alpha/ai-recap-newsletter/design. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for design?

Key use cases include: Generating bespoke watercolor-inspired illustrations for hero sections, Designing organic, non-corporate UI components with loose watercolor washes, Crafting editorially-focused typography systems with muted blues, rusts, and sages.

Which IDEs are compatible with design?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for design?

Requires a strong understanding of editorial design principles. Limited to applications with a focus on organic, handmade aesthetics. May not be suitable for applications requiring high-contrast, corporate design languages.

design

Install design, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md

Readonly

AI Recap Design System

Name: design
Availability: InStock
Author: Velocity-Alpha

Philosophy

Editorial, not startup. We're a daily briefing, not a SaaS product. Think Monocle meets Morning Brew — authoritative, warm, handcrafted.

Watercolor soul. Our illustrations use loose watercolor washes in muted blues, rusts, and sages. The UI should feel like it belongs alongside them — soft edges, organic warmth, zero corporate sterility.

Quiet confidence. Let typography and whitespace do the work. Color supports structure and action, never decoration.

Tailwind & CSS Tokens

This project uses Tailwind CSS 4. Most tokens are defined as CSS variables in app/globals.css and are automatically available via Tailwind utilities or as var(--token-name).

Backgrounds

Token	Hex	Tailwind Utility	Usage
`--bg-main`	`#FAFAF8`	`bg-background`	Page background (warm paper)
`--bg-warm`	`#F7F6F3`	`bg-secondary`	Section alternation, inputs
`--bg-card`	`#FFFFFF`	`bg-card`	Cards, elevated surfaces

Text

Token	Hex	Tailwind Utility	Usage
`--text-primary`	`#2C3E4A`	`text-foreground`	Headlines, body copy
`--text-secondary`	`#5A6B78`	`text-secondary`	Descriptions, metadata
`--text-muted`	`#8A9BA8`	`text-muted-foreground`	Captions, timestamps, labels

Watercolor Palette

Use these for accents and decoration. They are available as standard CSS variables.

Token	Hex	Character
`--watercolor-blue`	`#A8C5D9`	Cool, calm — product tags
`--watercolor-blue-deep`	`#6B9BB8`	Stronger blue moments
`--watercolor-rust`	`#C4A484`	Warm, earthy — funding tags
`--watercolor-rust-deep`	`#B8956E`	Richer terracotta
`--watercolor-sage`	`#9DB4A0`	Organic, trustworthy — policy tags
`--watercolor-ink`	`#3D4F5F`	Deep contrast — subscribe section

Functional

Token	Hex	Tailwind	Usage
`--accent-primary`	`#5A7A8A`	`color-primary`	Links, secondary actions
`--accent-warm`	`#B8856E`	-	Live indicators, primary CTAs
`--border`	`#D4DDE3`	`border-border`	Visible dividers
`--border-light`	`#E8EDF0`	`border-muted`	Subtle separators

Typography

Fonts

Role	Family	Token	Tailwind Utility
Display	Libre Baskerville	`--font-serif`	`font-serif`
Body/UI	Source Sans 3	`--font-sans`	`font-sans`

Style Rules

Serif for editorial content: headlines, card titles, pull quotes. Use font-serif.
Sans for UI: buttons, navigation, labels, body copy. Use font-sans.
Never uppercase serif. Uppercase is reserved for sans-serif labels/tags only.

Spacing & Layout

Spacing tokens map to rem values for consistency:

Token	Value	Tailwind Usage
`--space-xs`	8px (0.5rem)	`p-[var(--space-xs)]`
`--space-sm`	16px (1rem)	`gap-4` or `gap-[var(--space-sm)]`
`--space-md`	24px (1.5rem)	`p-6` or `p-[var(--space-md)]`
`--space-lg`	40px (2.5rem)	`my-10` or `my-[var(--space-lg)]`

Radius & Shadows

Token	Value	Usage
`--radius`	4px	Buttons, inputs, tags (`rounded`)
`--radius-lg`	8px	Cards, modals (`rounded-lg`)

Shadows

Defined in components, not as global Tailwind tokens yet.

Card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)
Elevated: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.08)

Watercolor Animation Patterns

Use these classes for the signature watercolor feel:

css
1/* Signature Watercolor Blob */
2.watercolor-blob {
3  position: absolute;
4  border-radius: 50%;
5  filter: blur(40px);
6  opacity: 0.12;
7  pointer-events: none;
8}

Avoid saturated colors: Never use default Tailwind blues or reds.
Background: Always default to --bg-main (#FAFAF8).

Do / Don't

Do

Use font-serif for headlines.
Use bg-background for the main page.
Apply watercolor tones as subtle accents.

Don't

Uppercase serif type.
Use sharp corners (min 4px radius).
Overuse shadows.

Brand Voice (for reference)

Tone: Informed, concise, subtly warm. A knowledgeable colleague, not a hype machine.

Headlines: Declarative, present-tense. "Anthropic closes $3B round" not "Anthropic has just closed..."

CTAs: Direct but unhurried. "Subscribe free" / "Full briefing →"

Last updated: February 2026

design — community ai-recap-newsletter, community, ide skills, Claude Code, Cursor, Windsurf

About this Skill

Agent Capability Analysis

Ideal Agent Persona

Core Value

↓ Capabilities Granted for design

! Prerequisites & Limits

Browser Sandbox Environment

⚡️ Ready to unleash?

design

AI Recap Design System

Philosophy

Tailwind & CSS Tokens

Backgrounds

Text

Watercolor Palette

Functional

Typography

Fonts

Style Rules

Spacing & Layout

Radius & Shadows

Shadows

Watercolor Animation Patterns

Do / Don't

Do

Don't

Brand Voice (for reference)

FAQ & Installation Steps

? Frequently Asked Questions

What is design?

How do I install design?

What are the use cases for design?

Which IDEs are compatible with design?

Are there any limitations for design?

↓ How To Install

Related Skills

Looking for an alternative to design or another community skill for your workflow? Explore these related open-source skills.

widget-generator

flags

zustand

data-fetching