Changelog

Website imports, guided setup, and clearer AI changes

This roundup covers the app improvements merged to main since our September update.

Import styles from your website#

Website scanning is now available directly in the style import form, including during onboarding and on every plan. Enter a URL, review the detected styles alongside a screenshot, and choose which categories to import.

The report shows declared tokens and marks values measured from the page for review. When the site switches between default and dark themes, you can inspect both screenshots and their detected values. Colors retain transparency, and missing values stay empty instead of being filled by convention.

Scanning currently targets the supported shadcn token vocabulary. Other custom variables are reported as unmapped.

Import styles.

Set up a brand in three steps#

New brands open with a compact setup card: explore interactive rule examples, import your styles, and connect an AI tool. Each step can be skipped, and imports and connection guides open within the card.

Starter rules have a searchable pack browser and a preview of what they will add. Setup recognizes rules and styles already saved to the brand, including work completed on another device. An organization's first brand also gets a Default project to help you connect.

The shadcn starter guidance has been rewritten into a smaller, more focused collection for new brands. Existing brands keep their saved rules.

Bring more CSS through the import#

CSS imports now follow variable chains within the pasted stylesheet, including Tailwind aliases and theme-specific values. Dark-theme variables resolve in their own context, and supported calculations use the values from the paste.

Declarations inside @layer blocks are recognized. A value that a token cannot hold is skipped with an explanation instead of failing the whole import. Reports also explain when an expression was resolved into a single value or a reference could not be followed.

Styles now identify whether imported values came from pasted CSS, a website scan, or Figma.

Keep AI changes tied to their preview#

Connected AI tools now receive a preview before replacing existing tokens or rules. Applying the change requires a confirmation code tied to that preview. If the proposed changes or the values they would replace have changed, the tool must get a new preview.

Website imports into projects also list the individual changes they would make. This keeps the applied change aligned with the preview; approval prompts still depend on the connected AI tool.

Save the choices you make in the Agent#

Choosing a different primary color after a website scan now carries that choice into the saved draft. The scan no longer overwrites it during approval.

Draft comparisons use current values. Project imports save together through the same importer used elsewhere, and retries no longer repeat an approved write. Results also report failed changes more accurately instead of showing them as applied.

Meet the Agent.

Give connected tools more room for rules#

Rule responses repeat less metadata and use shorter labels. In measured Button and Accessibility requests, removing repeated metadata reduced token usage by about 25%.

Large responses now stay within their size limits, including for non-Latin text. When a compliance request is too broad to repeat the required rules, the report asks the tool to narrow its scope and clearly states that those rules were not repeated for a final check.

Connect with fewer detours#

The Figma plugin opens its browser approval page automatically, with the pairing code visible on both sides.

Connection guides open on Everywhere by default and include a Custom MCP option. Figma Make and v0 guides use browser sign-in, and each guide finishes with a connection check.

Connect an AI tool.

See what happens after a plan change#

When a trial ends, a subscription lapses, or a plan is downgraded, brands and projects beyond the plan's limits are retained and remain readable in the app. Notices explain which ones are restricted; editing and connected-tool access are blocked until they are covered again.

Owners can also see which members no longer have a seat. Upgrading restores access within the new plan's limits.

Easier connections, clearer imports, and token delivery checks

This roundup covers the app improvements merged since our August update, through September 23.

Connect tools with less setup#

Supported tools can now connect through browser sign-in without asking you to copy an API key. The Connect dialog includes installation links for Cursor and VS Code, a prefilled Claude connector form, and updated instructions for Claude Code, Codex, Figma Make, v0, and Lovable. Creating a project opens Connect so you can choose a tool straight away.

The approval screen names the app requesting access and lets you choose the project. It uses your own project key, creating one with the project's default permissions when needed. Manual API-key connections remain available, with clearer permission details and key naming.

CLI setup now produces configurations without embedded keys by default. Connection guides finish with a check in your AI tool, and more connection errors explain what to do next.

Connect an AI tool.

Bring Figma variables into a brand#

The Figma plugin supports browser approval using a short device code. Choose your brand, select variable collections, and preview changes before applying them. Improvements to the first-run collection picker, variable mappings, and connection status make it easier to see what is connected. You can also copy variable data as JSON.

Use the Figma plugin.

See what an import will change#

Token import reports distinguish matched tokens from changed values, with clearer reporting of unchanged and unsupported values. Reports use consistent fields across the app, plugin, Agent, and connected tools.

