# Visual Variations

In web design, creating visually appealing components that match a specific style or theme is essential for a consistent user experience. Generative AI can help developers create variations of components based on the desired style, such as modern, corporate, or creative, while adhering to other style rules specified using prompts. In this article, we will explore how to use generative AI in conjunction with Next.js and Chakra UI to generate visually distinct component variations.

## Using Prompts for Style Specification

To use generative AI effectively, you must provide clear and concise prompts. Recall the command-target-specifier (CTS) pattern, prompt context, prompt chaining, prompt operators, and prompt stores discussed earlier. These concepts can be leveraged to provide style specifications for your components.

For example, you might use the following prompt:

{% code title="prompt" overflow="wrap" %}

```
Generate a modern button component in Next.js and Chakra UI that has a bold font, rounded corners, and a primary color of #0070f3.
```

{% endcode %}

By incorporating the CTS pattern, you can provide more specific context and design requirements for the generative AI to create the desired component.

## Generating Component Variations

With the style prompts in place, generative AI can create visual variations of a component based on the specified style. Let's consider three different styles: modern, corporate, and creative.

1. Modern: This style often features bold typography, strong colors, and clean lines. For a modern-styled button component, you might use a prompt like:

{% code title="prompt" overflow="wrap" %}

```
Generate a modern button component in Next.js and Chakra UI with a primary color of #0070f3, bold font, and rounded corners.
```

{% endcode %}

2. Corporate: Corporate designs tend to be more conservative, with a focus on clarity and professionalism. For a corporate-styled button component, the prompt might be:

{% code title="prompt" overflow="wrap" %}

```
Generate a corporate button component in Next.js and Chakra UI with a primary color of #0a66c2, regular font weight, and slightly rounded corners.
```

{% endcode %}

3. Creative: Creative styles often involve unconventional layouts, vibrant colors, and unique typography. For a creative-styled button component, consider using a prompt like:

{% code title="prompt" overflow="wrap" %}

```
Generate a creative button component in Next.js and Chakra UI with a gradient primary color from #ff0080 to #7928ca, bold font, and irregular border shapes.
```

{% endcode %}

The generative AI will use the provided prompts to create the corresponding component variations, adhering to the specific style requirements mentioned.

### Discussion:

Generative AI can be a powerful tool for creating visually appealing components in different styles while still matching other specified style rules.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gdf.ai/gdf-full-stack-engineering/subject-knowledge-areas/visualization/visual-variations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.