From apply-figma-make
Apply Figma Make exported designs to website pages. Converts React/motion code to framework-appropriate code (Astro, Next.js, etc.) with CSS animations.
npx claudepluginhub jaeyeom/claude-toolbox --plugin apply-figma-makeThis skill uses the workspace's default tool permissions.
Apply designs exported from Figma Make to your website pages. Handles the conversion from React/motion.js to your framework's conventions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Apply designs exported from Figma Make to your website pages. Handles the conversion from React/motion.js to your framework's conventions.
This skill activates when:
.zip containing React componentsExtract the zip file to a temporary directory
unzip -o "<path-to-zip>" -d "$TMPDIR/figma-design"
Note: Use $TMPDIR or any suitable temp directory. Claude will determine the appropriate location at runtime.
Identify key files
src/app/App.tsx or similarguidelines/Guidelines.md (if present)src/styles/theme.css, tailwind.cssRead the design file to understand:
IMPORTANT: Before applying, ask the user about constraints:
Task(subagent_type="general-purpose", prompt="
Ask the user using AskUserQuestion:
1. Which page(s) should receive this design?
2. Are there elements to KEEP unchanged? (e.g., existing logo, header, footer)
3. Are there elements to REMOVE from the design? (e.g., badges, specific sections)
4. Any other customizations needed?
")
Common constraints:
Conversion Rules for Astro/Static Sites:
| Figma Make (React) | Convert To |
|---|---|
motion.div with animate | CSS @keyframes animation |
motion.div with whileHover | CSS :hover with transition |
motion.div with whileInView | CSS animation (plays on load) |
useState/useEffect for scroll | CSS or remove if decorative |
[...Array(N)].map() particles | CSS gradients or fewer elements |
Inline style={{}} | Tailwind classes or <style> |
Delegate to executor:
Task(
subagent_type="oh-my-claudecode:executor",
model="sonnet",
prompt="Apply the Figma Make design to [target page].
DESIGN SOURCE: [extracted temp directory]/src/app/App.tsx
TARGET FILE: [path to target page]
CONSTRAINTS:
- [User's constraints from Phase 2]
CONVERSION REQUIREMENTS:
- Convert all motion.js animations to CSS @keyframes
- Convert React state-based animations to CSS transitions
- Replace particle arrays with CSS gradient backgrounds
- Use Tailwind classes where possible
- Add custom CSS in <style> tags for complex animations
PRESERVE:
- Existing imports and layout structure
- Logo references (use existing logo paths)
- Navigation links and routes
OUTPUT: Modified page file with design applied"
)
After initial application, simplify the code:
Task(
subagent_type="code-simplifier:code-simplifier",
prompt="Optimize the recently modified files:
- Remove Figma Make boilerplate
- Consolidate duplicate Tailwind classes into CSS utilities
- Convert repeated HTML into data-driven loops
- Simplify complex animations
- Remove unnecessary wrapper divs
Keep visual design intact - only simplify implementation."
)
Build the project
npm run build
Check for errors - Fix any build/type errors
Report changes - List modified files and key changes
User: Apply this design to homepage
/Users/me/Downloads/Homepage-Design.zip
Claude:
1. Extracts zip to a temporary directory
2. Reads App.tsx to understand design
3. Asks: "Any elements to keep or remove?"
4. User: "Keep our logo, remove the AI badge"
5. Applies design with constraints
6. Optimizes generated code
7. Verifies build passes
8. Reports: "Homepage updated with new hero, cards, CTA sections"
bg-clip-text - Common pattern in Figma designs| Issue | Solution |
|---|---|
| Logo appears wrong size | Check SVG viewBox matches your existing logo |
| Animations janky | Simplify or use will-change CSS property |
| Too many DOM elements | Replace particle arrays with CSS gradients |
| Colors don't match | Map Figma colors to your Tailwind theme |