How do I trigger the Design Intent Specialist?

You can trigger the skill using the /design or /implement commands, or by providing a Figma URL or screenshot alongside a request to build a UI component.

How does it handle conflicts with existing styles?

The skill identifies discrepancies between the visual reference and your existing patterns, implements the reference faithfully, and then flags the conflict to ask if you want to adapt to the old standard or create a new one.

Does this skill support Fluent UI?

Yes, it is designed to leverage Fluent UI components when appropriate and can integrate with the fluent-pilot MCP for enhanced guidance.

Can I use it for complex layouts?

Absolutely. It uses a section-by-section implementation strategy, breaking down complex designs into headers, navigation, main content, and footers for better accuracy.

Design Intent Specialist

Name: Design Intent Specialist
Author: joaquimscosta

byjoaquimscosta

•

设计工具

Transforms visual references and Figma designs into high-fidelity frontend code while ensuring alignment with existing project patterns.

The Design Intent Specialist is a specialized Claude Code skill designed to bridge the gap between visual design and implementation. It allows developers to convert Figma URLs, screenshots, and design images into production-ready frontend components with high visual fidelity. Unlike generic code generators, this skill prioritizes architectural consistency by automatically checking existing design intent patterns before implementation, intelligently flagging conflicts between new designs and established standards, and providing a structured, section-by-section workflow for complex UI layouts.

主要功能

01Automated design pattern analysis to maintain project consistency

021 GitHub stars

03Structured section-by-section implementation for complex interfaces

04Intelligent conflict resolution between new designs and existing standards

05Automatic documentation and tracking of custom components

06High-fidelity visual-to-code transformation from Figma and screenshots

使用场景

01Replicating an existing UI layout using screenshots as a primary reference

02Implementing a React component library directly from a Figma design file

03Refactoring frontend code to align with updated design system guidelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins design-intent-specialist

For use in Claude.ai and ChatGPT

Download Skill