Course Content
Apps – Basic
0/4
Styles – AI App Builder
00:00
Building your first web app – AI App Builder
00:00
Writing a good prompt – AI App Builder
00:00
Course Exercise: Build a Custom Contact Us Page – AI App Builder
00:00
Apps – Basic

Lesson: Creating and Managing Your App Styles

Before building web applications in Noca AI, you should establish your visual identity. Styles act as reusable branding guidelines across all your projects, ensuring that your colors, typography, and layouts remain consistent.

Follow this step-by-step guide to generate and customize your brand’s style.

Step 1: Navigate to the Styles Menu

  1. Log in to your Noca AI Dashboard.

  2. On the left-hand sidebar, navigate to Styles and click New.

  3. Alternatively, click on My Styles and select the plus (+) button in the top right corner of the screen.

Step 2: Describe Your Brand Style

You can define your style using text prompts, website URLs, or image uploads.

  1. Locate the “Describe your style” prompt box.

  2. Click the upload icon to upload your company logo or brand assets.

  3. In the text box, describe how you want your brand to look. For example:

    "Create a branding style based on the colors in my logo."

  4. Click the send button to submit your request to the AI.

Step 3: Answer Style Clarification Questions

The AI will ask you a few quick questions to pinpoint your design preferences. Select the options that best match your brand:

  • Style Mood: Choose a tone (e.g., Modern and minimal, Friendly and approachable).

  • Typography: Select a font character (e.g., Geometric and modern).

  • Spacing & Layout: Define the overall structural feel (e.g., Balanced and crisp, Compact and tight).

The AI will then generate your design system in real time.

Step 4: Preview and Customize Your Style

Once generated, you will see a live interactive preview on the right side of your screen showing how buttons, cards, headers, and data tables will look.

To make manual adjustments, use the tabs in the center panel:

  • Colors: Customize your primary, secondary, surface, and background colors.

  • Typography: Adjust the font families, font weights, and line heights for body text and headers globally.

  • Components: Individually style elements like buttons, input fields, badges, alerts, and tooltips.

  • Brand: Manage your uploaded logo and add a custom favicon.

Step 5: Add General Context for the AI

To save time on future builds, navigate to the Brand tab and scroll down to General Context.

Provide a brief, clear description of what your company does and who your target audience is. Noca AI automatically injects this context into every web app you build, ensuring the AI-generated copy and structures align with your business goals from day one.

Previous
Next