Crm Antdesign Admin Spec

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.