Design intent specialist
Skill joaquimscosta/arkhe-claude-plugins/plugins/design-intent/skills/design-intent-specialist
Supercharge Claude Code with 109 specialized components — 22 agents, 32 commands, 55 skills across 13 modular plugins. Deep reasoning, autonomous dev loops, DDD architecture, design system enforcement, git automation, and more.
npx -y skills add joaquimscosta/arkhe-claude-plugins --skill design-intent-specialistAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 21 stars21 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
3.4 KB, as published. Nobody here has run it
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-intentworkflow (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.