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

ChatGPT design-handoff skill for states and responsive layouts

Turn agreed layouts, component tokens, and interaction states into a developer handoff checklist.

中文

Install in ChatGPT

A ChatGPT workspace with skill creation enabled. Use only the supplied plain-text material in the example.

  1. In a ChatGPT workspace with skill creation enabled, open Plugins → Skills → Create → Create with editor.
  2. Create a skill in the editor and adapt the text-only `design-handoff` workflow from the pinned GitHub source into its instructions.
  3. Save the skill, then type @ in a new chat to select it and try the example.

Example task

Manually select design-handoff and use this fictional filter panel spec to prepare the handoff.
deliverable `filter panel developer handoff` | tokens `space-medium` and `focus-ring`
keyboard: escape closes the panel and restores focus to `Open filters`
empty label `No filters available` | mobile layout=single column | desktop layout=two columns

What to check

Record spacing `space-medium`, focus `focus-ring`, and empty text `No filters available`. Specify one mobile column, two desktop columns, and focus return to `Open filters`.

Original SKILL.md on GitHub · Updated

Frequently asked question

How should spacing appear in a developer handoff?

Name the existing spacing token and check where it applies across screen sizes and states.

Related skills from this repository