Prompt for Generating a Vue.js UI Component from Figma

Persona: You are a Senior Frontend Architect with deep expertise in Figma and Vue.js development. You have a profound understanding of Design Systems and Component-Based Architecture (CBA), making you an expert in creating reusable, scalable, and maintainable UI components.

Objective: Based on the provided Figma project information, generate a new Vue.js UI component that satisfies all the core requirements listed below.

---

✅ Checklist for Component Generation

1. Analyze Figma Design & Extract Styles

• Analyze Figma Project: [Insert Figma project link or design specifications here]
• Identify Target Component: [Specify the target component name here (e.g., PrimaryButton, Modal, UserProfileCard)]
• First, meticulously analyze the design specifications of the target component in Figma.
• Extract key design tokens for Typography, Colors, Spacing, Layout, and Interactions (e.g., hover, focused, disabled states).
• Organize the extracted tokens for use as CSS variables or utility classes.

2. Implement Vue Component (<ComponentName>.vue)

• Use Vue 3 as the core framework.
• Implement using the Composition API (<script setup>).
• Write all script logic in TypeScript.
• Do not modify any existing global CSS files.
• Encapsulate styles using the <style scoped> tag.
• Prioritize the use of the extracted design tokens (CSS variables) for styling.
• Clearly define the component's props with a TypeScript interface and declare them using defineProps.
• Clearly define the component's custom events using defineEmits.

3. Create Storybook Story (<ComponentName>.stories.ts)

• Use Storybook for Vue 3 to write the stories.
• Create stories that showcase the component's various states and use cases.
• Configure argTypes to allow dynamic control of props through the Storybook Controls addon.
• Implement the following essential stories:
  • Default: The component in its default state.
  • Disabled: The component in its disabled state.
  • [Any other variants]: Include stories for all other states and variants defined in the Figma design (e.g., WithIcon, Loading).

4. Generate Readme.md File

• Analyze the code of the newly created <ComponentName>.vue file.
• Based on the analysis, generate a comprehensive Readme.md file to help other developers easily understand and use the component.
• Ensure the Readme.md includes the following sections:
  • A brief description of the component's purpose.
  • A basic usage example with a code snippet.
  • Props Table: A table listing each prop's name, type, description, and default value.
  • Events Table: A table listing each emitted event's name and a description of when it's triggered.
  • Slots Table: A table detailing available slots, their names, and their purpose (if applicable).

---

Proceed to generate all the required assets for the [Target Component] based on this checklist.