Framer Design System Architect
Build scalable Framer component systems with managed variants and design patterns
What You Can Do
You can architect scalable component systems in Framer that maintain design consistency across projects. Claude helps you establish reusable patterns, manage component variants systematically, and generate comprehensive design system documentation that bridges design and code.
Features
Design hierarchical component structures with clear composition rules and dependency maps
Create systematic naming conventions and variant matrices for complex component states
Define and document color, typography, spacing, and animation tokens for consistency
Generate specifications for component props, slots, and usage patterns
Build collections of composition patterns and interaction patterns for team reuse
Establish naming conventions, contribution guidelines, and component audit processes
Plan component refactoring and design system adoption across existing projects
Create checklists to evaluate component consistency, accessibility, and performance
Example Output
Component Architecture Plan:
├── Primitives (Button, Input, Label)
├── Composites (Form, Card, Modal)
├── Patterns (Stepper, Wizard, Breadcrumbs)
└── Layouts (Grid, Sidebar, Stack)
Variant Naming Convention:
Button: [size]_[variant]_[state]
- sm_solid_default
- lg_outline_hover
- md_ghost_disabled
Component Documentation Template:
## Button Component
Purpose: Primary action trigger
Variants: solid, outline, ghost
States: default, hover, active, disabled
What's Included
- SKILL.md: Complete Claude instructions for design system architecture
- Component Architecture Templates: Hierarchical structure frameworks and composition rules
- Variant Naming Convention Guides: Systematic naming schemes for states, sizes, and styles
- Design Token Specification Sheet: Color, typography, spacing, and animation token templates
- Component Documentation Template: Markdown-based API documentation structure
- Design System Audit Checklist: Consistency, coverage, and quality evaluation criteria
- Pattern Library Worksheet: Composition and interaction pattern collection templates
Who It's For
- Design system architects scaling component libraries across teams
- Product design leads establishing design consistency and governance
- Front-end developers building reusable Framer component libraries
- Design ops professionals auditing and documenting existing systems
- Creative directors ensuring brand consistency across digital products
Best For
- Architecting component hierarchies and dependency maps
- Developing systematic variant and state management strategies
- Creating design token systems for color, typography, and spacing
- Documenting component APIs and usage guidelines
- Planning design system adoption and team training
- Auditing component systems for consistency and coverage
- Building reusable interaction and composition patterns
You might also like
Get instant expert guidance on setting up remote broadcast gear, troubleshooting signal problems, and solving connectivity issues before they derail your show. You describe your equipment, network conditions, or specific error, and receive actionable diagnostics and step-by-step fixes tailored to your exact broadcast scenario.
by majiayu000
You can rapidly produce news stories from research to publication, automatically optimizing content for web, social media, and email platforms. Claude helps you generate SEO-friendly headlines, craft engaging social snippets, structure compelling narratives, and manage your publishing workflow—all while maintaining editorial quality and deadline pressure.
by majiayu000
You can load existing PRDs or saved prompts, discuss targeted improvements with Claude, and refine requirements without losing track of what changed. The skill manages source discovery, guides you through iteration cycles, and maintains clear modification markers ([ADDED], [MODIFIED], [REMOVED], [UNCHANGED]) so you always know what evolved during refinement.
by majiayu000
You generate production-ready design briefs from client requirements, automatically check dozens of designs for brand consistency violations, and orchestrate batch workflows with approval checkpoints. This skill ensures every design aligns with your brand guidelines while accelerating your design approval cycle by weeks.
by majiayu000
You can architect efficient multi-camera editing workflows optimized for Final Cut Pro, plan robust synchronization strategies across multiple camera angles, and design realistic production timelines that prevent bottlenecks. This skill transforms complex multicam shoots into streamlined editorial pipelines tailored to your team size, budget, and output deadlines.
by majiayu000
Transform your news stories into digitally-optimized scripts that maximize viewer engagement while preserving journalistic integrity. You provide the raw story, reporting notes, or article text, and Claude crafts segment-ready scripts with opening hooks, natural pacing, and strategic placement of key information. The skill adapts your content for various digital platforms—social video, streaming, web articles—each with tailored formatting and emphasis.
by majiayu000
You can organize intricate multi-track timelines with nested sequences, manage high-resolution and proxy workflows, and generate detailed technical specifications for multi-format delivery across broadcast, streaming, and archival standards. Claude analyzes your project structure, tracks media dependencies, and creates implementation roadmaps that ensure smooth handoff to colorists, sound designers, and delivery teams.
by majiayu000
Analyze your Premiere Pro projects to identify performance bottlenecks, memory issues, and rendering inefficiencies. You'll receive targeted optimization recommendations, automation scripts, and troubleshooting guidance tailored to your specific system configuration and project complexity. Claude becomes your technical production consultant, helping you resolve crashes, slow timelines, and resource conflicts.
by majiayu000