skills.rest
fysoul17
fysoul17COMMUNITY
Explore all skills by this author →
𝕏@0xMcDonAltGitHub

devlyn:design-system

Extract concrete design tokens from HTML style previews into framework-agnostic design references.

4|Updated Feb 23, 2026
Search Tags:#typography#design system#design tokens#ui components#motion#style extraction#shadow css
One-click install
npx skills add https://github.com/fysoul17/ian-on-v1 --skill devlyn-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devlyn:design-system
Source: https://github.com/fysoul17/ian-on-v1/tree/main/ian-on/.claude/skills/devlyn%3Adesign-system
Command: npx skills add https://github.com/fysoul17/ian-on-v1 --skill devlyn-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about devlyn:design-system

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

FAQPage Schema
How do I extract design tokens from an HTML style preview?▼

To extract design tokens from an HTML style preview, the skill parses the provided HTML to output a structured design-system document. This captures exact hex colors, font sizes, pixel spacing, border radii, and full shadow CSS values.

Can I generate a framework-agnostic design system for both web and Flutter?▼

Yes, you can generate a framework-agnostic design system for web and Flutter. It reproduces design languages with consistent tokens and component patterns, ensuring implementations match the original design precisely across native, desktop, or terminal platforms.

How do I document UI component patterns and interactive states from a style preview?▼

Document UI component patterns and interactive states by extracting hover, active, and focus transitions with from/to values and durations. This captures navigation, cards, buttons, and badges to keep UI behavior consistent across implementations.

What is the best way to convert CSS styles into reusable design tokens?▼

The best way to convert CSS styles into reusable design tokens is to parse the style preview HTML directly. This extracts concrete visual values like typography, spacing, shape, shadows, and motion timings into a complete, structured design reference.

Does this design token extraction method work for terminal UI implementations?▼

Yes, this design token extraction method works for terminal UI implementations. It outputs a framework-agnostic design reference that supports reproducing design languages across web, Flutter, native, desktop, and terminal platforms.

Related Skills

Explore More Design & Creative Skills→
zhangzhang-111-izhangzhang-111-i
2

ui-design-system

Generate design tokens for colors, typography, spacing, and more.

Community
Advanced
suhwansuhwan

phase-5-design-system

Build a platform-independent design system with tokens and components for React, Flutter, iOS, and Android.

Community
Advanced
brightdatabrightdata
245

design-mirror

Extract design tokens from a website and apply them to Tailwind, CSS variables, or CSS-in-JS.

Official
Advanced
codesour-designcodesour-design

gravity-apply-tokens

Apply Gravity design system tokens to Figma screens.

Community
Advanced