Immediate result: Handoff notes covering states, interactions, responsive behaviour, content rules and accessibility.
Problem it solvesDevelopers build something different from the design because behaviour and edge cases weren't written down.
Product card: image, title, price, rating, add-to-cart; grid of 4 on desktop
States: default, hover (lift 2 px, 150 ms), out of stock (button disabled, label 'Notify me')
Title: max 2 lines, then ellipsis
Grid: 4 columns ≥ 1200 px · 2 columns < 810 px
Developers build something different from the design when behaviour and edge cases aren't written down. This skill writes handoff notes from a description of your screens: every component and its states, interactions and animations with durations, responsive behaviour at each breakpoint, content limits, accessibility notes and open questions. Attach the notes to your design file and the first build comes much closer to what you designed. To use it, paste the skill into your assistant and send a description of the screens and components in your design; the reply is laid out as “Components and states”, “Interactions” and “Responsive rules”.
# Skill: Design handoff notes
You are running the "Design handoff notes" skill for me. I work as: Product designer. What I need from you: handoff notes covering states, interactions, responsive behaviour, content rules and accessibility.
## When I send you a description of the screens and components in my design
1. List every component and its states.
2. Describe interactions and animations with durations.
3. Specify responsive behaviour at each breakpoint.
4. Add content limits, accessibility notes and open questions.
## Reply in this format
- Components and states
- Interactions
- Responsive rules
- Content rules
- Accessibility
- Open questions
## Rules
- Use only the facts I give you; mark anything you had to assume with [ASSUMPTION].
- If something essential is missing, ask me one short question, then continue.
- No preamble or filler: start with the result.
Confirm you're ready in one line, then wait for me to send a description of the screens and components in my design.Then sendA description of the screens and components in your design. For example: Product card: image, title, price, rating, add-to-cart; grid of 4 on desktop
Upload it to Claude, add it to ChatGPT's Codex app, clone it into Claude Code, or download the SKILL.md for any agent. Full guide with screenshots →
Download the ZIP and upload it in Claude. Claude then uses the skill on its own whenever a request matches.
Download ZIP
OpenAI's Codex app reads the same SKILL.md format. Copy the skill into your Codex skills folder:
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/figma-handoff-notes ~/.codex/skills/
Clone the library and copy this skill into your Claude Code skills folder.
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/figma-handoff-notes ~/.claude/skills/~/.claude/skills/ for all projects, or .claude/skills/ inside one project.Download the skill file and put it in a folder named after the skill.
Download SKILL.md~/.claude/skills/figma-handoff-notes/SKILL.md.Repositoryscienceofapps.com/skills/ai-skills.git · all 200 skills, one folder each, plain git over HTTPS
Developers build something different from the design because behaviour and edge cases weren't written down. The skill fixes that: handoff notes covering states, interactions, responsive behaviour, content rules and accessibility.
Copy the skill and paste it as the first message of a new chat, then send your input. To keep it, paste it into a ChatGPT Project or custom GPT, a Claude Project or a Gemini Gem, or upload the SKILL.md file as a Claude Skill.
Send a description of the screens and components in your design. If something essential is missing, the skill asks you one short question and then continues.
Yes. It's free to copy, use and adapt, with no sign-up, and works in the free versions of ChatGPT, Claude, Gemini and Copilot.
ProblemTranslated interfaces read awkwardly and break layouts because strings get longer.
Keys: cta.checkout 'Checkout now' (max 14 characters) · Hindi and Tamil
cta.checkout · hi: 'अभी ऑर्डर करें' — fits
cta.checkout · ta: 'இப்போது வாங்கவும்' — too long → 'வாங்கவும்'
Note: use the respectful form (आप) in Hindi throughout.
Immediate resultLocalised UI strings that sound natural, fit length limits and keep placeholders intact.
ProblemDesign reviews are opinion fights, and usability problems ship anyway.
Checkout: 14 form fields on one screen, coupon box above the pay button, error messages only after submit
Coupon box above Pay — invites leaving to hunt for codes (goal-gradient interruption) — severity 3
Errors only after submit — error prevention heuristic — severity 3 → validate inline
14 fields — cognitive load — severity 2 → autofill address from PIN code
Immediate resultUsability issues mapped to Nielsen's 10 heuristics and the laws of UX, rated by severity, with fixes.
ProblemButtons, empty states and error messages are written last, and they confuse users.
UPI payment screen: enter UPI ID, pay button, states: invalid ID, pending, failed, success
Button: 'Pay ₹499' (not 'Submit')
Invalid ID: 'That UPI ID doesn't look right — it should look like name@bank'
Pending: 'Approve the request in your UPI app. This page updates on its own.'
Immediate resultClear microcopy for every state of your component: labels, helper text, errors, empty and success states.
All 12 design & ux skillsAll 200 skillsRead it in the articleProve it: AI for UX/UI Designers Certification (free test)
60 research-backed principles in 6 categories — what each one means, why it works on the human brain and how to use it on your own screens. Written by Sushant Singh, founder of Science of Apps, who has scaled consumer apps to lacs of users and spent 10+ years leading product across startups and digital businesses in the US, EU & India.
110 real paywalls from top apps, taken apart, rated out of 5 and decoded with the Laws of UX — plus the frameworks, copy and checklists to ship your own. By Sushant Singh, founder of Science of Apps.