Extract structured design intent from Figma frames into Markdown documents.
npx skills add https://github.com/razorpay/ai-playbook --skill design-intel
Please help me install this Agent Skill. Skill: design-intel Source: https://github.com/razorpay/ai-playbook/tree/main/skills/design-intel Command: npx skills add https://github.com/razorpay/ai-playbook --skill design-intel
This Skill removes the uncertainty in translating a Figma design into production code by producing structured, build-ready design intent instead of leaving the downstream compiler to guess the designer’s intent.
Use the design-intel skill to extract intent from a Figma frame by asking for “Give me design intel for <Figma frame URL or ID>”.
High-intent search queries and answers about installing and using this skill.
You can extract design intent from a Figma frame by reading its structure and outputting a Markdown document. This process captures layout primitives, interaction states, and accessibility considerations to generate build-ready UI code.
Mapping Figma components to Blade primitives involves analyzing the frame structure and identifying the closest matching primitive. If no exact match exists, the system flags gaps to ensure the design intent is accurately captured for production code generation.
Yes, you can capture interaction states and accessibility considerations during design intent extraction. The process records visible variants, flags missing states, and documents accessibility requirements to ensure the UI code is shippable.
Yes, design intent extraction supports multi-frame flows. It can generate a single combined intent document for a sequence of Figma frames representing a component or flow across various states like empty, loading, success, and error.
You need a Markdown document for design-to-code workflows to provide a stable, structured representation of design intent. This prevents downstream production compilers from guessing the designer's intent regarding layout and component variants.
A limitation when extracting design intent is that the system flags gaps when no exact Blade primitive match exists. Additionally, the extraction relies on reading the frame structure via Figma MCP, which may require clear frame organization to capture all open questions and blockers.
EstomTranslate Figma designs into React and Tailwind UI code.
funsaizedTranslate frontend design requests into runnable UI implementations with browser verification.
i3ringitDetect and fix visual differences between Figma designs and web implementations.
jaypatrickTranslate Figma designs into code using Figma MCP and design tokens.
