Agent Skills
› NeverSight/learn-skills.dev
› anti-ai-design
anti-ai-design
GitHub前端设计系统规则，用于消除AI生成的通用美感。通过严格约束色彩、排版、间距及组件样式，禁止渐变、玻璃拟态等模式，强制使用设计令牌，确保生成生产级、去模板化的Web界面。
Trigger Scenarios
去AI设计感
anti-AI-slop design
design system constraints
production-grade frontend
Install
npx skills add NeverSight/learn-skills.dev --skill anti-ai-design -g -y
SKILL.md
Frontmatter
{
"name": "anti-ai-design",
"description": "Frontend design system rules to eliminate generic AI-generated aesthetics. Use when building or styling any web UI, components, pages, or applications—especially when the user mentions \"去AI设计感\", anti-AI-slop design, design system constraints, or asks for production-grade frontend that avoids cookie-cutter patterns."
}
Anti-AI Design System Rules
Apply these constraints to every frontend artifact (HTML/CSS/JS, Astro, React, Vue) to eliminate generic AI-generated aesthetics. These are hard constraints, not suggestions.
Color System
- Define CSS variables:
--color-primary,--color-secondary,--color-neutral-*,--color-success,--color-warning,--color-error - Backgrounds: white (
#ffffff) or light gray (#f8f9fa,#f3f4f6) only - No gradients on backgrounds or buttons
- No blue-purple gradients (
linear-gradientwith purple/violet/indigo) anywhere - No neon colors, no rainbow palettes
- No more than 3 brand colors in any single view
- Text colors:
#111827(primary),#6b7280(secondary),#9ca3af(tertiary)
Typography
- Font scale:
12px / 14px / 16px / 20px / 24px / 32px - CSS variables:
--text-xs,--text-sm,--text-base,--text-lg,--text-xl,--text-2xl - Body:
font-weight: 400,line-height: 1.5 - Headings:
font-weight: 600,line-height: 1.25 - Do not mix
px,rem,em— pick one unit system - No arbitrary font sizes outside the defined scale
Spacing
- 4px base grid:
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px - CSS variables:
--space-1through--space-16 - No magic numbers (13px, 7px, 23px, etc.)
- Consistent padding within component families
Components
Cards
- Use either border (
1px solid #e5e7eb) OR shadow, not both - Shadow level 1:
0 1px 3px rgba(0,0,0,0.08) - Shadow level 2:
0 4px 12px rgba(0,0,0,0.1) - Border radius:
6pxor8px, no16px+
Buttons
- Primary: solid fill, no gradient
- Secondary: outline or ghost
- Hover: darken by 10%, not color switch
- No
rounded-fullon rectangular buttons
Inputs
- Border:
1px solid #d1d5db - Border radius:
6px - Focus: border-color change + outline, no glow
Icons
- Use one icon set consistently: Lucide / Heroicons / Phosphor
- Size:
16pxinline,20pxstandalone - No emoji as functional icons
Forbidden Patterns
- No blue-purple gradients
- No glassmorphism unless explicitly requested
- No emoji icons
- No excessive shadows on every element
- No inline styles for color, spacing, or typography
- No magic numbers — every value must reference a design token
- No more than 2 shadow depth levels per page
Application Workflow
When generating or refactoring UI:
- Define design tokens (CSS variables) first, before any component code
- Reference tokens for every color, font size, and spacing value
- Verify the output against the Forbidden Patterns checklist before finishing
- If the user requests a dark theme, mirror the token structure with appropriate dark-mode values—do not introduce neon or saturated accents
Version History
- e0220ca Current 2026-07-05 23:16
