{ "id": "design-figma-to-code", "title": "Convert Designs to Code", "description": "Convert a Figma design into a web app", "category": "technical", "job": "design", "featured": true, "example_prompt": "Convert my figma design with file ID 7r0mLHWx2rrjwn79mcNVNE into a webpage. Get specific detailed information and styling about each element and components within each frame. Make sure to implement any interactions or animations and use a placeholder div with a gray background for images.\n\nSome elements are centralized, some are duplicated, make sure to get them correct. And ensure correct alignment and spacing between elements.", "example_result": "I've analyzed your Figma design and converted it into code. Here's the implementation:\n\n```html\n\n\n\n \n \n Landing Page\n \n\n\n \n\n

Transform your workflow

Streamline your process with our intuitive platform

\n \n

\n\n

\n \n

Feature 1

Description of feature 1

\n \n

\n\n\n```\n\n```javascript\n// Animation and interaction implementations\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Feature card hover effects\n const cards = document.querySelectorAll('.feature-card');\n cards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.transform = 'translateY(-8px)';\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = 'translateY(0)';\n });\n });\n});\n```\n\nImplementation Notes:\n1. Responsive Design\n - Breakpoints set at 1200px, 992px, and 768px\n - Mobile-first approach using flexbox and grid\n\n2. Styling Details\n - Font: Inter (weights: 400, 500, 700)\n - Color palette from Figma variables\n - Shadow values matched exactly\n\n3. Animations\n - Smooth hover transitions (0.3s ease)\n - Scroll animations for sections\n - Interactive elements with feedback\n\n4. Component Structure\n - Modular CSS classes\n - Semantic HTML5 elements\n - Accessible markup with ARIA attributes\n\n5. Image Placeholders\n - Gray background (#E5E5E5)\n - Maintained aspect ratios\n - Ready for asset replacement", "extensions": [ { "name": "Developer", "command": "developer", "is_builtin": true, "environmentVariables": [ ] }, { "name": "Figma", "command": "npx -y @hapins/figma-mcp", "is_builtin": false, "environmentVariables": [ { "name": "FIGMA_ACCESS_TOKEN", "description": "Figma API access token", "required": true } ] } ] }