Complete Web Design Setup Framework (design-setup)

This skill guides AI agents and users through setting up bespoke, high-taste web UIs and landing pages from scratch while systematically eliminating AI Slop (generic dark slate modes, cyan/purple gradients, default Inter fonts, 3D blobs, uniform 3-column cards, and cliché copy).

Automatic Skill Integration: During UI component and layout generation, this skill automatically enforces micro-design rules from design-rules (e.g., -2% headline tracking hack, 4pt/8pt grid spacing, dark mode surface elevation, 4-state buttons, semantic colors, and progressive backdrop blur overlays).

⛔ 0. Environment Preflight Check (Mandatory Pre-Run Audit)

Before initiating the design setup workflow, the agent MUST run a brief preflight check to verify that all necessary dependencies are in place:

1. Skills Audit: Verify if Impeccable Skill (impeccable.style), Taste Skill (v2), UI/UX Pro Max, and design-rules are active.
2. MCP Connectivity: Verify that Higsfield MCP CLI (higsfield.ai) is active and authenticated if background hero imagery/video is required.
3. Dev Server Status: Ensure local dev server (e.g., Vite, Next.js) and preview environment are ready.
4. Inspiration Check: Confirm if the user has provided reference screenshots, URLs, or an Inspiration Library brief.

Action: If any dependency is missing, prompt the user immediately before starting execution to prevent getting stuck midway.

🚫 1. Anti-Slop Guardrails & Micro-Rules Enforced

Enforce these strict negative constraints on EVERY UI generation task:

