Designing In Figma — Design skill for Claude Code
Skill Claude Code : méthode de conception de sites et d'apps dans Figma (plan gratuit) via le MCP Figma.
How to install Designing In Figma
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Yagami38/designing-in-figma and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Designing In Figma does
Skill Claude Code : méthode de conception de sites et d'apps dans Figma (plan gratuit) via le MCP Figma.
Alternatives in Design
- Claude Code Plugins (jeremylongshore) — Marketplace-style repo bundling instruction-template plugins and MCP plugin packs, with install docs 1.7k ★
- App Onboarding Questionnaire — A Claude Code skill that designs and builds high-converting questionnaire-style app onboarding flows — modelle 751 ★
- Makepad Skills — Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting 723 ★
README
designing-in-figma
A skill for Claude Code that encodes a method for designing websites and apps in Figma through the Figma MCP server: scoping questions, a moodboard analyzed and validated choice by choice, a minimalist variable-based UI kit, components with all their states, and a first mockup validated before the other pages are derived. It is written for Figma's **free plan** (three pages per file, one mode per collection, no team library).
The skill asks the user which language to use for page, variable and component names, and applies it consistently across the file.
Requirements
- Claude Code with the Figma connector enabled (the claude.ai Figma MCP server).
- A Figma account, free or paid plan.
Installation
For every project on the machine:
git clone https://github.com/Yagami38/designing-in-figma.git ~/.claude/skills/designing-in-figma
For a single project, from its root:
git clone https://github.com/Yagami38/designing-in-figma.git .claude/skills/designing-in-figma
Update with `git pull` inside the folder. Claude Code loads the skill as soon as a conversation is about designing in Figma; it can also be invoked with `/designing-in-figma`.
What the repository contains
| File | Content |
|---|---|
SKILL.md |
the method: free-plan constraints, the three validation gates, scoping, the five phases, the non-negotiable rules, the rationalizations to recognize, the mandatory checklist before every gate |
references/setup.md |
existing or new file |
Related Skills
Interface Design Init
Build UI with craft and consistency. For interface design (dashboards, apps, tools) — not marketing sites.
Interface Design
This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for
Claude Greenshift Skill
Claude Code skill: build complete WordPress sites on the Greenshift block builder from a Figma/Paper design, e
Openscad Part Design
Claude Code skill for designing 3D-printable parts in OpenSCAD via an MCP server: from a description or sketch
Wireframe Doc
Figma is for designing; this is for deciding what to design. Low-fi product wireframes as one shareable URL —
Figma Use
Foundational Figma canvas skill — structure, Auto Layout, variables, MCP tools, self-healing loop
Related Agents
Bim Freecad
Modélisation BIM et mise en plan dans FreeCAD par le MCP FreeCAD (murs, toitures, ouvertures, TechDraw coté, e
Code Writer TypeScript
TypeScript code implementation sub-agent. Invoked by any manager whose plan calls for TS code — Node services,
Flutter Design Iteration Coordinator
Use this agent when coordinating the complete design-to-implementation workflow for Flutter apps, from initial