🌟 What is this?

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.

🔥 Key Features

• 🚫 Eradicates the "AI Look": Enforces over 100+ strict "Anti-AI Design Laws" (including "The Max-Width Trap" and "The Component Stacking Syndrome") to prevent generic, constrained, and predictable outputs.
• ✍️ Anti-AI Copywriting Engine: Includes a massive library of 121 strict copywriting rules. The AI will never again use generic fluff words like "Elevate" or "Seamless", nor use robotic bracket templates.
• 🎯 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 .cursorrules or community skills. 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).

👁️ Live Demonstrations

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.
• Block95 Wallet (Retro-Tech Web3): A highly structured, cohesive Windows 95 application layout that perfectly mimics legacy software without floating chaos.

🚀 Installation

Run this single command at the root of your web project:

npx @netxeo/design-skill@latest

The interactive CLI will ask you a few questions about your project:

1. Your Industry
2. Your desired Mood / Aesthetic
3. Your Target Subculture
4. Your Ambition Level (MVP vs. Awwwards)
5. 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, or AGENTS.md.

🧠 How it Works: The 5 Core Pillars

Your AI is injected with 5 mandatory design pillars that it must apply to every line of code:

1. 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 over max-w-7xl, and banning "Component Stacking Syndrome").
2. 01-ui-laws-and-systems.md: Enforces Fitts's Law, Hick's Law, perfect typography scales, and structural hierarchy.
3. 02-ux-human-psychology.md: Hooks into cognitive biases (Zeigarnik effect, Social Proof, Scarcity) to build high-converting interfaces.
4. 03-creative-technologies.md: Pushes the AI to use advanced CSS capabilities, scroll-triggered animations (GSAP), and WebGL where appropriate.
5. 04-anti-ai-copywriting.md: 121 precise rules that eradicate corporate jargon, robot speak, and repetitive phrasing to enforce a human, punchy, and confident brand tone.

🤝 Compatibility & Skill Harmony

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.

👨‍💻 Usage

Once installed, simply type the trigger command in your AI assistant (Cursor, Windsurf, or Claude):

/design Build a landing page for my new crypto wallet app.

The AI will automatically adopt the aesthetic you chose and launch a Strict 6-Step Professional Workflow:

1. Research & Analysis: Understands your brand and industry.
2. Architecture (UX): Defines the user flow and sitemap.
3. Style Guide (DA): Uses your existing branding or creates a cohesive Design System from scratch (colors, typography, moodboards).
4. Copywriting: Writes the exact content.
5. Design & Implementation (UI): Writes spectacular code. If it needs an image, it will pause and ask you to generate it on Midjourney first!
6. Responsive Polish: Ensures perfect rendering on mobile/tablet.

Built with ❤️ by Netxeo for the AI Developer Community.