design-web-impactful

Design and build concept-driven marketing landing pages with expressive typography and signature interactions.

Updated Jan 28, 2026
One-click install
npx skills add https://github.com/scanady/nexus-skills --skill design-web-impactful-scanady
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-web-impactful
Source: https://github.com/scanady/nexus-skills/tree/main/skills/design-web-impactful
Command: npx skills add https://github.com/scanady/nexus-skills --skill design-web-impactful-scanady

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes references (resource) and assets (resource) components.

What problem does it solve? Marketing sites built by AI often look generic, templated, or AI-generated, failing to impress design-savvy audiences or drive conversions. This Skill enforces a concept-first design workflow that produces distinctive, award-caliber marketing pages grounded in a singular brand idea. ## Core Features & Use Cases - Concept Derivation Workflow: Generates multiple structurally different concept directions, grounds them against real competitors, and commits every design decision to one coherent concept statement. - Two Operating Modes: Conversion-safe mode for B2B and lead-gen pages, and expressive mode with scroll choreography, custom cursors, and kinetic type for award-ambition work. - Render-and-Critique Loop: Screenshots the built page at four widths (360/768/1280/1440) with Playwright and iterates against a structural and craft rubric before declaring done. - Use Case: When a homepage feels flat or looks AI-generated, invoke this Skill to redesign the hero, add a full-bleed prefooter, replace stock imagery with authored visuals, and verify the result in a real browser. ## Quick Start Ask the agent to redesign the homepage so it feels distinctive and award-worthy, using the design-web-impactful skill to derive a concept and verify the rendered result.

Frequently Asked Questions about design-web-impactful

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a landing page that does not look AI-generated?▼

Derive a concept statement before any visual decision, choose an expressive typeface instead of default fonts like Inter or Geist, and include one signature moment no template contains. Then render the page in a browser and critique screenshots at multiple widths before shipping.

How to build hover-to-open navigation in React and Next.js?▼

Use a controlled data-open state with a 140ms close delay, an invisible ::before bridge covering the gap between trigger and panel, and pointer-type checks to suppress hover on touch. The skill ships paste-ready hover-nav.tsx and hover-nav.css assets for React 19 and Next.js App Router.

What is the difference between conversion-safe and expressive design modes?▼

Conversion-safe mode suits B2B and lead-gen pages with restrained interactions like scroll reveals and marquees. Expressive mode targets award-caliber work with scroll choreography, custom cursors, entry sequences, and WebGL, while both modes share the same accessibility and performance standards.

Does this approach work for dashboards or admin tools?▼

No, the skill explicitly excludes dashboards, data-dense consoles, documentation sites, and internal tools. Those surfaces benefit from quiet, predictable design, and the skill recommends using a general frontend-design skill instead.

Why must the page be rendered in a browser before it is done?▼

A model cannot see its own output, so source review alone misses empty sections, blown-out spacing, and weak contrast. The skill requires Playwright screenshots at 360, 768, 1280, and 1440 pixels, with a static rasterizer smoke test as fallback marked as draft.

What should I do when no real photography is available for a section?▼

Author visuals in code instead: typographic compositions, CSS gradient and grain fields, SVG diagrams, or product UI rendered in HTML and CSS. If a real photo is genuinely required, build an art-directed placeholder and flag the exact asset need to the user.