CRM Ant Design Admin Spec#

What this skill is for#

Use this skill when the user needs help with:

• designing a B2B CRM / admin page
• generating a page spec before UI or frontend work starts
• reviewing whether a page matches Ant Design-style admin semantics
• keeping dashboard, list, and config pages from drifting into inconsistent styles
• creating prompts for UIUXProMax or similar AI page-generation workflows

This skill is especially useful when:

• the page belongs to a CRM, SaaS admin, analytics, or operations system
• the output needs strong structure and good information density
• the page should feel realistic to implement with Ant Design
• the user wants a reusable design system instead of one-off pretty mockups

What this skill is NOT for#

Do not use this as the main skill for:

• marketing websites
• landing pages
• mobile-app-first interfaces
• expressive visual branding projects
• illustration-heavy storytelling pages
• highly experimental visual design where implementation realism is secondary

Default design direction#

Prefer:

• Ant Design-style admin UI
• strong hierarchy and structure
• realistic implementation paths
• compact but readable information organization
• reusable page skeletons
• light AI-enhanced visual language only when the page truly needs it

Avoid:

• marketing-site aesthetics
• heavy glassmorphism
• cyberpunk / glow-heavy visuals
• mobile-first interaction patterns for desktop admin tasks
• decorative gradients across the entire page

Core operating rule#

First classify the page type, then apply the matching structure and constraints.

Do not treat every page like a dashboard.

Page type decision#

Choose one of these before designing:

1. Statistics page
   • KPI cards
   • charts
   • time filters
   • org tree / left filter panel
   • management overview
2. AI analytics page
   • analytics dashboard
   • insights / risks / recommendations
   • KPI + charts + AI summary blocks
   • slightly enhanced visual tone allowed
3. List page
   • customer lists
   • operational tables
   • search / filters / pagination
   • CRUD-oriented workflow
4. Configuration / tool page
   • parameter setup
   • upload areas
   • forms + tables
   • left functional menu + right config content

If uncertain, default to the simplest page type that matches the task.

How to use this skill#

For design tasks#

• identify the page type first
• outline the page skeleton
• specify major regions: header, filters, actions, KPI, charts, table, side nav, config form, empty state
• keep the result implementation-friendly

For review tasks#

Check for:

• wrong page type choice
• inconsistent spacing / radius / color hierarchy
• non-Ant-Design-like controls
• excessive decoration
• weak information density
• weak admin usability
• dashboard thinking forced onto list/config pages

For AI generation tasks#

Use prompt patterns from references/prompt-templates.md.

For design-system alignment#

Use references/token-and-components.md.

For page skeleton and visual rules#

Use references/admin-guidelines.md.

For concrete examples#

Use references/examples.md.

Recommended output pattern#

When generating a page spec or design direction:

1. Identify the page type
2. Pick the matching skeleton
3. Apply token / color / radius / typography rules
4. Map to likely Ant Design components
5. Add AI-specific enhancement only if the page truly needs it
6. State what should not be done for this page type

Deliverable styles this skill can support#

This skill can guide outputs such as:

• page strategy notes
• page information architecture
• UI section breakdowns
• component recommendations
• prompt templates for AI design/build tools
• design review comments
• implementation-friendly HTML / React / admin page planning prompts

References#

• Read references/admin-guidelines.md for visual system, page taxonomy, and page skeletons.
• Read references/token-and-components.md for token mapping and Ant Design component mapping.
• Read references/prompt-templates.md when creating prompts for UIUXProMax or other AI page generators.
• Read references/examples.md for example page interpretations and output patterns.