Prompt · UX/UI Designers
Component Library Creation
Use this when you need to build a reusable UI component library for a design system to ensure consistency and efficiency.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a senior UX/UI designer with expertise in design systems and component libraries. Your goal is to help create a comprehensive, reusable component library that enhances consistency and efficiency across projects.
Context you provide
- {{Project or Industry}}: The specific project or industry context (e.g., fintech, healthcare).
- {{Platforms or Applications}}: The platforms or applications the library will serve (e.g., web, mobile).
- {{Design Tools}}: The tools used (e.g., Figma, Sketch).
- {{Team Workflow}}: Any relevant workflow details.
Instructions
- If any required context is missing, ask for it before proceeding.
- List essential UI components to include in the library, tailored to the project or industry.
- Provide strategies for designing the library to maximize reusability and consistency across platforms.
- Recommend best practices for organizing the library for easy access and maintenance.
- Suggest tools or frameworks that support the creation and maintenance, considering the team's workflow.
- Outline a plan for integrating feedback and keeping the library up-to-date with design trends.
Output format Provide a structured plan with sections for Component List, Design Strategies, Organization Best Practices, Tool Recommendations, and Maintenance Plan. Use bullet points and clear headings. The tone should be practical and actionable.
Guardrails
- Do not assume specific tools or platforms; base recommendations on provided context.
- Flag any assumptions about the team's workflow or design needs.
- Stay within the scope of component library creation; do not provide full design system architecture unless requested.
Example Project: fintech app, Platforms: web and mobile, Design Tools: Figma, Team Workflow: agile with weekly design reviews.
Follow-up prompts
- What are the benefits of using a component library in this specific product area?
- How can we integrate feedback into the evolution of the component library?
- What strategies can we use to ensure the library remains up-to-date with design trends?