ui-design-system
Crear Sistemas de Diseño UI Consistentes
也可從以下取得: AbdulSamad94,alirezarezvani
Crear sistemas de diseño consistentes manualmente requiere mucho tiempo y a menudo resulta en implementaciones inconsistentes. Este conjunto de herramientas automatiza la generación de tokens de diseño para colores, tipografía y espaciado, asegurando armonía visual en todos los componentes y exportando código listo para desarrolladores.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ui-design-system」。 Generate design tokens from #3B82F6 with modern style
預期結果:
- Color Palette: Primary (50-900), Secondary, Neutral, Semantic (success, warning, error, info)
- Typography: Inter font family, 9 size steps from 12px to 48px, full weight and line-height scale
- Spacing: 24 values from 0px to 448px with semantic names (xs, sm, md, lg, xl)
- Breakpoints: xs: 480px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
正在使用「ui-design-system」。 Create a design system with #10B981 as brand color in classic style
預期結果:
- Typography: Helvetica, Arial, Times New Roman font families with classic border radius (2px-12px)
- Shadows: Subtle traditional shadows with no inner shadow tokens
- Animation: Standard easing without spring animations
- Output: Ready-to-paste CSS variables for immediate use
安全審計
安全All 85 static findings are FALSE POSITIVES. The scanner misidentified SEO keywords as cryptographic algorithms, hex color codes as C2 commands, and print statement dividers as Windows SAM references. The actual code performs only color mathematics using the colorsys module and outputs JSON to stdout with no network access, file I/O, or external command execution. Behavior exactly matches stated purpose of design token generation.
風險因素
🌐 網路存取 (1)
⚙️ 外部命令 (1)
品質評分
你能建構什麼
Generar Entrega para Desarrolladores
Crear tokens de diseño listos para usar que los desarrolladores pueden copiar directamente en proyectos CSS o JavaScript.
Construir Sistemas de Diseño
Establecer bases de tokens consistentes para nuevos sistemas de diseño con valores automatizados de color, tipo y espaciado.
Mantener Consistencia Visual
Generar documentación de referencia para equipos de diseño para asegurar la aplicación consistente de tokens de diseño.
試試這些提示
Use the UI Design System skill to generate design tokens from the brand color #0066CC in modern style. Output the JSON format.
Create a complete design token system using UI Design System with a custom brand color. Include all token types and export as CSS variables.
Generate the same design tokens in three different styles: modern, classic, and playful. Compare the typography and border radius differences.
Generate design tokens for my brand color and export them as SCSS variables I can use in a Sass project. Include spacing, colors, and typography.
最佳實務
- Comience con un solo color de marca principal y deje que el sistema genere paletas complementarias
- Exporte a variables CSS para proyectos web o SCSS para flujos de trabajo basados en Sass
- Use el estilo moderno para productos tecnológicos y clásico para aplicaciones tradicionales
避免
- Usar tokens generados sin revisar las proporciones de contraste para accesibilidad
- Mezclar tokens de diferentes presets de estilo en el mismo proyecto
- Aplicar todos los tokens sin considerar el contexto del caso de uso específico