crm-antdesign-admin-spec（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

1. AI analytics page

- analytics dashboard - insights / risks / recommendations - KPI + charts + AI summary blocks - slightly enhanced visual tone allowed

1. List page

- customer lists - operational tables - search / filters / pagination - CRUD-oriented workflow

1. 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.