Design Basics: UI Elements in Kulp

A quick guide to what you’ll see (and can edit) inside every Kulp - generated app. Kulp generates real, working interfaces from your prompt - no design tools required. But that doesn’t mean you’re locked in. Here’s what you need to know about how Kulp handles design and how you can tweak it visually as you go.

Last updated 7 months ago

What Are “UI Elements”?

UI (User Interface) elements are the building blocks of your app’s visual structure. Kulp creates these automatically when you describe your idea.

You’ll see elements like:

  • Buttons – to trigger actions (e.g., Save, Submit)

  • Forms – to collect user data (e.g., contact forms, signup)

  • Input Fields – for text, dates, numbers, etc.

  • Tables & Lists – to display structured data

  • Cards – for clean content blocks (e.g., user profiles, product tiles)

  • Modals – popups for confirmations or quick edits

  • Navigation Bars – top or side menus for navigating your app

  • Headers, Text, Labels – all generated and editable

Where You’ll See These in Kulp

As soon as your first build completes, you’ll enter the Live Preview mode. This is a working prototype of your tool with all UI elements already wired up.

Here’s what you’ll notice:

  • You can interact with buttons, inputs, and links.

  • The layout will match what was described in your prompt.

  • Every screen is fully editable through follow-up prompts.

Can You Customize These Elements?

Yes - through prompts

You can customize:

  • Text and labels

    “Change ‘Submit’ to ‘Send Feedback’”

  • Colors and themes

    “Make the background dark blue and text white”

  • Layouts

    “Move the filters section to the left side”

  • Component visibility

    “Hide the sidebar on mobile view”

Kulp’s AI understands visual commands. Just describe what you want to change.

How Responsive Is the Design?

Every app built in Kulp uses responsive design, which means:

  • It works on desktop, tablet, and mobile automatically.

  • Layouts and elements adjust to fit screen size.

  • You can prompt for “Mobile-first” if that’s your priority.

Visual Design Best Practices (Optional but Helpful)

If you want to guide Kulp’s design more intentionally:

  • Mention layout styles: “2-column dashboard layout”

  • Name visual inspirations: “Like Notion’s interface”

  • Include brand colors: “Use teal (#008080) as the primary color”

  • Ask for modern practices: “Use clean UI, rounded corners, subtle shadows”

What If You Want to Redesign Later?

No problem. You can:

  • Prompt for UI changes any time

  • Replace a specific section (e.g., “Redesign just the hero banner”)

  • Regenerate a screen entirely

Your design evolves with your product and Kulp helps you iterate fast.