'design-tokens' 검색 결과

Skill for design-tokens tasks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Turn existing interface code into shared design rules for colors, type, and spacing, with documented decisions and an interactive preview. Audit visual consistency across ten areas and identify specific places to improve.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating shared design rules from existing code
• Auditing visual consistency before a redesign
• Reviewing pull requests that change styling

Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Standardize colors, spacing, and typography
• Document button states and variants
• Check code for hardcoded style values

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design tokens, light/dark theming, and WCAG contrast validation for HTML documents and decks, compiled into one inlinable CSS bundle. Use when theming a report or deck, auditing contrast, or fixing dark-mode color drift.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull their design system out of Figma — whether they say "export tokens from Figma", "get design tokens", "set up my design system", "read our Figma design system", "get Figma variables into QML", "pull our color palette from Figma", "import design tokens", "extract colors/typography/spacing from Figma", or similar. Trigger this skill at the start of any design-system workflow that involves a Figma source.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies -- and fixes it in the right direction.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Calculates the WCAG 2.x contrast ratio between two colors, grades it against the AA and AAA thresholds for body text, large text and non-text UI parts, and finds the closest shade that passes. Use when someone asks to "check the contrast", "is this text readable on this background", "does our palette meet WCAG AA", "fix the low-contrast text", "audit the design tokens for accessibility", or brings a failed contrast finding from an audit. Handles hex and rgb() values, alpha, whole palettes, light and dark themes and a CI gate.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Manipulate colors with chroma.js — convert between color spaces (RGB, HSL, LAB, LCH), generate palettes and scales, mix and blend colors, check contrast ratios, and build accessible color systems. Use when tasks involve creating color palettes, theming, accessibility checks, or data visualization color scales.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Rebuilds an existing website as a clean new codebase that looks and behaves like the original: captures pages, breakpoints, design tokens, assets and interaction states with a browser tool, plans the build, rebuilds section by section and proves each one against the capture with a pixel diff. Use when the user says "clone this website", "rebuild my site in Next.js or Astro", "recreate this page pixel-perfect", "move my Webflow or WordPress site to code" or "copy this layout". Full copies are only for sites the user owns or is authorized to copy; for anyone else's site it borrows the layout ideas and never the brand, content or sign-in pages.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Ant Design (antd) is a React component library of 70+ enterprise UI components (tables, forms, date pickers, modals, menus) with design-token theming through ConfigProvider. Use it to build admin panels, back-office tools and data-heavy dashboards: server-paginated tables with filters and bulk actions, validated forms, dark or branded themes, and antd inside Next.js without a flash of unstyled content. Triggers: "antd table", "Ant Design form validation", "customize antd theme", "antd dark mode", "antd with Next.js App Router", "upgrade antd 5 to 6".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Map semantic tokens into Tailwind utilities.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

CSS design tokens and color system for vehicle insurance platform. Use when defining colors, spacing, typography, or design variables. Keywords: eye-care colors #5B8DEF/#8B95A5/#C5CAD3, CSS variables, spacing system, color palette, typography scale, design tokens, variables.css, theme colors.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Read and write design tokens in W3C DTCG format (tokens.json) and emit CSS, Tailwind, and Mantine outputs. Use when modifying or generating design tokens.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Produce a coherent visual identity (palette, typography, spacing, radius) from a brief and serialise to JSON for the design-tokens skill. Use when establishing brand identity.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

建立设计令牌系统时使用。适用于设计系统建立、跨平台一致性、设计代码同步。优先使用 W3C DTCG 2025.10 标准 + 三层 Token + JSON 输出。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design token architecture - primitive/semantic/component tiers, naming grammar, CSS custom property delivery, and DTCG build pipelines

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when styling with Tailwind CSS v4 - @theme syntax, design token architecture, dark mode strategy, bundle size optimization, component-layer discipline, or migrating from v3

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Architect scalable styling systems with Tailwind v4, CSS Modules, design tokens, dynamic theming, and container queries. Activate on: design tokens, theming system, Tailwind config, CSS architecture, container queries, dark mode. NOT for: component library creation (use design-system-creator), animation systems (use animation-system-architect).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Read-first Figma gateway via Figma MCP: analyze designs, implement Figma-to-code for 1–3 screens, extract design tokens, produce a Figma Evidence Packet for planning handoff, screenshot fallback. Advanced operations (Code Connect, canvas writes, design-system/library patterns) are gated references loaded only on explicit intent. Triggers: 'figma', 'design link', 'implement this design', 'design tokens', 'produce a Figma Evidence Packet'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.