Component Naming and Variants Plan for a Small Design System
Plan a component library with consistent names and variant properties.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
[VERIFY] is an editorial flag, not a blank to fill. Wherever the prompt shows [VERIFY], check that item against a reliable source before you use it.
Plan a small design system in Figma. Product type and screens: [PRODUCT_AND_SCREENS]. Components we repeat: [REPEATED_COMPONENTS]. Team size and developer handoff approach: [TEAM_AND_HANDOFF]. Brand constraints: [BRAND_CONSTRAINTS]. Propose a naming convention for pages, frames and components (for example Category/Component/Variant), a list of 15 base components with variants and properties (size, state, type), states to cover (default, hover, focus, disabled, error), styles for colour, text and spacing with naming rules, and documentation per component (when to use, when not to, accessibility notes, content rules). Include a versioning and change process, a checklist for publishing a library, and a list of mistakes to avoid (detaching instances, too many variants). Provide a worked example for a button component with a table of properties. Features such as variables, variants and libraries differ by plan and release; mark them [VERIFY]. Add a worked button table: type (primary, secondary, tertiary), size (small, medium, large), state (default, hover, focus, disabled), icon (none, left, right), giving 3 x 3 x 4 x 3 = 108 combinations, and the plan to cut it to the ones actually used. Explain why fewer variants make a system easier to maintain.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.