FlexTrap Asset Studio

Brand asset creation tool for FlexTrap (Part of FlexTecs)

Create on-brand marketing materials, documents, presentations, calculators, and digital assets—all adhering to FlexTrap's design system.

---

What You Can Create

Category	Asset Types
Social Content	Quote images, carousels, cheatsheets
Lead Magnets	PDFs, infographics, guides, checklists
Web Assets	Landing pages, calculators, components
Documents	Word docs, slide decks, one-pagers, case studies
Spreadsheets	Excel models, ROI calculators
Brand Assets	Brand kits, logo packages, templates
Figma Integration	Import designs, extract tokens, convert components
Design Adaptation	Transform reference designs to FlexTrap brand

---

Quick Start

Prerequisites

• Node.js 18+
• npm or pnpm
• Claude Code CLI

Installation

# Install dependencies (includes design system)
npm install

# Start development server
npm run dev

---

Content Creation Workflow

Step 1: Open Claude Code

cd flextrap-asset-studio
claude

Step 2: Create Content

Tell Claude what you want to create:

"Create a one-pager PDF about FlexTrap's payment reconciliation features"

"Make a LinkedIn carousel about AP automation benefits"

"Build a landing page for our new inbox feature"

"Create an ROI calculator spreadsheet for prospects"

Or use slash commands directly:

/flextrap/create-pdf
/flextrap/social-carousel
/flextrap/create-landing
/flextrap/create-excel

Step 3: Review and Export

Generated content appears in exports/ or the appropriate src/assets/ folder.

---

Design System Integration

This project uses brand assets from flextrap-design-system.

Syncing Assets

Three ways to sync when the design system is updated:

Method	When to Use	Command
Claude Command	Working in Claude Code	/flextrap/sync-assets
npm Script	Quick terminal sync	npm run sync:design-system
GitHub Action	Automatic	Runs daily + on push to design-system

Using Design System Assets in Code

// Import CSS tokens
import '@ft-gtm/flextrap-design-system/tokens.css';

// Import logos
import logo from '@ft-gtm/flextrap-design-system/logos/flextrap-logo-primary.svg';

// Import icons
import paymentIcon from '@ft-gtm/flextrap-design-system/icons/icon-payment.svg';

Asset Locations

node_modules/@ft-gtm/flextrap-design-system/
├── flextrap-tokens.css     # CSS custom properties
├── logos/                   # SVG logo variants
├── icons/                   # Product feature icons
└── templates/               # Social & presentation templates

---

Available Commands

Using with Claude Code

The asset studio includes Claude Code commands for creating assets:

# Social content
/flextrap/social-quote      # Create branded quote image
/flextrap/social-carousel   # Create multi-slide carousel

# Documents
/flextrap/create-pdf        # Create branded PDF
/flextrap/create-deck       # Create slide presentation

# Web assets
/flextrap/create-landing    # Create landing page
/flextrap/create-calculator # Create interactive calculator

# Spreadsheets
/flextrap/create-excel      # Create Excel model

# Figma integration
/flextrap/figma-import      # Import Figma design file
/flextrap/figma-tokens      # Extract design tokens from Figma
/flextrap/figma-component   # Convert Figma component to code

# Design adaptation
/flextrap/adapt-inspiration # Adapt reference design to FlexTrap brand
/flextrap/analyze-reference # Analyze design elements from reference
/flextrap/style-transfer    # Apply FlexTrap styling to analyzed design

# Brand & sync
/flextrap/export-brand-kit  # Export complete brand package
/flextrap/sync-assets       # Sync design system from central repo

---

Project Structure

flextrap-asset-studio/
├── .claude/
│   ├── commands/flextrap/    # Asset creation commands
│   └── skills/               # Design skills
│       ├── frontend-design/  # Web UI design skill
│       ├── flextrap-docx/    # Word document skill
│       ├── flextrap-xlsx/    # Excel spreadsheet skill
│       ├── flextrap-pptx/    # PowerPoint skill
│       ├── flextrap-pdf/     # PDF document skill
│       ├── flextrap-figma/   # Figma integration skill
│       └── flextrap-adaptation/ # Design adaptation skill
├── product/
│   ├── design-system/        # FlexTrap design tokens
│   │   ├── colors.json       # Brand color palette
│   │   └── typography.json   # Font specifications
│   └── brand/                # Source brand assets
├── src/
│   ├── assets/               # Asset templates by type
│   │   ├── social/
│   │   ├── documents/
│   │   ├── web/
│   │   ├── adaptations/      # Adapted reference designs
│   │   └── spreadsheets/
│   └── components/           # Shared UI components
├── exports/                  # Generated deliverables
└── agents.md                 # Agent directives

---

FlexTrap Brand Colors

Color	Hex	Usage
Deep Navy	#11253B	Primary backgrounds, headers
Magenta	#D51D7A	CTAs, accents, highlights
Light Pink	#F291BD	Secondary accent, gradients
Slate Blue	#566AB2	Supporting accent, links
Teal	#00BDA5	Success states, metrics
Dark Navy	#0C1B2F	Dark sections, footers

Gradients

/* Primary (magenta to pink) */
linear-gradient(90deg, #D51D7A 0%, #F291BD 100%)

/* Dark (navy to dark navy) */
linear-gradient(135deg, #11253B 0%, #0C1B2F 100%)

---

Typography

• Headings: Transducer (500-700 weight)
• Body: Azo Sans (400-600 weight)
• Code: IBM Plex Mono

---

Development

npm run dev      # Start dev server
npm run build    # Build for production
npm run lint     # Run linter
npm run preview  # Preview production build

---

Related Repositories

Repository	Purpose
flextrap-design-system	Source of truth for brand assets (logos, icons, tokens)
flextrap-asset-studio (this repo)	Content creation tool that uses those assets

When to Use Each

Task	Repository
Create content (PDFs, decks, social posts)	asset-studio
Add new logos or icons	design-system
Update brand colors or tokens	design-system
Build landing pages or calculators	asset-studio

---

Based on Design OS

This project is adapted from Design OS by Brian Casel at Builder Methods.

---

FlexTrap Asset Studio • Part of FlexTecs