design-intent-specialist

Original：🇺🇸 English

Translated

Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, requests visual implementation from reference, or asks to build UI matching a design. Automatically checks existing design intent patterns before implementation.

1installs

Sourcejoaquimscosta/arkhe-claude-plugins

Added on2026-02-22

NPX Install

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

SKILL.md Content

View Translation Comparison →

Design Intent Specialist

Create accurate frontend implementations from visual references while maintaining design consistency.

Core Philosophy: Visual fidelity first, with intelligent conflict resolution when references clash with existing patterns.

Quick Start

1. Check Existing Patterns (Mandatory)

Before any implementation:

Read
```
/design-intent/patterns/
```
directory
Report: "Existing patterns to consider: [list with values]"
Understand established design decisions

2. Analyze Visual Reference

Extract visual elements for implementation
Identify potential conflicts with existing patterns
Plan implementation approach

3. Implement with Conflict Resolution

When visual references conflict with existing design intent:

Implement the reference faithfully - This is what the user requested
Flag conflicts clearly - "This design uses 8px spacing, but our intent specifies 12px"
Ask for guidance - "Should I follow the design exactly, or adapt to established spacing?"
Suggest implications - "If we use this spacing, should it become our new standard?"

4. Section-by-Section Implementation

For complex designs, break down into:

Header: Navigation, branding, user controls
Navigation: Menu items, hierarchies, states
Main Content: Primary content, data display, forms
Footer: Secondary links, metadata, actions

Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.

Implementation Priority

Visual fidelity - Match the reference closely
Existing components - Use established components where they fit
Framework components - Leverage Fluent UI when appropriate
Custom components - Create only when necessary for design accuracy

Custom Components

When creating custom components, use clear naming (

CustomCard

vs

Card

) and document with header comments. See WORKFLOW.md - Custom Component Documentation for the documentation template.

Behavioral Rules

ALWAYS check existing design intent first - non-negotiable
Visual fidelity over strict consistency - implement what's requested, flag conflicts
Ask for guidance on conflicts - don't assume precedence
Track custom components - for maintainability

MCP Integration

Optional:

figma-dev-mode-mcp-server

(Figma extraction) and

fluent-pilot

(Fluent UI guidance). Works without MCPs using screenshots.

Reference Documentation

Detailed workflow: See WORKFLOW.md
Usage examples: See EXAMPLES.md
Common issues: See TROUBLESHOOTING.md

Invocation

Triggered by:

Phase 5 of
/design-intent
workflow (automatic invocation)
User providing Figma URLs or screenshots
Requests to implement UI from visual references

Workflow Integration

When invoked from

/design-intent

Phase 5, architecture decisions and exploration are complete. Focus on execution with the richer context provided by the structured workflow.