The AI skills I actually use
A skill is my own process, written down once, so the AI follows it every time instead of guessing.
A plug, not magic
MCP stands for Model Context Protocol. Forget the name. In plain words, it is a plug that lets the AI see your tools and use them directly, instead of you copy-pasting between a chat window and the app.
Without it, "AI helps with Figma" means describing a layer tree in text and hoping the description was right. With the plug in, the AI can open the file, read the actual frames, and make changes through Figma's own plugin API. Same idea for GitHub, or a browser.
Claude Code
FigmaGitHubBrowser
How I actually use it
I run Claude Code with the Figma MCP connected. It reads a frame's structure, then builds or edits components the same way a plugin script would. I also keep a GitHub connection for the code side, and a browser (Playwright) to check a page at different screen widths without tabbing over myself.
None of this replaces deciding what to build. It replaces the slow, manual part of getting it into Figma once I already know what I want.
Rules from my own mistakes
These came from a rules file I keep for myself, written after things actually broke:
- Set sizing modes after resize(), not before. resize() forces both axes to a fixed size. Set auto-layout sizing before it and the auto axis collapses to 1px, as a real sidebar item, card and modal all did to me once.
- Name every layer at creation. Not after. Fixing it later means walking the whole tree and guessing what each layer was for.
- Build small pieces first, reuse them as instances. A button or badge gets built once, then bigger components use an instance of it, not a copy. Change the button once, everything using it follows.
- A component with one variant stays a plain component. Wrapping a single variant in a component set just adds a wrapper with a dropdown that does nothing.
- Drop a variant axis if it never changes. If every variant would show the same value on an axis, that axis does not belong in the name.
- 1sizing modes
- 2resize()
1px
- 1resize()
- 2sizing modes
What still stays mine
The rules exist because I hit the failures first. The AI does not know my naming convention until I write it down, and it does not know a token looks wrong in dark mode until I check. So I still open every file and explain the component to the team myself.
Three real MCP links
Three I actually use:
- Official: Figma MCP server guide. Figma's own server. Lets AI read your frames, components and variables, and write to the canvas with Claude Code.
- Recommended: Figma Console MCP by Southleft. Deeper Figma access, plus a plugin's console logs while I debug my own plugins.
- Recommended: Playwright MCP by Microsoft. Opens a real browser and screenshots a page at phone and desktop sizes. I use it to check this portfolio.