Design audit

Skill xenodeve/xeno-skills/skills/design/design-audit

Web design & portfolio audit framework based on Ran Segall's (Flux Academy) 30-Second First Impression Test and Satori Graphics' LIFT System. Evaluates UIs for instant clarity, visual hierarchy, work visibility, trust signals, LIFT composition flow, and conversion readiness.From its SKILL.md

Install

npx -y skills add xenodeve/xeno-skills --skill design-audit

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

6.0 KB, as published. Nobody here has run it

Web & Portfolio Design Audit Framework (`design-audit`)

This skill audits and optimizes web user interfaces, landing pages, and portfolio websites using Ran Segall's (Flux Academy) 30-Second First Impression Audit Criteria and Satori Graphics' LIFT System Composition Protocol.

⏱️ The 30-Second First Impression Rule

Recruiters and prospective clients review hundreds of portfolios and websites. They decide whether to hire a designer or leave the site in 30 seconds or less.

0s ─────────────── 5s ────────────────── 15s ────────────────── 30s
[Load & OG Check]  [Hero Hook & Visibility]  [Hierarchy & Work Audit]  [Conversion Decision]

🔍 6-Point Audit Checklist (Including LIFT Protocol)

1. Load Performance & Social Sharing (0s - 5s)

⚡ Page Load Speed: Page must load fully in under 3 seconds. Avoid heavy JS spinners.
🖼️ Open Graph (OG) Image & Title: Social links shared on X, LinkedIn, or Discord MUST have custom high-res OG preview images and clear titles.

2. Immediate Work Visibility & Clarity (5s - 15s)

👁️ Don't Hide the Work: NEVER force visitors to click, unlock, or hover endlessly just to see core work. Show high-fidelity visual mockups immediately upon scrolling.
🚫 Avoid Confusing Over-Creativity: Do not build complex mini-game UIs or OS desktop simulators where visitors get lost.
🙋 Clear Identity & Photo: For freelancers and designers, displaying a professional photo builds instant trust.

3. Design Fundamentals, Hierarchy & Luxury Space (15s - 20s)

🔤 Typography Hierarchy: Limit to max 2 font families with clear scale contrast (e.g. Major Third 1.25x scale).
🎨 Color & 60-30-10 Distribution: High WCAG contrast ratios. No color chaos.
📐 "Space is Wealth" (Luxury White Space): Ensure generous white space around elements. Eliminate unnecessary divider lines (<hr>) or heavy card borders.

4. Micro-Interactions & Experience (20s - 25s)

✨ Tasteful Micro-Interactions: Subtle hover scaling, smooth preview transitions.
📱 Mockup Authenticity: Show realistic device mockups without overly distorted perspective angles.

5. 🏗️ The LIFT System Composition Audit (25s - 28s)

🎯 L — Leverage Point Check: Is there ONE dominant visual hero element that commands immediate attention? Are competing elements pushed back?
👁️ I — Internal Rhythm Check: Does the eye flow logically from the Leverage Point through secondary details without confusion?
🌶️ F — Friction & Flow Check: Is visual friction (overlapped text, tight line-heights) used sparingly like seasoning, or is it creating chaotic noise?
📱 T — Transferability Check: Does the layout hold up when scaled down to a mobile thumbnail or transferred across light/dark backgrounds?

6. Trust Signals & Conversion CTA (28s - 30s)

🤝 Social Proof: Display client logos, industry awards, or testimonials prominently.
🎯 Prominent Call-to-Action (CTA): Follow the Scrolling CTA Frequency Rule (1 in Hero, 1 in Nav, visible CTA every 2-3 seconds of scrolling).

📊 Audit Scorecard & Agent Execution Protocol

When executing /design-audit or reviewing a webpage/portfolio, the agent MUST generate a structured audit report using this scorecard format:

# 🔍 30-Second & LIFT Design Audit Report

## 📈 Executive Summary Score: [88 / 100]

| Audit Dimension | Status | Key Observations & Required Fixes |
| :--- | :---: | :--- |
| **1. Speed & OG Sharing** | ✅ PASS | Loads in 1.2s. Custom OG Image verified. |
| **2. Work Visibility & Hero Hook**| ⚠️ WARN | Hero text is clear, but work is hidden behind hover tabs. Show 2 featured projects immediately. |
| **3. Typography & Hierarchy** | ❌ FAIL | 4 font families used. Heading contrast is too low (light gray on white). |
| **4. Micro-Interactions** | ✅ PASS | Smooth hover scale on cards. |
| **5. LIFT Composition Protocol** | ⚠️ WARN | Leverage point is weak; primary CTA competes with secondary badges. Increase CTA contrast. |
| **6. Trust & Conversion CTA** | ⚠️ WARN | CTA button is too small. Add client logos or testimonial section. |

## 🛠️ Priority Action Plan
1. **Fix Work Visibility:** Unhide case study cards; render top 2 featured projects directly in the body flow.
2. **Strengthen Leverage Point:** Increase scale and contrast of the primary CTA button.
3. **Consolidate Fonts:** Reduce font families to 2 (e.g., Playfair Display + Manrope).

💡 Quick Fix Code Patterns

OG Image Head Tags Template

<meta property="og:title" content="Jane Doe — Senior Product Designer" />
<meta property="og:description" content="Building high-impact digital products and design systems." />
<meta property="og:image" content="https://yourdomain.com/og-preview.jpg" />
<meta name="twitter:card" content="summary_large_image" />

Bento Grid Clean Work Section Layout

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8 max-w-7xl mx-auto">
  <div class="group relative overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-50 p-6 transition-all hover:shadow-xl">
    <img src="/work-preview-1.jpg" alt="Case Study 1" class="rounded-lg object-cover transition-transform duration-300 group-hover:scale-105" />
    <h3 class="mt-4 text-xl font-bold tracking-tight text-neutral-900">Project Alpha</h3>
    <p class="text-sm text-neutral-600">Product Design & Mobile App</p>
  </div>
</section>