ui-design-system
Gerar tokens de sistema de design a partir de cores da marca
也可从以下获取: davila7,AbdulSamad94
Criar tokens de design consistentes manualmente é demorado e propenso a erros. Esta ferramenta gera sistemas de design completos, incluindo paletas de cores, escalas tipográficas, grades de espaçamento e estilos de componentes a partir de uma única cor da marca.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“ui-design-system”。 Generate design tokens for a brand color of #0066CC with modern style
预期结果:
- Style: modern | Brand Color: #0066CC
- Generated Tokens:
- Colors: 5 palettes (primary, secondary, neutral, semantic, surface)
- Typography: 6 categories (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textStyles)
- Spacing: 24 values (xs to 3xl semantic)
- Shadows: 7 styles (sm to 2xl)
- Breakpoints: 6 sizes (xs to 2xl)
- Export formats available: json, css, scss
正在使用“ui-design-system”。 Generate CSS variables for a brand color of #EF4444
预期结果:
- :root {
- --colors-primary-50: #FEF2F2;
- --colors-primary-100: #FEE2E2;
- --colors-primary-500: #EF4444;
- --colors-primary-900: #7F1D1D;
- --typography-fontFamily: 'Inter, system-ui, -apple-system, sans-serif';
- --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px;
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
- }
安全审计
安全All 200 static findings are false positives. The scanner misinterpreted legitimate design token terminology (design system, generate, token) and console output text as security threats. The code is a pure Python design token generator using standard color manipulation (colorsys) with no network access, file writes, cryptographic operations, or external commands.
风险因素
⚡ 包含脚本 (1)
质量评分
你能构建什么
Criar sistemas de design
Gere variáveis CSS e mapas SCSS prontos para uso em sistemas de design de novos projetos
Manter consistência de marca
Garanta que todas as decisões de design sigam uma escala e um sistema de tokens consistentes entre componentes
Automatizar handoff para desenvolvedores
Gere exportações de tokens prontas para documentação para repositórios de sistemas de design
试试这些提示
Generate design tokens for a brand color of #0066CC with modern style in JSON format
Generate design tokens for a brand color of #3B82F6 using playful style and export as CSS variables
Generate design tokens for a brand color of #8B5CF6 using classic style and export as SCSS
Generate a complete design system for brand color #10B981 with modern style, including all color palettes, typography scales, spacing systems, and breakpoints
最佳实践
- Use o estilo moderno para interfaces limpas e minimalistas e o estilo clássico para designs corporativos tradicionais
- Exporte tokens em formato CSS para uso direto em projetos web e SCSS para pré-processamento com variáveis de tokens de design
- Use primeiro a saída de resumo para revisar todos os tokens gerados antes de se comprometer com um formato específico
避免
- Não edite manualmente os tokens gerados sem atualizar primeiro a cor da marca de origem
- Não misture diferentes sistemas de espaçamento (4pt, 8pt, 10pt) dentro do mesmo projeto
- Não use tokens de cor semânticos (success, warning, error) diretamente para componentes específicos de marca
常见问题
Quais formatos de tokens de design são suportados?
Como integro os tokens gerados ao meu projeto?
Posso personalizar a escala tipográfica?
Quais formatos de cor a ferramenta aceita?
Como as escalas de cor são geradas?
Esta ferramenta suporta modo escuro?
开发者详情
许可证
MIT
引用
main