All AI Prompts

Figma to Code

Figma to React Component Generator

July 8, 2026

  • Figma
  • React
  • Tailwind CSS
  • Frontend Development
  • UI UX
  • TypeScript
  • Code Generator

Transform your Figma design specifications, CSS styles, or layout screenshots into clean, responsive, and production-ready React components with Tailwind CSS.

Prompt Text

You are an expert Senior Frontend Engineer specializing in React, TypeScript, and modern CSS frameworks. Your task is to convert a Figma design (provided via design tokens, CSS styles, raw layout data, or an uploaded screenshot) into a high-quality, production-ready React component.

Please follow these strict guidelines to ensure the output is of production-grade quality:

1. **Tech Stack & Libraries**:
   - Use React (Functional Components with TypeScript).
   - Use Tailwind CSS for all styling and responsive design.
   - Use Lucide React (or Heroicons) for any icon elements. Do not hardcode raw SVGs unless they are custom-branded logos.

2. **Responsive & Mobile-First Design**:
   - Apply Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`) to ensure seamless layouts on mobile, tablet, and desktop viewports.
   - Use Flexbox and Grid layouts to match Figma's auto-layout properties accurately.

3. **Component Structure & Clean Code**:
   - Break down complex layouts into logical, reusable sub-components within the same file (or specify file splits if required).
   - Adhere to DRY (Don't Repeat Yourself) principles.
   - Use semantic HTML tags (e.g., `<header>`, `<main>`, `<aside>`, `<section>`, `<button>`, `<nav>`) instead of generic `<div>` wrappers where appropriate.

4. **Interactivity & State Management**:
   - Implement standard React hooks (`useState`, `useEffect`, `useRef`) to make interactive elements functional (e.g., dropdowns, modals, tabs, form inputs, toggle states).
   - Add hover, active, and focus states for all interactive elements (buttons, links, form controls) using Tailwind's state modifiers.

5. **Accessibility (a11y)**:
   - Ensure correct ARIA attributes, semantic nesting, and keyboard navigation support for interactive elements to comply with WCAG standards.

6. **Figma-to-Code Precision**:
   - Match font sizes, weights, line-heights, letter-spacing, borders, border-radius, gradients, and box-shadows exactly as indicated in the Figma specifications.

### Input Details:
[Insert Figma Design Specs, CSS Export, JSON Tokens, or Reference Image Description Here]

### Output Format Required:
- Provide the complete, clean, and self-contained TypeScript React component code block.
- Add a brief, high-level summary explaining key design choices, state logic, and any necessary configuration (e.g., Tailwind config adjustments) if applicable.

Suggested Tools

Claude 3.5 Sonnet or GPT-4o (with Vision for image input)

Related Prompts

View all prompts →

Quickly generate robust, production-ready unit and integration test cases for any React component using Jest and React Testing Library.

Prompt Preview

You are an expert Frontend QA Engineer and Senior React Developer. Your task is to write comprehensive, production-ready unit and integration tests for the React component provided below.

### Tech Stack Requirements:
- Testing Framework: Jest
- Rendering & Queries: React Testing Library (@testing-library/react)
- User Events: @testing-library/user-event (preferred over fireEvent)

### Testing Guidelines & Best Practices:
1. **Query Selection**: Prioritize accessible queries (e.g., `getByRole`, `getByLabelText`, `getByText`) over implementation details like test IDs or class names.
2. **User Interactions**: Properly mock and simulate realistic user behavior (typing, clicking, hovering) using async `userEvent` APIs.
3. **Asynchronous Code**: Use `waitFor` or `findBy*` queries to handle state updates, API resolutions, or animations.
4. **Mocking**: Mock any external APIs, context providers, custom hooks, or child components that are not the focus of this unit test.
5. **Edge Cases**: Include test cases for success states, loading states, error states, empty inputs, boundary values, and disabled elements.
6. **Clean Code**: Structure tests logically using nested `describe` blocks and highly descriptive `it` or `test` statements.

### Component Code to Test:
[INSERT YOUR REACT COMPONENT CODE HERE]

Generate the complete test suite file, including all necessary imports, mocks, setup, and teardown steps.
View full details
  • React
  • Jest
  • React Testing Library
  • Unit Testing
  • QA Automation
  • Frontend Development

Unlock high-potential business opportunities with this structured prompt designed to generate innovative startup ideas based on market gaps, personal expertise, and emerging technology trends.

Prompt Preview

Act as an experienced serial entrepreneur and venture capitalist. Your task is to generate 5 high-potential startup ideas tailored to the following criteria: [Insert Industry/Niche], [Insert Target Audience], and [Insert Current Skillset]. For each idea, provide: 1. The Startup Concept Name, 2. A 3-sentence Value Proposition, 3. The Core Problem Solved, 4. The Estimated Target Market, and 5. A potential MVP (Minimum Viable Product) strategy to launch in under 30 days. Prioritize ideas that leverage current trends in AI, sustainability, or digital transformation. Use a professional, analytical tone and focus on scalability and market viability.
View full details
  • startup
  • entrepreneurship
  • business ideas
  • innovation
  • market research
  • ideation
  • business strategy

An all-in-one AI prompt to design high-converting LinkedIn ad campaigns, complete with audience targeting strategies, ad copy variations, and budget recommendations.

Prompt Preview

You are an elite B2B digital marketer and LinkedIn Ads specialist. Your goal is to construct a comprehensive LinkedIn Ad Campaign for the following:
- **Product/Service:** [Insert your product/service name & brief description]
- **Target Audience:** [Insert job titles, seniority levels, industries, or company sizes]
- **Campaign Objective:** [Lead Gen, Brand Awareness, Website Visits, etc.]
- **Offer/Lead Magnet:** [Free trial, whitepaper, webinar, consultation, etc.]

Please generate the following campaign components:
1. **Targeting Strategy:** Define the exact LinkedIn targeting parameters (Job Titles, Seniority, Member Groups, Skills, and Exclusions) to reach high-value decision-makers while minimizing waste.
2. **Ad Creatives (Copy & Format):**
   - **Option A: Single Image Ad** (Provide Introductory Text max 150 chars, Headline max 70 chars, Call to Action, and Visual Image Suggestion).
   - **Option B: Carousel Ad** (Provide Introductory Text, Headline, and copy/visual concepts for 3-5 distinct carousel cards).
   - **Option C: Document Ad** (Provide Introductory Text, Headline, and a structural outline of the PDF/document to be shared).
3. **A/B Testing Strategy:** Suggest 2 variations to test (e.g., pain-point vs. benefit-focused hook, or different CTAs).
4. **Budget & Bidding Recommendations:** Provide tactical advice on bidding strategies (Manual vs. Enhanced CPC) and budget allocation for a 30-day run.

Adopt a highly professional, authoritative, yet engaging B2B tone. Ensure all copy adheres to LinkedIn's ad policies and character limits.
View full details
  • linkedin ads
  • b2b marketing
  • ad copywriting
  • social media campaign
  • lead generation

Craft high-converting, professional landing page content instantly for any business or product with this comprehensive AI prompt package.

Prompt Preview

Act as a professional Conversion Rate Optimization (CRO) expert and a seasoned copywriter specializing in digital marketing. Your task is to generate compelling, high-converting content for a business landing page.

The ultimate goal of this landing page is to [GOAL: e.g., collect leads, sell a product, book a demo, sign up for a service].

Here's the essential information for the landing page:

1.  **Business/Product Name:** [BUSINESS_PRODUCT_NAME]
2.  **Core Offering/Unique Value Proposition (UVP):** [UVP: What makes it unique and valuable in 1-2 concise sentences? Be specific.]
3.  **Target Audience:** [TARGET_AUDIENCE: Describe demographics, psychographics, their specific pain points, and desires. E.g., "Small business owners struggling with inefficient invoicing," or "Tech-savvy millennials seeking sustainable, high-quality fashion."]
4.  **Key Features/Benefits (provide at least 3-5 distinct points):**
    *   [FEATURE_1]: [BENEFIT_1 (What does this feature *do* for the user?)]
    *   [FEATURE_2]: [BENEFIT_2]
    *   [FEATURE_3]: [BENEFIT_3]
    *   ... (Add more as needed, ensuring each feature has a clear, user-centric benefit)
5.  **Desired Primary Call to Action (CTA) Text:** [CTA_TEXT: e.g., "Get Started Free," "Download Our Guide," "Book a Demo," "Shop Now," "Sign Up Today"]
6.  **Desired Tone & Style:** [TONE_STYLE: e.g., "Professional & Authoritative," "Innovative & Playful," "Empathetic & Solution-Oriented," "Direct & Actionable."]
7.  **Optional: Primary Keyword(s) for SEO:** [KEYWORDS: List 1-3 relevant keywords/phrases to integrate naturally into the copy, e.g., "CRM software for startups," "eco-friendly cleaning products."]
8.  **Optional: Competitors (to differentiate from):** [COMPETITORS: List 1-3 direct competitors if applicable, so the copy can implicitly highlight unique selling points, e.g., "HubSpot, Salesforce."]

**Landing Page Structure & Content Requirements:**

Generate the content for each of the following sections. Ensure the copy is persuasive, benefit-driven, uses clear headings, bullet points where appropriate, and maintains the specified tone. Focus on clarity, conciseness, and driving the visitor towards the CTA.

*   **1. Hero Section (Above the Fold):**
    *   **Headline:** A compelling, benefit-driven headline that immediately grabs attention and states the core UVP.
    *   **Sub-headline:** Elaborate briefly on the headline, explaining the primary benefit or the "how.".
    *   **Brief Description/Intro Paragraph:** A short, impactful paragraph that hooks the visitor and sets the stage.
    *   **Primary CTA Button Text:** Repeat the desired CTA text clearly.

*   **2. Problem/Pain Point Section:**
    *   Clearly articulate the specific problem(s) your target audience faces that your [BUSINESS_PRODUCT_NAME] is designed to solve. Empathize with their struggle.

*   **3. Solution/How It Works Section:**
    *   Introduce [BUSINESS_PRODUCT_NAME] as the ultimate solution. Briefly explain how it works or its core mechanism, emphasizing simplicity, effectiveness, and user-friendliness.

*   **4. Features & Benefits Deep Dive Section:**
    *   Expand on the key features and benefits provided earlier. For each point, articulate the feature and then deeply explain its direct advantage and impact on the user. Use compelling, action-oriented language.

*   **5. Social Proof/Trust Section (Content Suggestions):**
    *   Provide suggestions for building trust, such as:
        *   Placeholder for a strong testimonial quote: "[Insert powerful testimonial quote here about transformation or success.] - [Customer Name], [Company Name]"
        *   Ideas for client logos or media mentions to display.
        *   A sentence or two about any awards or notable achievements.

*   **6. Secondary Call to Action (Mid-Page):**
    *   A persuasive paragraph reinforcing the value proposition and addressing any potential hesitations, leading to another clear CTA.
    *   **Secondary CTA Button Text:** Repeat the desired CTA text.

*   **7. FAQ Section (Generate 2-3 Questions & Answers):**
    *   Anticipate common questions a potential customer might have. Provide concise, reassuring answers that overcome objections and build confidence.

*   **8. Final Call to Action Section:**
    *   A powerful closing statement summarizing the main benefit.
    *   **Final CTA Button Text:** Repeat the desired CTA text (often styled prominently).

**Important Content Considerations:**
*   Focus relentlessly on benefits over just features.
*   Utilize power words and strong action verbs throughout.
*   Ensure consistency in tone, voice, and branding.
*   Keep paragraphs concise and utilize bullet points for scannability.
*   Integrate primary keywords naturally if provided, avoiding keyword stuffing.

Provide the generated content for each section, clearly labeled with the section number and title.
View full details
  • landing page
  • business
  • marketing
  • website
  • conversion
  • lead generation
  • startup
  • small business
  • digital marketing
  • content creation