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
Generate polished broadcast scripts from talking points, verify facts against sports data in real time, and prepare anchors with comprehensive interview prep including player history and context. You'll produce show-ready scripts with proper pacing, tone optimization for on-air delivery, and talking points for live ad-libs.
by majiayu000
You'll learn to structure mobile apps using Expo Router's file-based routing system, implement native iOS controls like tabs, switches, and pickers, create smooth animations with Reanimated, and apply advanced styling with blur effects, gradients, and glassmorphism. This skill covers everything from routing fundamentals to production-ready patterns for building polished, performant applications.
by majiayu000
You can generate production-ready ExtendScript code to automate batch Photoshop workflows, process hundreds of assets with consistent results, and build custom image processing pipelines. Claude helps you debug complex scripts, optimize for performance, and solve asset management challenges without requiring deep ExtendScript expertise.
by majiayu000
You create professional video scripts for digital news segments that balance journalistic integrity with audience engagement. The skill generates platform-specific content tailored to TikTok, YouTube, LinkedIn, or broadcast formats, complete with timing cues, B-roll suggestions, and retention hooks. Each script maintains editorial standards while maximizing viewer completion rates and social sharing potential.
by majiayu000
Transform raw news copy into professional radio scripts formatted for on-air delivery with precision timing, strategic pause and emphasis cues, and spontaneous ad-lib prompts. You get industry-standard formatting that anchors can read confidently under studio pressure while sounding natural and engaging. Every script fits your broadcast window exactly, with built-in coaching notes to elevate anchor performance.
by majiayu000
Debug, optimize, and troubleshoot Blender Python scripts, add-ons, and automation workflows with precision. This skill analyzes error messages, suggests performance improvements, and provides API best practices to help you build robust Blender tools and custom workflows.
by majiayu000
Generate polished sports segment scripts complete with stat callbacks, narrative hooks, and compelling angles — in minutes instead of hours. Get interview question briefs with talking points and live ad-lib suggestions that keep your anchors prepared and articulate. Transform raw game data and story ideas into broadcast-ready copy your newsroom will love.
by majiayu000
Convert raw news wire copy and story notes into polished, anchor-ready scripts with proper pacing, vocal tone guidance, and delivery cues. You get timing estimates, emphasis markers, pronunciation guides, and transition language that keeps listeners engaged and maintains your station's voice throughout every segment.
by majiayu000