design-setup · git:20260729.49840ab · 2026-07-29 · sha256 a088906e8fdf56af
design-setup git:20260729.49840abA
Immutable. This exact content is served forever at /api/v1/blob/a088906e8fdf56af.
--- name: design-setup description: Complete end-to-end web design setup & prototyping framework faithful to Chase AI's methodology with production robustness gates. Automatically enforces design-rules (micro-UI typography hacks, 4pt/8pt grid, dark mode surface elevation, 4-state buttons) and legend mastery principles (unconventional inspiration, signature calling cards). Interactively guides users to cultivate design taste, enforces preflight checks, decision gates, exploratory code isolation, 4-part prompts, 3-phase build sequence, and token commit finalization. triggers: - /design-setup - design-setup - design setup - initialize web design - setup website UI - overhaul web design --- # 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 | Tool / Skill | Access / Command | Primary Function | | :--- | :--- | :--- | | **`design-rules`** | Automatic Integration | Micro-UI engineering rules (Headline hack, 4pt/8pt grid, dark mode elevation, button states). | | **Impeccable Skill** | `impeccable.style` | Audits 46 anti-slop patterns across 7 dimensions (*Typography, Color, Spatial, Responsiveness, Interaction, Motion, UX Writing*). Provides 23 commands (e.g., `/boulder`, `/clarify`, `/overdrive`) and Live Mode on Dev Server. | | **Taste Skill (v2)** | `npx skills add Leonxlnx/taste-skill` | Enforces custom typography scales, spacing systems, and motion curves (`tasteskill.dev`). | | **UI/UX Pro Max** | `github.com/nextlevelbuilder/ui-ux-pro-max-skill` | Popular comprehensive UI/UX design skill repository providing structured design guidelines, component patterns, and prompt rules. | | **Higsfield MCP** | `higsfield.ai` (MCP CLI) | Model Context Protocol integration for generating custom background hero images (e.g., GPT Images 2) and ambient video loops (e.g., Seed Dance). | | **21st.dev** | `21st.dev` | Component-level inspiration (Buttons, Cards, Pricing tables). Allows copying precise component prompts. | | **Calling Card Tech** | GSAP / Spline 3D / WebGL | Signature interactive superpower technique (e.g., GSAP ScrollTrigger, 3D interactive assets) creating a distinct visual calling card. | --- ## 📁 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: ```markdown 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](file:///d:/Github/xeno-skills/skills/design-references/01_chase_ai_anti_slop_web_design.md) — Chase AI * 📄 [05_chris_mccoy_5_web_design_skills.md](file:///d:/Github/xeno-skills/skills/design-references/05_chris_mccoy_5_web_design_skills.md) — Self-Made Web Designer * 📄 [06_chris_mccoy_6_habits_of_design_legends.md](file:///d:/Github/xeno-skills/skills/design-references/06_chris_mccoy_6_habits_of_design_legends.md) — Self-Made Web Designer * 📄 Full Reference Index: [README.md](file:///d:/Github/xeno-skills/skills/design-references/README.md)