support-files

Support Files — Shared design system assets for Auto Engineer examples

Files

File	Description	Size
.env.example	Environment variable template for AI provider keys and configuration	~500B
.context/design-system.md	Component catalog listing 55+ shadcn/ui components by name and type	~5KB
.context/figma-file.json	Raw Figma API export with Tailwind CSS design tokens (spacing, dimensions, scopes)	~44MB
.context/shadcn-filter.ts	Filter function for processing Figma component imports (blacklist, dedup, kebab-case)	~2KB

Usage

Copying into a project

From another example directory, copy the context files:

rm -rf .context && mkdir .context && cp ../support-files/.context/* ./.context

Environment setup

Copy the env template and fill in your credentials:

cp ../support-files/.env.example ./.env

At minimum, set one AI provider key:

ANTHROPIC_API_KEY=your-key
# or
OPENAI_API_KEY=your-key
# or
GEMINI_API_KEY=your-key
# or
XAI_API_KEY=your-key

Optional settings for custom OpenAI-compatible endpoints:

CUSTOM_PROVIDER_NAME=litellm
CUSTOM_PROVIDER_BASE_URL=https://api.litellm.ai
CUSTOM_PROVIDER_API_KEY=your-custom-api-key
CUSTOM_PROVIDER_DEFAULT_MODEL=vertex_ai/gemini-3.1-pro-preview

Pipeline integration

Reference these files in auto.config.ts:

.on('IAGenerated')
.emit('GenerateClient', () => ({
  figmaVariablesPath: resolvePath('./.context/figma-file.json'),
}))

.emit('ImplementComponent', (c) => ({
  designSystemPath: resolvePath('./.context/design-system.md'),
}))

Regenerating from Figma

To regenerate the design system files from a Figma source:

export FIGMA_PERSONAL_TOKEN=your-token
export FIGMA_FILE_ID=your-file-id

auto import:design-system \
  --output-dir=./.context \
  --strategy=WITH_COMPONENT_SETS \
  --filter-path=./shadcn-filter.ts

Import strategies:

Strategy	Description
WITH_COMPONENTS	Individual components only
WITH_COMPONENT_SETS	Component sets (default)
WITH_ALL_FIGMA_INSTANCES	Full document traversal

API Reference

shadcn-filter.ts

export function filter(components: Component[]): Component[]

Filters and transforms a list of Figma components for import into the design system.

Filtering rules:

• Excludes names matching a blacklist: image, slot, logo, sidebar, settings, stepper, and others
• Excludes names containing substrings: icon, diagram, toolbar, shortcut, script
• Includes only components where the name is 1-3 alphabetic words, description is INSTANCE, and hierarchy depth is 3 or less
• Deduplicates by lowercase name

Transforms:

• Converts names to lowercase kebab-case
• Sorts alphabetically

Consumed by

Package	How it uses these files
@auto-engineer/react-gen	Reads design-system.md and figma-file.json during client generation
@auto-engineer/information-architect	References the component list for information architecture decisions