How does this skill handle responsive design?

It follows a mobile-first approach, using standard named breakpoints (sm, md, lg, xl) and ensuring grid systems adapt correctly from mobile to desktop layouts.

Can it prevent hardcoded values in my CSS?

Yes, the skill includes data validation checks that trigger a failure if it detects hardcoded pixel values or colors instead of approved design token references.

What are design tokens in this context?

Design tokens are the visual atoms of a design system—like colors, spacing, and typography—stored as variables to ensure consistency across code and design.

Does it help with component architecture?

Yes, it decomposes designs top-down, ensuring component boundaries in your code match the visual groupings and hierarchy established in the original design.

Design to Code Patterns

Name: Design to Code Patterns
Author: hjemmesidekongen

byhjemmesidekongen

0•

デザインツール

Translates design specifications and mockups into production-ready frontend components using standardized design tokens and systems.

This skill streamlines the frontend development process by bridging the gap between design handoffs and implementation. It enforces industry best practices such as design token consumption, 4px-based spacing systems, and semantic typography scales to ensure high-fidelity UI. By automating component decomposition and ensuring responsive consistency across breakpoints, it helps developers build scalable, maintainable design systems that faithfully represent design tool outputs while avoiding technical debt like magic numbers and hardcoded values.

主な機能

01Validation checks to prevent hardcoded pixel values and 'magic numbers'

02Mobile-first responsive breakpoint implementation and grid management

03Automated design token extraction and semantic mapping

04Strict enforcement of 4px-based spacing systems and vertical rhythm

05Hierarchical component decomposition from visual mockups

060 GitHub stars

ユースケース

01Refactoring legacy CSS into a standardized, token-based architecture

02Building responsive, accessible frontend components from static design specs

03Implementing a new design system from a Figma or design handoff

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai design-to-code-patterns

For use in Claude.ai and ChatGPT

主な機能

01Validation checks to prevent hardcoded pixel values and 'magic numbers'

02Mobile-first responsive breakpoint implementation and grid management

03Automated design token extraction and semantic mapping

04Strict enforcement of 4px-based spacing systems and vertical rhythm

05Hierarchical component decomposition from visual mockups

060 GitHub stars

ユースケース

01Refactoring legacy CSS into a standardized, token-based architecture

02Building responsive, accessible frontend components from static design specs

03Implementing a new design system from a Figma or design handoff

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai design-to-code-patterns

For use in Claude.ai and ChatGPT