Design System Developer (Smart Router)
OfficialTranslate Figma to code, ensure UI consistency.
Authoranyproto
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Inconsistent UI implementation and manual translation of design specs into code lead to errors, rework, and wasted time. This Skill ensures pixel-perfect UI by guiding adherence to the design system.
Core Features & Use Cases
- Figma-to-Code Mapping: Provides clear guidance for using icons, typography, colors, and spacing directly from Figma specifications, eliminating guesswork.
- Automated Asset Integration: Guides the process of adding new icons and ensuring they are correctly code-generated and integrated into your project.
- Use Case: When implementing a new UI component, activate this Skill to quickly find the correct typography style, color constant, and icon size, ensuring your implementation matches the design system perfectly and reducing design-dev friction.
Quick Start
I need to add a new 24pt icon from Figma. Guide me through the steps to integrate it into the design system and use it in SwiftUI.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Design System Developer (Smart Router) Download link: https://github.com/anyproto/anytype-swift/archive/main.zip#design-system-developer-smart-router Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.