skills.rest
anyproto
anyprotoOFFICIAL
Explore all skills by this author →
Website𝕏@AnytypeLabsGitHub

Design System Developer (Smart Router)

Route design-system asset mapping to Anytype iOS constants for icons, typography, colors, and spacing.

509|79|Updated May 26, 2023
Search Tags:#typography#frontend#UI/UX#design system#figma#icons#swiftui#colors
One-click install
npx skills add https://github.com/anyproto/anytype-swift --skill design-system-developer-smart-router
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Developer (Smart Router)
Source: https://github.com/anyproto/anytype-swift/tree/main/.claude/skills/design-system-developer
Command: npx skills add https://github.com/anyproto/anytype-swift --skill design-system-developer-smart-router

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about Design System Developer (Smart Router)

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate Figma design specs into SwiftUI code?▼

Translate Figma specs to SwiftUI by mapping design-system assets—icons, typography, colors, and spacing—directly from your design system constants. This Skill routes context-aware asset mapping to ensure pixel-perfect UI implementation that matches Figma specifications without manual guesswork.

How do I add a new icon to the iOS design system from Figma?▼

Add icons by placing them in DesignSystem/ or Assets.xcassets with correct size categorization, then run make generate to code-generate and integrate them. This Skill guides icon asset integration, ensuring proper sizing and availability for use in your codebase.

Why is my UI inconsistent between Figma and code?▼

UI inconsistency occurs when design specs aren't enforced during implementation. This Skill enforces design-system constants for typography, colors, icons, and spacing, eliminating manual translation errors and ensuring your code always reflects Figma specifications.

What's the correct way to use typography and colors from a design system?▼

Use design-system constants for typography styles and color palettes rather than hardcoding values. This Skill maps Figma typography and color specs to standardized constants, reducing design-dev friction and maintaining consistency across components.

Do I need to manually update code when design assets change?▼

No—after updating assets in DesignSystem/ or Assets.xcassets, run make generate to automatically code-generate updates. This Skill enforces the generation workflow, ensuring asset changes propagate correctly without manual rework.

Can I use Figma spacing values directly in SwiftUI layouts?▼

Yes, by applying the standardized spacing formula from your design system. This Skill maps Figma spacing to design-system spacing constants, ensuring consistent layout implementation aligned with design specifications.

Related Skills

Explore More Design & Creative Skills→
GenEducationGenEducation

wds-6-asset-generation

Generate wireframes, UI elements, icons, images, videos, and content from UX specifications.

Official
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced
DevPelumiDevPelumi

figma-code-connect

Generate .figma.ts Code Connect templates mapping Figma components to code snippets.

Community
Advanced