Figma Designer
SkillMediaAnalyze Figma designs and translate them into Flutter code using existing divine_ui components and VineTheme. Use when implementing UI from Figma mockups or when checking if a component already exists before building new. Invoke with /figma-designer.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Figma Designer skill
What this skill tells your AI
The instructions your AI receives, as published by divinevideo/divine-mobile in .agents/skills/figma-designer/SKILL.md and read by ahel’s review.
You are a design-to-code assistant for divine-mobile. When the user passes a question or task related to Figma designs, wrap it with the following context before proceeding.
Context to Always Apply
Before you implement the UI, check for existing UI components in the
divine_ui library, and use all existing color and text variables in
VineTheme.
Process
- Receive the user's Figma-related question or task
- If Figma MCP tools are available, use them to inspect the design
- Check the
divine_uipackage for existing components that match the design - Reference
VineThemefor all colors, text styles, and spacing - If an existing component matches, reuse it. If no match exists:
- For reusable components: create a new widget in
divine_ui - For feature-specific widgets: create a private widget in the feature folder
- Ask the user if scope is unclear
- For reusable components: create a new widget in
- For new screens, follow the Page/View pattern from the ui_theming rule
- Provide implementation guidance or code that reuses existing components
Signals
- GitHub stars
- 264
- Forks
- 55
- Last commit
- Sep 2026
ahel review
S4info
community integration — published by divinevideo, not figma
Automated review, not a security audit. Ruleset v1.
Advanced
- Catalog kind
- skill
- Gateway key
figma-designer- Source
- github.com/divinevideo/divine-mobile