devlyn:design-system
CommunityTurn a style preview into exact design tokens
Design & Creative#typography#design system#design tokens#ui components#motion#style extraction#shadow css
Authorfysoul17
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It eliminates guesswork and inconsistency by extracting the real visual values (colors, typography, spacing, shadows, motion, and reusable component patterns) from a provided style preview so implementations match the original design precisely.
Core Features & Use Cases
- Exact design value extraction: Converts an HTML style preview into a framework-agnostic design reference covering concrete tokens (hex colors, font sizes/weights, pixel spacing, border radii, full shadow CSS, and animation timings).
- Reusable component pattern documentation: Captures how to build consistent UI patterns (navigation, cards, buttons, badges/labels, section headers, and any special layout behaviors) without tying the output to a specific framework.
- Interactive state and behavior specification: Documents hover/active/focus transitions with from/to values and durations so UI behavior stays consistent across implementations.
Quick Start
Use devlyn:design-system with arguments like "3 web" to extract the design reference for style 3 targeting the web platform.
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: devlyn:design-system Download link: https://github.com/fysoul17/ian-on-v1/archive/main.zip#devlyn-design-system 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.