The Autonomous Art Director & Senior Frontend Dev Skill for AI Assistants
Eradicate the "AI Look" from your generated code. Works with Cursor, Windsurf, Cline, and Claude.
Most AI coding assistants generate boring, generic, and sterile UIs. They default to standard Tailwind components, gray placeholders, and predictable layouts. This is the "AI Look".
The Design Skill transforms your AI into an elite Autonomous Art Director. It forces the AI to respect core UI/UX laws, psychological design principles, and complex creative technologies (like GSAP or CSS Grid) to build spectacular, production-ready frontend code.
- 🚫 Eradicates the "AI Look": Enforces over 100+ strict "Anti-AI Design Laws" (including "The Max-Width Trap") to prevent generic, constrained, and predictable outputs.
- 🎯 Highly Contextual: Adapts perfectly to your specific Industry (SaaS, Web3, Healthcare, etc.), Mood (Brutalism, Retro, Minimalist), and Target Audience.
- 🤝 Skill Harmony (Non-Destructive): Automatically detects if you already have custom
.cursorrulesor community skills (like UiUX Pro Max or Front-end design). It never deletes them; it fuses with them seamlessly. - 🖼️ Interactive Midjourney Workflow: Your AI will no longer use ugly gray placeholders. It will pause coding, give you a highly optimized Midjourney/DALL-E 3 prompt, and wait for you to provide the final asset before continuing.
- 🎲 Friction Engine: Want an Awwwards-winning design? Activate the Friction Engine to force deliberate visual contrast (e.g., Banking + Cyberpunk Brutalism).
We built a showcase website entirely generated by the Autonomous Art Director Skill, proving it can handle vastly different aesthetics flawlessly:
- SaaS Protocol (Neo-Brutalism): Bright, bouncy GSAP animations, heavy borders, and overlapping grids.
- Brutalist Bank (Swiss Grid): Hyper-modern, mathematical asymmetric layouts with glassmorphism telemetry.
- Fashion Archive (Cinematic): Massive serif typography, high-contrast negative space, and full-bleed immersive video.
Run this single command at the root of your web project:
npx @netxeo/design-skill@latestThe interactive CLI will ask you a few questions about your project:
- Your Industry
- Your desired Mood / Aesthetic
- Your Target Subculture
- Your Ambition Level (MVP vs. Awwwards)
- Your Tech Stack (React, Vue, GSAP, Tailwind...)
That's it! The script will automatically:
- Create a
.skills/design/directory with your tailored Art Director constraints. - Inject the skill into your existing
CLAUDE.md,.cursorrules,.windsurfrules,.clinerules, orAGENTS.md.
Your AI is injected with 4 mandatory design pillars that it must apply to every line of code:
- 00-anti-ai-design.md: 100+ strict rules to avoid generic AI traps (no centered text walls, no predictable 3-column layouts, strict enforcement of fluid
90%layouts overmax-w-7xl). - 01-ui-laws-and-systems.md: Enforces Fitts's Law, Hick's Law, perfect typography scales, and structural hierarchy.
- 02-ux-human-psychology.md: Hooks into cognitive biases (Zeigarnik effect, Social Proof, Scarcity) to build high-converting interfaces.
- 03-creative-technologies.md: Pushes the AI to use advanced CSS capabilities, scroll-triggered animations (GSAP), and WebGL where appropriate.
Do you already use popular community skills like Impeccable, Front-end design, or UiUX Pro Max?
Perfect. The Design Skill has a built-in Harmony Scanner. If it detects existing rules in your project, it activates Harmony Mode. It will instruct your AI to fuse its Art Director constraints with your existing rules to create the ultimate synergistic workflow without breaking your current setup.
Once installed, simply ask your AI (in Cursor, Windsurf, or Claude) to build a component or page:
"Build a landing page for my new crypto wallet app."
The AI will automatically read .skills/design/skill.md, adopt the aesthetic you chose during installation, and write spectacular code. If it needs an image, it will pause and ask you to generate it on Midjourney first!
Built with ❤️ by Netxeo for the AI Developer Community.