Design Mode

Design Mode is a visual CSS editor that lets you modify styles in real-time. See changes instantly in the browser, then submit them for AI to implement in your actual code.

Overview

Design Mode lets you:

  • Edit CSS properties with visual controls
  • See changes preview instantly
  • Apply changes to single elements or all matching components
  • Submit changes as AI-ready annotations

Activating Design Mode

  1. Open the Pointa sidebar
  2. Click the Annotate button
  3. Click on the element you want to edit — the Design Editor panel appears

The Design Editor panel will appear, allowing you to modify the element's styles.

The Design Editor

The Design Editor is organized into four tabs:

Text Tab

Modify typography settings:

  • Font Family: Choose from available fonts
  • Font Size: Adjust text size
  • Font Weight: Light, normal, medium, semibold, bold
  • Line Height: Space between lines
  • Letter Spacing: Space between characters
  • Text Decoration: Underline, strikethrough, etc.
  • Text Align: Left, center, right, justify
  • Text Color: Pick or enter a color

Style Tab

Control colors and visual effects:

  • Background Color: Fill color of the element
  • Opacity: Transparency level (0-100%)
  • Box Shadow: Drop shadow effects

Border Tab

Configure border properties:

  • Border Width: Thickness of borders
  • Border Style: Solid, dashed, dotted, etc.
  • Border Color: Color of borders
  • Border Radius: Rounded corners

Layout Tab

Adjust spacing and dimensions:

  • Width / Height: Element dimensions
  • Margin: Space outside the element (individual sides)
  • Padding: Space inside the element (individual sides)
  • Gap: Space between flex/grid children

Scope Options

When editing styles, you can choose the scope of your changes:

This Instance Only

Changes apply only to the specific element you selected. Use this for one-off adjustments.

All [Component] on Page

Changes apply to all similar elements on the current page. Pointa detects matching elements based on:

  • Same tag type
  • Similar class names
  • Same parent container

Component (App-wide)

When Pointa detects a component (React, Vue, etc.), you can apply changes to all instances across your entire application.

Design Mode vs Comments

The Design Editor has two tabs:

Design Tab

Use for precise CSS changes:

  • You know the exact values you want
  • Making visual adjustments interactively
  • Fine-tuning spacing, colors, typography

Comment Tab

Use for descriptive feedback:

  • You want to describe the change in words
  • AI should decide the implementation details
  • Complex changes that span multiple properties

You can use both - add design changes AND a comment for context.

Saving Design Changes

When you're happy with your edits:

  1. Review your changes in the editor
  2. Optionally add a comment for context
  3. Click Submit

The changes are saved as an annotation. AI receives:

  • The specific CSS changes you made
  • The scope (instance, page, app-wide)
  • Any comment you added
  • Framework detection (Tailwind, CSS-in-JS, etc.)

Framework Detection

Pointa detects your project's CSS approach and provides context to AI:

Tailwind CSS

When Tailwind is detected, AI knows to use utility classes:

  • "Add padding" → className="p-4"
  • "Make text red" → className="text-red-500"

CSS-in-JS

When styled-components, Emotion, or similar is detected, AI knows to modify style objects.

Plain CSS

When using CSS files, AI modifies the relevant stylesheet.

Live Preview

As you adjust values in the Design Editor:

  • Changes appear instantly in the browser
  • No page reload needed
  • Preview is temporary until you submit

If you close the editor without submitting, changes are discarded.

Tips for Design Mode

Start with Broad Strokes

Make big changes first (layout, spacing), then fine-tune (colors, typography).

Use the Visual Preview

Don't guess at values - adjust until it looks right, then submit.

Combine with Comments

If you're making complex changes, add a comment explaining the overall goal. This helps AI understand your intent.

Check Multiple Screen Sizes

After AI implements, verify changes look good at different viewport sizes.

Related Features