Design Iteration Workflow

This guide covers the visual design loop: make changes in the browser, have AI implement them in code, review, and iterate.

Overview

The design iteration workflow:

Edit Visually → Submit → AI Implements → Review → Repeat

This is perfect for:

  • Fine-tuning spacing and layout
  • Adjusting colors and typography
  • Polishing UI details
  • Rapid visual iteration

Phase 1: Visual Editing

Activate Design Mode

  1. Open the Pointa sidebar
  2. Click the Annotate button
  3. Click the element you want to edit

The Design Editor panel appears with tabs for different property types.

Make Your Changes

Use the visual controls to adjust:

Spacing:

  • Drag sliders or enter values
  • Preview changes instantly
  • Adjust margin, padding, gap

Colors:

  • Use the color picker
  • Enter hex codes
  • Adjust opacity

Typography:

  • Change font size
  • Adjust font weight
  • Modify line height

Layout:

  • Adjust border radius
  • Add or modify borders
  • Apply box shadows

Live Preview

Changes appear instantly in the browser. Keep adjusting until it looks right.

Phase 2: Submit Changes

Choose Scope

Before submitting, select the scope:

  • This instance - Only this specific element
  • All on page - All similar elements on current page
  • Component - All instances across the app (when detected)

Add Context (Optional)

You can add a comment explaining the change:

  • "Making buttons more prominent"
  • "Matching design system spacing"
  • "Improving readability"

This helps AI understand your intent.

Submit

Click Submit to save. The design changes become an annotation that AI can read.

Phase 3: AI Implementation

Ask AI to Implement

Switch to your AI tool:

  • "Implement the design changes from Pointa"
  • "Apply the CSS changes I made in Pointa"
  • "Update the styles based on my Pointa edits"

What AI Does

  1. Reads the design annotation
  2. Sees exact CSS values you set
  3. Understands the scope (instance/component)
  4. Detects your framework (Tailwind, CSS-in-JS, etc.)
  5. Makes appropriate code changes

Framework-Aware Changes

AI adapts to your project:

Tailwind CSS:

// Before
<button className="p-2">

// After (based on your padding change)
<button className="p-4">

Plain CSS:

/* Before */
.button { padding: 8px; }

/* After */
.button { padding: 16px; }

Phase 4: Review and Iterate

Check the Implementation

  1. Refresh your page
  2. Compare with what you designed
  3. Check different screen sizes

Continue Iterating

If more adjustments needed:

  1. Open Design Mode again
  2. Make additional tweaks
  3. Submit
  4. Ask AI to implement
  5. Repeat

Each iteration builds on the previous work.

Mark as Done

When satisfied:

  1. Review the annotation in sidebar
  2. Click checkmark to complete
  3. Changes are finalized

Design Mode Tips

Start Broad, Then Refine

  1. First pass: Layout and spacing
  2. Second pass: Colors and typography
  3. Third pass: Fine details

Check Multiple Elements

After changing one element, check how it affects:

  • Similar elements on the page
  • The overall visual hierarchy
  • Responsive behavior

Use Component Scope Carefully

Applying to "all components" is powerful but affects your entire app. Make sure you want the change everywhere.

Combine with Annotations

For complex changes:

  1. Use Design Mode for CSS values
  2. Add an annotation explaining the overall goal
  3. AI gets both specific values and context

Common Design Patterns

Spacing Consistency

Workflow:

  1. Set padding on one card
  2. Choose "All cards" scope
  3. AI updates all cards consistently

Color Palette Changes

Workflow:

  1. Change primary button color
  2. Use component scope
  3. Add comment: "Updating to new brand color"

Typography Polish

Workflow:

  1. Adjust heading size and weight
  2. Check readability
  3. Apply to all headings of same level

Hover States

Workflow:

  1. Design the hover state visually
  2. Add annotation: "Apply this as the hover state"
  3. AI creates the hover CSS

Multiple Elements

Sequential Editing

For related changes across elements:

  1. Edit element A, submit
  2. Edit element B, submit
  3. Edit element C, submit
  4. Ask AI to implement all

AI implements all changes in one go.

Bulk Actions

After editing multiple elements:

  • "Implement all my design changes"
  • AI processes them together
  • Code changes are coordinated

Responsive Considerations

After AI Implements

Check your changes at:

  • Desktop (default)
  • Tablet widths
  • Mobile widths

If Responsive Issues Appear

Create a new annotation:

  • "On mobile, this padding should be 12px instead of 24px"
  • AI adds responsive styles

Related