Project imports leave matching brand values inherited instead of creating unnecessary overrides. Brand imports explain when changes affect projects that inherit those values.

You can also paste a shadcn components.json file to record its configuration, including style, base color, icon library, and RTL settings. Theme values, fonts, and radius stay as they are because that file does not contain them.

Import styles.

Get compiled tokens for your stack#

Connected tools can request ready-to-use token exports for CSS, Tailwind v4, and Tailwind v3. Tailwind v4 delivery includes the theme mapping; Tailwind v3 provides the stylesheet and configuration together. Exports respect a project's pinned version.

Stylesheet verification compares a supplied stylesheet with the canonical export. After a clean Tailwind v4 check, the compliance report also directs the AI tool to run the project's token-usage linter, or ask before setting one up. The stylesheet check itself does not inspect how every component uses tokens.

Standalone ruleset exports and CLI token exports give you more ways to take your design system into a project.

Organize guidance and see who changed it#

Rules and named rule groups have a more consistent editor across library and style pages. Rule details show their creator, last editor, and last change, with clearer context for project overrides. A project can hide a group and its child rules together.

Starter packs have previews so you can read their guidance before applying it. Connected tools have better access to Content guidance for copywriting, and output limits preserve required rules. Saved AI instructions warn when they are out of date.

Organize rules.

Give icons and logos their own guidance#

The dedicated Iconography page brings icon-library selection, installation and import snippets, and usage rules together. Brand assets support logo usage rules, and wide wordmarks retain their proportions where they are displayed.

Manage iconography and brand assets.

Understand what each project receives#

Project overviews make inherited guidance and project overrides easier to review. Delivery status and version-history indicators show which saved version is being delivered. Brand and project overview improvements bring setup health, project details, and connected work into view.

Project notes are stored by source so one codebase's notes do not overwrite another's. Activity now identifies changes made by the Agent separately from changes made by people.

Review project overrides and version history.

More control over your workspace and account#

Appearance settings include UI Rules, brand, and custom themes, plus light, dark, and system modes and sidebar preferences. Organization trash provides a place to manage deleted brands. Error screens offer clearer routes to feedback and support.

Trial reminder emails arrive three days before a trial ends. Other account improvements include plan-limit and connection reminders, more reliable sign-out and membership handling, marketing preference synchronization, and analytics cookie controls.

A brand you can steer

August was mostly about the space you work in: finding things, seeing where you are up to, and making a brand look like yours from the first screen.

A setup checklist on the brand overview#

A new brand now opens on a checklist rather than an empty dashboard, so the next useful thing to do is always on screen. The overview is quieter for it, with the panels that were competing for attention pulled back.

Browse the whole brand from the command menu#

The command menu searches your components, blocks, and tokens, and your rule groups and individual rules. Results carry enough context to tell two similarly named rules apart. Connecting an AI tool is now an action in there too, rather than something you go looking for.

Your logo, wherever the brand is named#

An organization can upload its own logo, and a brand shows its logo everywhere it is named. The organization switcher also shows which plan you are on.

Import a shadcn preset#

Bring a shadcn style preset into a brand, and the brand records the shadcn configuration its previews render under, so component examples preview under your own tokens rather than the default theme.

Brand settings#

Brands have their own settings screen, where a brand's own lifecycle lives, including taking a brand and its live projects to the trash.

Rule search that finds the right rules

search_rules used to return nothing for the kind of multi-word request an agent naturally forms from a task, and single words returned hundreds of unranked rules. Both are fixed, in one piece of work.

What changed#

• Synonyms. A curated list expands your terms, so a search for login also finds rules written about sign in and authentication. The list is versioned with the code, and an expanded term always ranks below the word you actually typed.
• Relevance ranking. Results are scored on how much of your query a rule really covers, rather than on matching any single common word.
• A floor, and an honest empty result. Below a confidence threshold the search returns no rules and names the terms that matched nothing, instead of filling the response with whatever scored above zero. An agent can now tell a miss from a hit, which it could not before.
• Scope and limit. The tool takes optional section and limit arguments, and results are capped, with required rules protected from the cap so a broad query cannot drop the mandatory ones.

A task description like "login form with email and password fields" now returns a ranked, capped set you can build from.

Docs launched

Published the UI Rules documentation site, covering brands, styles, library, rules, projects, the agent, connecting AI tools over MCP, and organization, account, and billing.