USP
Unlike generic prompts, ClawFu offers 175 curated, expert-attributed marketing skills following the Agent Skills open standard, ensuring reliable discovery and composability across various AI tools. Its focus on "when to use" triggers make…
Use cases
- 01Equipping AI agents with expert marketing knowledge
- 02Building sophisticated marketing automation workflows
- 03Optimizing ad spend and Google Ads campaigns
- 04Conducting structured website audits and design direction
- 05Analyzing A/B test statistical significance
Detected files (8)
skills/ai-design/web-design-director/SKILL.mdskillShow content (33070 bytes)
# Web Design Director > Visual design direction framework organized by emotional intent (Warm/Cold x Active/Calm). The first design reference system that categorizes sites by what they make you FEEL, not how they look. Includes 48 annotated public website references. ## When to Use This Skill - Starting a new website project and deciding the visual direction before coding - A client says "I want it to feel professional but warm" and you need to translate that into concrete design decisions - You have a brand positioning (Dunford, StoryBrand) and need to map it to visual language - Choosing between design approaches (dark mode vs light, minimal vs rich, editorial vs product) - Building a mood board from references that match the brand's emotional territory - When AI-generated designs come back looking "template-y" because they lack intentional direction ## Methodology Foundation **Sources**: - Emotional Design (Don Norman, 2004) — visceral, behavioral, reflective processing - Brand positioning theory (April Dunford, "Obviously Awesome") — competitive alternatives define visual territory - Color psychology research — warm/cool spectrum and behavioral response - Web design pattern analysis — 48 public sites analyzed across 4 emotional quadrants - Gap analysis of 12 design inspiration platforms (Awwwards, Dribbble, Godly, Mobbin, etc.) **Core Insight**: Every existing design inspiration platform (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) categorizes by visual style, industry, platform, or color. ZERO platforms organize by emotional intent. This is the gap. A "minimal dark site" can feel luxurious (Cartier) or threatening (CrowdStrike) — the visual style is the same, the emotional effect is opposite. Style without intent is decoration. Intent without style is a wireframe. **The Emotional Quadrant**: ``` WARM (approach, trust) | Warm+Active | Warm+Calm (energy, | (comfort, delight) | safety) | ACTIVE --------+-------- CALM (momentum, | (restraint, disruption) | authority) | Cold+Active | Cold+Calm (innovation,| (luxury, power) | exclusivity) | COLD (distance, precision) ``` **Why This Matters**: Brand positioning determines which quadrant you design in. A child psychologist belongs in Warm+Calm. A developer tool belongs in Cold+Active. Designing a child psychologist's site with Vercel's aesthetic is a positioning mismatch — no matter how "clean" it looks. --- ## What Claude Does vs What You Decide > "Claude selects the references and patterns. You validate the emotional fit." | Claude handles | You provide | |---------------|-------------| | Mapping brand positioning to emotional quadrant | Brand values, target audience, competitive alternatives | | Selecting relevant references from the library | Gut-check: does this reference FEEL like my brand? | | Extracting design patterns (typography, spacing, color, motion) | Budget and technical constraints | | Generating a design direction document with rationale | Final approval on direction before coding begins | | Flagging positioning mismatches (warm brand + cold design) | Client context Claude can't see | **Remember**: The reference library is a starting point for conversation, not a prescription. The best design direction often comes from combining elements across quadrants — a Warm+Calm palette with Cold+Active typography, for example. --- ## What This Skill Does 1. **Emotional Positioning** — Maps brand positioning to the correct emotional quadrant 2. **Reference Selection** — Surfaces 3-5 annotated public websites that match the target feeling 3. **Pattern Extraction** — Identifies the specific design mechanics that create each emotional effect 4. **Direction Document** — Generates a design brief with palette, typography, spacing, motion, and layout decisions 5. **Mismatch Detection** — Flags when design choices contradict brand positioning 6. **Cross-Quadrant Blending** — Guides intentional mixing of elements from different quadrants ## How to Use ### Get design direction for a new website ``` I'm designing a website for [brand/business type]. Target audience: [who]. Brand feeling: [2-3 emotional words]. Competitive alternatives: [what they'd use instead of this brand]. Load the web-design-director skill. ``` ### Find references for a specific feeling ``` I need website references that feel [emotional description]. Not [what to avoid]. The brand is in [industry]. Show me 5 annotated references from the library. ``` ### Audit an existing design against brand positioning ``` Here's our current site: [URL or screenshot]. Our brand positioning is: [positioning statement]. Does the design match the emotional intent? What's misaligned? ``` --- ## Instructions ### Step 1: Determine the Emotional Quadrant Ask these questions to place the brand: ``` ## Brand Emotional Mapping **1. What should a visitor feel in the first 3 seconds?** [ ] Safe, welcomed, at ease (→ Warm) [ ] Impressed, curious, intrigued (→ Cold) **2. What should the site's energy level be?** [ ] Dynamic, forward-moving, "things are happening" (→ Active) [ ] Restrained, spacious, "take your time" (→ Calm) **3. What's the brand's relationship with the visitor?** [ ] Peer/friend/guide (→ Warm) [ ] Expert/authority/institution (→ Cold) **4. Competitive alternatives — what would people use instead?** (This determines your visual territory — you must look DIFFERENT from alternatives) ``` **Quadrant determination**: | Combination | Quadrant | Signature feeling | |-------------|----------|-------------------| | Warm + Active | **Energetic Warmth** | "This is exciting AND friendly" | | Warm + Calm | **Nurturing Comfort** | "I feel safe and understood here" | | Cold + Active | **Innovative Power** | "This is cutting-edge and serious" | | Cold + Calm | **Refined Authority** | "This is elevated and exclusive" | --- ### Step 2: Select References from the Library Choose 3-5 references from the matching quadrant. For each, note: - What specific design mechanic creates the emotional effect - Which section/page demonstrates it best - What to borrow vs what to leave behind **Cross-quadrant blending rules**: - Borrow ONE element from an adjacent quadrant for contrast (e.g., Cold+Active typography on Warm+Calm palette) - NEVER borrow from the opposite quadrant (Cold+Calm elements on a Warm+Active site = confusion) - Adjacent quadrants share one axis: Warm+Calm and Warm+Active share warmth; Cold+Calm and Cold+Active share precision --- ### Step 3: Extract Design Decisions For each design dimension, reference the library to make a specific choice: ``` ## Design Direction Document **Quadrant**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm] **Primary references**: [3 sites from library] **Cross-quadrant accent**: [1 element from adjacent quadrant, if any] ### Color Palette - **Background**: [specific color + reference site that uses it] - **Primary accent**: [specific color + emotional rationale] - **Text**: [dark/light + contrast ratio reasoning] - **System**: [monochromatic / complementary / analogous] ### Typography - **Headings**: [serif/sans/display + weight + specific font suggestion] - **Body**: [font + size + line-height + rationale from reference] - **Personality**: [what the type says about the brand] ### Spacing & Layout - **Density**: [generous/moderate/compact + reference] - **Grid**: [columns + max-width + rationale] - **White space**: [aggressive/balanced/minimal] - **Section rhythm**: [alternating/consistent/progressive] ### Motion & Interaction - **Animation style**: [subtle/expressive/none + reference] - **Scroll behavior**: [smooth/standard/parallax] - **Hover states**: [transform type + timing] - **Page transitions**: [type or none] ### Photography & Imagery - **Style**: [photography/illustration/abstract/mixed] - **Emotional direction**: [reference to minimalist-image-director quadrant] - **Treatment**: [full-color/muted/duotone/grain] ### Layout Pattern - **Hero**: [full-bleed/contained/split/text-only] - **Cards**: [bordered/borderless/elevated/flat] - **Navigation**: [top/side/minimal/hidden] ``` --- ### Step 4: Validate Against Positioning Before finalizing, run the mismatch check: ``` ## Positioning Mismatch Check - [ ] Does the color temperature match the brand warmth? (warm brand = warm colors) - [ ] Does the animation level match the brand energy? (calm brand ≠ aggressive animations) - [ ] Does the typography match the brand authority level? (playful brand ≠ all-caps sans-serif) - [ ] Would a visitor from the target audience feel welcomed or intimidated? - [ ] Does this look DIFFERENT from the competitive alternatives? - [ ] Would this design work for the brand's WORST day? (not just launch day) ``` --- ## Reference Library — 48 Annotated Public Websites ### WARM + CALM — Nurturing Comfort *"I feel safe and understood here"* Sites in this quadrant use: warm color palettes, generous spacing, soft imagery, approachable typography, gentle transitions. They prioritize readability and emotional comfort over visual impact. | # | Site | Industry | Key Design Mechanic | Best Page to Study | Anti-Pattern Warning | |---|------|----------|--------------------|--------------------|---------------------| | 1 | **[Headspace](https://headspace.com)** | Wellness/Meditation | Rounded shapes + warm illustration + pastel palette. Feels like a gentle hug. | Homepage hero + onboarding flow | Illustrations can tip into childish if not carefully balanced | | 2 | **[Allbirds](https://allbirds.com)** | Sustainable Fashion | Earth tone photography + natural textures + clean grid. Product-first but warm. | Product detail pages | Can feel too "eco-corporate" without personality | | 3 | **[Wildling Shoes](https://wildling.shoes)** | Children's Footwear | Nature photography + warm neutrals + organic flow. Feels like a forest walk. | Homepage scroll narrative | Easy to lose product focus in the nature imagery | | 4 | **[Kinfolk](https://kinfolk.com)** | Lifestyle Editorial | Typography-led + generous whitespace + warm photography. Quiet confidence. | Article layouts | Can feel too sparse if content is thin | | 5 | **[Cereal Magazine](https://readcereal.com)** | Travel/Design | Muted warm palette + editorial grid + contemplative imagery. Slow-paced. | Travel guides | Low contrast can hurt readability | | 6 | **[Aesop](https://aesop.com)** | Beauty/Skincare | Warm-toned product photography + serif typography + restrained layout. Sophisticated warmth. | Store locator + product pages | Walks the line between Warm+Calm and Cold+Calm | | 7 | **[Everlane](https://everlane.com)** | Ethical Fashion | Clean layout + warm lifestyle photography + transparent pricing. Honest warmth. | "About" page + factory stories | Transparency messaging can feel preachy if overdone | | 8 | **[Patagonia](https://patagonia.com)** | Outdoor/Purpose | Bold warm photography + purpose-driven content + editorial depth. Activist warmth. | Environmental stories | Activism-forward design may alienate non-activist audiences | | 9 | **[Nurture Life](https://nurturelife.com)** | Children's Meals | Soft pastels + rounded UI + warm food photography. Parent-friendly. | Meal plan page | Pastel overuse can feel generic "baby brand" | | 10 | **[Organic Basics](https://organicbasics.com)** | Sustainable Essentials | Neutral tones + breathing space + minimal navigation. Calm commerce. | Product category pages | Too minimal can feel like "nothing to see here" | | 11 | **[Ritual](https://ritual.com)** | Wellness/Supplements | Warm yellow accent + clean layout + scientific warmth. Trust through transparency. | Ingredient traceability page | Yellow accent can feel clinical if overdone | | 12 | **[Mejuri](https://mejuri.com)** | Accessible Jewelry | Warm lifestyle photography + soft gold accents + clean e-commerce grid. Approachable luxury. | Collection pages | Balancing luxury feel with accessible pricing | **Cross-quadrant pattern**: All Warm+Calm sites share generous line-height (1.6-1.8), muted/earthy palettes, and photography featuring real humans in natural environments. Navigation is always simple. Animations are always subtle. --- ### WARM + ACTIVE — Energetic Warmth *"This is exciting AND friendly"* Sites in this quadrant use: bold colors, dynamic animations, playful illustrations, energetic typography, interactive elements. They feel like an enthusiastic friend showing you something amazing. | # | Site | Industry | Key Design Mechanic | Best Page to Study | Anti-Pattern Warning | |---|------|----------|--------------------|--------------------|---------------------| | 1 | **[Notion](https://notion.so)** | Productivity | Warm illustrations + clean product UI + friendly micro-interactions. Organized enthusiasm. | Templates gallery + homepage | Illustration style is heavily copied — find your own | | 2 | **[Figma](https://figma.com)** | Design Tool | Vibrant gradients + collaborative energy + bold type. Design-forward without being cold. | Community/plugins page | Gradient-heavy design ages fast | | 3 | **[Mailchimp](https://mailchimp.com)** | Email Marketing | Distinctive illustration + warm brand yellow + playful UI. Personality-driven. | Homepage + pricing page | Quirky illustration style requires strong brand commitment | | 4 | **[Loom](https://loom.com)** | Video Communication | Warm purple + approachable UI + product-led animations. Tech that doesn't feel techy. | Product demo sections | Purple warmth can feel corporate if oversaturated | | 5 | **[Intercom](https://intercom.com)** | Customer Comms | Bold colors + conversational copy + dynamic layout. Friendly authority. | Product tour pages | Bold palette can overwhelm without whitespace discipline | | 6 | **[Monday.com](https://monday.com)** | Work Management | Vibrant multi-color + energetic animations + bold grid. High energy, high clarity. | Homepage product demo | Color explosion needs strict hierarchy or it's chaos | | 7 | **[Miro](https://miro.com)** | Collaboration | Warm yellow + collaborative imagery + dynamic canvas previews. Creative energy. | Use case pages | Collaboration-focused imagery can feel generic | | 8 | **[Webflow](https://webflow.com)** | Web Builder | Bold typography + empowering copy + creative showcases. Builder energy. | Showcase gallery + homepage | "Empowerment" messaging is crowded territory | | 9 | **[Framer](https://framer.com)** | Design/Publish | Design-forward + bold motion + dark-warm hybrid. Creative tool confidence. | Templates + homepage | Motion-heavy design can slow page loads | | 10 | **[Shopify](https://shopify.com)** | E-commerce Platform | Warm green + entrepreneurial energy + success stories. Optimistic commerce. | Success stories + homepage | Entrepreneurial energy can feel "hustle culture" | | 11 | **[Asana](https://asana.com)** | Project Management | Warm coral/gradient + clean product UI + purposeful animation. Organized delight. | Product features page | Gradient overuse dates quickly | | 12 | **[Canva](https://canva.com)** | Design Platform | Vibrant purple + accessible design + template showcases. Creative democratization. | Template gallery | Accessibility focus can lower perceived quality | **Cross-quadrant pattern**: All Warm+Active sites use bold primary colors (not pastels), dynamic scroll animations, product-in-action demonstrations, and copy that speaks directly to the user ("you"). Typography is sans-serif, medium-to-heavy weight. Illustrations are distinctive, not generic. --- ### COLD + CALM — Refined Authority *"This is elevated and exclusive"* Sites in this quadrant use: restrained palettes (black/white/grey + one accent), generous negative space, serif or refined sans-serif typography, minimal animation, large-scale imagery. They communicate through what they DON'T show. | # | Site | Industry | Key Design Mechanic | Best Page to Study | Anti-Pattern Warning | |---|------|----------|--------------------|--------------------|---------------------| | 1 | **[Cartier](https://cartier.com)** | Luxury Jewelry | Gold + black + cinematic photography + restrained interaction. Pure luxury. | High jewelry collections | Luxury codes translate poorly to non-luxury brands | | 2 | **[Givenchy](https://givenchy.com)** | High Fashion | All-black + full-bleed photography + minimal type. Fashion authority. | Campaign pages | Dark + minimal = intimidating for mass-market brands | | 3 | **[Monocle](https://monocle.com)** | Global Editorial | Clean editorial grid + restrained palette + typographic hierarchy. Intellectual confidence. | Magazine features | Editorial density requires deep content to justify | | 4 | **[Herzog & de Meuron](https://herzogdemeuron.com)** | Architecture | Pure white + project photography + minimal navigation. Architecture as interface. | Project pages | Ultra-minimal navigation frustrates casual visitors | | 5 | **[White Cube](https://whitecube.com)** | Gallery | Gallery-white + art-first + invisible UI. The content IS the design. | Exhibition pages | Works only when content is visually stunning | | 6 | **[Eleven Madison Park](https://elevenmadisonpark.com)** | Fine Dining | Dark + restrained + cinematic food photography. Culinary theater. | Menu/experience pages | Restaurant-level restraint only works at prestige price points | | 7 | **[Apple](https://apple.com)** | Technology | Heroic product photography + clean sections + precise typography. Controlled reveal. | Product launch pages | Apple's resources are unreplicable — adapt principles, not execution | | 8 | **[Porsche](https://porsche.com)** | Automotive | Dark + performance photography + precise grid + controlled motion. Engineered elegance. | Model configurator | Automotive drama requires studio-quality photography | | 9 | **[Bang & Olufsen](https://bang-olufsen.com)** | Audio/Design | Product-as-sculpture + neutral backgrounds + design-led layout. Object worship. | Product detail pages | Requires genuinely beautiful physical products | | 10 | **[Bottega Veneta](https://bottegaveneta.com)** | Luxury Fashion | Green accent + editorial photography + dramatic scale shifts. Confident restraint. | Digital journal | Bold restraint requires creative director-level judgment | | 11 | **[Ace & Tate](https://aceandtate.com)** | Eyewear | Clean photography + muted palette + editorial storytelling. Accessible refinement. | Stories/editorial section | Can feel "trying too hard" for luxury if product doesn't match | | 12 | **[The Row](https://therow.com)** | Luxury Fashion | Near-invisible navigation + maximal whitespace + whisper-quiet typography. Peak restraint. | Homepage | Extreme minimalism only works with strong brand recognition | **Cross-quadrant pattern**: All Cold+Calm sites use serif or thin sans-serif type, monochromatic or near-monochromatic palettes, full-bleed imagery, and a high content-to-chrome ratio. Navigation is minimized. Animation is rare and subtle. Copy is sparse — the imagery carries the message. --- ### COLD + ACTIVE — Innovative Power *"This is cutting-edge and serious"* Sites in this quadrant use: dark backgrounds, sharp typography, bold gradients, technical demonstrations, fast-paced scroll animations, code/data visualizations. They communicate speed, precision, and technical authority. | # | Site | Industry | Key Design Mechanic | Best Page to Study | Anti-Pattern Warning | |---|------|----------|--------------------|--------------------|---------------------| | 1 | **[Vercel](https://vercel.com)** | Infrastructure | Dark mode + sharp type + speed metrics visualization. Performance as brand. | Homepage + framework pages | Dark mode developer aesthetic alienates non-technical audiences | | 2 | **[Linear](https://linear.app)** | Issue Tracking | Dark + precise animations + product-first UI. Tool confidence. | Homepage scroll sequence | Ultra-refined dark UI requires significant engineering investment | | 3 | **[Stripe](https://stripe.com)** | Payments | Deep gradients + technical elegance + interactive demos. Beautiful complexity. | Documentation + payment flows | Stripe's production quality is a benchmark but requires dedicated design team | | 4 | **[Supabase](https://supabase.com)** | Database Platform | Dark green + developer-friendly + open source aesthetic. Technical warmth. | Dashboard preview + docs | Open-source aesthetic can feel "unfinished" to enterprise buyers | | 5 | **[Railway](https://railway.com)** | Cloud Platform | Dark purple + clean deployment UI + minimal friction design. Developer delight. | Dashboard + deploy flow | Purple dark mode is becoming cliche in dev tools | | 6 | **[Anthropic](https://anthropic.com)** | AI Research | Clean white + research depth + restrained authority. Scientific confidence. | Research papers page | Borders Cold+Calm — uses restraint over aggression | | 7 | **[Plaid](https://plaid.com)** | Financial API | Structured layout + technical diagrams + clean documentation. Fintech precision. | API documentation + use cases | Financial/API aesthetic can feel dry without product visualization | | 8 | **[Wiz](https://wiz.io)** | Cloud Security | Dark + bold gradients + threat visualization. Security authority. | Platform overview | Security aesthetic (dark+aggressive) can feel threatening | | 9 | **[CrowdStrike](https://crowdstrike.com)** | Cybersecurity | Dark red-black + aggressive typography + threat intelligence dashboards. Protective power. | Platform pages | Aggressive design repels non-security audiences | | 10 | **[Raycast](https://raycast.com)** | Developer Productivity | Dark + smooth animations + keyboard-first design. Speed culture. | Extensions store + homepage | Keyboard-first aesthetic limits mobile appeal | | 11 | **[Arc Browser](https://arc.net)** | Browser | Bold gradients + playful-dark hybrid + product innovation showcase. Tech with personality. | Homepage + feature reveals | Playful-dark is hard to maintain across an entire site | | 12 | **[Resend](https://resend.com)** | Email API | Dark + minimal + typographic focus + code-first. Developer minimalism. | Homepage + documentation | Ultra-minimal dev sites can feel empty to non-developers | **Cross-quadrant pattern**: All Cold+Active sites use dark backgrounds (#000-#1a1a1a), monospace or geometric sans-serif type, gradient accents (purple/blue/green), product demos as hero elements, and performance/speed messaging. Copy is technical and precise. Motion is deliberate and fast. --- ## Cross-Quadrant Pattern Analysis ### Design Dimensions by Quadrant | Dimension | Warm+Calm | Warm+Active | Cold+Calm | Cold+Active | |-----------|-----------|-------------|-----------|-------------| | **Background** | Cream/warm white (#FAF5F0-#FFF) | White + bold accent sections | Pure white or black | Dark (#000-#111) | | **Typography** | Rounded sans or warm serif | Bold sans, medium-heavy weight | Thin sans or elegant serif | Geometric/monospace sans | | **Primary color** | Earth tones, muted | Bold primaries (yellow, coral, purple) | Black/white + 1 accent | Gradients (purple, blue, green) | | **Spacing** | Very generous (64-128px) | Generous but dynamic (48-96px) | Maximal (80-160px) | Moderate (32-64px) | | **Animation** | Subtle fades, gentle scroll | Dynamic, playful, interactive | Rare, restrained | Fast, precise, technical | | **Imagery** | Warm photography, natural light | Illustrations + product demos | Full-bleed cinematic photography | Product UI, code, data viz | | **Copy tone** | Warm, empathetic, "we understand" | Energetic, "let's build", "you can" | Sparse, "the work speaks" | Technical, precise, "built for speed" | | **Navigation** | Simple, visible | Rich, product-organized | Minimal, hidden | Minimal, keyboard-friendly | | **Cards** | Borderless, soft shadow | Bold borders or colorful | Full-bleed or framed | Dark with subtle borders | | **CTA style** | Soft, rounded, warm color | Bold, filled, high-contrast | Understated, text-link style | Sharp, outlined or gradient | | **Line-height** | 1.6-1.8 (breathing room) | 1.4-1.6 (balanced) | 1.4-1.6 (elegant) | 1.3-1.5 (dense, efficient) | | **Max-width** | 1100-1200px | 1200-1400px | 1200-1400px | 1000-1200px | ### The "Adjacent Quadrant" Blending Guide Borrow ONE element from an adjacent quadrant to add tension and interest: | Your quadrant | Adjacent options | Blending example | |---------------|-----------------|-----------------| | Warm+Calm | Warm+Active OR Cold+Calm | Calm site + one bold CTA color (from Active) | | Warm+Active | Warm+Calm OR Cold+Active | Active site + generous spacing (from Calm) | | Cold+Calm | Warm+Calm OR Cold+Active | Luxury site + warm accent color (from Warm) | | Cold+Active | Warm+Active OR Cold+Calm | Dev tool + refined serif headlines (from Calm) | **NEVER blend opposites**: Warm+Calm + Cold+Active = confused identity. Cold+Calm + Warm+Active = schizophrenic. --- ## Skill Boundaries (Frontier Recognition) ### This skill excels for: - New website projects where visual direction hasn't been decided - Brand repositioning (mapping new positioning to new visual language) - Design audits (is the current design aligned with brand intent?) - Creative briefs for designers or AI coding tools - Cross-functional alignment (giving non-designers vocabulary for design feedback) ### This skill is NOT ideal for: - Specific UI component design (use `/frontend-design` for implementation) - Typography pairing details (this provides direction, not font selection) - Design system creation (this is strategic, not systematic) - Animation engineering (this defines intent, not keyframes) - Sites that intentionally subvert expectations (anti-design, brutalism) — those require breaking these rules deliberately ### Quality Checkpoints Before accepting the design direction: - [ ] The quadrant selection matches the brand positioning (not just personal taste) - [ ] The reference sites match the client's ASPIRATIONAL identity, not their current state - [ ] The cross-quadrant blend is intentional and limited (1 element max) - [ ] The direction document is specific enough to implement without further interpretation - [ ] A non-designer on the team could understand and validate the direction --- ## Iteration Guide > "Direction before decoration. Feel before font." ### Recommended Iteration Pattern | Pass | Focus | Questions to Ask | |------|-------|------------------| | **1st** | Quadrant | "Does this quadrant match the brand's emotional territory?" | | **2nd** | References | "Do these sites FEEL like my brand should feel?" | | **3rd** | Extraction | "Are the design decisions specific enough to implement?" | | **4th** | Mismatch | "Would a visitor from our target audience feel at home?" | ### Useful Follow-up Prompts - "The references feel right but the palette doesn't translate to our industry. Find references with the same energy but in [industry]." - "We're between Warm+Calm and Cold+Calm. Show me 3 sites that straddle that border." - "The direction is too safe. What would an adjacent-quadrant accent do to this design?" - "Our competitor uses [X quadrant]. How do we differentiate visually while staying in the same emotional territory?" - "Translate this design direction into a brief for the `/frontend-design` skill." --- ## Integration with Other ClawFu Skills | Skill | Integration Point | |-------|------------------| | **[design-trends-2026](../design-trends-2026/)** | Use AFTER quadrant selection — filter trends by emotional fit | | **[minimalist-image-director](../minimalist-image-director/)** | Use for photography direction within Warm+Calm and Warm+Active quadrants | | **[landing-page-copy](../../content/landing-page-copy/)** | Use for copy structure — then match copy tone to quadrant voice | | **[landing-page-optimizer](../../content/landing-page-optimizer/)** | Use for conversion mechanics — layer on top of emotional direction | | **`/frontend-design`** | Hand off the design direction document as input for code generation | | **[brand-strategy](../../branding/brand-strategy/)** | Use BEFORE this skill — brand strategy determines the quadrant | **Workflow sequence**: ``` brand-strategy → web-design-director → design-trends-2026 → minimalist-image-director → /frontend-design (positioning) (direction) (trend filter) (image generation) (code) ``` --- ## Checklists & Templates ### Design Direction Brief Template ``` ## Design Direction Brief **Brand**: ________________ **Target audience**: ________________ **Brand positioning statement**: ________________ **Competitive alternatives**: ________________ ### Emotional Quadrant **Selected**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm] **Rationale**: ________________ **Adjacent accent**: [element from adjacent quadrant, if any] ### Primary References (3-5 sites) | Site | What to borrow | What to leave behind | |------|---------------|---------------------| | [site 1] | [specific mechanic] | [what doesn't fit] | | [site 2] | [specific mechanic] | [what doesn't fit] | | [site 3] | [specific mechanic] | [what doesn't fit] | ### Design Decisions - **Background**: ________________ - **Primary color**: ________________ - **Typography headings**: ________________ - **Typography body**: ________________ - **Spacing density**: ________________ - **Animation style**: ________________ - **Photography direction**: ________________ - **Card style**: ________________ - **CTA style**: ________________ - **Hero pattern**: ________________ ### Validation - [ ] Matches brand quadrant - [ ] Different from competitive alternatives - [ ] Target audience would feel welcomed - [ ] Specific enough to implement ``` --- ## References ### Core Methodology - Norman, Don. "Emotional Design" (2004) - Visceral, behavioral, reflective processing - Dunford, April. "Obviously Awesome" (2019) - Competitive alternatives define positioning territory - Kittl x Savee. "2026 Design Trends Report" - Warm minimalism as dominant trend ### Design Inspiration Platforms (Gap Analysis) - [Awwwards](https://awwwards.com) - Categories: industry, technology, style. No emotional classification. - [Dribbble](https://dribbble.com) - Categories: color, media type. No emotional classification. - [Behance](https://behance.net) - Categories: field, tools. No emotional classification. - [Godly](https://godly.website) - Categories: style, type. No emotional classification. - [Mobbin](https://mobbin.com) - Categories: platform, flow type. No emotional classification. - [SiteInspire](https://siteinspire.com) - Categories: style, type, subject. No emotional classification. - [Lapa.ninja](https://lapa.ninja) - Categories: color, category. No emotional classification. - [Landbook](https://land-book.com) - Categories: type, color, style. No emotional classification. ### Color Psychology & Neuroscience - [Visual Environment & Thermal Perception (ScienceDirect)](https://www.sciencedirect.com/science/article/pii/S0306456523000293) - Visual warmth affects perception - [Color Psychology in Photography (Skylum)](https://skylum.com/blog/color-psychology-for-photographers) - Warm/cool behavioral response - [Cold Temperatures in Photos Increase Cognitive Control (ScienceDaily)](https://www.sciencedaily.com/releases/2017/04/170410085010.htm) - Warm → approach, cool → alert ### Web Design Analysis - [Web Design Trends 2026 (Webflow)](https://webflow.com/blog/web-design-trends) - Industry trend survey - [The Best SaaS Websites (2025-2026)](https://www.saasframe.io) - SaaS design pattern library --- ## Related Skills - [minimalist-image-director](../minimalist-image-director/) - AI photography within the emotional quadrant system - [design-trends-2026](../design-trends-2026/) - Current visual trends filtered by quadrant - [landing-page-copy](../../content/landing-page-copy/) - Copy structure matching quadrant voice - [landing-page-optimizer](../../content/landing-page-optimizer/) - Conversion mechanics on top of emotional direction - [brand-strategy](../../branding/brand-strategy/) - Brand foundation that determines the quadrant --- ## Skill Metadata ```yaml name: web-design-director category: ai-design subcategory: art-direction version: 1.0 author: GUIA source_expert: Don Norman (Emotional Design) + April Dunford (Positioning) + Web Design Pattern Analysis (48 sites) source_work: null difficulty: intermediate mode: centaur estimated_value: Creative director engagement (~2000-5000 EUR per project) tags: [web-design, art-direction, emotional-design, design-references, brand-positioning, UI-direction, design-system, mood-board, warm-minimalism] created: 2026-02-12 updated: 2026-02-12 ``` --- *This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.*skills/ai-design/website-finishing-director/SKILL.mdskillShow content (31339 bytes)
--- name: website-finishing-director description: "Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: **Pre-launch** - Final validation before going live; **Post-redesign** - Verify nothing broke during the overhaul; **Client handoff** - Structured proof that the site is ready; **Quarterly review** - Catch accumulated debt; **Single-pass focus** - Run just Pass 2 after a perf sprint" license: MIT metadata: author: ClawFu version: 1.0.0 mcp-server: "@clawfu/mcp-skills" --- # Website Finishing Director > Structured 5-pass website finishing audit — from first impression to launch readiness — scored on 100 points. Like painting: primer, base coat, details, clear coat, final inspection. No site ships without a finishing pass. ## When to Use This Skill - **Pre-launch gate** — Final validation before DNS goes live or traffic is sent - **Post-redesign audit** — After a visual overhaul, verify nothing regressed - **Client handoff** — Generate a structured report proving the site meets quality standards - **Quarterly maintenance** — Catch accumulated UX debt, broken links, stale content - **Targeted pass** — Run just one pass (e.g., "Pass 2 only" after a performance sprint) ## Methodology Foundation **Sources**: - Nielsen Norman Group — Heuristic evaluation framework (10 usability heuristics) - Google Web Vitals — LCP, CLS, INP thresholds - OWASP — Security headers baseline - Oli Gardner / Unbounce — Landing page conversion best practices - Don Norman — Emotional Design (visceral/behavioral/reflective layers) - GUIA production memory — 8 shipped websites, documented gotchas across Next.js, Framer Motion, GSAP, Lenis, Railway, Docker **Core Principle**: A website that passes Lighthouse and has correct meta tags is technically valid but not *finished*. Finishing is the gap between "it works" and "it's ready." It requires evaluating the site as a visitor experiences it — progressive, emotional, cross-device — not as a checklist of individual metrics. **Why This Matters**: Existing tools (Lighthouse, Screaming Frog, Awwwards) each audit one dimension. No tool combines visual polish + UX completeness + technical foundation + content quality + brand alignment in a sequential, scored workflow. This skill is that tool. --- ## What Claude Does vs What You Decide > "Claude runs the audit. You decide what ships." | Claude handles | You provide | |---------------|-------------| | Running each pass systematically against the checklist | The live URL or codebase access | | Scoring each checkpoint with rationale | Context: brand positioning, target audience, launch timeline | | Classifying issues as P0/P1/P2 | Override decisions (e.g., "P1 is acceptable for MVP") | | Generating the final report with fix suggestions | Final Go/No-Go judgment | | Flagging GUIA stack gotchas from production memory | Validation on real devices (Claude can't open Safari) | **Remember**: This is a centaur workflow. Claude structures the audit rigorously; you validate the verdict with human eyes on real devices. --- ## What This Skill Does 1. **5-Second First Impression Test** — Evaluates clarity, emotional fit, and CTA visibility in the first moments 2. **Technical Foundation Audit** — Performance (Core Web Vitals), SEO basics, security headers, broken links 3. **UX Completeness Check** — Component states, form behavior, animation polish, mobile usability 4. **Content & Brand Validation** — Copy quality, placeholder detection, voice consistency, visual coherence 5. **Cross-Device & Launch Readiness** — Browser testing, OG previews, analytics, 404 page, favicon ## How to Use ### Full website audit before launch ``` I'm about to launch [site URL]. Run a full website-finishing-director audit (all 5 passes). Brand quadrant: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]. Target audience: [who]. ``` ### Single pass after a specific fix ``` I just optimized performance on [site URL]. Run Pass 2 only (Technical Foundation). ``` ### Landing page quick audit ``` Audit this landing page: [URL]. Use the Landing Page profile (passes 1, 2, 4). ``` --- ## Instructions When running this audit, follow the 5 passes in order. Each pass builds on the previous one — foundation before polish. Score each checkpoint, classify issues by priority, then generate the final report. ### Audit Profiles Not every site needs all 5 passes. Select the profile that matches the project: | Profile | Passes | When to use | |---------|--------|-------------| | **Landing Page** | 1, 2, 4 | Single-page campaign or product page | | **Full Website** | 1, 2, 3, 4, 5 | Multi-page site with navigation, forms, content | | **E-commerce** | 2, 3, 5 | Store with cart, checkout, product pages | Adjust point totals proportionally when using a reduced profile. The Go/No-Go thresholds apply to the percentage score, not raw points. --- ### Pass 1: First Impression (15 points) *"What does a visitor understand and feel in 5 seconds?"* Show the homepage (or hero section) for 5 seconds. Answer these 5 questions — 3 points each: ``` ## Pass 1 — First Impression (5-Second Test) ### 1. WHAT is this? (3 pts) Can a visitor identify what the site/product/service IS? [ ] 3 — Immediately clear, no ambiguity [ ] 2 — Clear after reading subheadline [ ] 1 — Vague, requires scrolling to understand [ ] 0 — No idea what this is ### 2. WHO is it for? (3 pts) Are there signals identifying the target audience? [ ] 3 — Obvious demographic/psychographic signals [ ] 2 — Implied but not explicit [ ] 1 — Generic ("everyone") [ ] 0 — Actively confusing (signals wrong audience) ### 3. WHY should I care? (3 pts) Is the value proposition or benefit visible? [ ] 3 — Clear benefit, emotionally resonant [ ] 2 — Feature-focused but understandable [ ] 1 — Present but buried [ ] 0 — No value proposition visible ### 4. WHAT do I do next? (3 pts) Is the primary CTA visible and clear? [ ] 3 — CTA visible above fold, action-specific text [ ] 2 — CTA present but generic ("Learn more") [ ] 1 — CTA below the fold or hard to find [ ] 0 — No CTA visible ### 5. HOW does it feel? (3 pts) Does the emotional tone match the brand quadrant? [ ] 3 — Perfect quadrant match (warm brand = warm design) [ ] 2 — Mostly aligned, minor dissonance [ ] 1 — Noticeable mismatch (warm brand + cold design) [ ] 0 — Opposite quadrant (positioning confusion) ### Pass 1 Score: ___/15 Verdict: - 12-15: PASS — First impression is clear and emotionally aligned - 8-11: NEEDS WORK — Visitor gets it, but slowly or with friction - <8: FAIL — Redesign the above-fold experience ``` **Integration**: Compare the emotional feel against the `web-design-director` quadrant system. If the brand is Warm+Calm but the site feels Cold+Active, that's a P0 regardless of score. **GUIA gotchas for this pass**: - Calendly URL hardcoded in CTA instead of `/contact/` page (breaks analytics) - Mixing warm copy tone with cold UI elements (terracotta palette + monospace font = confusion) --- ### Pass 2: Technical Foundation (25 points) *"Is the infrastructure solid enough to build on?"* ``` ## Pass 2 — Technical Foundation ### Performance (10 pts) | Metric | Target | Score | |--------|--------|-------| | LCP (Largest Contentful Paint) | ≤ 2.5s | 0-3 pts | | INP (Interaction to Next Paint) | ≤ 200ms | 0-2 pts | | CLS (Cumulative Layout Shift) | ≤ 0.1 | 0-2 pts | | Lighthouse Performance score | ≥ 85 | 0-3 pts | Scoring: - LCP: 3 = ≤2.5s, 2 = ≤4.0s, 1 = ≤6.0s, 0 = >6.0s - INP: 2 = ≤200ms, 1 = ≤500ms, 0 = >500ms - CLS: 2 = ≤0.1, 1 = ≤0.25, 0 = >0.25 - Lighthouse: 3 = ≥90, 2 = ≥85, 1 = ≥70, 0 = <70 ### SEO Basics (8 pts) - [ ] (2 pts) Canonical URLs defined + trailing slash consistent - [ ] (1 pt) Meta titles unique per page (≤60 chars) - [ ] (1 pt) Meta descriptions present per page (≤160 chars) - [ ] (1 pt) Sitemap.xml accessible and valid - [ ] (1 pt) robots.txt present and correct - [ ] (1 pt) Structured data present (JSON-LD) - [ ] (1 pt) Alt text on all images ### Security & Links (7 pts) - [ ] (2 pts) HTTPS enforced (no mixed content) - [ ] (2 pts) Security headers present (CSP, X-Frame-Options, HSTS, X-Content-Type-Options) - [ ] (1 pt) No broken internal links (404s) - [ ] (1 pt) No broken external links - [ ] (1 pt) No exposed source maps or debug endpoints in production ### Pass 2 Score: ___/25 Verdict: - 21-25: SOLID — Ship it - 16-20: ACCEPTABLE — Fix P0s, ship with P1 backlog - 11-15: FRAGILE — Significant technical debt - <11: BROKEN — Do not launch ``` **GUIA gotchas for this pass**: - `trailingSlash: true` missing in `next.config.js` (caused deindexation on Rental-CRM, Jan 2026) - `export const metadata` on a `'use client'` component (metadata not rendered server-side) - Module-level SDK init (Supabase/Stripe) fails at build when env vars missing — lazy-initialize inside functions - Vercel env vars trailing newline from `echo` — use `printf` instead - Railway `*.railway.internal` hostnames unreachable during Nixpacks build — use public URLs --- ### Pass 3: UX Completeness (25 points) *"Does the site handle real-world usage, not just the happy path?"* ``` ## Pass 3 — UX Completeness ### Component States (8 pts) For EACH interactive component (buttons, cards, forms, modals, lists): - [ ] (2 pts) Loading state — skeleton, spinner, or progressive render - [ ] (2 pts) Error state — clear message + recovery action - [ ] (2 pts) Empty state — helpful message, not blank screen - [ ] (2 pts) Success state — confirmation feedback Score: deduct per missing state across all components. 8 pts = all states covered. -1 per missing state (cap at 0). ### Forms (6 pts) - [ ] (1 pt) Client-side validation with clear error messages - [ ] (1 pt) Server-side validation (not just client) - [ ] (1 pt) Success feedback after submission (toast, redirect, or inline) - [ ] (1 pt) Submit button disabled during processing (no double-submit) - [ ] (1 pt) Spam protection (honeypot, reCAPTCHA, or rate limiting) - [ ] (1 pt) Privacy policy link near form (GDPR) ### Animation Polish (6 pts) - [ ] (1 pt) `viewport={{ once: true }}` on scroll animations (no replay on scroll-back) - [ ] (1 pt) `useGSAP` hook used (not `useEffect`) for GSAP animations - [ ] (1 pt) `prefers-reduced-motion` respected (disable or reduce animations) - [ ] (1 pt) No animation blocks content access (content visible even if animation fails) - [ ] (1 pt) Lenis initialized correctly (not Locomotive Scroll) - [ ] (1 pt) Exit animations don't cause layout shift ### Mobile Usability (5 pts) - [ ] (1 pt) Touch targets ≥ 44px (iOS HIG standard) - [ ] (1 pt) No horizontal overflow / horizontal scroll - [ ] (1 pt) Font sizes ≥ 16px for body text (prevents iOS zoom) - [ ] (1 pt) Sticky/fixed elements don't overlap content - [ ] (1 pt) Scroll behavior works correctly (no scroll-jacking that traps users) ### Pass 3 Score: ___/25 Verdict: - 21-25: COMPLETE — Real-world usage covered - 16-20: MOSTLY THERE — Edge cases need attention - 11-15: INCOMPLETE — Users will hit dead ends - <11: UNFINISHED — UX not production-ready ``` **GUIA gotchas for this pass**: - GSAP + React 18 Strict Mode fires animations 2x in dev (use `useGSAP`, not `useEffect`) - Global CSS `a { color: var(--color-coral) }` overrides Tailwind `text-white` on anchor CTAs — use inline `style={{ color: 'white' }}` - Framer Motion `AnimatePresence` exit animations break with Next.js App Router - Too many simultaneous `ScrollTrigger` instances kill mobile performance - Lenis package name: `npm install lenis` (NOT `@studio-freight/lenis`) --- ### Pass 4: Content & Brand (20 points) *"Is the content finished, consistent, and on-brand?"* ``` ## Pass 4 — Content & Brand ### Copy Quality (8 pts) - [ ] (2 pts) No placeholder text detected ("Lorem ipsum", "[Your Name]", "Coming soon", "example.com", "TODO", empty sections) - [ ] (1 pt) No spelling or grammar errors - [ ] (1 pt) Link text is descriptive (not "click here" or naked URLs) - [ ] (1 pt) CTA copy is specific ("Start free trial" not "Submit") - [ ] (1 pt) Heading hierarchy is logical (H1 → H2 → H3, one H1 per page) - [ ] (1 pt) Alt text is descriptive (not "image1.png" or empty) - [ ] (1 pt) Phone numbers, emails, addresses are real (not placeholder) ### Brand Voice (6 pts) - [ ] (2 pts) Tone matches brand positioning (warm/cold, formal/casual) - [ ] (2 pts) Voice is consistent across all pages (same person "speaking") - [ ] (1 pt) No AI-smoothing markers ("Don't hesitate to contact us", "In today's fast-paced world", "It's important to note that") - [ ] (1 pt) CTAs match the emotional quadrant (warm brand = inviting CTA, not aggressive) ### Visual Consistency (6 pts) - [ ] (1 pt) Color palette used consistently (no off-brand colors) - [ ] (1 pt) Typography hierarchy clear (display, heading, body, caption — max 2-3 fonts) - [ ] (1 pt) Spacing rhythm consistent (not random padding between sections) - [ ] (1 pt) Icon style uniform (don't mix outline, filled, and emoji) - [ ] (1 pt) Image treatment consistent (all photos same filter/tone, or all illustrations) - [ ] (1 pt) Component style consistent (cards, buttons, inputs follow same pattern) ### Pass 4 Score: ___/20 Verdict: - 17-20: POLISHED — Content is finished and on-brand - 13-16: GOOD — Minor inconsistencies, shippable - 9-12: ROUGH — Content needs editing pass - <9: UNFINISHED — Major content gaps or brand mismatch ``` **GUIA gotchas for this pass**: - Calendly URL must match the correct professional (Valeria vs Matthieu vs client) - Mixing warm copy ("We understand your challenges") with cold UI (dark mode, monospace, sharp corners) - AI-generated copy detection: remove double line breaks before publishing (AI signature on LinkedIn) - credou.bzh copy direction: mechanism-first, no CV, no parcours/timeline --- ### Pass 5: Cross-Device & Launch (15 points) *"Does it work everywhere, and is everything ready to go live?"* ``` ## Pass 5 — Cross-Device & Launch ### Browser Testing (5 pts) Test on the 3 major browsers. Score per browser: - [ ] (2 pts) Safari — renders correctly, animations work, fonts load - [ ] (2 pts) Chrome — renders correctly, animations work, fonts load - [ ] (1 pt) Firefox — renders correctly, no major breaks Per browser, check: layout, animations, fonts, forms, scroll behavior. Deduct 1 pt per browser with visual bugs. Deduct 2 pts per browser with functional bugs. ### Device Testing (4 pts) - [ ] (2 pts) Mobile (375px) — full site usable, no content cut off - [ ] (1 pt) Tablet (768px) — layout adapts, no awkward breakpoints - [ ] (1 pt) Desktop (1440px) — content doesn't stretch or float in empty space ### Launch Readiness (6 pts) - [ ] (1 pt) Analytics installed and firing (GA4, Plausible, or equivalent) - [ ] (1 pt) OG image renders correctly (test with opengraph.xyz or Twitter card validator) - [ ] (1 pt) 404 page exists and is styled (not default browser/framework error) - [ ] (1 pt) Favicon present in all sizes (16, 32, 180, 192, 512 — or SVG adaptive) - [ ] (1 pt) Google Search Console configured (or equivalent) - [ ] (1 pt) Social preview correct on LinkedIn, Twitter, WhatsApp ### Pass 5 Score: ___/15 Verdict: - 12-15: LAUNCH READY — Ship it - 9-11: ALMOST — Fix critical device/browser issues - <9: NOT READY — Cross-device experience is broken ``` **GUIA gotchas for this pass**: - Lenis smooth scroll has known issues on Safari — test carefully - Vercel env vars with trailing newline break OG image URLs - Docker healthcheck must pass before CI/CD reports success - `deploy.sh` uses `flock` — no concurrent deploys on VPS - Resend subdomain DNS: `send.send.<zone>` looks wrong but is correct (Resend adds `send.` prefix) --- ### Step 6: Generate the Final Report After running all applicable passes, compile the report: ``` ## Final Report Template # Website Finishing Audit: [Site Name] **URL:** [https://...] **Date:** [YYYY-MM-DD] **Profile:** [Landing Page / Full Website / E-commerce] **Auditor:** [Name] + Claude (website-finishing-director) --- ## Score Summary | Pass | Name | Score | Max | Status | |------|------|-------|-----|--------| | 1 | First Impression | __/15 | 15 | [PASS/NEEDS WORK/FAIL] | | 2 | Technical Foundation | __/25 | 25 | [SOLID/ACCEPTABLE/FRAGILE/BROKEN] | | 3 | UX Completeness | __/25 | 25 | [COMPLETE/MOSTLY/INCOMPLETE/UNFINISHED] | | 4 | Content & Brand | __/20 | 20 | [POLISHED/GOOD/ROUGH/UNFINISHED] | | 5 | Cross-Device & Launch | __/15 | 15 | [READY/ALMOST/NOT READY] | | **TOTAL** | | **__/100** | **100** | | --- ## Verdict | Score Range | Verdict | |-------------|---------| | 85-100 | LAUNCH READY | | 70-84 | CONDITIONAL — fix P0s then ship | | 50-69 | NEEDS WORK — significant issues | | <50 | NOT READY — major gaps | **Override rule:** 1 unresolved P0 = NOT READY, regardless of total score. **VERDICT: [LAUNCH READY / CONDITIONAL / NEEDS WORK / NOT READY]** --- ## Issues ### P0 — Blockers (must fix before launch) | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] | ### P1 — Important (fix within 1 week of launch) | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] | ### P2 — Nice-to-have (backlog) | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] | --- ## Strengths - [What the site does well — acknowledge good work] - [Specific design/technical/content wins] ## Recommendations 1. [Highest-priority improvement] 2. [Second priority] 3. [Strategic suggestion for next iteration] --- ## Sign-off - [ ] All P0s resolved - [ ] P0 + P1 resolved (optimal) - [ ] Stakeholder review completed - [ ] Go-live date confirmed: ____________ ``` --- ## Examples ### Example 1: Full Website Audit — credou.bzh **Context**: Personal brand website for a consultant. Warm+Calm quadrant. Next.js 16, Framer Motion, Lenis. Just completed copy v3 and deployed. **Input**: > Run a full website-finishing-director audit on credou.bzh. Brand quadrant: Warm+Calm. Target: decision-makers struggling with AI integration. **Output**: # Website Finishing Audit: credou.bzh **URL:** https://credou.bzh **Date:** 2026-02-12 **Profile:** Full Website **Auditor:** Matthieu + Claude (website-finishing-director) --- ## Score Summary | Pass | Name | Score | Max | Status | |------|------|-------|-----|--------| | 1 | First Impression | 13/15 | 15 | PASS | | 2 | Technical Foundation | 19/25 | 25 | ACCEPTABLE | | 3 | UX Completeness | 18/25 | 25 | MOSTLY THERE | | 4 | Content & Brand | 17/20 | 20 | POLISHED | | 5 | Cross-Device & Launch | 11/15 | 15 | ALMOST | | **TOTAL** | | **78/100** | **100** | | --- ## Verdict **CONDITIONAL** — Score 78/100. Fix P0s then ship. --- ## Issues ### P0 — Blockers | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 2 | Security headers missing (no CSP, no X-Frame-Options) | `next.config.js` | Add `headers()` config with CSP, X-Frame, HSTS, X-Content-Type | | 2 | 5 | 404 page is default Next.js error | `/app/not-found.tsx` | Create styled 404 page matching Papier/Encre theme | ### P1 — Important | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 2 | eslint.config.js missing | Project root | Add ESLint flat config | | 2 | 3 | `prefers-reduced-motion` not handled | `globals.css` | Add `@media (prefers-reduced-motion: reduce)` to disable animations | | 3 | 3 | Skip-to-content link missing | `layout.tsx` | Add visually hidden skip link | | 4 | 5 | Social preview not tested on WhatsApp | OG image | Verify OG renders on WhatsApp share | ### P2 — Nice-to-have | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 4 | "Le plan" section cards could use more varied spacing | `HomeContent.tsx` | Vary vertical padding between card rows | --- ## Strengths - Copy v3 (articulation bottleneck) is sharp — mechanism-first, no CV padding - Papier/Encre dual theme is cohesive and on-brand - Grain texture + borderless cards create genuine warmth (not template-y) - Edge-rendered OG image is a solid SEO win ## Recommendations 1. Fix security headers (P0) — 15 min task, high security impact 2. Create custom 404 page (P0) — maintain brand experience on dead links 3. Add `prefers-reduced-motion` (P1) — accessibility compliance --- **Why this works**: The audit catches the gap between "technically deployed" and "actually finished." The site scores well on impression and content but has infrastructure gaps (security headers, 404) that a pure Lighthouse audit would flag separately without prioritization. --- ### Example 2: Landing Page Audit — SaaS Product Launch **Context**: New SaaS landing page for a productivity tool. Cold+Active quadrant. Single page, no forms, CTA links to waitlist. **Input**: > Audit this landing page with the Landing Page profile (passes 1, 2, 4): taskflow.app. Quadrant: Cold+Active. Audience: engineering managers. **Output**: # Website Finishing Audit: TaskFlow **URL:** https://taskflow.app **Date:** 2026-02-12 **Profile:** Landing Page (Passes 1, 2, 4) **Auditor:** Product team + Claude (website-finishing-director) --- ## Score Summary | Pass | Name | Score | Max | Status | |------|------|-------|-----|--------| | 1 | First Impression | 9/15 | 15 | NEEDS WORK | | 2 | Technical Foundation | 22/25 | 25 | SOLID | | 4 | Content & Brand | 11/20 | 20 | ROUGH | | **TOTAL** | | **42/60** | **60** | **(70%)** | --- ## Verdict **CONDITIONAL** — 70% score. P0 in Pass 1 requires attention. --- ## Issues ### P0 — Blockers | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 1 | WHAT is this? scored 1/3 — product category unclear in hero | Hero section | Add one line: "Project tracking for engineering teams" above the tagline | | 2 | 4 | 3 placeholder testimonials with stock photos | Social proof section | Remove section entirely, or replace with real beta user quotes | ### P1 — Important | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 1 | CTA says "Get Started" — generic for a waitlist | Hero CTA | Change to "Join the Waitlist" or "Request Early Access" | | 2 | 4 | AI-smoothing detected: "In today's fast-paced engineering landscape..." | Hero subtitle | Rewrite: direct, specific, no filler | | 3 | 4 | Feature icons mix filled and outline styles | Features grid | Standardize on one icon style | ### P2 — Nice-to-have | # | Pass | Issue | Location | Fix | |---|------|-------|----------|-----| | 1 | 2 | Structured data missing (no Product or SoftwareApplication schema) | `<head>` | Add JSON-LD SoftwareApplication schema | | 2 | 4 | Footer copyright says 2025 | Footer | Update to 2026 | --- ## Strengths - Technical foundation is solid (22/25) — fast, well-optimized - Dark UI + gradient accents match Cold+Active quadrant perfectly - Responsive layout works well across breakpoints ## Recommendations 1. Clarify the hero — visitors need to understand the product category in 3 seconds 2. Remove fake testimonials — empty space is better than fake social proof 3. Rewrite CTA to match the actual action (waitlist, not "get started") --- **Why this works**: The Landing Page profile skips UX completeness (Pass 3) and cross-device (Pass 5), focusing on what matters most for a single page: does it communicate clearly, is the tech solid, and is the content honest? The 70% score flags it as shippable with fixes — the P0s are copy problems, not engineering problems. --- ## Skill Boundaries (Frontier Recognition) ### This skill excels for: - Pre-launch validation of any website (static, dynamic, SPA, SSR) - Generating structured audit reports for client handoff - Catching the "finishing gap" between technically working and truly ready - Teams using GUIA stack (Next.js, Framer Motion, GSAP, Lenis) — gotchas are baked in ### This skill is NOT ideal for: - **Deep performance engineering** — Use Lighthouse, WebPageTest, or Chrome DevTools directly - **Accessibility audit (WCAG compliance)** — This covers basics but isn't a full a11y audit. Use axe-core or WAVE. - **Security penetration testing** — This checks headers, not vulnerabilities. Use OWASP ZAP. - **Conversion rate optimization** — Use `landing-page-optimizer` for CRO. This skill checks if the CTA exists, not if it converts. - **Design direction** — Use `web-design-director` for choosing the visual direction. This skill validates the execution. ### Quality Checkpoints Before accepting the audit output, verify: - [ ] All 5 passes (or profile-appropriate passes) have been scored - [ ] Total points match (15 + 25 + 25 + 20 + 15 = 100 for full audit) - [ ] Every P0 has a concrete fix (not just "improve this") - [ ] The verdict respects the override rule (1 P0 = NOT READY) - [ ] Strengths section acknowledges genuine wins (not just problems) --- ## Iteration Guide > "First pass catches the obvious. Second pass catches the subtle." ### Recommended Iteration Pattern | Pass | Focus | Questions to Ask | |------|-------|------------------| | **1st audit** | Full sweep | "What's broken? What's missing? What's off-brand?" | | **2nd audit** (after fixes) | P0 verification | "Are the blockers actually fixed? Did fixes introduce regressions?" | | **3rd audit** (pre-launch) | Polish | "Would I be proud to share this URL publicly?" | ### Useful Follow-up Prompts - "Re-run Pass 2 only — I fixed the security headers and 404 page." - "The brand voice feels inconsistent between the homepage and about page. Deep-dive on Pass 4." - "Score this against the E-commerce profile — we added a checkout flow." - "Compare this audit to the previous one and show me what improved." --- ## Learning Curve | Usage | What You'll Experience | |-------|----------------------| | **1st audit** | You discover gaps you didn't know existed (especially states and mobile) | | **3rd audit** | You start building finishing into your workflow, not just tacking it on | | **10th audit** | Your sites ship with fewer issues because you internalize the checklist | **Pro tip**: Run Pass 1 (First Impression) at 50% completion, not just at the end. Catching positioning mismatches early saves redesign time. --- ## Checklists & Templates ### Quick Pre-Launch Checklist (5 min) ``` ## Quick Check (non-negotiable minimums) - [ ] Site loads in < 4s on mobile - [ ] CTA visible above the fold - [ ] No placeholder text anywhere - [ ] No broken links on main pages - [ ] HTTPS enforced - [ ] 404 page exists - [ ] OG image renders If ALL checked → safe to soft-launch If ANY unchecked → run full audit ``` ### GUIA Stack Checklist (Next.js + Framer + GSAP) ``` ## GUIA Stack Finishing Checklist ### Next.js Config - [ ] trailingSlash: true in next.config.js - [ ] export const metadata on server components (not 'use client') - [ ] Lazy SDK init (getSupabase(), getStripe()) — not module-level - [ ] sitemap.ts + robots.ts present ### Animation - [ ] useGSAP (not useEffect) for GSAP - [ ] viewport={{ once: true }} on scroll animations - [ ] prefers-reduced-motion media query - [ ] Lenis (not Locomotive Scroll) ### CSS - [ ] Global a{color} doesn't override CTA text — use inline style if needed - [ ] No horizontal overflow on mobile - [ ] Touch targets ≥ 44px ### Deploy - [ ] Env vars set with printf (no trailing newline) - [ ] Docker healthcheck passes before success report - [ ] deploy.sh flock prevents concurrent deploys ``` ### Red Flags Checklist ``` ## Warning Signs in Your Audit - [ ] Score is 85+ but something still "feels off" → trust your gut, re-examine Pass 1 - [ ] All passes score well except one pass scores <50% → that pass is a blocker - [ ] P0 list has more than 3 items → the site isn't ready, period - [ ] Multiple P2s in the same area → that's actually a P1 (systemic issue) - [ ] "It works on my machine" for any browser test → test on real devices ``` --- ## Integration with Other ClawFu Skills | Skill | Integration Point | |-------|------------------| | **[web-design-director](../web-design-director/)** | Use BEFORE building — determines the emotional quadrant. Pass 1 validates against it. | | **[design-trends-2026](../design-trends-2026/)** | Pass 4 visual consistency can reference current trend alignment | | **[minimalist-image-director](../minimalist-image-director/)** | Pass 4 image treatment consistency | | **[landing-page-optimizer](../../content/landing-page-optimizer/)** | Conversion optimization AFTER this audit passes — CRO assumes the foundation works | | **[landing-page-copy](../../content/landing-page-copy/)** | Pass 4 copy quality — if copy fails, route to this skill for rewrite | **Workflow sequence**: ``` web-design-director → [build site] → website-finishing-director → [fix issues] → landing-page-optimizer (direction) (code) (QA/finishing) (iterate) (CRO/optimization) ``` --- ## References - Nielsen, Jakob. "10 Usability Heuristics for User Interface Design" (1994, updated 2020) — Foundation for UX completeness checks - Google. "Web Vitals" — LCP, CLS, INP threshold definitions - OWASP. "Secure Headers Project" — Security header recommendations - Gardner, Oli. "101 Landing Page Optimization Tips" (Unbounce) — Pre-launch conversion checklist - Norman, Don. "Emotional Design" (2004) — Visceral/behavioral/reflective design evaluation - GUIA Production Memory — `.claude/memory/agents/webdesign.md`, `seo.md`, `devops.md`, `gotchas.md` ## Related Skills - [web-design-director](../web-design-director/) — Visual direction framework (use BEFORE this skill) - [design-trends-2026](../design-trends-2026/) — Current visual trends for Pass 4 validation - [minimalist-image-director](../minimalist-image-director/) — AI photography direction for image consistency - [landing-page-optimizer](../../content/landing-page-optimizer/) — Conversion optimization (use AFTER this skill) - [ai-video-qa](../../video/ai-video-qa/) — Sibling QA skill for video content (same scoring philosophy) --- ## Skill Metadata ```yaml name: website-finishing-director category: ai-design subcategory: quality-assurance version: 1.0 author: GUIA source_expert: Nielsen Norman Group + Google Web Vitals + OWASP + GUIA Production Memory (8 shipped sites) source_work: null difficulty: intermediate mode: centaur estimated_value: QA/finishing audit engagement (~1500-3000 EUR per site) tags: [web-design, qa, audit, finishing, pre-launch, ux, performance, seo, brand, cross-device, scoring] created: 2026-02-12 updated: 2026-02-12 ``` --- *This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.*skills/analytics/ab-test-stats/SKILL.mdskillShow content (4217 bytes)
--- name: ab-test-stats description: "Calculate A/B test statistical significance. Use when: determining if test results are significant; calculating required sample size; estimating test duration; analyzing conversion experiments; making data-driven decisions" license: MIT metadata: author: ClawFu version: 1.0.0 mcp-server: "@clawfu/mcp-skills" --- # A/B Test Statistics Calculator > Calculate statistical significance for A/B tests - know when your results are real, not random chance. ## When to Use This Skill - **Test analysis** - Determine if results are statistically significant - **Sample planning** - Calculate required sample size before testing - **Duration estimation** - Know how long to run experiments - **Power analysis** - Ensure tests can detect meaningful differences ## What Claude Does vs What You Decide | Claude Does | You Decide | |-------------|------------| | Structures analysis frameworks | Metric definitions | | Identifies patterns in data | Business interpretation | | Creates visualization templates | Dashboard design | | Suggests optimization areas | Action priorities | | Calculates statistical measures | Decision thresholds | ## Dependencies ```bash pip install scipy numpy click ``` ## Commands ### Check Significance ```bash python scripts/main.py significance --control 1000,50 --variant 1000,65 python scripts/main.py significance --control 5000,250 --variant 5000,300 --confidence 0.99 ``` ### Calculate Sample Size ```bash python scripts/main.py sample-size --baseline 0.05 --mde 0.02 python scripts/main.py sample-size --baseline 0.10 --mde 0.01 --power 0.90 ``` ### Estimate Duration ```bash python scripts/main.py duration --traffic 1000 --baseline 0.05 --mde 0.02 ``` ## Examples ### Example 1: Analyze Test Results ```bash # Control: 1000 visitors, 50 conversions (5%) # Variant: 1000 visitors, 65 conversions (6.5%) python scripts/main.py significance --control 1000,50 --variant 1000,65 # Output: # A/B Test Results # ───────────────────────── # Control: 5.00% (50/1000) # Variant: 6.50% (65/1000) # Lift: +30.0% # # Statistical Analysis # ───────────────────────── # p-value: 0.089 # Confidence: 91.1% # Result: NOT SIGNIFICANT (need 95%) # # Recommendation: Continue test for more data ``` ### Example 2: Plan Sample Size ```bash # Baseline 5% conversion, want to detect 20% relative lift (1% absolute) python scripts/main.py sample-size --baseline 0.05 --mde 0.01 # Output: # Sample Size Calculator # ────────────────────────────── # Baseline conversion: 5.0% # Minimum detectable effect: 1.0% (20% relative) # Target conversion: 6.0% # # Required per variant: 3,842 visitors # Total required: 7,684 visitors # # At 1000 daily visitors: ~8 days ``` ## Key Concepts | Term | Definition | |------|------------| | **p-value** | Probability result is due to chance | | **Confidence** | 1 - p-value (usually want 95%+) | | **Power** | Probability of detecting real effect (usually 80%) | | **MDE** | Minimum Detectable Effect - smallest lift worth detecting | | **Lift** | Relative improvement (variant - control) / control | ## When Results Are Significant | p-value | Confidence | Verdict | |---------|------------|---------| | < 0.01 | > 99% | Highly Significant ✓ | | < 0.05 | > 95% | Significant ✓ | | < 0.10 | > 90% | Marginally Significant | | ≥ 0.10 | < 90% | Not Significant ✗ | ## Skill Boundaries ### What This Skill Does Well - Structuring data analysis - Identifying patterns and trends - Creating visualization frameworks - Calculating statistical measures ### What This Skill Cannot Do - Access your actual data - Replace statistical expertise - Make business decisions - Guarantee prediction accuracy ## Related Skills - [cohort-analysis](../cohort-analysis/) - Analyze user cohorts - [funnel-analyzer](../funnel-analyzer/) - Analyze conversion funnels ## Skill Metadata - **Mode**: centaur ```yaml category: analytics subcategory: statistics dependencies: [scipy, numpy] difficulty: intermediate time_saved: 3+ hours/week ```skills/acquisition/ad-spend-optimizer/SKILL.mdskillShow content (6031 bytes)
--- name: ad-spend-optimizer description: "Analyze paid advertising performance across channels and recommend budget reallocation to maximize ROAS and minimize CAC. Use when: planning quarterly ad budget allocation, diagnosing underperforming ad channels, deciding whether to scale spend on a channel, calculating marginal ROI across Google Ads, Meta, LinkedIn, or TikTok, rebalancing media mix after performance shifts, or setting up a test-and-scale framework for new channels." license: MIT metadata: author: ClawFu version: 1.1.0 mcp-server: "@clawfu/mcp-skills" --- # Ad Spend Optimizer > Analyze paid advertising performance across channels and recommend budget reallocation to maximize ROAS and minimize CAC. ## When to Use This Skill - **Quarterly budget planning** — reallocate spend based on performance data - **Channel mix optimization** — find the right balance across platforms - **Performance troubleshooting** — diagnose why CAC is rising or ROAS declining - **Scaling decisions** — determine if a channel has headroom to scale - **New channel testing** — structure test budgets with clear success criteria ## Methodology Foundation | Aspect | Details | |--------|---------| | **Source** | Marginal ROI optimization + portfolio theory for marketing | | **Core Principle** | Allocate each dollar where the marginal return is highest — shift spend from diminishing-returns channels to underspent ones | | **Framework** | 70/20/10 — 70% proven channels, 20% optimization tests, 10% new channel experiments | ## What Claude Does vs What You Decide | Claude Does | You Decide | |-------------|------------| | Calculates ROAS, CAC, and CPL per channel and campaign | Total budget constraints | | Identifies diminishing returns and reallocation opportunities | Risk tolerance for new channels | | Models projected outcomes for different allocation scenarios | Business priorities and brand considerations | | Creates monitoring dashboards and alert thresholds | Platform selection and creative direction | ## Instructions ### Step 1: Audit Current Performance Collect these metrics per channel and campaign: | Metric | Formula | Healthy Range | |--------|---------|---------------| | **ROAS** | Revenue ÷ Ad Spend | >3:1 for most B2B/B2C | | **CAC** | Ad Spend ÷ New Customers | <LTV ÷ 3 | | **CPL** | Ad Spend ÷ Leads | Varies by industry | | **CTR** | Clicks ÷ Impressions | >1% search, >0.5% social | | **Conv Rate** | Conversions ÷ Clicks | >2% landing pages | **Validation checkpoint:** If data is missing for any channel, flag it — incomplete data leads to wrong reallocations. ### Step 2: Attribution Analysis Choose the model that matches the business: | Model | Best For | Trade-off | |-------|----------|-----------| | Last Click | Direct response, short cycles | Ignores awareness | | First Click | Awareness campaigns | Ignores conversion assist | | Linear | Balanced multi-touch view | Dilutes signal | | Time Decay | Shorter sales cycles | Biases toward bottom-funnel | | Position-Based | Balanced with emphasis | May miss mid-funnel | | Data-Driven | Sophisticated, enough data | Requires volume | ### Step 3: Calculate Marginal ROI For each channel, answer: **Where does the next $1 produce the most return?** | Signal | Meaning | Action | |--------|---------|--------| | CAC well below target | Headroom to scale | Increase spend 50%, monitor weekly | | CAC at target | Optimized | Maintain, test creative | | CAC above target | Diminishing returns | Reduce spend, reallocate | | Low volume, good CAC | Underinvested | Scale cautiously (2x) | | High volume, rising CAC | Hitting ceiling | Cap spend, diversify | ### Step 4: Model Reallocation Scenarios Build 3 scenarios (conservative, moderate, aggressive) showing projected leads, CAC, and ROAS at each budget level. Include: - **Per-channel breakdowns** with expected performance - **Warning thresholds** — CAC levels that trigger spend cuts - **Implementation timeline** — weekly changes, not all at once ### Step 5: Implement and Monitor **Weekly monitoring checklist:** - [ ] Spend pacing vs. plan - [ ] CAC by channel vs. target - [ ] Lead volume vs. forecast - [ ] Any channel crossing warning threshold? **Scaling rule:** If CAC stays 15%+ below target for 2 consecutive weeks, increase spend by 25%. If CAC exceeds target for 2 weeks, reduce by 25%. ## Examples ### Example: B2B SaaS Budget Reallocation **Input:** $100K/month — Google ($50K), Meta ($30K), LinkedIn ($15K), Other ($5K). Target: $200 CAC, 500 leads/month. Current: 395 leads, $253 CAC. **Diagnosis:** - Google Display ($15K → 30 leads, $500 CAC) — cut entirely - Meta Lookalike ($15K → 85 leads, $176 CAC) — star performer, scale - LinkedIn Lead Gen ($5K → 10 leads, $500 CAC) — cut **Proposed reallocation:** | Channel | Current | Proposed | Expected CAC | |---------|---------|----------|-------------| | Google Ads | $50K | $35K | $206 | | Meta | $30K | $50K | $196 | | LinkedIn | $15K | $8K | $286 | | Testing | $5K | $7K | Variable | **Projected result:** 473 leads (+20%), $211 CAC (-17%). ## Skill Boundaries ### What This Skill Does Well - Analyzing multi-channel ad performance from provided data - Recommending budget shifts based on marginal ROI - Modeling reallocation scenarios with projected outcomes - Creating monitoring frameworks with alert thresholds ### What This Skill Cannot Do - Access ad platform accounts or pull live data - Make real-time bid adjustments or campaign changes - Evaluate creative quality (headlines, images, video) - Account for brand lift or offline conversion effects ## References - Google Ads Optimization Guide - Meta Business Suite Best Practices - LinkedIn Marketing Solutions - Common Thread Collective — ad spend allocation methodology ## Related Skills - `google-ads-expert` — Google-specific campaign optimization - `aarrr-metrics` — Full funnel view beyond paid acquisition - `growth-loops` — Sustainable growth beyond paid channelsskills/acquisition/google-ads-expert/SKILL.mdskillShow content (18979 bytes)
--- name: google-ads-expert description: "Build profitable Google Ads campaigns by applying Perry Marshall's 80/20 principles to paid search optimization Use when: **Setting up a new Google Ads account** from scratch; **Optimizing existing campaigns** that are underperforming; **Structuring campaigns** for maximum quality score and ROI; **Applying 80/20 thinking** to identify high-leverage optimizations; **Scaling profitable campaigns** without wasting budget" license: MIT metadata: author: ClawFu version: 1.0.0 mcp-server: "@clawfu/mcp-skills" --- # Google Ads Expert - Master Paid Search with 80/20 Thinking > Build profitable Google Ads campaigns by applying Perry Marshall's 80/20 principles to paid search optimization ## When to Use This Skill - **Setting up a new Google Ads account** from scratch - **Optimizing existing campaigns** that are underperforming - **Structuring campaigns** for maximum quality score and ROI - **Applying 80/20 thinking** to identify high-leverage optimizations - **Scaling profitable campaigns** without wasting budget - **Qualifying leads** before they click (saving money on bad clicks) - **Prioritizing optimization efforts** for maximum impact ## Methodology Foundation | Aspect | Details | |--------|---------| | **Source** | Ultimate Guide to Google Ads, 80/20 Sales and Marketing | | **Expert** | Perry Marshall - Pioneer of Google Ads education, 80/20 marketing guru | | **Core Principle** | "Most people think traffic is 80% of the battle, but it's really 20%. CONVERSION is 80% of the battle. Once conversion is solid, traffic mysteries solve themselves." | ## What Claude Does vs What You Decide | Claude Does | You Decide | |-------------|------------| | Structures content frameworks | Final messaging | | Suggests persuasion techniques | Brand voice | | Creates draft variations | Version selection | | Identifies optimization opportunities | Publication timing | | Analyzes competitor approaches | Strategic direction | ## What This Skill Does This skill combines Google Ads technical mastery with strategic 80/20 thinking to help you build campaigns that are profitable from the start. You'll learn to: 1. **Apply 80/20 to campaigns** - Find the 20% of effort that drives 80% of results 2. **Structure for Quality Score** - Organize campaigns for maximum relevance 3. **Rack the shotgun** - Qualify visitors before they cost you money 4. **Optimize the right things** - Peel back the optimization onion correctly 5. **Scale profitably** - Know when and how to increase spend 6. **Think in conversions** - Put conversion ahead of traffic The result: Campaigns that make money consistently, not just get clicks. ## How to Use ### Prompt Examples ``` Help me structure a Google Ads campaign for [business/product] using Perry Marshall's match type segmentation approach. I want to maximize Quality Score and control. ``` ``` Apply 80/20 analysis to my Google Ads account. Here are my top 20 keywords by spend: [list]. Where should I focus my optimization efforts for maximum impact? ``` ``` Create a lead qualification strategy for my Google Ads campaigns. I sell [product] and waste money on [type of bad clicks]. How do I "rack the shotgun"? ``` ``` My campaigns are profitable at $X/day but I want to scale. Use the 80/20 approach to help me identify how to increase spend without killing ROI. ``` ``` Prioritize my optimization checklist for [campaign type]. What's the 80/20 order of operations I should follow before spending more money? ``` ## Instructions ### The 80/20 Framework for Google Ads ``` ┌─────────────────────────────────────────────────────────────┐ │ 80/20 IN GOOGLE ADS │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 80% of conversions come from 20% of keywords │ │ 80% of costs come from 20% of keywords │ │ 80% of wasted spend comes from 20% of search terms │ │ │ │ BUT ALSO: │ │ │ │ 4% of keywords drive 64% of conversions (80/20 of 80/20) │ │ 1% of keywords drive ~50% of conversions │ │ │ │ "Find the vital few, ignore the trivial many" │ │ │ └─────────────────────────────────────────────────────────────┘ ``` **Strategic Implication**: Don't optimize everything equally. Find your top performers and make them even better. Find your worst performers and eliminate them. --- ### Step 1: The Conversion-First Mindset Before worrying about traffic, get conversion right. > "Most people think traffic is 80% of the battle, but it's really 20%. CONVERSION is 80% of the battle." **The Order of Operations:** | Priority | Focus | Why | |----------|-------|-----| | 1 | Landing page conversion | Without this, all traffic is wasted | | 2 | Offer/value proposition | Must be compelling enough to convert | | 3 | Ad relevance to landing page | Quality Score and conversion both improve | | 4 | Keyword selection | Target the right searchers | | 5 | Traffic scaling | Only AFTER 1-4 are solid | **Conversion Benchmarks:** - If conversion rate is <1%, fix the landing page first - If conversion rate is 2-5%, you can optimize ads - If conversion rate is >5%, you can start scaling traffic --- ### Step 2: Campaign Structure for Quality Score **Match Type Segmentation:** Separate your keywords by match type into different ad groups or campaigns: ``` Campaign: [Product Name] ├── Ad Group: Exact Match Keywords │ └── [keyword] → dedicated ads ├── Ad Group: Phrase Match Keywords │ └── "keyword" → dedicated ads ├── Ad Group: Modified Broad Match │ └── +keyword → dedicated ads └── Ad Group: Broad Match (for discovery) └── keyword → catch-all ads ``` **Why This Works:** - Exact match keywords get highest relevance scores - You can bid aggressively on exact (known performers) - Broad match becomes a "fishing expedition" for new terms - Each match type gets appropriate bid strategy **The Peel and Stick Technique:** 1. **Run broad match** to discover what people actually search 2. **Check Search Terms Report** for high-performers 3. **"Peel"** those terms out of broad match 4. **"Stick"** them into their own exact match ad groups 5. **Create dedicated ads** for each peeled term 6. **Add negative** of exact match to broad campaign **Result**: Continuous refinement, higher Quality Scores, lower costs. --- ### Step 3: Rack the Shotgun (Qualify Before the Click) > "The art of sorting out your customers, weeding out the qualified from the non-qualified, is one of the most important skills you can develop." **80/20 Reality**: 80% of people who click will never buy. You're paying for all of them. **Pre-Qualification Tactics:** | Tactic | How It Works | Example | |--------|--------------|---------| | **Price in ad** | Scares away non-buyers | "$499/month starting price" | | **Specificity** | Attracts only right audience | "Enterprise-only" or "For teams of 50+" | | **Qualification language** | Self-selection | "If you're serious about..." | | **Negative keywords** | Block bad searchers | -free, -cheap, -DIY, -jobs | | **Callout extensions** | Set expectations | "Minimum $10K project" | **Five Power Disqualifiers:** Before someone becomes a lead, they should pass: 1. **Money** - Do they have budget for your solution? 2. **Authority** - Can they make the purchase decision? 3. **Need** - Do they have the problem you solve? 4. **Timing** - Are they ready to act now? 5. **Fit** - Are they the right customer for you? **Landing Page Qualification:** - Add a short quiz: "Is [Product] right for you?" - Include pricing or "starting at" to filter budget - Use specific case studies that speak to ideal customers - Make non-buyers self-select out --- ### Step 4: The Optimization Onion Peel back optimization layers in the right order: ``` OPTIMIZATION PRIORITY ┌─────────────────────────────────────┐ │ │ │ OUTER LAYER (Do First) │ │ ├── Match type segmentation │ │ ├── Ad extensions (all of them) │ │ └── Negative keywords │ │ │ │ MIDDLE LAYER (Do Second) │ │ ├── Ad copy split testing │ │ ├── Landing page optimization │ │ └── Bid adjustments by device │ │ │ │ INNER LAYER (Do Third) │ │ ├── Audience targeting │ │ ├── Day/time bidding │ │ └── Geographic bid adjustments │ │ │ │ CORE (Only After Everything Else) │ │ └── Increase budget/bids │ │ │ └─────────────────────────────────────┘ ``` **Perry's Rule:** > "Your first response should NOT be 'I'm going to spend more money.' Your first response should be 'Am I optimizing everything I can really optimize?'" --- ### Step 5: 80/20 Budget Allocation **Where to Put Your Money:** | Performance Level | Budget Allocation | Strategy | |-------------------|-------------------|----------| | **Top 20% of keywords** | 64% of budget | Scale aggressively | | **Middle 60%** | 30% of budget | Test and optimize | | **Bottom 20%** | 6% of budget | Cut or pause | **Identifying Your 80/20:** 1. Export last 90 days of keyword data 2. Sort by conversions (not clicks!) 3. Calculate cumulative % of total conversions 4. Mark where you hit 80% of conversions 5. Count how many keywords got you there (usually ~20%) 6. These are your "vital few" **The 80/20 of 80/20:** - Within your top 20%, another 80/20 exists - 4% of keywords often drive 50%+ of conversions - These deserve individual campaigns, dedicated landing pages --- ### Step 6: Scaling Profitably **When to Scale:** Only after: - [ ] Conversion tracking is accurate - [ ] ROI is positive at current spend - [ ] Quality Scores are 7+ on main keywords - [ ] All optimization layers addressed - [ ] You understand your customer acquisition economics **How to Scale:** | Method | When to Use | Risk Level | |--------|-------------|------------| | **Increase bids on winners** | Top 20% keywords | Low | | **Add similar keywords** | Proven ad groups | Medium | | **Expand match types** | Exact → Phrase | Medium | | **New campaigns/audiences** | After core is solid | Higher | | **Increase daily budget** | All above done | Low | **Warning Signs to Stop Scaling:** - CPA increases by >20% - Conversion rate drops significantly - Quality Score declining - Impression share not improving with budget --- ### Step 7: Advanced 80/20 Strategies **Tiered Offering Strategy:** > "20% of people are willing to spend 4x the money for a better experience." If your main offer is $100, consider: - Standard: $100 (for 80%) - Premium: $400 (for 16%) - Elite: $1,600 (for 4%) **Run separate campaigns for each tier** - the economics are different. **Predictive Budgeting:** Using 80/20 math to predict market size: - If 1,000 people buy at $50 - ~200 will pay $200 (4x) - ~40 will pay $800 (16x) - ~8 will pay $3,200 (64x) **Plan campaigns and landing pages for each segment.** --- ## Examples ### Example 1: E-commerce Store Optimization **Situation**: Online store selling specialty kitchen equipment. Spending $5,000/month on Google Ads with 2.5% conversion rate. Wants to improve ROI. **80/20 Analysis:** Exported 90 days of data, found: - 147 active keywords - 23 keywords (16%) drove 81% of sales - 6 keywords (4%) drove 52% of sales - 87 keywords (59%) had zero conversions **Action Plan:** **1. Immediate (Outer Layer):** - Pause 87 zero-conversion keywords → Save ~$800/month - Add negative keywords from Search Terms Report - Enable all ad extensions (was missing callouts, structured snippets) **2. Structure (Match Types):** - Create exact match campaign for top 23 keywords - Create separate ad groups for top 6 keywords - Move existing to phrase/broad for discovery **3. Qualify Better:** - Add price to ads: "From $89 - Premium Kitchen Tools" - Landing page: Added "Who this is for" section - Negative keywords: -cheap, -wholesale, -bulk, -used **4. Scale Winners:** - Top 6 keywords: Increased bids 30% - Created dedicated landing pages for top 3 products - Built remarketing lists from converters **Results after 60 days:** - Spend: $4,200/month (down 16%) - Conversions: Up 34% - ROAS: Improved from 3.2x to 5.1x --- ### Example 2: B2B SaaS Lead Generation **Situation**: SaaS company generating leads via Google Ads. Getting lots of clicks but low quality leads. Sales team complaining about tire-kickers. **Problem Diagnosis:** Using 80/20 thinking: - 80% of leads were unqualified (too small, no budget, wrong use case) - 80% of wasted ad spend came from broad match fishing **Rack the Shotgun Implementation:** **1. Ad Copy Qualification:** Before: "Project Management Software - Free Trial" After: "Project Management for Teams 50+ | Starting $499/mo" **2. Landing Page Qualification:** Added "Is [Product] Right For You?" quiz: - Team size? - Current tools? - Budget range? - Timeline to implement? Score < 60 = Blog content offer Score 60-80 = Self-serve trial Score > 80 = Sales call booking **3. Campaign Structure:** - Separate campaign for enterprise keywords - Separate campaign for SMB keywords - Different landing pages, different qualification levels **4. Negative Keywords:** Added: -free, -open source, -small business, -startup, -cheap, -alternative to [competitor targeting SMB] **Results:** - Clicks: Down 40% - Cost: Down 35% - Qualified leads: Up 60% - Sales accepted leads: Up 180% - Cost per qualified lead: Down 58% --- ## Checklists & Templates ### Campaign Audit Checklist (80/20 Version) ```markdown ## Google Ads 80/20 Audit: [Account Name] ### 1. Data Pull (Last 90 Days) - [ ] Export all keyword data with conversions - [ ] Export Search Terms Report - [ ] Export campaign/ad group performance - [ ] Note current spend and ROAS ### 2. 80/20 Analysis **Keywords:** - Total active keywords: ___ - Keywords with 0 conversions: ___ (% of total: ___%) - Keywords driving 80% of conversions: ___ (% of total: ___%) - Keywords driving 50% of conversions: ___ (% of total: ___%) **Campaigns:** - Campaign driving most conversions: ___ - Campaign with worst ROAS: ___ ### 3. Outer Layer Optimization - [ ] Match types segmented? Y/N - [ ] Negative keyword list comprehensive? Y/N - [ ] All ad extensions enabled? Y/N - [ ] Sitelinks - [ ] Callouts - [ ] Structured snippets - [ ] Call extensions (if applicable) - [ ] Location (if applicable) ### 4. Qualification Assessment - [ ] Price/qualification in ad copy? Y/N - [ ] Landing page qualifies visitors? Y/N - [ ] Negative keywords block non-buyers? Y/N ### 5. Priority Actions 1. Quick win: 2. Biggest impact: 3. Scale opportunity: ### 6. Budget Reallocation - Pause: $___/month - Shift to winners: $___/month - Test budget: $___/month ``` ### Campaign Structure Template ```markdown ## Campaign Structure: [Product/Service] ### Campaign 1: Brand (Exact) - Match type: Exact - Budget: 10% of total - Keywords: Brand terms only - Goal: Capture brand searches cheaply ### Campaign 2: Core Product (Exact) - Match type: Exact - Budget: 40% of total - Keywords: Top 20% performers - Ad groups: 1 per keyword theme (5-10 keywords max) - Goal: Maximum ROAS ### Campaign 3: Core Product (Phrase/BMM) - Match type: Phrase + Broad Match Modifier - Budget: 30% of total - Keywords: Same as exact but expanded - Goal: Discover new exact match candidates ### Campaign 4: Discovery (Broad) - Match type: Broad - Budget: 10% of total - Keywords: Category-level terms - Goal: Find new keyword opportunities - Review: Weekly search terms report ### Campaign 5: Competitor - Match type: Exact - Budget: 10% of total - Keywords: Competitor brand names - Goal: Conquest qualified traffic ### Negative Keyword Master List Apply to all campaigns: - [Non-buyer terms]: free, cheap, DIY, etc. - [Wrong audience]: jobs, careers, salary, etc. - [Irrelevant]: [specific to your business] ``` ### Weekly Optimization Routine ```markdown ## Weekly Google Ads Check: [Week of ___] ### 10-Minute Daily Check - [ ] Budget pacing on track? - [ ] Any major CPA spikes? - [ ] Disapproved ads? ### Weekly Deep Dive (30 min) **Search Terms Report:** - New terms to add as exact: ___ - New negative keywords: ___ **Performance Review:** - Top performer this week: ___ - Worst performer this week: ___ - Action taken: ___ **Ad Testing:** - Tests running: ___ - Tests to conclude: ___ - New tests to start: ___ **Quality Score Check:** - Keywords <6 QS: ___ - Action: ___ ### Monthly Strategic Review - [ ] 80/20 analysis updated - [ ] Budget reallocation needed? - [ ] New campaign opportunities? - [ ] Scaling opportunities? ``` --- ## Skill Boundaries ### What This Skill Does Well - Structuring persuasive content - Applying copywriting frameworks - Creating draft variations - Analyzing competitor approaches ### What This Skill Cannot Do - Guarantee conversion rates - Replace brand voice development - Know your specific audience - Make final approval decisions ## References - **Books**: Ultimate Guide to Google Ads, 80/20 Sales and Marketing by Perry Marshall - **Concepts**: Peel and Stick, Racking the Shotgun, Five Power Disqualifiers - **Updates**: Google Ads Help Center for latest features - **Source**: `sources/books/marshall-google-ads-8020.md` ## Related Skills - **conversion-copywriting** - Write ads that convert the right people - **landing-page-copy** - Create landing pages that match ad intent - **copy-frameworks** - AIDA, PAS for ad copy - **grand-slam-offers** - Create offers worth advertising - **jobs-to-be-done** - Understand what searchers really wantskills/ai-design/design-trends-2026/SKILL.mdskillShow content (34779 bytes)
--- name: design-trends-2026 description: "Apply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pinterest data. Use when: **Designing a brand identity** — pick the right aesthetic for your audience; **Creating social media assets** — use trending visual languages that perform; **Briefing a designer or AI image tool** — give precise style direction with vocabulary and references; **Refreshing a visual identity** — know what's rising vs saturating; **Building mood boards** — combine trends intentionally with data-backed rationale." license: MIT metadata: author: ClawFu version: 1.0.0 mcp-server: "@clawfu/mcp-skills" --- # Design Trends 2026 > Apply the 10 dominant graphic design aesthetics of 2026 to any creative project — based on Kittl × Savee's trend report, backed by Adobe, Figma, and Pinterest platform data. ## When to Use This Skill - **Briefing a designer or AI image generator** — translate vague "make it modern" into precise style vocabulary - **Creating brand identity or visual refresh** — pick aesthetics that match your audience and positioning - **Building mood boards** — combine trends with intent, not just screenshots - **Designing social/marketing assets** — use visual languages trending on platforms right now - **Pitching creative direction** — back your choices with data signals, not just taste ## Methodology Foundation **Source**: Kittl × Savee — "2026 Design Trends Report" (January 2026) **Core Principle**: 2026 design sits at the crossroads of two forces: human-made visuals are returning (Adobe reports +30% searches for hand-drawn elements), while AI accelerates exploration (60% of designers use AI for early concepts per Figma 2024). The best work in 2026 lives in between — messy meets precise, nostalgic meets futuristic, chaotic meets intentional. **Why This Matters**: Trends aren't decoration — they're cultural signals. Choosing the right visual language connects you to what your audience already feels. Choosing the wrong one makes you invisible or dated. This skill gives you the vocabulary, the data, and the decision framework to pick deliberately. --- ## What Claude Does vs What You Decide > "Claude maps the territory. You pick the direction." | Claude handles | You provide | |---------------|-------------| | Identifying which trend(s) fit your brief | Your brand personality and audience | | Generating precise AI image prompts per trend | Final aesthetic judgment and taste | | Combining multiple trends into coherent direction | Business context (premium vs accessible, etc.) | | Explaining the cultural signal behind each trend | Whether a trend aligns with your positioning | | Creating mood board descriptions and style guides | Validation with real audience feedback | **Remember**: Trends are tools, not rules. The skill helps you use them with intent. --- ## What This Skill Does 1. **Trend Identification** — Match a creative brief to the 1-3 most relevant 2026 trends 2. **Style Direction** — Provide precise visual vocabulary (colors, textures, typography, composition) 3. **AI Prompt Generation** — Create targeted prompts for Midjourney, DALL-E, Flux, Ideogram 4. **Trend Combination** — Layer multiple trends into original hybrid aesthetics 5. **Audience Mapping** — Connect visual choices to target demographics and platforms ## How to Use ### Match a trend to a brief ``` I'm designing a brand identity for [product/service] targeting [audience]. Use the design-trends-2026 skill to recommend the 2-3 best trends and explain why. ``` ### Generate AI image prompts in a specific trend ``` Create 5 Midjourney prompts in the [trend name] style for [my project]. Use the design-trends-2026 skill for precise style vocabulary. ``` ### Build a mood board rationale ``` I want to combine [trend A] and [trend B] for my brand. Use design-trends-2026 to explain if this combination works and how to execute it. ``` ## Instructions When helping with visual direction using 2026 trends, follow this process: ### Step 1: Understand the Brief Before recommending any trend, clarify: ``` ## Brief Analysis **Project type**: [brand identity / social campaign / packaging / web design / editorial] **Target audience**: [demographics, psychographics, cultural affinities] **Brand personality**: [playful / serious / rebellious / premium / accessible / technical] **Platform**: [Instagram / print / web / packaging / multi-channel] **Current visual identity**: [describe or "starting from scratch"] **What they want to feel**: [specific emotion or reaction] ``` --- ### Step 2: Recommend Trends from the 2026 Palette Use the trend catalog below to match the brief. Always recommend **1 primary + 1-2 supporting** trends, never all 10. --- ## The 10 Trends of 2026 ### #1 — Naive Design **Tagline**: "When messy beats perfect" **Visual DNA**: Wobbly lines, uneven fills, scratchy linework, childlike illustrations, hand-drawn warmth, smiley shapes, shaky intentional strokes. **Color palette**: Bright primaries, crayon-like tones, off-white or recycled paper backgrounds. **Typography**: Hand-lettered, uneven baselines, marker or crayon textures. **Cultural signal**: After years of AI-smooth perfection, people crave proof that a human made this. Naive design isn't unskilled — it's knowing the rules and bending them with confidence. **Best for**: | Audience | Why it works | |----------|-------------| | Children's products | Playful, trustworthy, engaging | | Food & beverage / Craft brands | Approachable, honest, artisanal | | Fashion & streetwear | Expressive, trend-forward | | Creative agencies / Startups | Personality-driven, anti-corporate | | Health & wellness | Warm, de-stresses clinical feel | **AI prompt keywords**: `naive illustration, childlike drawing, wobbly linework, hand-drawn imperfect, crayon texture, uneven fills, sketchy warmth, doodle art` **Combine well with**: Kid Core (amplify playfulness), Type Collage (add energy) **Avoid combining with**: Surveillance Design, Blueprint Design (contradicts rawness) **Reference image**: `docs/kittl-2026-trends/01-naive-design.png` --- ### #2 — Type Collage **Tagline**: "High-impact typography as composition" **Visual DNA**: Multiple fonts, sizes, and styles mixed in one layout. Overlapping text, rotated blocks, cut-paper aesthetic. Visual maximalism through typography alone. **Color palette**: High contrast — black/white base with 1-2 bold accent colors. Or full neon spectrum. **Typography**: 3+ typefaces per composition. Serif + sans-serif + display. Variable weights. Text IS the visual. **Cultural signal**: Platform-native creativity meets DIY zine nostalgia. Gen Z finds this fresh and authentic. Bold, eclectic, breaks rules intentionally. **Best for**: | Audience | Why it works | |----------|-------------| | Music / Events / Festivals | Creates instant energy and mood | | Fashion brands | Trend-forward, editorial feel | | Social media content | Scroll-stopping, platform-native | | Magazines / Editorial | Bold layout experimentation | | Youth-oriented brands | Culturally fluent, maximalist | **AI prompt keywords**: `type collage, mixed typography, overlapping text, typographic composition, zine layout, cut-paper lettering, bold type mix, maximalist typography` **Combine well with**: Punk Grunge (add rebellion), Naive Design (add warmth) **Avoid combining with**: Grainy Blur (legibility conflict) **Reference image**: `docs/kittl-2026-trends/02-type-collage.png` --- ### #3 — Blueprint Design **Tagline**: "Over-explaining as aesthetic" **Visual DNA**: Technical drawing language — arrows, measurements, exploded views, labeled parts, grid backgrounds, schematic lines, annotation callouts. A sneaker deconstructed into 47 parts. Ramen mapped like a machine. **Color palette**: Classic blueprint (white lines on blue), or inverted (dark lines on cream/white). Monochromatic with one accent color. **Typography**: Monospaced, technical, small caps, DIN-like typefaces. Labels and annotations as design elements. **Cultural signal**: Makes ordinary products feel engineered and considered. Obsessive detail is the flex. Witty over-explanation as visual humor. **Best for**: | Audience | Why it works | |----------|-------------| | Tech / SaaS products | Signals precision and craft | | Sneaker / Streetwear culture | Detail-obsessed audience loves this | | Food & beverage (craft) | "Ingredients deconstructed" | | Product launches | Makes anything feel considered | | Design-savvy consumers | Clever, detail-rich, rewarding to study | **AI prompt keywords**: `blueprint design, technical drawing, exploded view diagram, schematic illustration, annotated product, engineering diagram style, labeled parts, grid background, measurement lines` **Combine well with**: Surveillance Design (shared precision), Signal Graphics (add energy) **Avoid combining with**: Naive Design (opposite precision), Grainy Blur (contradicts clarity) **Reference image**: `docs/kittl-2026-trends/03-blueprint-design.png` --- ### #4 — Trinket Design **Tagline**: "Objects as identity" **Visual DNA**: Everyday objects (shells, buttons, coins, fruit, crystals) arranged in neat grids or museum-style flat lays. Part still life, part scrapbook. Overhead photography, soft shadows, neutral backgrounds. **Color palette**: Muted naturals — cream, stone, blush, sage. Objects bring the color. Warm, tactile. **Typography**: Minimal, elegant serif or thin sans-serif. Secondary to the objects. **Cultural signal**: Our cultural obsession with curation — Pinterest boards, "what's in my bag" posts, shelf styling. Identity expressed through what you collect. **Best for**: | Audience | Why it works | |----------|-------------| | Lifestyle brands | Personal yet aspirational | | Fashion & accessories | Product curation narrative | | Wellness & beauty | Tactile, ingredient storytelling | | Editorial / Magazines | Elevated flat lay aesthetic | | E-commerce | Product-in-context styling | **AI prompt keywords**: `trinket design, curated flat lay, museum display arrangement, object collection grid, still life curation, knolling photography, tactile objects, overhead arrangement` **Combine well with**: Grainy Blur (add dreaminess), Naive Design (add warmth) **Avoid combining with**: Punk Grunge (contradicts tidiness), Signal Graphics (too chaotic) **Reference image**: `docs/kittl-2026-trends/04-trinket-design.png` --- ### #5 — Punk Grunge **Tagline**: "Rebellious voice through art" **Visual DNA**: Torn paper textures, xerox noise, aggressive typography, spray paint marks, stickers, tape, ripped edges. Raw, loud, intentionally messy. Anti-polish as statement. **Color palette**: High contrast — black and white base, neon accents (hot pink, electric yellow, red). Dirty textures over everything. **Typography**: Distressed, stamped, stenciled, cut-out ransom-note style. Typewriter. Handwritten with anger. **Cultural signal**: Direct backlash to AI-smooth perfection. Designers inject soul into the algorithm. Not rage against machines — a course correction toward grit, surprise, and human fingerprints. **Best for**: | Audience | Why it works | |----------|-------------| | Music / Underground culture | Authentic rebel aesthetic | | Streetwear / Skate brands | Counter-culture credibility | | Indie / Alternative brands | Anti-corporate positioning | | Youth activism / Zines | DIY ethos, accessible production | | Craft beer / Tattoo studios | Raw, unapologetic personality | **AI prompt keywords**: `punk grunge design, torn paper collage, xerox texture, distressed typography, spray paint marks, sticker bomb, ripped edges, raw gritty aesthetic, anti-design` **Combine well with**: Type Collage (amplify energy), Naive Design (softer rebellion) **Avoid combining with**: Frutiger Aero (opposite polarity), Trinket Design (contradicts chaos) **Reference image**: `docs/kittl-2026-trends/05-punk-grunge.webp` --- ### #6 — Future Medieval **Tagline**: "Design like it's 1426 — and 2026" **Visual DNA**: Gothic arches, ornate borders, illuminated manuscript details, heraldic symbols — combined with digital glitches, neon accents, futuristic overlays. Baroque maximalism meets cyberpunk. **Color palette**: Deep jewel tones (burgundy, royal blue, gold) with electric neon highlights (cyan, magenta). Dark backgrounds. **Typography**: Blackletter / Gothic as primary. Paired with thin sans-serif or monospace for contrast. Decorative initials. **Cultural signal**: Breaking out of minimalism to tell richer stories. Pinterest and Adobe confirm a surge in medieval font searches. Familiar history plus new digital twists = psychological appeal. **Best for**: | Audience | Why it works | |----------|-------------| | Gaming / Fantasy brands | Natural aesthetic fit | | Premium / Luxury brands | Ornate = high perceived value | | Music (metal, dark electronic) | Genre-native visual language | | Fashion (dark, avant-garde) | Editorial drama | | Craft / Artisanal spirits | Heritage + modernity | **AI prompt keywords**: `future medieval, gothic digital art, illuminated manuscript modern, blackletter neon, heraldic cyberpunk, ornate border glitch, dark baroque futuristic, medieval meets digital` **Combine well with**: Distorted Portrait (add drama), Surveillance Design (dark tech layer) **Avoid combining with**: Kid Core (tonal mismatch), Naive Design (too light) **Reference image**: `docs/kittl-2026-trends/06-future-medieval.png` --- ### #7 — Distorted Portrait **Tagline**: "Express your boldest state of mind" **Visual DNA**: Faces stretched, glitched, liquified, fragmented, or layered. Warped features, double exposures, scan-line effects, pixel displacement. Human but uncanny. **Color palette**: Anything — moody monochrome, saturated neon, or natural tones with glitch accents. The distortion IS the color story. **Typography**: Distorted to match — warped baselines, glitched letterforms, stretched type. **Cultural signal**: Escape from "polished but predictable." Expressive, human, and subversive in an age of AI-made stock faces. With AR filters and VR avatars growing, distortion bridges static art and immersive spaces. **Best for**: | Audience | Why it works | |----------|-------------| | Music / Album art | Emotional, expressive storytelling | | Fashion / Beauty brands | Subversive, avant-garde edge | | Mental health / Wellbeing | Visualizing internal states | | Art / Gallery / Cultural | Conceptual depth | | Tech / AI brands | Human-meets-digital metaphor | **AI prompt keywords**: `distorted portrait, glitch face, liquified features, double exposure portrait, fragmented face, pixel displacement, warped portrait photography, scan line distortion` **Combine well with**: Punk Grunge (amplify rawness), Grainy Blur (add dream quality) **Avoid combining with**: Blueprint Design (opposite mood), Trinket Design (conflicting subjects) **Reference image**: `docs/kittl-2026-trends/07-distorted-portrait.png` --- ### #8 — Surveillance Design **Tagline**: "When precision footage speaks" **Visual DNA**: CCTV feeds, biometric HUDs, recognition boxes, crosshairs, system logs, monochrome overlays, timestamp structures. UI elements extracted from security systems. Strict grids, utilitarian typography. **Color palette**: High contrast minimal — black, white, green (night vision), red (alerts). Monochrome with data overlay accents. **Typography**: Monospaced (Courier, JetBrains Mono), all-caps system text, timestamps, coordinates, status labels. **Cultural signal**: Controlled dystopian aesthetic that communicates observation, precision, and data flow. Merges conceptual sharpness with cultural relevance around identity, visibility, and control. **Best for**: | Audience | Why it works | |----------|-------------| | Tech / Cybersecurity brands | Native visual language | | Music (electronic, industrial) | Dark, atmospheric | | Fashion (techwear, utility) | Functional aesthetic | | Data / Analytics products | Precision signaling | | Film / Media (thriller, sci-fi) | Atmospheric mood setting | **AI prompt keywords**: `surveillance design, CCTV aesthetic, biometric HUD overlay, security camera feed, system log typography, crosshair targeting, night vision green, dystopian data interface` **Combine well with**: Blueprint Design (shared precision), Future Medieval (dark layering) **Avoid combining with**: Naive Design (opposite mood), Kid Core (tonal clash) **Reference image**: `docs/kittl-2026-trends/08-surveillance-design.webp` --- ### #9 — Grainy Blur **Tagline**: "Creating dreamy, emotional graphics" **Visual DNA**: Soft-focus effects with grainy/noise overlays. Out-of-focus photography or gradients. Film grain texture. Muted or pastel tones bleeding into each other. Cinematic, analog warmth. **Color palette**: Desaturated pastels, muted earth tones, or moody darks — all with visible grain/noise. Warm analog film colors. **Typography**: Soft, elegant, often slightly transparent or blended into the blur. Serif or thin sans-serif. **Cultural signal**: Audiences are tired of ultra-sharp "perfect" images. Embracing imperfection adds warmth, depth, and authenticity. Feels cinematic, dreamy, and emotionally charged. **Best for**: | Audience | Why it works | |----------|-------------| | Music / Album covers | Mood-driven, emotional | | Beauty / Skincare brands | Soft, aspirational, tactile | | Wellness / Meditation | Calm, atmospheric | | Fashion (editorial) | Dreamy, cinematic feel | | Hospitality / Travel | Romantic, aspirational | **AI prompt keywords**: `grainy blur design, soft focus noise texture, film grain overlay, dreamy blurred gradient, analog photography aesthetic, cinematic grain, muted pastel blur, out-of-focus noise` **Combine well with**: Trinket Design (add texture), Distorted Portrait (add emotion) **Avoid combining with**: Blueprint Design (contradicts precision), Surveillance Design (opposite warmth) **Reference images**: `docs/kittl-2026-trends/09-grainy-blur-main.webp`, `09-grainy-blur-noise.webp`, `09-grainy-blur-floral.webp` --- ### #10 — Signal Graphics **Tagline**: "Kinetic visuals from 90s TV and Y2K" **Visual DNA**: Animated shapes, colliding/mutating objects, explosive color. 3D and flat graphics mixed. Hyper-saturated, cartoonish, loud. Early CGI energy, exploding shapes, screen idents, color overload. **Color palette**: Maximum saturation — neon green, electric blue, hot pink, chrome silver. Gradients everywhere. Shiny, glossy surfaces. **Typography**: Bold, 3D-extruded, chrome or gradient fills. Playful, oversized, impossible to ignore. **Cultural signal**: 90s/Y2K nostalgia meets today's overstimulated social feeds. Designed to move, interrupt, and stand out in noisy environments. Entertainment over subtlety. **Best for**: | Audience | Why it works | |----------|-------------| | Music / Podcasts | Loud, attention-grabbing | | Apparel / Merch | Bold graphic tees and prints | | Gaming / Esports | Native energy level | | Digital campaigns | Scroll-stopping social content | | Gen Z / Youth brands | Nostalgic yet fresh | **AI prompt keywords**: `signal graphics, Y2K design, 90s TV ident, exploding shapes, hyper-saturated 3D, chrome text, early CGI aesthetic, neon color overload, kinetic graphics` **Combine well with**: Type Collage (maximalist pairing), Punk Grunge (rebellious energy) **Avoid combining with**: Trinket Design (opposite energy), Grainy Blur (contradicts sharpness) **Reference image**: `docs/kittl-2026-trends/10-signal-graphics.webp` --- ## Honorable Mentions ### Frutiger Aero **Tagline**: "The glossy techno-utopia of early 2000s" **Visual DNA**: Glossy aqua gradients, floating globes, lens flares, bubble-like shapes, glass morphism, XP-era wallpaper energy. Clean, optimistic, digital-first. **Color palette**: Aqua, sky blue, white, silver, translucent glass. Bright, clean, airy. **AI prompt keywords**: `frutiger aero, glossy aqua gradient, Windows XP aesthetic, techno utopian, glass morphism, lens flare, bubble interface, clean digital optimism, Y2K tech` **Best for**: SaaS, tech startups, digital products that want retro-futurist optimism. **Reference image**: `docs/kittl-2026-trends/bonus-frutiger-aero.png` --- ### Kid Core **Tagline**: "Childhood visuals as design language" **Visual DNA**: Crayons, stickers, bold primary colors, naive shapes, playful imperfection. Sticker sheets, notebook doodles, craft supplies. **Color palette**: Bright primaries and secondaries — red, blue, yellow, green. Construction paper textures. **AI prompt keywords**: `kid core design, childhood aesthetic, crayon sticker art, primary color bold, playful naive shapes, construction paper, sticker sheet layout, nostalgic childhood visuals` **Best for**: Playful brands, Gen Z nostalgia, emotional/expressive campaigns, children's products. **Reference images**: `docs/kittl-2026-trends/bonus-kidcore-main.webp`, `bonus-kidcore-cat.webp`, `bonus-kidcore-90s.webp` --- ### Step 3: Map Trends to Audience Segments Use this decision matrix to narrow down: | If your audience is... | Primary trend | Supporting trend | |------------------------|---------------|------------------| | Gen Z, social-native | Type Collage | Signal Graphics or Punk Grunge | | Premium/luxury consumers | Future Medieval | Trinket Design | | Tech-savvy professionals | Blueprint Design | Surveillance Design | | Wellness/lifestyle | Grainy Blur | Trinket Design or Naive Design | | Parents/families/children | Naive Design | Kid Core | | Rebels/counter-culture | Punk Grunge | Type Collage | | Music/entertainment | Distorted Portrait | Signal Graphics | | Food & beverage (craft) | Naive Design | Blueprint Design | | Fashion (editorial) | Distorted Portrait | Grainy Blur | | SaaS / Digital product | Frutiger Aero | Blueprint Design | --- ### Step 4: Generate Creative Assets Once the trend(s) are selected, produce the deliverable: **For AI image prompts**, structure as: ``` [Subject/scene description], [trend-specific style keywords from catalog above], [color palette direction], [composition notes], [mood/atmosphere], [technical: resolution, aspect ratio] ``` **For mood board descriptions**, include: ``` ## Mood Board: [Project Name] **Primary trend**: [Trend] — [Why this fits the brief] **Supporting trend**: [Trend] — [What it adds] **Color direction**: [Specific palette] **Typography direction**: [Font families, treatment] **Texture/treatment**: [Specific textures, effects] **What to AVOID**: [Anti-references — trends that would send wrong signal] ``` **For style guide language**, provide: ``` ## Visual Language Guide **We are**: [2-3 adjectives from trend DNA] **We are NOT**: [2-3 adjectives from opposite trends] **Our visual references**: [Trend names + specific elements to use] **Our visual anti-references**: [Trend names + specific elements to avoid] ``` --- ## Examples ### Example 1: Craft Coffee Brand Identity **Context**: New specialty coffee roaster targeting urban 25-35 year-olds who value authenticity. **Input**: > I'm launching a craft coffee brand called "Grounds." Our audience is urban millennials who care about origin and process. We want to feel artisanal but not precious. What 2026 trends fit? **Output**: **Primary: Blueprint Design (#3)** Your audience loves process and origin stories. Blueprint Design lets you deconstruct the coffee journey — bean anatomy, roasting temperature curves, brewing ratios — as visual identity. It signals "we're obsessed with craft" without being pretentious. **Supporting: Naive Design (#1)** Balance the technical precision with hand-drawn warmth. Wobbly illustrations of coffee plants, hand-lettered origin names. This combination says "deeply knowledgeable but approachable." **Avoid**: Punk Grunge (too aggressive for a morning ritual), Future Medieval (wrong emotional register), Signal Graphics (too loud for a meditative product). **AI prompt for packaging**: ``` Specialty coffee bag design, blueprint technical drawing of coffee bean cross-section with labeled parts and measurement annotations on cream background, hand-drawn naive illustration of coffee plant in corner, monospaced typography for origin details, warm artisanal feel with engineering precision, product packaging mockup ``` **Mood board direction**: - Color: Cream base + deep brown + one accent (terracotta or sage) - Type: DIN or Space Mono for technical labels + hand-lettered brand name - Texture: Light grid paper background, subtle pencil marks - Composition: Annotated product diagrams as hero graphics **Why this works**: Blueprint + Naive is a trend combination that doesn't exist in the source report — it's a synthesis that creates something original while staying on-trend. --- ### Example 2: Electronic Music Festival Social Campaign **Context**: Summer electronic music festival wants social content that stands out in crowded music feeds. **Input**: > Design direction for "SIGNAL" festival social campaign. Electronic music, 18-30 audience, need to dominate Instagram and TikTok. **Output**: **Primary: Signal Graphics (#10)** — The name practically writes the brief. Y2K energy, hyper-saturated 3D shapes, exploding colors. Your audience grew up on this. It's nostalgic AND future-facing. **Supporting: Distorted Portrait (#7)** — Artist announcements as distorted portraits create instant intrigue. Glitch the lineup photos. Make people stop scrolling to figure out who it is. **Third layer: Surveillance Design (#8)** — Festival countdown content as system logs and CCTV-style feeds. "SIGNAL DETECTED" as recurring copy framework. **AI prompts for social posts**: Artist announcement: ``` Electronic music DJ portrait with pixel displacement and scan-line distortion, neon magenta and electric cyan color scheme, fragmented face with glitch effects, dark background with surveillance grid overlay, hyper-saturated Y2K aesthetic, square format for Instagram ``` Event countdown: ``` Surveillance camera interface design showing countdown timer, green night vision aesthetic with CCTV timestamp, "SIGNAL DETECTED" text in monospaced font, crosshair overlay, dark dystopian data interface, Instagram story format 9:16 ``` General campaign asset: ``` Exploding 3D chrome shapes on black background, hyper-saturated neon colors, 90s TV ident energy, signal graphics style, kinetic explosive composition, bold 3D extruded text, Y2K nostalgia meets futuristic, widescreen 16:9 ``` **Why this works**: Three trends that share energy levels (high) and audience alignment (young, digital-native). The combination creates a distinct festival identity that other events can't replicate by copying just one trend. --- ### Example 3: Wellness App Brand Refresh **Context**: Meditation/wellness app needs a visual refresh to stand out from the "generic calm" aesthetic. **Input**: > Every wellness app looks the same — soft gradients, thin fonts, too much white space. How do we differentiate while still feeling calm? **Output**: **Primary: Grainy Blur (#9)** — Still calm, but with analog warmth instead of digital sterility. Film grain adds texture and humanity. Soft focus creates atmosphere without the "stock photo meditation" look. **Supporting: Trinket Design (#4)** — Instead of generic nature photos, curate meaningful objects: a smooth stone, a tea cup, a candle, a journal. Flat-lay curation feels personal and aspirational. **Avoid**: Naive Design (too playful for the category), Punk Grunge (wrong energy entirely), Signal Graphics (sensory overload contradicts purpose). **What makes this different from competitors**: Most wellness apps use sharp, clean gradients (Headspace/Calm aesthetic circa 2020). Grainy Blur introduces tactile warmth — it feels like looking through a slightly fogged window. Trinket Design adds personality through objects instead of generic illustrations. **Style guide language**: ``` We are: Warm, textured, intentionally imperfect We are NOT: Clinical, sharp, digitally sterile Our references: Grainy Blur (atmosphere) + Trinket Design (curation) Our anti-references: Frutiger Aero (too tech), Blueprint (too analytical) ``` --- ## Skill Boundaries (Frontier Recognition) ### This skill excels for: - Selecting and combining visual aesthetics for specific audiences - Generating precise AI prompts in trending styles - Building mood boards and style guides with cultural rationale - Differentiating from competitors by choosing less obvious trend combinations ### This skill is NOT ideal for: - **Predicting which trends will last** → Trends are signals, not guarantees. Validate with your audience. - **Replacing a trained graphic designer** → The skill provides direction, not production files. - **Non-visual branding decisions** → Use `brand-strategy` or `positioning` skills for messaging/positioning. - **Hyper-local or niche subcultures** → These 10 trends are mainstream signals. Subcultures move faster and differently. ### Quality Checkpoints Before accepting the output, verify: - [ ] Recommended trend genuinely matches the target audience (not just "looks cool") - [ ] Cultural signal explanation makes sense for the brand's positioning - [ ] AI prompts are specific enough to produce consistent results - [ ] Combination doesn't create tonal contradictions (check "avoid combining" guidance) - [ ] The direction differentiates from competitors (not just following the same trend they use) --- ## Iteration Guide > "First pass picks the trend. Second pass makes it yours." ### Recommended Iteration Pattern | Pass | Focus | Questions to Ask | |------|-------|------------------| | **1st** | Trend selection | "Does this trend match what my audience already responds to?" | | **2nd** | Combination | "Does the primary + supporting trend create something original?" | | **3rd** | Specificity | "Are the AI prompts / mood board descriptions precise enough to brief someone?" | | **4th** | Differentiation | "Would a competitor arrive at this same combination? If yes, push further." | ### Useful Follow-up Prompts - "This feels too generic. Push toward a less obvious trend combination for [audience]." - "My competitor already uses [trend]. What's adjacent but different?" - "Show me how this trend would apply to [specific deliverable: packaging / social / web header]." - "Create 3 variations — one safe, one bold, one experimental." - "What would [specific designer or brand you admire] do with this trend?" --- ## Learning Curve | Usage | What You'll Experience | |-------|----------------------| | **1st use** | You discover the 10 trends and get initial direction | | **3rd use** | You start requesting specific combinations and challenging generic matches | | **10th use** | The trend vocabulary becomes second nature; you brief designers and AI tools with precision | **Pro tip**: The "avoid combining" guidance is as valuable as the "combine well with" guidance. Knowing what NOT to do prevents tonal accidents. --- ## Checklists & Templates ### Trend Selection Checklist ``` ## Trend Match Validation ### Audience Fit - [ ] Trend matches audience's cultural moment (not just what I like) - [ ] Visual language works on their primary platforms - [ ] Doesn't alienate adjacent audience segments ### Brand Fit - [ ] Aligns with brand personality (playful? serious? rebellious?) - [ ] Differentiates from top 3 competitors' visual language - [ ] Can be sustained beyond one campaign (not just a novelty) ### Execution Fit - [ ] Design team / AI tools can produce this consistently - [ ] Works across required formats (social, web, print, packaging) - [ ] Budget allows for this level of production quality ``` --- ### Mood Board Brief Template ``` ## Mood Board Brief: [Project Name] **Date**: _______________ **Project**: _______________ **Audience**: _______________ **Primary trend**: _______________ → Why: _______________ **Supporting trend**: _______________ → What it adds: _______________ **Color direction**: _______________ **Typography direction**: _______________ **Texture / Treatment**: _______________ **Composition style**: _______________ **Anti-references** (what we are NOT): → Trend to avoid: _______________ → Why: _______________ **Deliverables needed**: - [ ] _______________ - [ ] _______________ - [ ] _______________ ``` --- ### Red Flags Checklist ``` ## Warning Signs in Your Output - [ ] Recommending a trend purely because it's "cool" without audience rationale - [ ] Combining 3+ trends (usually results in visual noise, not clarity) - [ ] Trend matches your personal taste but not your audience's expectations - [ ] AI prompts are too generic (no specific textures, colors, or composition notes) - [ ] The direction would look identical to a competitor's - [ ] Trend is already saturating in your category (late follower, not early adopter) ``` ## References - Kittl × Savee. "2026 Design Trends Report" (January 2026) — [Full report (Google Drive)](https://drive.google.com/file/d/1BBi4K90tpePOHpor4UVMyuvbh72WXjtw/view) - Adobe. "Creativity in the Age of AI" Study (2024) — 64% of designers say work is influenced by cultural shifts - Figma. "2024 State of Design" Survey — 60% of designers use AI for early concepts - Pinterest Predicts (2025 method) — Rising search trends before mainstream adoption - Getty Images VisualGPS — Surge in medieval font and ornate texture searches ## Related Skills - [ai-design/image-to-3d-pipeline](../image-to-3d-pipeline/) — Convert trend-inspired 2D assets to 3D - [branding/brand-strategy](../../branding/brand-strategy/) — Brand identity decisions before visual direction - [content/copywriting-awareness](../../content/copywriting-awareness/) — Pair visual trends with matching copy tone - [strategy/positioning](../../strategy/positioning/) — Positioning must be decided before visual execution --- ## Skill Metadata ```yaml name: design-trends-2026 category: ai-design subcategory: visual-direction version: 2.0 author: GUIA source_expert: Kittl × Savee source_work: "2026 Design Trends Report" difficulty: beginner mode: cyborg estimated_value: "Creative Director mood board session ($500-2000)" tags: [design-trends, visual-direction, mood-board, ai-prompts, brand-identity, 2026, graphic-design] created: 2026-02-06 updated: 2026-02-06 ``` --- *This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.*skills/ai-design/image-to-3d-pipeline/SKILL.mdskillShow content (12330 bytes)
--- name: image-to-3d-pipeline description: "Transformez une image 2D en modèle 3D animé prêt pour le web ou le jeu en moins de 30 minutes, en utilisant le workflow Dilum Sanjaya (Hunyuan3D + Mixamo). Use when: **Créer un personnage 3D pour un site web** - Mascotte, avatar, illustration interactive; **Prototyper un asset de jeu** - Character design, props, environnements; **Produire du contenu marketing 3D** - Produits rotatifs, personnages animés; **Convertir des illustrations existantes** - Logo, mascotte, character design → 3D; **Tes..." license: MIT metadata: author: ClawFu version: 1.0.0 mcp-server: "@clawfu/mcp-skills" --- # Image to 3D Pipeline > Transformez une image 2D en modèle 3D animé prêt pour le web ou le jeu en moins de 30 minutes, en utilisant le workflow Dilum Sanjaya (Hunyuan3D + Mixamo). ## When to Use This Skill - **Créer un personnage 3D pour un site web** - Mascotte, avatar, illustration interactive - **Prototyper un asset de jeu** - Character design, props, environnements - **Produire du contenu marketing 3D** - Produits rotatifs, personnages animés - **Convertir des illustrations existantes** - Logo, mascotte, character design → 3D - **Tester une idée rapidement** - Prototype 3D en 30 minutes au lieu de jours ## Methodology Foundation **Source**: Dilum Sanjaya (@DilumSanjaya) - Game Character Pipeline (2025-2026) **Core Principle**: "L'image 2D est votre blueprint. Hunyuan3D génère le mesh, Mixamo ajoute le rig automatiquement. En 30 minutes, vous avez un personnage animé utilisable dans Three.js ou Unity." **Why This Matters**: Traditionnellement, passer d'un concept 2D à un modèle 3D riggé prenait des jours de travail de modélisation. Ce workflow réduit le temps à moins d'une heure tout en produisant des assets de qualité suffisante pour la production. ## What Claude Does vs What You Decide | Claude Does | You Decide | |-------------|------------| | Structures video workflow | Final creative vision | | Suggests shot compositions | Equipment selection | | Creates storyboard templates | Brand aesthetics | | Generates script frameworks | Final approval | | Identifies technical requirements | Budget allocation | ## What This Skill Does 1. **Guide le choix de l'outil 3D** - Hunyuan3D vs Tripo vs Meshy selon le use case 2. **Structure le workflow complet** - De l'image source au modèle exporté 3. **Optimise le mesh généré** - Réduction de polygones, correction de textures 4. **Automatise le rigging** - Configuration Mixamo pour personnages 5. **Prépare l'export** - Formats GLB/FBX selon la destination ## How to Use ### Convertir un character design en personnage 3D animé ``` J'ai cette image de personnage [joindre image]. Aide-moi à la convertir en modèle 3D animé avec le skill image-to-3d-pipeline. ``` ### Créer un produit 3D rotatif ``` Je veux créer un modèle 3D de mon produit [description] à partir de photos. Guide-moi avec le pipeline image-to-3d. ``` ### Prototyper une mascotte de marque ``` Voici le design de notre mascotte [image]. Je veux la transformer en 3D pour notre site web avec des animations idle. ``` ## Instructions Quand vous aidez à convertir une image 2D en 3D, suivez ce processus : ### Step 1: Évaluer l'image source ``` ## Analyse de l'Image Source **Type d'image:** [ ] Character design / Personnage [ ] Objet / Produit [ ] Illustration / Logo [ ] Photo réelle **Qualité pour conversion 3D:** [ ] ✅ Vue frontale claire [ ] ✅ Fond simple ou transparent [ ] ✅ Couleurs/textures distinctes [ ] ✅ Proportions cohérentes [ ] ⚠️ Détails complexes (peut perdre en conversion) **Complexité estimée:** [ ] Simple - Forme géométrique basique [ ] Moyenne - Personnage ou objet organique [ ] Complexe - Détails fins, accessoires multiples ``` **Points clés:** - Les vues frontales donnent de meilleurs résultats - Les fonds transparents/blancs simplifient le traitement - Les personnages avec membres distincts se riggent mieux --- ### Step 2: Choisir l'outil de conversion | Outil | Forces | Idéal pour | Limitations | |-------|--------|------------|-------------| | **Hunyuan3D** | Meilleure texture, open source | Personnages, objets détaillés | Cleanup parfois nécessaire | | **Tripo AI** | UX simple, rigging auto | Prototypes rapides | Moins de contrôle | | **Meshy** | Bon pour stylisé | Assets cartoon/low-poly | Textures moins réalistes | | **Rodin Gen-1** | Vitesse, topology game-ready | Game assets | Moins de fidélité | | **CSM** | Multi-view consistency | Objets complexes | Plus lent | **Recommandation par use case:** - **Personnage pour web** → Hunyuan3D + Mixamo - **Prototype rapide** → Tripo AI - **Asset jeu stylisé** → Meshy ou Rodin - **Produit réaliste** → Hunyuan3D + post-processing --- ### Step 3: Pipeline de conversion ``` ## Pipeline Standard (Hunyuan3D) ### A. Préparation de l'image 1. Supprimer le fond (remove.bg ou outil intégré) 2. Recadrer serré sur le sujet 3. Résolution recommandée: 1024x1024 minimum 4. Sauvegarder en PNG (préserver transparence) ### B. Génération 3D 1. Uploader sur Hunyuan3D (hunyuan3d.tencent.com) 2. Sélectionner mode: "Image to 3D" 3. Paramètres recommandés: - Quality: High - Texture: Enable - Multi-view: Enable (si disponible) 4. Générer et télécharger (GLB ou OBJ) ### C. Validation du mesh - Ouvrir dans Blender ou viewer en ligne - Vérifier: topology, textures, scale - Identifier problèmes: trous, textures manquantes ``` --- ### Step 4: Optimisation et nettoyage ``` ## Checklist Optimisation ### Mesh [ ] Poly count acceptable (< 50k pour web, < 100k pour jeu) [ ] Pas de faces inversées [ ] Pas de vertices orphelins [ ] Mesh manifold (étanche) ### Textures [ ] UV map correcte [ ] Résolution appropriée (1024x1024 ou 2048x2048) [ ] Pas de stretching visible [ ] Couleurs fidèles à l'original ### Scale [ ] Proportions correctes [ ] Orientation (Y-up ou Z-up selon destination) [ ] Centré sur origin ``` **Outils de cleanup:** - **Blender** (gratuit) - Decimate modifier, texture paint - **Meshlab** (gratuit) - Réparation automatique - **gltf-transform** (CLI) - Optimisation GLB pour web --- ### Step 5: Rigging avec Mixamo (personnages uniquement) ``` ## Workflow Mixamo 1. Exporter le mesh en FBX (sans textures embarquées) 2. Uploader sur mixamo.com 3. Positionner les markers: - Chin - Wrists - Elbows - Knees - Groin 4. Sélectionner "Auto-Rig" 5. Choisir animations: - Idle (standing, breathing) - Walk - Run - Autres selon besoin 6. Télécharger en FBX avec skin ``` **Animations recommandées pour web:** - `Idle` - Animation de base - `Walking` - Pour déplacements - `Waving` - Interaction - `Talking` - Si voix-off --- ### Step 6: Export et intégration | Destination | Format | Notes | |-------------|--------|-------| | **Three.js / Web** | GLB | Format recommandé, embedde textures | | **Unity** | FBX | Import natif, configurer materials | | **Unreal** | FBX | Nécessite skeleton retargeting | | **React Three Fiber** | GLB | Utiliser gltfjsx pour composant | ```bash # Optimisation GLB pour web (gltf-transform) npx @gltf-transform/cli optimize input.glb output.glb --compress draco ``` **Taille cible:** - Hero 3D (première chose visible): < 2MB - Asset secondaire: < 500KB - Personnage animé: < 5MB ## Examples ### Example 1: Personnage de jeu - Character Selection Screen **Input**: Concept art de personnage (style cartoon) **Process**: 1. Nano Banana → Génération character sheet cohérent 2. Hunyuan3D → Conversion en mesh 3D 3. Blender → Cleanup rapide (5 min) 4. Mixamo → Auto-rig + animations idle/select 5. Three.js → Intégration avec rotation au survol **Output**: Personnage 3D interactif avec 3 animations **Temps total**: ~45 minutes **Code Three.js basique:** ```jsx import { useGLTF, useAnimations } from '@react-three/drei' function Character({ url }) { const { scene, animations } = useGLTF(url) const { actions } = useAnimations(animations, scene) useEffect(() => { actions['idle']?.play() }, []) return <primitive object={scene} /> } ``` --- ### Example 2: Mascotte de marque pour landing page **Input**: Illustration 2D de mascotte entreprise **Process**: 1. Cleanup fond (remove.bg) 2. Hunyuan3D → Mesh 3D avec textures 3. Pas de rigging (statique) 4. Export GLB optimisé 5. Spline ou Three.js → Animation CSS/JS simple (rotation, bounce) **Output**: Mascotte 3D tournante en hero section **Temps total**: ~20 minutes --- ### Example 3: Produit e-commerce 360° **Input**: 4 photos du produit (face, dos, côtés) **Process**: 1. CSM → Multi-view reconstruction (meilleur pour objets) 2. Cleanup Blender → Simplifier geometry 3. Bake textures hautes résolution 4. Export GLB 5. model-viewer → Viewer 3D responsive **Output**: Viewer 3D interactif avec zoom/rotation **Temps total**: ~1 heure **Code model-viewer:** ```html <model-viewer src="product.glb" ar auto-rotate camera-controls shadow-intensity="1" ></model-viewer> ``` ## Checklists & Templates ### Checklist Pré-Conversion ``` ## Image Source [ ] Résolution suffisante (min 1024x1024) [ ] Fond transparent ou uniforme [ ] Sujet bien délimité [ ] Style cohérent (pas de mix photo/illustration) ## Objectif [ ] Destination claire (web/jeu/vidéo) [ ] Poly budget défini [ ] Animations nécessaires identifiées [ ] Format d'export choisi ``` ### Template Brief 3D ``` ## Brief Conversion 2D → 3D **Image source:** [joindre] **Type:** [ ] Personnage [ ] Objet [ ] Logo [ ] Autre **Destination finale:** - Plateforme: _______________ - Interaction: [ ] Statique [ ] Rotation [ ] Animation complète - Taille max: ___ MB **Style souhaité:** - [ ] Fidèle à l'original - [ ] Stylisé/Low-poly - [ ] Réaliste **Animations (si personnage):** - [ ] Idle - [ ] Walk - [ ] Autres: _______________ **Contraintes:** - _______________ ``` ## Tool Comparison Matrix | Critère | Hunyuan3D | Tripo AI | Meshy | Rodin | CSM | |---------|-----------|----------|-------|-------|-----| | **Qualité texture** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | **Vitesse** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | | **Facilité** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | | **Cleanup requis** | Moyen | Faible | Faible | Faible | Moyen | | **Prix** | Gratuit | Freemium | Freemium | Payant | Freemium | | **Best for** | Personnages | Prototypes | Stylisé | Jeux | Multi-view | ## Troubleshooting | Problème | Cause probable | Solution | |----------|----------------|----------| | Mesh "explosé" | Fond non transparent | Retirer le fond avant upload | | Textures manquantes | Export sans embedde | Re-exporter avec textures packées | | Rigging échoue | Pose non T-pose | Modifier pose dans Blender avant Mixamo | | Fichier trop lourd | Trop de polygones | Utiliser Decimate modifier | | Animations saccadées | FPS incompatible | Re-exporter à 30fps | ## Skill Boundaries ### What This Skill Does Well - Structuring video production workflows - Creating storyboard frameworks - Suggesting technical approaches - Providing creative direction templates ### What This Skill Cannot Do - Replace professional videography - Edit video files directly - Make final creative judgments - Guarantee audience engagement ## References ### Outils - [Hunyuan3D](https://hunyuan3d.tencent.com) - Tencent, gratuit - [Tripo AI](https://www.tripo3d.ai) - Freemium - [Meshy](https://www.meshy.ai) - Freemium - [Mixamo](https://www.mixamo.com) - Adobe, gratuit - [gltf-transform](https://gltf-transform.donmccurdy.com) - CLI optimisation ### Tutorials - Dilum Sanjaya: Character to 3D workflows (X/Twitter) - Three.js Fundamentals: Loading 3D models - React Three Fiber: useGLTF documentation ### Research - `docs/research-ai-design-workflows-2026-01.md` - Deep research 75+ sources ## Related Skills - `character-design-ai/` - Générer des images de personnages cohérentes (input pour ce skill) - `vibe-coding-design/` - Méthodologie itérative rapide - `ai-ui-generation/` - Intégrer le 3D dans une interface générée --- *Skill version: 1.0* *Last updated: 2026-01-28* *Category: ai-design*skills/ai-design/minimalist-image-director/SKILL.mdskillShow content (24048 bytes)
# Minimalist Image Director > Art direction framework for generating warm minimalist photography via AI image generators (Flux, Midjourney, DALL-E). Separates compositional minimalism from emotional minimalism to avoid the "beautiful but sad" trap. ## When to Use This Skill - Generating hero images, card images, or blog illustrations for a website - Creating a cohesive visual identity across 10+ AI-generated images - Briefing AI image generators (Replicate/Flux, Midjourney, DALL-E) with emotional precision - When previous minimalist attempts came back "too cold" or "too sad" - Building a visual style guide for a brand's AI-generated photography ## Methodology Foundation **Sources**: - Editorial photography principles (Annie Leibovitz, minimal lifestyle photography trend 2024-2026) - Emotional Design (Don Norman, 2004) — visceral, behavioral, reflective processing - Color psychology research — warm tones (2700-3000K) activate approach behaviors, cool tones trigger avoidance - Neuroscience of visual-thermal perception — 80% of experiments show visual environment manipulation affects thermal perception (red-orange = warmth, green-blue = cold) - Black Forest Labs official prompting guides (Flux 1.1 Pro, Flux 2) - Kodak Portra 400 color science — the gold standard for warm skin tones in AI photography **Core Principle**: Minimalism is about what you KEEP, not what you REMOVE. The fewer elements in a frame, the more each one must carry emotional weight. Empty space amplifies — it amplifies warmth just as easily as coldness. **Why This Matters**: AI image generators default to "aesthetic minimalism" which reads as cold, clinical, lonely. The skill teaches how to direct warmth INTO minimal compositions, getting the clean look without the emotional void. **The Neuroscience**: Warm colors trigger approach behaviors and lower cognitive vigilance — the viewer feels safe. Cool colors trigger alertness and avoidance. This is not aesthetic preference; it's how photoreceptors and neural pathways process visual information. --- ## What Claude Does vs What You Decide > "Claude handles the prompt engineering. You bring the emotional truth." | Claude handles | You provide | |---------------|-------------| | Translating emotional intent into Flux/MJ prompt syntax | The emotion each image must convey | | Applying the 4-layer prompt architecture consistently | Brand palette and visual identity | | Flagging prompt anti-patterns that produce sad/cold images | Validation — does this FEEL right? | | Generating batch-consistent style prefixes | Subject matter and context for each image | | Optimizing aspect ratios and technical parameters | Final selection between generated options | **Remember**: AI can generate technically perfect minimalist images that feel completely wrong. Your gut reaction to the emotion is the quality gate, not the composition. --- ## What This Skill Does 1. **Emotional Calibration** - Defines the target emotion BEFORE writing any prompt 2. **4-Layer Prompt Architecture** - Style + Subject + Emotion + Anti-patterns in every prompt 3. **Batch Consistency** - Creates a shared style prefix for visual cohesion across sets 4. **Anti-Pattern Detection** - Flags words/directions that trigger cold/sad/clinical outputs 5. **Brand Alignment** - Maps brand voice to visual language (warm brand = warm photos) ## How to Use ### Generate images for website cards ``` I need 3 card images for a child development psychologist website. Brand palette: cream, coral, warm earth tones. Cards: Motor Development, Emotional Development, Cognitive Development. Target emotion: hopeful, warm, possibility. Generator: Replicate Flux 1.1 Pro, 3:4 aspect ratio. ``` ### Create a cohesive blog image set ``` Generate prompts for 13 blog articles about parenting and child psychology. All images must feel like they're from the same photo shoot. Brand: warm, approachable, Latin American families. Avoid: clinical, sad, isolated figures, stock photo poses. ``` ### Fix images that came back too cold ``` These minimalist images came back sad/cold. Here's the original prompt: [prompt]. Keep the minimalist composition but make it emotionally warm. The image should make a parent feel "I want to be that parent" not "that's beautiful but lonely." ``` ## Instructions When generating minimalist image prompts, follow this methodology precisely: ### Step 1: Define the Emotional Target Before writing ANY prompt, answer: ``` ## Emotional Brief **This image should make the viewer feel:** ________________ **The viewer should want to:** ________________ **This is NOT about:** ________________ **Emotional quadrant:** WARM | ACTIVE --+-- CALM | COLD Target: [e.g., Warm + Calm = nurturing serenity] ``` **Key principle**: If you can't name the emotion in 2 words, the image will be vague. **Emotional vocabulary for warm minimalism:** | Warm + Active | Warm + Calm | |--------------|-------------| | Delight, play, discovery | Serenity, connection, trust | | Courage, determination, pride | Presence, intimacy, safety | | Freedom, possibility, wonder | Patience, tenderness, focus | | Cold + Active (AVOID) | Cold + Calm (AVOID) | |----------------------|---------------------| | Anxiety, urgency, pressure | Loneliness, melancholy, void | | Frustration, anger, defeat | Isolation, clinical, sterile | **Color psychology for emotional targeting:** | Color range | Emotional effect | Use when... | |-------------|-----------------|-------------| | Cream/ivory (#FAF8F5) | Soft, approachable, comfortable base | Every warm minimalist image (background) | | Terracotta (#C2704F) | Earthy warmth, trustworthiness, permanence | Brands in family, wellness, coaching | | Warm pink (#FFC0CB) | Nurturing, gentleness, calming | Child development, early childhood | | Golden/yellow (2700K) | Happiness, energy, sunlight, cozy | Golden hour shots, living room scenes | | Orange tones | Friendly, fights depression, inviting | Social/community-oriented images | | Sage/olive (muted green) | Natural, grounded, trustworthy | Earthy brand palettes alongside terracotta | --- ### Step 2: Build the 4-Layer Prompt Every prompt has exactly 4 layers: ``` ## Prompt Architecture [LAYER 1: STYLE] Technical photography direction [LAYER 2: SUBJECT] Who/what is in the frame [LAYER 3: EMOTION] Specific emotional cues [LAYER 4: ANTI-PATTERNS] What to explicitly exclude ``` **Layer 1 — Style Prefix** (reuse across batch): ``` Warm minimalist photography. Soft natural light, shallow depth of field, [BRAND PALETTE TONES]. Candid moment, not posed. [DEMOGRAPHIC]. Shot on 85mm f/1.8 lens, Kodak Portra 400 film look, natural skin texture. No text, no logos, no watermarks. Warm color temperature. ``` **Film stock trick**: Adding "Kodak Portra 400" or "Kodak Portra 800" instantly introduces organic warmth, fine grain, and natural skin tones. This single phrase fights AI's default plastic/clinical rendering better than any other modifier. **HEX color precision** (Flux 2+): Associate HEX codes with specific objects — `"The wall is #FAF8F5 cream"` works better than `"use #FAF8F5 in the image"`. Always pair HEX with a color name. Key style levers: | Lever | Warm direction | Cold direction (avoid) | |-------|---------------|----------------------| | Light | Soft natural, golden hour, window light | Studio flash, overhead fluorescent | | Background | Cream, warm wood, sunlit room | White void, concrete, gray | | Depth of field | Shallow (f/1.8) — intimacy | Deep (f/11) — documentary | | Color temp | Warm (2700-3000K golden, 3200-4500K daylight) | Cool (6500K+) | | Framing | Close, eye-level, inclusive | Wide, above, distant | | Film stock | Kodak Portra 400, Fujifilm Pro 400H | No film reference (digital default) | | Texture | "natural skin texture, pores, freckles" | "smooth skin, flawless" (= plastic) | **Layer 2 — Subject:** ``` A [age] [demographic] child [action verb + specific detail]. [Body language cue]. [One environmental detail]. ``` Rules: - One action verb, one detail (not a paragraph) - Body language > facial expression for Flux - One environmental detail grounds the scene (wooden floor, sunlit garden) - "Mid-action" > "posing" (hands placing a block > holding a block) - **Always specify demographics** — Flux has training biases and will default if unspecified **Body language science** — warm vs cold signals: | Warm signals (USE) | Cold signals (AVOID) | |-------------------|---------------------| | Duchenne smile (eyes squeezing + mouth) | Fake smile (mouth only, no eye engagement) | | Direct eye contact, maintained gaze | Eyes turned to side or downward | | Open posture, arms uncrossed | Arms crossed over chest (barrier) | | Relaxed, self-assured stance | Rigid posture, head tilted back | | Physical proximity or gentle touch | Distance between subjects | | Leaning in, at eye level | Leaning away, looking from above | **Layer 3 — Emotion Injection:** ``` [Mood word]. [Light descriptor that reinforces mood]. ``` Proven emotion-to-prompt mappings: | Target emotion | Prompt language | |---------------|-----------------| | Joy/delight | "pure delight", "laughing", "arms wide" | | Connection | "eye contact", "faces close", "at eye level" | | Curiosity | "deeply focused", "hands mid-action", "slight smile" | | Safety | "gentle touch", "both at ease", "calm conversation" | | Pride | "standing tall", "determination", "just accomplished" | | Possibility | "looking up/ahead", "about to", "the moment before" | **Layer 4 — Anti-Pattern Blockers:** Words that trigger cold/sad in AI generators: | NEVER use | Use instead | |-----------|-------------| | `alone`, `solitary`, `quiet room` | `single subject, clean background` | | `studio lighting`, `white background` | `soft natural light, warm background` | | `looking at camera`, `posing` | `candid moment`, `mid-action` | | `dark`, `moody`, `dramatic` | `warm`, `soft`, `gentle` | | `black and white`, `monochrome` | `warm tones`, `earth tones` | | `empty`, `vast`, `sparse` | `minimal`, `clean`, `uncluttered` | | `pensive`, `thoughtful` (alone) | `focused`, `curious`, `engaged` | | `sitting alone` | `sitting with [object/activity]` | | `perfect`, `flawless`, `symmetry` | `natural`, `authentic`, `organic` | | `smooth skin`, `airbrushed` | `natural skin texture`, `pores`, `subtle imperfections` | | `3D render`, `CGI`, `hyperrealistic` | `photography`, `candid`, `film look` | **Negative prompt suffix** (append to every prompt for Flux): ``` --no plastic skin, glossy surfaces, artificial lighting, airbrushed, sterile, clinical, 3D render, CGI, harsh shadows, cool tones ``` --- ### Step 3: Validate Before Generating Before sending to the API, run this checklist: ``` ## Pre-Generation Checklist - [ ] Can I name the target emotion in 2 words? - [ ] Does the subject have an ACTION (not just a state)? - [ ] Is there at least one warmth signal (light, touch, smile, color)? - [ ] Are there zero isolation signals (alone, empty, quiet)? - [ ] Is the demographic consistent with the brand? - [ ] Does the style prefix match the batch? ``` --- ### Step 4: Evaluate Generated Images Rate each generated image: ``` ## Image Evaluation **Emotional hit?** [Yes/No] — Does it trigger the target emotion within 2 seconds? **Warmth level:** [1-5] — 1=clinical, 3=neutral, 5=cozy **Brand fit:** [Yes/No] — Does it feel like it belongs on the brand's site? **Minimalism quality:** [Clean/Busy] — Is the composition uncluttered? **Stock photo test:** [Pass/Fail] — Would you mistake this for generic stock? If emotional hit = No → rewrite Layer 3 (emotion) first If warmth < 3 → add warm lighting/color cues to Layer 1 If stock photo test = Fail → make Layer 2 more specific (exact age, exact action) ``` --- ### Step 5: Iterate on Failures Common failure patterns and fixes: | Problem | Root cause | Fix | |---------|-----------|-----| | Image is beautiful but sad | Isolation signals in prompt | Add connection (person+person or person+activity) | | Image is warm but generic | Subject too vague | Add one hyper-specific detail ("wooden blocks" not "toys") | | Image feels like stock | "Looking at camera" or "smiling" | Switch to candid mid-action | | Inconsistent batch style | Style prefix varies | Copy-paste exact same Layer 1 | | Wrong age/demographic | Generator defaults | Be explicit: "4-year-old", "Latin American" | ## Platform-Specific Guide: Flux 1.1 Pro > Flux is the primary recommended generator for warm minimalist photography. These rules are Flux-specific. ### Syntax Rules - **Write like you're talking to a photographer**, not typing keywords into a search engine - Flux uses natural language — full sentences, NOT comma-separated keyword lists - **30-80 words is the sweet spot** — under 200 tokens for optimal quality - **NO prompt weights** — `(text:1.5)` is ignored. Use "with emphasis on X" instead - **Specify demographics explicitly** — Flux has training biases and will default to Western/white/young if unspecified ### Recommended Structure ``` [Subject + specific details] performing [action] in [environment], [lighting: direction + quality + time of day], shot on [camera/lens], [film stock reference], [composition note], [emotional tone], natural skin texture, candid moment --no [anti-patterns] ``` ### Camera Filename Trick (Raw Mode) For hyper-realistic results, prefix the prompt with a camera filename: - `IMG_2847.HEIC` — iPhone snapshot realism - `IMG_5847.CR2` — Canon DSLR raw aesthetic - `DSC03291.ARW` — Sony camera look **Example**: `IMG_2847.HEIC A mother and child laughing together at a café table, soft window light, slightly grainy, Kodak Portra 400 warmth, authentic moment` ### Raw Mode Flux Raw Mode adds natural imperfections: skin texture, realistic lighting, natural asymmetry. Best for portraits and lifestyle. Use minimal prompts — let the realism engine do its work. ### Aspect Ratios - **3:4** — Portrait cards, service pages (recommended for website cards) - **4:5** — Instagram, vertical lifestyle - **16:9** — Blog headers, hero images - **1:1** — Social media, profile images --- ## Examples ### Example 1: Child Development Website Cards **Context**: 3 service area cards for a child psychologist's website. Brand is warm, approachable, cream/coral palette. Target: parents who want to understand their child's development. **Input**: > Generate 3 card images for Desarrollo Motor, Emocional, Cognitivo. Warm minimalist, Flux 1.1 Pro, 3:4 ratio. **Output**: **Style prefix (shared):** ``` Warm minimalist photography. Soft natural light, shallow depth of field, warm cream and beige tones. Candid moment, not posed. Latin American family. Shot on 85mm f/1.8 lens. No text, no logos, no watermarks. Warm color temperature, hopeful joyful mood. ``` **Card 1 — Desarrollo Motor** (Emotion: joyful possibility) ``` [STYLE PREFIX] A 4-year-old child mid-jump on warm wooden floor, arms wide open, barefoot. Pure delight and concentration on face. Soft motion blur on hands. Single subject, clean warm background. The moment right before landing — suspended possibility. ``` **Card 2 — Desarrollo Emocional** (Emotion: intimate connection) ``` [STYLE PREFIX] A mother crouching at eye level with her 5-year-old daughter, faces close, gentle smiles, eye contact. Golden hour light. Intimate connection between adult and child. Minimal warm background, soft cream tones. ``` **Card 3 — Desarrollo Cognitivo** (Emotion: serene curiosity) ``` [STYLE PREFIX] A 6-year-old child sitting cross-legged on the floor, deeply focused building a tall wooden block tower. Hands mid-action placing a block. Calm concentration on face, slight smile. Soft overhead natural light, earth tones. ``` **Why this works**: Each image has one clear emotion, one specific action, warm lighting, and no isolation signals. The shared style prefix ensures visual cohesion across the set. --- ### Example 2: Fixing a "Beautiful but Sad" Image **Context**: A minimalist illustration of a woman crouching alone was generated for a "limits without yelling" blog post. The art direction was "minimalist" but the result felt melancholy. **Input**: > The line art minimalist image came back too sad. It's a woman crouching alone in black and white. Fix it. **Analysis of failure:** - `alone` → isolation signal - `black and white` → removes warmth - `crouching` with no context → reads as defeated - No other person or activity → loneliness **Fixed prompt:** ``` Warm minimalist photography. Soft natural light, shallow depth of field, warm cream and beige tones. Candid moment, not posed. Shot on 85mm f/1.8 lens. No text, no logos, no watermarks. Warm color temperature. A mother and 4-year-old child sitting face to face on a couch, mother holding both of child's hands gently, calm conversation. Both at ease. Warm living room light filtering through curtains. ``` **What changed:** - Solo → pair (connection defeats loneliness) - B&W → warm tones (color = life) - Crouching → sitting face to face (equals, not defeated) - Added environmental warmth (couch, living room light) --- ## Skill Boundaries (Frontier Recognition) ### This skill excels for: - Generating cohesive sets of 3-20+ images with consistent style - Warm/approachable brands (family, wellness, education, coaching) - Photorealistic AI generators (Flux, Midjourney v6+, DALL-E 3) ### This skill is NOT ideal for: - Brands that WANT cold/clinical aesthetics (tech, luxury, medical) → Adjust Layer 1 accordingly - Abstract/conceptual images (infographics, diagrams) → Use `data-visualizer` skill instead - Product photography → Requires different prompt architecture - Illustration styles (watercolor, vector, line art) → Adapt Layer 1 for illustration-specific generators ### Quality Checkpoints Before accepting the output, verify: - [ ] 2-second gut check: does the image make you feel the target emotion? - [ ] Warmth score >= 4 out of 5 - [ ] No accidental isolation signals in the composition - [ ] Consistent with the rest of the batch (same light, same tones) - [ ] Would NOT be mistaken for generic stock photography --- ## Iteration Guide > "The first output is a starting point, not a destination." ### Recommended Iteration Pattern | Pass | Focus | Questions to Ask | |------|-------|------------------| | **1st** | Emotion | "Does this FEEL right within 2 seconds?" | | **2nd** | Specificity | "Is this too generic? What one detail would make it unique?" | | **3rd** | Consistency | "Does this match the rest of the set?" | | **4th** | Brand | "Would the client recognize this as THEIR brand?" | ### Useful Follow-up Prompts - "The image is warm but feels generic. Add one hyper-specific detail to the subject." - "The emotion is too [intense/subtle]. Dial it [down/up] by adjusting the body language." - "The background is too busy. Simplify to [one element] and increase the bokeh." - "This looks like stock. Make the child's action more specific — what exactly are their hands doing?" --- ## Checklists & Templates ### Batch Brief Template ``` ## Image Batch Brief **Brand:** ________________ **Palette:** ________________ **Demographic:** ________________ **Generator:** Flux 1.1 Pro / Midjourney v6 / DALL-E 3 **Aspect ratio:** ________________ **Number of images:** ________________ ### Style Prefix (copy-paste for ALL prompts) [Write once, use everywhere] ### Per-Image Briefs | # | Subject | Target emotion (2 words) | Specific action | |---|---------|--------------------------|-----------------| | 1 | | | | | 2 | | | | | 3 | | | | ``` ### Red Flags Checklist ``` ## Warning Signs in Your Prompts - [ ] Any word from the "NEVER use" list (alone, empty, dark, moody, studio) - [ ] Subject has no action verb (just standing/sitting with no activity) - [ ] No warmth signal (no mention of light quality, color temperature, or human connection) - [ ] Demographic not specified (generator will default to its biases) - [ ] More than 3 adjectives in a row (over-direction = generic output) - [ ] Prompt longer than 80 words (Flux sweet spot is 30-80 words, degrades past 200 tokens) ``` ## References ### Core Methodology - Norman, Don. "Emotional Design" (2004) - Three levels of design processing (visceral, behavioral, reflective) - Annie Leibovitz. Masterclass on Portrait Photography - Light as emotion - Kittl x Savee. "2026 Design Trends Report" - Warm minimalism as dominant trend ### Flux & AI Image Generation - [Black Forest Labs Prompting Guide](https://docs.bfl.ai/guides/prompting_summary) - Official Flux prompt best practices - [Flux 2 Prompting Guide (fal.ai)](https://fal.ai/learn/devs/flux-2-prompt-guide) - JSON/HEX color structured prompts - [Flux Raw Mode Guide (Segmind)](https://blog.segmind.com/flux-1-1-pro-raw-mode-for-creating-natural-realistic-images/) - Natural imperfections - [Official BFL Skills Repo](https://github.com/black-forest-labs/skills) - Prompting patterns per AgentSkills spec - [Kodak Portra 400 Midjourney Style (Midlibrary)](https://midlibrary.io/styles/kodak-portra-400) - Film stock reference ### Color Psychology & Neuroscience - [Color Psychology in Photography (Skylum)](https://skylum.com/blog/color-psychology-for-photographers) - Warm/cold tones and emotional response - [Visual Environment & Thermal Perception (ScienceDirect)](https://www.sciencedirect.com/science/article/pii/S0306456523000293) - 80% of experiments show visual → thermal link - [Cold Temperatures in Photos Increase Cognitive Control (ScienceDaily)](https://www.sciencedaily.com/releases/2017/04/170410085010.htm) - Warm → relaxed, cool → alert ### Photography Technique - [Photographer's Essential Guide to Body Language (SLR Lounge)](https://www.slrlounge.com/photographers-essential-guide-body-language/) - Warm/cold posture cues - [Photography Composition Definitive Guide (Anton Gorlin)](https://antongorlin.com/blog/photography-composition-definitive-guide/) - Frame-within-frame for intimacy - [Fixing Plastic AI Skin (Rezience)](https://andyhtu.com/fixing-plastic-ai-skin/) - Negative prompts for realistic texture - [120+ Stable Diffusion Negative Prompts (ClickUp)](https://clickup.com/blog/stable-diffusion-negative-prompts/) - Anti-pattern word lists ### Warm Minimalism Trend - [Warm Minimalism Trend 2026 (Good Housekeeping)](https://www.goodhousekeeping.com/home/decorating-ideas/a69926948/new-warm-minimalism-trend/) - "Less but better" - [Earthy Color Palette Ideas (Rose Benedict Design)](https://rosebenedictdesign.com/2025/01/31/earthy-color-palettes/) - Brand application of earth tones ### Art Direction Methodology - [How to Write a Photoshoot Brief (Milanote)](https://milanote.com/guide/photoshoot-brief) - Emotional objectives in briefs - [Creative Briefs for Photographers (VSCO)](https://www.vsco.co/learn/creative-photography-briefs) - SMART emotional criteria ## Related Skills - [design-trends-2026](../design-trends-2026/) - Current visual trends to align with - [brand-strategy](../../branding/brand-strategy/) - Brand foundation before visual direction - [image-batch](../../automation/image-batch/) - Post-processing (resize, compress, WebP) --- ## Skill Metadata ```yaml name: minimalist-image-director category: ai-design subcategory: art-direction version: 2.0 author: GUIA source_expert: Editorial Photography + Don Norman (Emotional Design) + Color Psychology + Neuroscience of Visual Perception + Black Forest Labs (Flux) source_work: null difficulty: intermediate mode: centaur estimated_value: Art director day rate (~500-800 EUR/day) tags: [image-generation, art-direction, minimalism, flux, replicate, midjourney, brand-photography, emotional-design, color-psychology, warm-minimalism, kodak-portra] created: 2026-02-12 updated: 2026-02-12 ``` --- *This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.*
README
ClawFu Skills
175 expert marketing methodologies for AI agents. Free. Open source. MIT licensed.
Dunford on positioning. Schwartz on copywriting. Cialdini on persuasion. Ogilvy on advertising. Hormozi on offers. Voss on negotiation. And 160+ more — encoded as structured, agent-readable instructions.
Skills compound. Prompts don't.
Install
Claude Desktop / Claude Code / Copilot (MCP)
npx @clawfu/mcp-skills
Cursor / Windsurf
Add to your MCP config:
{
"mcpServers": {
"clawfu": {
"command": "npx",
"args": ["@clawfu/mcp-skills"]
}
}
}
Clone as Claude Code skills directory
git clone https://github.com/guia-matthieu/clawfu-skills.git
# Then use --add-dir or copy to ~/.claude/skills/
Browse & download individual skills
Catalog
175 skills across 28 categories:
| Category | Count | Highlights |
|---|---|---|
| Content | 24 | copywriting (Schwartz), storytelling (StoryBrand), persuasion (Cialdini), SEO writing |
| Strategy | 17 | positioning (Dunford), competitive analysis (Porter), JTBD, cognitive biases |
| Audio | 16 | podcast production (Ira Glass), sonic branding, sound design (Murch) |
| Automation | 10 | workflow builder, data visualizer, report generator |
| SEO Tools | 8 | schema markup, lighthouse audit, link checker, keyword clustering |
| RevOps | 8 | pipeline forecasting, forecast scenarios, revenue attribution |
| Validation | 8 | mom test, customer discovery, lean canvas, pricing validation |
| Sales | 6 | sales narrative (Dunford), SPIN selling, MEDDIC, negotiation (Voss) |
| SDR Automation | 6 | lead enrichment, outbound sequencer, ICP scoring |
| Customer Success | 6 | health score, churn predictor, onboarding orchestrator |
| Video | 5 | AI storyboard, video concept, voice design, video QA |
| AI Design | 5 | image-to-3D, web design director, minimalist image director |
| HR-Ops | 5 | resume screener, onboarding guide, interview scheduler |
| Social | 5 | social listening, sentiment analyzer, hashtag analyzer |
| Legal | 5 | contract review, GDPR compliance, terms analyzer |
| Branding | 4 | brand strategy (Neumeier), brand voice, naming |
| Meta | 4 | skill orchestrator, RLM (large codebase), context engineering |
| Crisis | 4 | crisis detector, response coordinator, reputation recovery |
| Growth | 4 | growth loops (Reforge), PLG (Wes Bush), referral systems |
| Thinking | 4 | first principles, inversion, pre-mortem, second-order thinking |
| Analytics | 4 | A/B testing, cohort analysis, funnel analyzer |
| Product | 3 | product discovery (Cagan), design sprint (GV), Shape Up |
| Leadership | 3 | high-output management (Grove), radical candor, one-on-ones |
| Funnels | 3 | DotCom Secrets (Brunson), launch formula, nurture sequences |
| Startup | 3 | YC pitch deck, startup metrics, fundraising narrative |
| Acquisition | 2 | ad spend optimizer, Google Ads (Perry Marshall) |
| 2 | email writing, deliverability checker | |
| DevOps | 1 | DNS zonefile config |
How it works
Each skill is a SKILL.md file following the Agent Skills open standard:
---
name: positioning
description: "Master product positioning using April Dunford's 5+1 framework. Use when: launching a new product; customers don't 'get it'; facing wrong competitor comparisons; pivoting to a new market"
---
The description tells agents when to use the skill. The body provides the full methodology — frameworks, steps, examples, and output format.
Skills work across Claude, ChatGPT, Copilot, Cursor, Windsurf — any tool that supports the Agent Skills standard or MCP.
Quality
All skills are reviewed against Anthropic's skill authoring best practices:
- Expert attribution — named source methodology (Dunford, Schwartz, Cialdini...), not generic checklists
- Agent-first descriptions — "Use when:" trigger terms for reliable discovery
- Concise — methodology only, no explanations Claude already knows
- Output contracts — declared output format for composability between skills
Automated quality checks run on every PR via Tessl Skill Review.
Security
Skills are context, not code. They contain markdown instructions only — no executable scripts, no network calls, no file system access.
- 100% open source and auditable
- No community uploads or marketplace — curated library only
- No hidden HTML, comments, or obfuscated content
- MIT licensed
Contributing
Found an issue? Want to improve a skill? PRs welcome.
Quality bar: every modified SKILL.md is automatically reviewed by the Tessl GitHub Action. Aim for 80%+ score.
License
MIT — see LICENSE.
Links
- clawfu.com — browse and download skills
- @clawfu/mcp-skills — npm package (MCP server)
- Guia — AI systems consulting
Built by Matthieu Credou at Guia.