Design Keywords

Learn how to use design keywords and Tailwind modifiers in Meku prompts to control UI styles, layouts, and themes for consistent, production-ready apps.

Meku supports design keywords (UI styles, Tailwind modifiers) inside prompts. These keywords help to control how the UI looks and feels, ensuring the generated code matches the design system or brand guidelines.

You can combine Tailwind modifiers with design-related keywords to describe both precise styles and broader design intent.

Why Use Design Keywords?

This section explains why design keywords matter for developers.

  • Without design keywords: Output is functional but plain.
  • With design keywords: UI matches your desired style (modern, minimal, conversion-focused).
  • Benefit: Faster prototyping with consistent design language.

By specifying keywords, you guide Meku toward code that aligns with the brand standards.

Tailwind Modifiers

Tailwind utility classes give you precise control over styling at the component level.

Example: Card component

Create a card with rounded-xl, shadow-lg, and hover:scale-105 transition

Example: Button styling

Build a button with bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700

Common Tailwind keywords:

  • Spacing: p-, m-, px-, py-
  • Typography: text-lg, font-bold, tracking-wide
  • Borders: border, border-gray-200, rounded, rounded-xl
  • Shadows: shadow-sm, shadow-md, shadow-lg
  • Colors: bg-*, text-*, hover:bg-*
  • States: hover:*, focus:*, active:*
  • Animation: transition, duration-300, ease-in-out

Tailwind modifiers provide granular styling while remaining consistent with utility-first CSS principles.

Layout Keywords

Layout keywords define the structure and responsiveness of your project.

  • Grid: multi-column layouts, galleries, dashboards.
  • Flex: horizontal or vertical alignment.
  • Fixed/Sticky: Lock navbars or sidebars.
  • Responsive: auto-adjusts for mobile and desktop.

Example:

Create a product grid with four columns on desktop and one column on mobile

Using layout keywords ensures UI adapts predictably across screen sizes.

Design Style Keywords

These keywords shape the overall look and feel of the application.

Modern and Minimal Styles

  • Modern design: clean layout, flat UI, bold typography.
  • Minimal design: whitespace, subtle colors, uncluttered elements.
  • Smooth design: soft transitions, rounded shapes, consistent spacing.

Example:

Build a minimal portfolio page with whitespace, grid layout, and clean typography

Advanced Visual Styles

  • Glassmorphism: frosted glass effect with transparency and blur.
  • Neumorphism: soft shadows to create raised/pressed UI.
  • Morph design: fluid transitions and shape animations.
  • Gradient-based: vibrant backgrounds and layered color fills.

Example:

Create a hero section with glassmorphism effect and gradient background

Conversion-Focused Styles

  • Conversion-focused design: emphasizes CTAs, contrasting buttons, and focus-driven layouts.
  • Landing page design: hero + features + testimonials + CTA.
  • Marketing page design: bold CTAs, optimized typography, section highlights.

Example:

Build a conversion-focused landing page with a large CTA button, pricing section, and testimonials

Theme-Oriented Styles

  • Dark mode: dark background with light text.
  • Light theme: standard white background.
  • Corporate design: professional typography, neutral tones.
  • Playful design: rounded elements, bright colors.

Example:

Add a responsive navbar with dark mode toggle

These design keywords ensure generated UI reflects not only functionality but also brand voice.

Combining Keywords

Combine Tailwind modifiers with design style keywords for precise control and broader aesthetic intent.

Example: Dashboard

Create a modern dashboard with fixed sidebar, dark mode, and responsive grid layout for analytics cards

Example: Hero section

Build a hero section with gradient background from-indigo-500 to-purple-600, minimal design, and centered text

Combining keywords produces flexible and scalable designs.

Best Practices

Best practices ensure design keywords are applied effectively.

  • Add Tailwind classes for exact styling.
  • Use design keywords for a broader look-and-feel.
  • Combine multiple keywords (e.g., modern + conversion-focused).
  • Keep prompts concise but descriptive.
  • Test small variations to refine the design.

Adopting these practices makes prompts reliable and prevents ambiguous results.

Design Keywords - Documentation | Meku.dev