AI Prompts

The key to building great applications with Weldship is writing effective prompts. Learn how to communicate clearly with the AI to get the results you want.

Prompt Basics

A good prompt clearly describes what you want to build. Include:

  • What - The type of application or component
  • Purpose - What problem it solves
  • Features - Key functionality to include
  • Style - Design preferences and aesthetics

Prompt Examples

Landing Page

A modern SaaS landing page for a project management tool. Include:
- Hero section with headline, subheading, and CTA button
- Features section with 4 feature cards
- Pricing section with 3 tiers
- Testimonials from 3 customers
- Footer with newsletter signup

Use a clean, professional design with blue and white colors.

Dashboard

An admin dashboard for an e-commerce store showing:
- Key metrics at the top (revenue, orders, customers, conversion rate)
- Revenue chart for the last 30 days
- Recent orders table with status badges
- Low stock alerts sidebar

Dark theme with accent colors for different states.

Form Component

A multi-step registration form with:
Step 1: Name and email
Step 2: Password and confirmation
Step 3: Profile preferences

Include validation, progress indicator, and success animation.

Be Specific About Layout

Mention specific layout preferences like "sidebar on the left" or "cards in a 3-column grid" for more accurate results.

Tips for Better Prompts

Describe the User Flow

Instead of just describing what things look like, describe how users will interact:

When the user clicks the search button, show a modal with a search input.
As they type, show autocomplete suggestions below.
Clicking a suggestion takes them to that page.

Reference Known Websites

Mentioning familiar websites helps communicate your vision:

A pricing page similar to Stripe's - clean, with a toggle for
monthly/annual billing and feature comparison table below.

Specify Technologies

If you have preferences for specific libraries or patterns:

Use React Query for data fetching, Zustand for state management,
and Framer Motion for animations.

Iterating on Results

After the initial generation, refine with follow-up prompts:

  • "Make the hero section taller"
  • "Add a gradient background to the CTA button"
  • "Change the font to Inter"
  • "Add hover animations to the cards"

Conversation Context

The AI remembers your conversation, so you can refer to previous elements: "Make that button bigger" or "Add more features like the first section."

Common Prompt Patterns

  • Add - "Add a testimonials section below the features"
  • Remove - "Remove the pricing section"
  • Change - "Change the background color to light gray"
  • Move - "Move the CTA button to the right side"
  • Resize - "Make the logo larger"
  • Style - "Add rounded corners to all cards"

Troubleshooting

Result Not Matching Expectations?

  • Add more specific details about what you want
  • Break complex requests into smaller steps
  • Reference a specific website or design style
  • Upload a screenshot or mockup for reference

Request Too Complex?

Build incrementally instead of all at once:

  1. Start with the basic structure
  2. Add sections one at a time
  3. Refine styling and interactions
  4. Add final polish and details

Next Steps

PreviousProject CreationNextFile Uploads