skills.rest
agentdevsl
agentdevslOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-engineer

Establish and enforce consistent UI design direction with cross-session memory.

5|Updated Jan 16, 2026
Search Tags:#design#consistency#UI#memory#design-systems#craft
One-click install
npx skills add https://github.com/agentdevsl/agentpane --skill design-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineer
Source: https://github.com/agentdevsl/agentpane/tree/main/.claude/skills/claude-design-skill
Command: npx skills add https://github.com/agentdevsl/agentpane --skill design-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claude Code teams often struggle to maintain a cohesive UI direction and remember design decisions across sessions. This Skill provides a memory-backed approach to establish and enforce craft principles so design remains consistent as projects evolve.

Core Features & Use Cases

  • Design direction & memory: Set a chosen UI direction (e.g., Precision & Density) and retain it across sessions for all components.
  • Principles enforcement: Apply a 4px grid, symmetrical padding, consistent border radii, and a clear depth strategy to ensure cohesion.
  • Use Case: When kicking off a new product, instruct Claude to establish a system and apply it to initial screens, then reuse it for subsequent pages.

Quick Start

Use the Claude Design Skill to establish a design direction for your project and enable memory of decisions across sessions. For example: "Set direction to Precision & Density with a cool slate color foundation and borders-only depth, then apply to the initial UI and remember for future work."

Frequently Asked Questions about design-engineer

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

FAQPage Schema
How do I maintain UI consistency across Claude Code sessions?▼

To maintain UI consistency across Claude Code sessions, you can establish a memory-backed design direction that retains decisions like color foundations, depth strategies, and typography for reuse in subsequent development work.

What is a design direction system and when do I need one for UI development?▼

A design direction system defines core UI craft principles like a 4px grid, symmetrical padding, and border radii. You need one when building dashboards, marketing pages, or documentation sites to ensure visual cohesion as projects evolve.

How do I set up a design system for a new product UI?▼

To set up a design system for a new product UI, instruct Claude to select a specific direction like Precision & Density, choose a cool slate color foundation, apply borders-only depth, and then apply these principles to initial screens.

Can I enforce a 4px grid and consistent border radii across my project?▼

Yes, you can enforce a 4px grid, symmetrical padding, consistent border radii, and a clear depth strategy by applying principles enforcement to ensure UI craft cohesion across all components and pages.

Does this design memory approach work for marketing pages and documentation sites?▼

Yes, this design memory approach works for marketing pages and documentation sites. It automates the establishment and enforcement of a consistent UI direction across various UI development tasks within Claude Code projects.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
79yuuki79yuuki

component-gallery

Select reusable component patterns from design systems for frontend UI tasks.

Community
Intermediate
MixTapeSoftwareMixTapeSoftware
3

design-principles

Enforce a 4px grid design system for enterprise software interfaces.

Official
Intermediate
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate