Imported from kdaigle/daigle-me (SKILL.md). Install upstream with npx skills add kdaigle/daigle-me. Copyright stays with the author.

Daigle Me

Use this skill to make visual design feel more like Kyle Daigle: useful, trusted, product-led, indie-maker, and fun without becoming cartoonish or generic. This is a taste filter that should shape the work before generic frontend polish is applied.

North Star

Make the interface feel like it was built by a thoughtful indie product maker who understands developers: simple enough to trust, distinct enough to remember, and alive enough to feel fun.

The default goal is not "beautiful." The goal is: developers trust it, understand it quickly, want to try it, and remember one delightful thing about it.

Core Taste DNA

1. Indie maker energy over corporate polish - Favor product-led specificity, human edges, small crafted details, and a sense that a real builder made this.
2. Developer-authentic over tech theater - Use visual language that respects technical audiences: structure, clarity, honest affordances, real product states, and details that reward close inspection.
3. Simple first, memorable second - Reduce taxonomy, copy, and layout complexity before adding flair. If the core idea is muddy, no amount of motion fixes it.
4. Playful and crisp motion - Add more animation than a sterile enterprise UI would, but keep it fast, purposeful, and responsive.
5. Selective whimsy - Include a few moments of surprise or personality, not constant decoration.
6. Trust turns into adoption - Visual decisions should make the product feel understandable, credible, and worth trying.
7. Premium utilitarian materials - Borrow from technical travel gear and high-quality tools: comfortable, precise, durable, compact, matte, tactile, quietly capable.

Strong Enemy

Fight generic AI/SaaS defaults aggressively:

• Purple-blue gradients as the main idea
• Glowing orbs, glassmorphism, neon halos, and vague "AI magic" effects
• Centered hero + dark mesh background + three equal feature cards
• Decorative sparkles with no product meaning
• Over-polished corporate Microsoft/GitHub brand-safe blandness
• Default Inter/Roboto/system-font pages that feel like a template
• Copy that says "revolutionize," "unlock," "seamless," or "supercharge" without product evidence
• Motion that loops forever just to seem advanced

When you see these patterns, say so directly and replace them with a more specific product idea.

Default Design Dials

Use these defaults unless the brief clearly requires otherwise:

Required Design Read

Before making or revising UI, state one concise design read:

Reading this as: <surface> for <audience>, leaning into <indie/product-led direction>, with <simple motion/whimsy plan>.

If the brief is ambiguous, ask one focused question. Otherwise, proceed and make an opinionated call.

Visual Direction

Prefer:

• Clear product surfaces over abstract marketing art
• Slightly asymmetric layouts that still scan quickly
• One strong visual metaphor tied to the product, not a generic theme
• Honest UI artifacts: command bars, cards, traces, diffs, logs, receipts, timelines, maps, workbenches, notebooks, tiny diagrams
• Warm neutral foundations with one unusual accent, rather than rainbow palettes
• Matte, tactile, paper/tool/material cues instead of glossy glass
• Characterful typography for headings paired with highly readable body text
• Small maker marks: stamps, labels, annotations, handoff notes, status chips, tiny illustrations, subtle texture, or product-specific easter eggs

Avoid:

• Feature grids that could belong to any startup
• Decorative dashboards with fake charts
• Empty visual metaphors like "constellation of intelligence"
• Pure minimalism that becomes sterile
• Maximalism that hides the product idea

Motion Rules

Animation should make the app more fun while staying simple.

Default motion personality

• Playful but crisp: quick, responsive, and easy to interrupt.
• Whimsy in selected moments: a delightful flourish when something completes, appears for the first time, or teaches the user what changed.
• Never sluggish: no slow cinematic transitions for repeated actions.

Timing defaults

Preferred techniques

• Animate transform, opacity, and occasionally filter for small local elements.
• Use short staggered reveals for grouped content.
• Use tactile press states: subtle scale, shift, or snap.
• Use origin-aware motion: popovers should emerge from the trigger; panels should move from their spatial source.
• Add small completion moments: checkmark draw, card settle, label stamp, tiny mascot/object motion, confetti-like micro burst, or a playful copy change.
• Respect prefers-reduced-motion; keep whimsy optional or simplified.

Where to add whimsy

Good places:

• Empty states
• First-run/onboarding moments
• Successful task completion
• Loading states that would otherwise feel dead
• Mode switches
• Small celebratory moments after user effort
• Product-specific easter eggs

Bad places:

• Keyboard-heavy workflows used dozens of times per day
• Destructive confirmations
• Error states that need calm clarity
• Security, billing, or compliance surfaces
• Dense data workflows where animation slows comprehension

Copy Voice

Copy should be crisp, direct, and slightly human. It should sound like a builder explaining what matters, not a brand campaign.

Prefer:

• "Ship the draft."
• "Nothing to review yet."
• "Your next move is ready."
• "This changed because..."
• "Make developers trust us again."

Avoid:

• "Unlock seamless productivity."
• "Harness the power of AI."
• "Revolutionize your workflow."
• "Supercharge your development journey."

Critique Style

Be direct and opinionated. Call out blandness.

Use this pattern:

1. What feels generic - Name the default or trope.
2. Why it weakens trust or memory - Explain the product/design cost.
3. What to do instead - Give a concrete replacement.

Example:

This still feels like a generic AI SaaS landing page: dark gradient hero, centered headline, and interchangeable cards. Replace the abstract glow with a product-specific command surface, add one tactile completion animation, and make the headline say exactly what the user can do next.

Output Format for Design Work

When applying this skill, include:

1. Design read - One sentence.
2. Taste direction - The product-led visual idea.
3. Motion plan - What animates, why, and where whimsy appears.
4. Anti-generic changes - The specific defaults being avoided.
5. Implementation - Make the design real in code or concrete artifact edits when asked to build.

Keep the explanation concise unless the user asks for a full rationale.

Pairing With Other Skills

• Use with frontend-design or impeccable when creating or revising UI.
• Use with theme-factory when creating a visual theme, but override generic palettes with this skill's taste DNA.
• Use with accessibility when motion, color, or interaction changes might affect usability.
• Use with web-artifacts-builder when creating HTML artifacts, dashboards, visualizations, or interactive tools.

This skill should usually run before broad polish skills so the design has a personal point of view before it becomes refined.