此内容尚未提供您的语言版本,正在以英文显示。

UI Design System Toolkit

技能已验证活跃

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

目的

To streamline the creation and maintenance of design systems by automating the generation of design tokens and providing clear guidance for developer handoff and integration.

功能

Design token generation from brand color
Support for modern, classic, and playful styles
Export tokens to JSON, CSS, and SCSS formats
Documentation on component architecture and responsive design
Framework integration patterns (React, Vue, Next.js, Tailwind)

使用场景

Generating a complete design token system for a new project
Creating style guides and component libraries
Facilitating collaboration between designers and developers
Ensuring visual consistency across an application

非目标

Generating UI components directly
Writing application-specific code
Replacing design tools like Figma entirely
Providing real-time design feedback during active design sessions

工作流

Identify brand color and style preferences.
Run the `design_token_generator.py` script with specified parameters.
Review generated tokens for colors, typography, spacing, etc.
Export tokens in the desired format (JSON, CSS, SCSS).
Integrate tokens into development projects or design tools.
Validate accessibility and visual consistency.

实践

Design token generation
Component documentation
Responsive design
Developer handoff

安装

请先添加 Marketplace

/plugin marketplace add alirezarezvani/claude-skills

/plugin install product-team@claude-code-skills

质量评分

已验证

99 /100

1 day ago 分析

信任信号

最近提交1 day ago

GitHub 所有者 alirezarezvani

星标14.6k

许可证MIT

网站alirezarezvani.medium.com

状态

查看源代码

类似扩展

Setup Tailwind Typescript

100

Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.

技能

pjt222