"Design with AI" can sound abstract. What does it actually look like in practice? This post walks through a real workflow — designing a settings page from scratch using Subtree and Claude — so you can see where AI helps and where you still need to make decisions.
The setup
We're designing a settings page for a SaaS dashboard. The page needs sections for profile info, notification preferences, billing, and security. We have an existing design system in Figma with basic components (buttons, inputs, cards, toggles).
Subtree is connected to Figma via the plugin, and we're using Claude Code with Sonnet 4.6 as our AI provider.
Step 1: Start with Specs
Instead of jumping straight to the canvas, we start with the Specs tool. This is a habit worth building — it forces you to think about requirements before pixels.
In the Specs tab, we type:
A settings page for a SaaS dashboard. Sections:
profile (avatar, name, email), notifications
(email/push toggles per category), billing
(current plan, payment method, invoices), and
security (password change, 2FA setup, sessions).The AI generates a structured spec with:
- Visual requirements for each section (spacing, hierarchy, responsive behavior)
- Component inventory — which existing components to reuse, which to create
- Interaction patterns (form validation, toggle behavior, confirmation dialogs)
- Edge cases we missed (empty states, error states, loading states)
The Clarify stage asks us three questions: "Should notification categories be customizable per workspace or per user?", "Is 2FA mandatory or optional?", and "Should the billing section show usage metrics?" These are exactly the decisions we need to make before designing.
Step 2: Generate a plan
After answering the clarification questions, we move to the Plan stage. The AI produces a design plan with typography choices, color usage, spacing tokens, and a component breakdown. It references our existing design system variables where possible.
The plan isn't perfect — it suggests a card-based layout for all sections, but we want the profile section to feel more prominent. We tell the AI: "Make the profile section a full-width header with a large avatar, not a card." It adjusts.
Step 3: Generate tasks and implement
The Tasks stage breaks the plan into 12 dependency-ordered steps: create the page frame, build the profile header, add each settings section, wire up toggle groups, add empty states, etc.
We hit Implement and watch Claude execute each task on the canvas. It calls figma_write to create frames, set auto-layout properties, add text nodes, and apply styles. The whole implementation takes about two minutes.
Step 4: Refine with Chat
The generated design is a solid starting point but needs refinement. We switch to the Chat tab and start iterating:
- "The notification toggles look too cramped — add 8px more vertical spacing between rows"
- "Change the billing card border to use our brand-subtle color"
- "The session list should show the current session highlighted in green"
- "Add a danger zone at the bottom with account deletion"
Each instruction takes a few seconds. Claude reads the current state with figma_read, makes the change with figma_write, and we see it immediately on the canvas.
Step 5: Audit accessibility
Before calling it done, we switch to the A11y tab and run an audit on the settings page frame. The results:
- Color contrast: 94/100 — one label (#999 on white) fails AA. We bump it to #666.
- Touch targets: 100/100 — all toggles and buttons meet 44px minimum.
- Heading order: 78/100 — we accidentally skipped from h2 to h4 in the security section. Easy fix.
- Focus indicators: Not applicable in static designs, but noted for development.
Two quick fixes later, we're at a 96 accessibility score.
Step 6: Inspect for handoff
Finally, we use the Inspect tool to verify the implementation details are clean. The frame hierarchy makes sense, auto-layout properties are consistent, and spacing values align with our design tokens. A developer picking this up won't have to guess at intent.
What we learned
AI doesn't replace design decisions. You still need to decide what the profile section should feel like, whether billing should show usage metrics, and how the danger zone should look. But AI handles the tedious parts — creating frames, setting properties, calculating contrast ratios — so you can focus on the decisions that matter.
The whole process from blank canvas to audited, inspected settings page took about 15 minutes. Without AI assistance, the same work would take a few hours. The time savings compound when you're iterating — changing "make this a full-width header" takes seconds instead of minutes of manual restructuring.
Try it yourself: download Subtree, open a blank Figma page, and describe a screen you need to design.