Results for “design-tokens”

Skill for design-tokens tasks.

The English summary is being prepared. Showing the original description.

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 or edit websites and application interfaces in the current iPolloWork Design session. Preserve shared design settings, component identities, and editing boundaries while making targeted or structural changes, then check affected interactions and supported exports through the host.

• Creating a website or application interface in Design
• Editing text or selected components
• Changing a theme while preserving content and layout

Create and edit articles or reports within an iPolloWork Design session. Adjust text, themes, or structure while preserving existing design settings and editing boundaries, then check the result through the host application's preview.

• Create an article or report in an existing session
• Revise selected passages
• Adjust a theme while preserving content and layout

Create and revise slide presentations within an active iPolloWork Design session while preserving the selected template’s appearance and editable objects. Support focused text or theme changes, broader narrative revisions, and presentation checks through the host’s preview tools.

• Creating a slide deck in the current Design session
• Revising text or selected slide objects
• Changing theme colors while preserving layout

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

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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".

The English summary is being prepared. Showing the original description.

Map semantic tokens into Tailwind utilities.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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

The English summary is being prepared. Showing the original description.

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

The English summary is being prepared. Showing the original description.