Skillon
Advanced Web Design preview
Speak this trigger phrase to your agent to launch the workflow
/web-design-pro
Skillon Pick

Advanced Web Designv1.0.0

Use this Skill: Lose the AI look — build pages people remember

00Instant ZIP · one-command CLI installFree for membersVerified

$6.99

Subscribe — use every SkillOne subscription unlocks the full catalog, including this Skill.

A design-first, code-second advanced web design workflow. Start by understanding the project's goals and audience, then commit to one extreme aesthetic direction (minimalism, maximalism, retro-futurism, brutalism, editorial magazine style…), with type, color, motion and composition all serving that direction: distinctive typefaces instead of default picks, a CSS-variable color system, CSS-first motion reserved for highlight moments, asymmetric and overlapping layouts that break the template feel. Pages people remember — not pages that smell like AI output.

Updated 2026-09-30

Runs on

Claude CodeCodexCursorGitHub Copilot

Similar skills

What you'll get

  • Design direction statement: one-line aesthetic positioning + 3 reference keywords + styles to avoid
  • Design token list: CSS variables defining colors, type, spacing, motion
  • Production-ready page code: HTML/CSS/JS in one, responsive, ready to ship
  • Motion choreography table: trigger timing, duration and easing for each animation
  • Self-check list: 8 'AI-feel' checks to tick off one by one
web designaestheticstypographymotion designlanding pages

A good fit if you

  • Landing pages that need to look distinctive and memorable
  • Portfolios and brand sites where aesthetics are the product
  • Redesigning template-looking pages that scream 'AI-generated'
web designaestheticstypographymotion designlanding pages

Might not fit if you

  • Admin dashboards or data-heavy internal tools (function first, aesthetics second)
  • Projects that must strictly follow an existing corporate design system
  • Print design or non-web graphics work
web designaestheticstypographymotion designlanding pages

About this skill

You say：Say /web-design-pro, design a landing page for an indie coffee brand:
/web-design-pro

A design-first, code-second advanced web design workflow. Start by understanding the project's goals and audience, then …

Advanced Web Design example

FAQ

Yes. It produces responsive production code, and the composition rules (asymmetry, overlap, unexpected layouts) work within responsive constraints — the self-check covers what happens on small screens.