# STEP2 Prototype
### App Creation STEP2– Prototype
The App Maker V3 Manual will show you how to edit your app in step 2- prototype.
**\[STEP2 Prototype] is the step in which you can decide the overall design and style of the app's UI design and color.**
### STEP2 Prototype
**1. Select a prototype:** Select the prototype that determines the design of your app's UI.
**2. Default style and options:** Select the color of the UI design and app.
**3. Advanced styles and options**
This feature allows you to set additional color options and design styles that you can add to the prototype UI.
\*This is not a required setting.
4\. When you are satisfied with the changes made in step2, click on the **\[Save]** button to save your work.
### Check the prototype style
The normal app prototype style is available in 5 different designs.\*The webviews and push-only prototypes are excluded.
You can preview each prototype by selecting them, virtual machine on the right (preview screen) will show how the prototype UI style will look on the app.
### Basic styles and options – Color settings
**Select Color Preset: To Set the skin color of the UI design.**
Skin Color offers a color combination consisting of 3 sets of main background colors, text colors, and theme colors.
Once you have selected the desired combination, you can see the UI changing colors in real-time through the virtual machine.
### Basic styles and options – custom settings
What if none of the combined colors present in the preset are not as per your interest? In that case, please use the detailed settings.
If the desired color is not present, the user can select the color directly in \[Detailed Settings].
In addition to the fixed color combinations, the detailed color setting is an option that allows the user to select and apply their own colors.
**Detailed Settings** – Enter the color code in the HEX field or you can click on the color square box to select the color you want to use.
After selecting a color, click the mouse cursor on the empty space to reflect the colors in real-time on the virtual machine.
### Advanced styles and options
This feature allows you to set additional color options and design styles that you can add to the prototype UI.
**\*This is not a required but an optional setting.**
**Advanced Style & Option** – Here you can modify the background and text color of the prototype.
You can enter the color code in the HEX field or click on the color square box to select the color you want.
The main design style can also be changed from basic to transparent.
**Main Design Style – Transparent setting**
If you set the main design style to transparent, the bar area shown at the top will disappear. In other words, it will change to a transparent area.
When selecting the transparent option, you can utilize the top bar area 100%.
It is recommended to apply the template pages, image pages, etc with the home screen.
**Related Articles**
* [STEP1 ](https://wp.swing2app.co.kr/documentation/v3manual/step1-basic/)Basic Information
* Registering a push icon image
* Set menu permissions: How to use access rights
* How to use disable app menus
* How to register a menu icon image
* Push App Toolbar - How to Use and Function Introduction
---
# 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://documentation.swing2app.com/manual/v3/step2-prototype.md?ask=
```
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.