lunartech-x/figma-ai-website-design
skills/design-and-media/ui-ux/design-skills/figma-ai-website-design/SKILL.md
Creates websites using Figma Make with Gemini 3 Pro. Use when the user wants to build AI-generated websites, landing pages, or needs to quickly prototype web designs using Figma's AI capabilities.
$ install --global
skillsauthnpx skillsauth add lunartech-x/superpowers figma-ai-website-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 6, 2026, 10:07 PM57.5s1 file scanned
SKILL.md
- name:
- figma-ai-website-design
- description:
- Creates websites using Figma Make with Gemini 3 Pro. Use when the user wants to build AI-generated websites, landing pages, or needs to quickly prototype web designs using Figma's AI capabilities.
Figma AI Website Design
Build production-quality websites using Figma Make without manual coding.
When to use this skill
- User wants to create a website using AI
- User needs to prototype a landing page quickly
- User wants to leverage design inspiration from Figma Community
- User mentions Figma Make or Gemini 3 Pro
Prerequisites
- Enable Gemini 3 Pro in Figma:
- Settings → General → Experimental Model → Select "Gemini 3 Pro"
Workflow
Phase 1: Gather Inspiration
- [ ] Go to Figma Community and search for design styles (e.g., "Apple", "Linear", "Nike")
- [ ] Duplicate a design that matches desired aesthetic
- [ ] Remove unnecessary elements (logos, graphics) to speed up transfer
- [ ] Copy the cleaned design
Phase 2: Build with Figma Make
- [ ] Open Figma Make (Recent → Make)
- [ ] Paste the inspiration design
- [ ] Prompt:
build out this UI exactly - [ ] Review output for animations and mobile responsiveness
Phase 3: Add Animated Elements
- [ ] Add video backgrounds from Design Rocket or Cloudflare hosting
- [ ] Use 21st.dev for pre-built animated components (navbars, logos)
- [ ] Prompt:
add a video under text and make sure it is stretching from side to side
Phase 4: Add Component Libraries
Use 21st.dev for animated components:
Navigation Menu:
- Search "navigation menu" on 21st.dev
- Copy the prompt for desired style
- Paste in Figma: "add this navbar"
Logo Section:
- Search "logos" on 21st.dev
- Copy prompt for animated logo marquee
- Paste in Figma: "add this logo section below video"
Key Prompts
Hero Section with Background
add a video under text and make sure it is stretching from side to side
Animated Components
add this navbar [paste 21st.dev prompt]
below add this logo section [paste 21st.dev prompt]
add this to the background of hero [paste video URL]
Get AI-Generated Prompt
give me a prompt to build out this site with all of the details to have exact design like we have
Video Background Sources
- Design Rocket: Pre-hosted video backgrounds ready to use
- Cloudflare: Host custom videos for Figma Make
- Minimax/Hailuo AI: Generate custom animated backgrounds
Animated Background Prompt (for AI video generators)
animate this make it spin make the spinning noticeable do not change the position make it looped
Resources
- Figma Community
- 21st.dev - Animated components
- Design Rocket - Video backgrounds
Related Skills
lunartech-x/anndata
tools
VerifiedTrustedCommunity
Data structure for annotated matrices in single-cell analysis. Use when working with .h5ad files or integrating with the scverse ecosystem. This is the data format skill—for analysis workflows use scanpy; for probabilistic models use scvi-tools; for population-scale queries use cellxgene-census.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alphafold-db
testing
VerifiedTrustedCommunity
Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alpha-vantage
development
VerifiedTrustedCommunity
Access real-time and historical stock market data, forex rates, cryptocurrency prices, commodities, economic indicators, and 50+ technical indicators via the Alpha Vantage API. Use when fetching stock prices (OHLCV), company fundamentals (income statement, balance sheet, cash flow), earnings, options data, market news/sentiment, insider transactions, GDP, CPI, treasury yields, gold/silver/oil prices, Bitcoin/crypto prices, forex exchange rates, or calculating technical indicators (SMA, EMA, MACD, RSI, Bollinger Bands). Requires a free API key from alphavantage.co.
14SKILL.mdUpdated May 16, 2026
lunartech-x/aeon
development
VerifiedTrustedCommunity
This skill should be used for time series machine learning tasks including classification, regression, clustering, forecasting, anomaly detection, segmentation, and similarity search. Use when working with temporal data, sequential patterns, or time-indexed observations requiring specialized algorithms beyond standard ML approaches. Particularly suited for univariate and multivariate time series analysis with scikit-learn compatible APIs.
14SKILL.mdUpdated May 16, 2026