Help us improve
Share bugs, ideas, or general feedback.
From design-intent
Implements precise frontend UIs from Figma URLs, screenshots, or design images. Checks existing design patterns first, prioritizes visual fidelity, flags conflicts, and resolves with user guidance.
npx claudepluginhub joaquimscosta/arkhe-claude-plugins --plugin design-intentHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-intent:design-intent-specialistThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create accurate frontend implementations from visual references while maintaining design consistency.
Implements pixel-perfect UIs from Figma designs, mockups, or specs by extracting exact dimensions, colors, typography, shadows, and assets for zero-deviation code reproduction.
Builds production-grade web UIs like landing pages, apps, dashboards; detects/respects existing design systems; covers composition, typography, color, motion, copy; verifies via screenshots.
Share bugs, ideas, or general feedback.
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.
Before any implementation:
/design-intent/patterns/ directoryWhen visual references conflict with existing design intent:
For complex designs, break down into:
Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.
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.
Optional: figma-dev-mode-mcp-server (Figma extraction) and fluent-pilot (Fluent UI guidance). Works without MCPs using screenshots.
Triggered by:
/design-intent workflow (automatic invocation)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.