skills.rest
GeWuYou
GeWuYouCOMMUNITY
Explore all skills by this author →
GitHub

graft-frontend-figma-intake

Integrates Figma design references into the Graft admin platform workflows.

6|Updated May 11, 2026
Search Tags:#UI development#Figma#design integration#Graft#admin platform
One-click install
npx skills add https://github.com/GeWuYou/Graft --skill graft-frontend-figma-intake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graft-frontend-figma-intake
Source: https://github.com/GeWuYou/Graft/tree/main/plugins/graft-frontend-vibe-toolchain/skills/graft-frontend-figma-intake
Command: npx skills add https://github.com/GeWuYou/Graft --skill graft-frontend-figma-intake

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of incorporating Figma design references into the Graft admin platform, ensuring consistency and efficiency in the development process.

Core Features & Use Cases

  • Figma Reference Integration: Incorporate Figma links, screenshots, and design exports as reference material for Graft frontend development.
  • Design Authority: Maintain Graft's governance and TDesign Vue Next authority while using Figma as a reference.
  • Use Case: When a user provides Figma-derived input, use this Skill to translate design intent into Graft admin patterns without compromising on framework, styling, or routing.

Quick Start

Use the graft-frontend-figma-intake Skill to intake the Figma reference for the new admin dashboard feature.

Frequently Asked Questions about graft-frontend-figma-intake

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Figma designs into the Graft admin platform?▼

This Skill intakes Figma references like links and screenshots to translate design intent into Graft admin patterns. It ensures UI consistency by handling design tokens and component mapping without compromising the TDesign Vue Next framework.

Can I use Figma exports for Graft frontend development without breaking UI consistency?▼

Yes, you can use Figma exports for Graft frontend development without breaking UI consistency. This Skill performs UI consistency checks and maps design tokens to ensure Figma references align with Graft's governance and TDesign Vue Next styling authority.

What is the best way to translate Figma design intent into Graft admin patterns?▼

The best way to translate Figma design intent into Graft admin patterns is by applying this Skill to your frontend workflow. It processes Figma-derived input, handles component mapping, and ensures the design adheres to Graft framework and routing rules.

Does Graft frontend development support Figma references as design input?▼

Yes, Graft frontend development supports Figma references as design input. This Skill incorporates Figma links, screenshots, and design exports directly into your workflow, using them as reference material while maintaining Graft's design authority.

How do I map Figma design tokens to TDesign Vue Next components?▼

You map Figma design tokens to TDesign Vue Next components by using this Skill to process the Figma reference material. It facilitates the translation of design tokens and component mapping to ensure the Figma input matches Graft admin platform standards.

Related Skills

Explore More Software Engineering Skills→
GeWuYouGeWuYou
6

graft-frontend-page-builder

Build and modify Graft admin pages with Vue 3, TypeScript, and TDesign Vue Next.

Community
Intermediate
GeWuYouGeWuYou
6

graft-web-module-scaffold

Create Graft web modules with API connections, routes, and TDesign components.

Community
Intermediate
GeWuYouGeWuYou
6

graft-web-vibe-coding

Develop Graft web pages with TDesign Vue Next components and UI guidelines.

Community
Advanced
effiemincereffiemincer

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced