design▌

Establish design tokens, spacing systems, and color palettes for cohesive, accessible visual designs. \n \n Provides modular typography scale, 8-point spacing grid, semantic color tokens, and iconography system with CSS variable templates \n Includes WCAG contrast requirements (4.5:1 for body text, 3:1 for UI), dark mode implementation patterns, and font-pairing guidelines \n Covers responsive typography with clamp() , color accessibility checking, and vertical rhythm techniques for visual consi

Microinteractions, motion design, and state transitions that enhance UI polish and user feedback. \n \n Covers timing guidelines (100ms to 500ms+), easing functions, and purposeful motion principles for feedback, orientation, and focus \n Includes patterns for loading states, skeleton screens, progress indicators, toggles, page transitions, ripple effects, and swipe gestures \n Provides CSS keyframe animations and transition examples alongside Framer Motion implementations for React \n Built-in

Modern framework patterns for building reusable, maintainable UI components across React, Vue, and Svelte. \n \n Covers three composition strategies: compound components, render props, and slots, with framework-specific examples and use cases \n Compares five CSS-in-JS solutions (Tailwind, CSS Modules, styled-components, Emotion, Vanilla Extract) with guidance on when to use each \n Includes component API design principles, accessibility best practices, and patterns for controlled/uncontrolled c

本 Skills 提供了一套工业级标准的 UI 设计规范，用于 Pencil MCP 设计工作。

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

Maintain consistent character appearance across AI-generated images using reference sheets and detailed descriptions. \n \n Create turnaround sheets (front, 3/4, side, back views), expression sheets (6+ emotions), outfit variations, and color palettes to document character design \n Use a 50+ word detailed description anchor reused exactly in every prompt as the most practical consistency technique for small projects \n Train character-specific LoRA models for projects requiring many images, wit

Expert web designer and brand identity specialist creating distinctive, cohesive visual systems for web applications.

Research a codebase and produce an architectural document describing how features or systems work. The output is a markdown file organized for both human readers and future AI agents.

The paradigm shift from screen-centric to relationship-centric design.

Guide creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. This skill covers the full lifecycle: detect what exists, plan the design, build with intention, and verify visually.