Skip to main content

​
Access project settings

Project settings showing the project settings dialog
  1. Open Subframe
  2. Click the project switcher in the top nav
  3. Select Project settings
You should see the project settings dialog.
Project settings showing the project settings dialog

​
Import alias

Set the path prefix used for component imports in generated code. Default: @/ui/components This determines how import statements appear in your exported code: 
import { Button } from "@/ui/components/Button"
Change this to match your project’s directory structure and TypeScript path aliases.

​
Company context

Provide context to help AI generate designs that are more relevant to your product.

​
Company name

Your company or product name. AI uses this to personalize generated content and copy.

​
Description

Describe your company, product, and design preferences. This helps AI understand:
  • What your product does
  • Your target audience
  • Tone and style preferences
  • Any specific design guidelines
The more context you provide, the better AI can tailor designs to your brand and product.

​
Icon imports

Choose how icons are imported in generated code.

​
Import as component

Icons are imported as React components: 
import { FeatherIcon } from "@/ui/components/FeatherIcon"

<FeatherIcon name="check" />

​
Import as string

Icons are referenced by name as strings: 
import { Icon } from "@/ui/components/Icon"

<Icon name="FeatherCheck" />
If your project has uploaded custom icons, you must use “Import as component”. The string option is disabled when custom icons are present.