词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Frontend Design Tokens Skill for ChatGPT: Map Hard-coded Styles to Radix Tokens

Review supplied component styles against a project token list. Map known spacing, radius, type, and colors to appropriate Radix props or SCSS variables and keep unknown mappings visible.

中文

Install in ChatGPT

Requires a ChatGPT workspace where you can create skills. This is a text adaptation of the pinned GitHub source.

  1. Review the inputs and outputs in the pinned .claude/skills/frontend-design-tokens/SKILL.md.
  2. In ChatGPT, open Plugins, Skills, Create, and Create with editor.
  3. Write the skill rules using the workflow described here. Provide SCSS or component excerpts, available Radix props, and the current project token table.
  4. Save the skill and check the fictional example in a new chat.

Example task

A fictional component uses 12px gap, 8px radius, and a hard-coded text color. The supplied list maps only space-3 to 12px and text-primary to body text. Draft a token map.

What to check

Use the known spacing and semantic text token. Mark radius pending, prefer the supported gap prop when applicable, and name the visual checks to repeat.

Original SKILL.md on GitHub · Updated

Frequently asked question

Does a matching pixel value justify using any token?

Choose the token that matches the role and theme. Spacing, type, and radius serve different purposes even when numbers match.