design

design — Creative Web Design Intelligence

Build expressive, non-generic websites. Pre-trained with design intelligence from 24 award-quality sites.

Reference Files

Read these before designing:

• ${CLAUDE_SKILL_DIR}/references/design-intelligence.md — 9 core principles (content IS the design, effects support never star)
• ${CLAUDE_SKILL_DIR}/references/baselines.json — data-driven defaults from 24 sites (typography, animation, scroll patterns)
• ${CLAUDE_SKILL_DIR}/references/effects-vocabulary.json — 30+ effects with implementation code
• ${CLAUDE_SKILL_DIR}/references/creative-vision.json — 12 metaphor-to-design mappings, 10 archetypes, 10 hero types
• ${CLAUDE_SKILL_DIR}/references/fonts.json — 40+ curated fonts with avoid list
• ${CLAUDE_SKILL_DIR}/references/anti-patterns.json — 20+ patterns that make sites look AI-generated

Sub-skill references (read as needed):

• ${CLAUDE_SKILL_DIR}/references/taste.md — taste analysis process
• ${CLAUDE_SKILL_DIR}/references/layout.md — hero experiences, page archetypes, composition
• ${CLAUDE_SKILL_DIR}/references/motion.md — scroll storyboarding, animation timing, reliable patterns
• ${CLAUDE_SKILL_DIR}/references/atmosphere.md — grain, texture, cursors, preloaders
• ${CLAUDE_SKILL_DIR}/references/effects.md — image-to-particle, WebGL, canvas techniques
• ${CLAUDE_SKILL_DIR}/references/audit.md — scoring, inspiration routing, stack scaffolding

Harness (reference site analysis)

When a user provides a reference URL, run the capture harness:

node ${CLAUDE_SKILL_DIR}/templates/capture-scroll.js "$ARGUMENTS" "/tmp/scroll-capture"

Auto-installs playwright on first run. Captures: screenshots, design tokens, animations, scroll JS, hover states, video.

After reading the captures, delete them: rm -rf /tmp/scroll-capture

To make the library smarter over time:

node ${CLAUDE_SKILL_DIR}/templates/learn.js --capture-and-learn "[URL1]" "[URL2]"

Build Process: Gather → Understand → Propose → Build → Deliver

1. Gather

• Create taste/inspos/ and taste/assets/ at the PROJECT ROOT if they don't exist
• Read moodboard images from ./taste/inspos/
• Read real assets from ./taste/assets/
• Check for reference URLs in ./taste/inspos/inspos.txt — run harness on each URL
• Also check: did the user paste URLs or attach images directly in the conversation? Use those too.
• Read the user's brief from conversation
• Don't block if no moodboard — proceed with baselines + verbal brief

2. Understand

• Read ${CLAUDE_SKILL_DIR}/references/design-intelligence.md — content IS the design, effects support never star
• Read ${CLAUDE_SKILL_DIR}/references/baselines.json — nav: 15.7px, body: 16.1px, transitions: 0.8s, easing: cubic-bezier(0.4,0,0.2,1), scroll start: '0% 90%'
• Match to ${CLAUDE_SKILL_DIR}/references/creative-vision.json — metaphor, archetype, hero type
• Select fonts from ${CLAUDE_SKILL_DIR}/references/fonts.json — check avoid list
• Auto-select effects from ${CLAUDE_SKILL_DIR}/references/effects-vocabulary.json based on energy
• No defaults. Every decision from the user's inputs. If your plan sounds like your last build, re-read the moodboard.

3. Propose

Present your direction BEFORE building:

1. "Here's what I see in your references: [specific]"
2. "Here's what I'd build: [color, type, layout, energy]"
3. "Does this feel right?" WAIT for approval.

4. Build

• Detect tech stack (vanilla HTML, React, Next, Astro, Svelte, Vue)
• Write a scroll storyboard as a comment (frame by frame, not sections)
• Use real assets from ./taste/assets/ — every image appears on the page
• Apply effects from vocabulary. Minimum: blur-in on images, masked reveal on headings, underline sweep on links, hover parallax, smooth scroll.
• Use baselines for values: scroll triggers at start: '0% 90%', transitions at 0.8s, easing cubic-bezier(0.4,0,0.2,1)
• Place output where the user's stack expects it

5. Deliver

Self-check: Does this reflect the moodboard, not a template? Are all assets used? All interactions working? Is the layout DIFFERENT from the last project?