lidge-jun/figma-implement-design
figma-implement-design/SKILL.md
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
$ install --global
skillsauthnpx skillsauth add lidge-jun/cli-jaw-skills figma-implement-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 5:38 PM159.9s1 file scanned
SKILL.md
- name:
- figma-implement-design
- description:
- Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
Implement Design
Translate Figma designs into production-ready code with pixel-perfect accuracy via the Figma MCP server.
Prerequisites
- Figma MCP server connected and accessible
- Figma URL in format
https://figma.com/design/:fileKey/:fileName?node-id=1-2- Or with
figma-desktopMCP: select a node directly in the Figma desktop app (no URL required)
- Or with
Setup (if MCP not configured)
codex mcp add figma --url https://mcp.figma.com/mcp- Set
[features].rmcp_client = trueinconfig.tomlor runcodex --enable rmcp_client codex mcp login figma- Tell user to restart codex after login
Workflow
Step 1: Get Node ID
From URL: Extract :fileKey (segment after /design/) and node ID (node-id query param).
- Example:
https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15- fileKey:
kL9xQn2VwM8pYrTb4ZcHjF, nodeId:42-15
- fileKey:
From desktop app (figma-desktop MCP only): tools auto-use the currently selected node; fileKey is not needed.
Step 2: Fetch Design Context
get_design_context(fileKey=":fileKey", nodeId="1-2")
Returns layout properties, typography, colors, component structure, spacing.
If response is truncated:
- Run
get_metadata(fileKey, nodeId)for the node map - Fetch individual child nodes with
get_design_context
Step 3: Capture Visual Reference
get_screenshot(fileKey=":fileKey", nodeId="1-2")
Keep this screenshot accessible throughout implementation — it's the source of truth.
Step 4: Download Assets
Download images, icons, SVGs returned by the MCP server.
- Use
localhostsources directly when provided - Use assets from the Figma payload rather than importing new icon packages
Step 5: Translate to Project Conventions
- Treat Figma MCP output (typically React + Tailwind) as a design representation, not final code
- Replace Tailwind utilities with the project's design system tokens
- Reuse existing components (buttons, inputs, typography) instead of duplicating
- Respect existing routing, state management, and data-fetch patterns
Step 6: Achieve Visual Parity
- Match the Figma design exactly; avoid hardcoded values — use design tokens
- When project tokens differ from Figma specs, prefer project tokens but adjust spacing/sizing to maintain visual fidelity
- Follow WCAG accessibility requirements
Step 7: Validate
Compare final UI against the Figma screenshot:
- [ ] Layout matches (spacing, alignment, sizing)
- [ ] Typography matches (font, size, weight, line height)
- [ ] Colors match exactly
- [ ] Interactive states work (hover, active, disabled)
- [ ] Responsive behavior follows Figma constraints
- [ ] Assets render correctly
- [ ] Accessibility standards met
Implementation Rules
- Place components in the project's designated design system directory
- Extend existing components rather than creating new ones when a match exists
- Map Figma design tokens to project design tokens
- Extract hardcoded values to constants or design tokens
- Add TypeScript types for component props
Troubleshooting
| Issue | Solution |
|-------|----------|
| Figma output truncated | Use get_metadata for node structure, then fetch specific nodes |
| Design doesn't match | Compare side-by-side with screenshot; check spacing, colors, typography in design context data |
| Assets not loading | Verify MCP server's assets endpoint accessible; use localhost URLs directly |
| Token values differ from Figma | Prefer project tokens for consistency; adjust spacing/sizing for visual fidelity |
Resources
- Figma MCP Server Documentation
- Figma MCP Tools and Prompts
- Figma Variables and Design Tokens
Related Skills
lidge-jun/goal
development
VerifiedTrustedCommunity
Goal execution guidelines with PABCD integration, verification tiers, documentation workflow, and AI-driven planning
4SKILL.mdUpdated Jun 5, 2026
lidge-jun/xurl
tools
VerifiedTrustedCommunity
A CLI tool for making authenticated requests to the X (Twitter) API. Use this skill when you need to post tweets, reply, quote, search, read posts, manage followers, send DMs, upload media, or interact with any X API v2 endpoint.
4SKILL.mdUpdated May 7, 2026
lidge-jun/xlsx_original
development
VerifiedTrustedCommunity
Use this skill any time a spreadsheet file is the primary input or output (.xlsx, .xlsm, .csv, .tsv). This includes: creating, reading, editing, analyzing, or formatting spreadsheets; cleaning messy tabular data; converting between formats; and data visualization with charts. Also use for pandas-based data analysis when the deliverable is a spreadsheet. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration.
4SKILL.mdUpdated May 6, 2026
lidge-jun/officecli-financial-model
tools
VerifiedTrustedCommunity
Use this skill when the user wants to build a financial model, 3-statement model, DCF valuation, cap table, scenario analysis, or financial projections in Excel. Trigger on: 'financial model', '3-statement model', 'DCF', 'cap table', 'pro forma', 'projections', 'sensitivity analysis', 'waterfall', 'debt schedule', 'break-even', 'discounted cash flow', 'capitalization table', 'fundraising model', 'WACC calculation', 'scenario analysis model'. Input is a text prompt with assumptions. Output is a single .xlsx file with formula-driven, interconnected statement sheets.
4SKILL.mdUpdated May 6, 2026