• ❌ NO Generic Color Palettes: Never default to #0f172a slate dark mode with cyan (#06b6d4) to purple (#a855f7) gradients.
• ❌ NO Font Defaulting: Never use Inter font without an explicit font scale and intentional pairing (e.g., Serif headline + Monospace label).
• ⚡ Headline Pro Typography Hack (via design-rules): Apply -2% to -3% letter-spacing (tracking-tight) and 110%-120% line-height (leading-tight) on large heading text.
• 📐 4pt/8pt Spacing Grid (via design-rules): All padding, margin, and gap values MUST be exact multiples of 4 or 8.
• 🌙 Dark Mode Surface Elevation (via design-rules): Create depth in dark mode using lighter background surface colors (#09090b ➔ #18181b ➔ #27272a), NOT black drop shadows.
• 🔘 4-State Buttons & Icon Line-Height (via design-rules): Render Default, Hover, Active, Disabled button states. Match icon size to text line-height.
• ❌ NO Cliché Elements: No 3D glowing glassmorphism blobs, uniform 3-column feature cards with gray border-slate-800, or floating neon rings.
• ❌ NO Vague Copywriting: No generic AI headings like "Ship products that think for themselves". Use authentic, product-specific copy.

🧭 2. Step 1: Cultivate & Curate Taste (Inspiration & Reference Protocol)

AI has no inherent taste and defaults to "regression to the mean." Before writing code, the user MUST cultivate taste and gather high-level design inspiration.

2.1 Standard & Unconventional Inspiration Sources

When asking the user for inspiration or references, provide these primary and unconventional sources:

Standard Sources:

1. Dribbble (dribbble.com): Search web design + filter by Popular to discover high-level landing page layouts.
2. Pinterest (pinterest.com): Search web design or UI hero section to find unconventional hero compositions.
3. Twitter / X: Follow active UI/UX design creators for cutting-edge, experimental UI patterns.

🌟 Unconventional Sources (Look Where No One Else is Looking):

4. Typographic Posters (typographicposters.com): High-impact poster layouts & unconventional type arrangements.
5. Savee (savee.it): High-curation design community free of ad noise.
6. Cross-Disciplinary Inspiration: Architecture movements, design history books, museum exhibition layouts (synthesizing non-web fields creates ultra-original UIs).

2.2 Inspiration Library Web App & Copy Brief / Copy Image Prompt

To organize inspiration, the user can have Claude Code build a simple Inspiration Library Web App that groups screenshots into aesthetic categories and provides:

• Design Vocabulary & Keywords: Tags describing the visual style (e.g., Voxel rendered landscape, Monolithic scale, High-contrast index).
• Copy Image Prompt Button: Copies the image prompt to generate background hero imagery.
• Copy Brief Button: Copies the foundational design brief to paste directly into Claude Code.

Agent Action: Prompt the user:

"Before we build, do you have reference screenshots, URLs, or a copied Brief from your Inspiration Library? If not, tell me which aesthetic family (e.g., Print Tech, Dither Mono, Vast Quiet, Classical Remix) fits your vision!"

🧰 3. Step 2: Equip External Tools & Calling Card Superpowers

3.1 ⚠️ Beware Going Down the Tool Rabbit Hole

Do NOT fall into the trap of installing hyper-prescriptive skills that promise to solve all design problems with one click. Narrow, prescriptive skills only produce one rigid output. Favor flexible, non-prescriptive tools (Impeccable, Taste Skill, Higsfield MCP) while utilizing popular UI repositories like UI/UX Pro Max for extra baseline rules.

3.2 External Ecosystem & Calling Card Matrix

📁 4. Exploratory Code Scoping Policy

To prevent cluttering production codebase with abandoned components during design exploration:

• Exploration Directory: Place all multi-style explorations in isolated exploration routes/folders (e.g., /design-exploration/style-1, /design-exploration/style-2).
• Production Route Protection: Do NOT overwrite main production routes (e.g., app/page.tsx or index.html) until the user explicitly approves the final design direction.

📐 5. The 4-Part Prompt Structure

Every design setup prompt passed to the agent SHOULD contain these 4 components:

1. Aesthetic Family: [e.g., Print Tech Paper, Dither Mono, Vast Quiet / Cinematic, Classical Remix, or Custom Hybrid]
2. Reference Image / URL: [Screenshots, Live URL, or Copied Brief from Inspiration Library]
3. Intent & Target Audience: [Product purpose, target audience, primary CTA e.g., Book Demo]
4. Guardrails: [Explicit constraints e.g., No purple gradients, no 3D blobs, no default Inter font]

🔄 6. Step 3: The 3-Phase Build Sequence & Hard Decision Gates

Never attempt a "One-Shot" design setup. Execute this exact iterative build sequence with Hard Decision Gates:

Phase 1: Cast a Wide Net (5 Styles Comparison Grid)

Prompt the agent to generate 5 distinct versions of the page across 5 different aesthetic styles in isolated exploration routes:

• Example Prompt: "Setup a landing page for [Product Name], [Intent & CTA]. Guardrails: no purple gradients, no 3D blobs, no Inter font. Create 5 versions of the page in 5 different directions in /design-exploration/ (e.g., Print Tech Paper, Vast Quiet, Dither Mono, Classical Remix, Industrial Minimal)."
• Micro-Rule Enforcement: Apply design-rules headline tracking (-0.025em) and 4pt/8pt grid spacing across all 5 versions.

🛑 HARD GATE 1: STOP. Do NOT proceed to Phase 2 until the user explicitly selects ONE direction from Phase 1.

Phase 2: Explore Body Layout Variants (1 Style ➔ 3 Variants)

Once the user selects a preferred style from Phase 1 (e.g., Vast Quiet):

• Prompt the agent: "Let's go with the Vast Quiet version. Generate 3 versions of that aesthetic for me, namely changing the body layout formats (e.g., Minimal Vertical Stack, Quiet Ledger with sticky left index, Framed Border Structure)."
• Micro-Rule Enforcement: Render components using 4-state buttons, ghost buttons, and dark mode surface elevation.

🛑 HARD GATE 2: STOP. Do NOT proceed to Phase 3 until the user explicitly selects ONE body layout variant from Phase 2.

Phase 3: 2-Pass Hero Image Generation via Higsfield MCP

Execute a 2-Pass image generation process using Higsfield MCP for the background hero asset:

1. Pass 1 (Composition Options): Prompt the agent: "Let's nail that hero image. Give me 4 different high-quality 2K image compositions that fit our quiet aesthetic hero section using Higsfield MCP." (e.g., Aerial view, Crag mountain, Watercolor, Cloud Sea).
2. User Selection 1: Select 1 composition (e.g., Option 4: Cloud Sea).
3. Pass 2 (Color & Lighting Options): Prompt the agent: "Let's go with Option 4. Create multiple versions of that adding a splash of color (e.g., Dawn, Golden Hour, Alpenglow, Duotone)."
4. User Selection 2: Select the final hero image (e.g., Alpenglow).

🛑 HARD GATE 3: STOP. Do NOT implement the final production page until the final hero asset is selected by the user.

🛠️ 7. Tweaks Bar & Page Motion Directives

7.1 Natural Prompting for Dev Server Tweaks Bar

Instead of guessing fixes in terminal text, prompt the agent to add an interactive Tweaks Bar to the preview page:

Prompt: "Can we sort of mimic what happens inside of Claude Design and add a tweaks bar that pops up on this dev server so I can change a number of things? Whether that's font size, font type, accent colors, hero asset variations, motion speed, reveal distance, or element weight. Go pretty aggressive with what you offer me."

The agent will inject a floating control overlay on the dev server allowing visual tweaking of:

• Heading & Body Fonts (with Italics toggle and Font Size sliders)
• Hero Image Asset Variations toggle
• Motion Speed, Reveal Distance, and Element Weight / Stagger Delay
• Accent Colors and Spacing

7.2 Page Loading Weight & Transition Directives

• Hero Transition: The hero background MUST smoothly fade out into the body section upon scrolling (no sudden color cuts).
• Page Loading Weight: Page loading MUST feel heavy and carry weight. Use staggered reveal animations so elements load sequentially into place with tangible weight.

🏁 8. Finalization & Production Commit Phase

Once the design is approved by the user, execute this finalization checklist:

1. Commit Selected Tweaks Values: Extract the user's final selected values from the Tweaks Bar (fonts, accent colors, spacing, stagger delay) and commit them permanently into production design tokens (e.g., tailwind.config.js or global CSS variables).
2. Clean Up Exploratory Code: Remove the temporary Tweaks Bar overlay and delete unused exploration routes (/design-exploration/).
3. Promote to Production Route: Move the finalized page into the main production route (e.g., app/page.tsx or index.html).
4. Quality Checks:
   • Verify micro-design compliance against design-rules (headline tracking, button states, dark mode elevation).
   • Verify responsive layout across Mobile, Tablet, and Desktop.
   • Verify basic accessibility (contrast ratios, heading hierarchy).
   • Respect prefers-reduced-motion for animations.
   • Compare final screenshot against the original selected inspiration direction.

📚 9. Source Video References & Transcripts

For complete untruncated transcripts and raw video research:

• 📄 01_chase_ai_anti_slop_web_design.md — Chase AI
• 📄 05_chris_mccoy_5_web_design_skills.md — Self-Made Web Designer
• 📄 06_chris_mccoy_6_habits_of_design_legends.md — Self-Made Web Designer
• 📄 Full Reference Index: README.md