Plugin Claude Code
A complete design philosophy and practical UI knowledge system for building exceptional interfaces. 13 composable skills covering craft mindset, design critique, typography, color, layout, style, elements, and more. In memory of Jony Ive.
Skill Claude CodeCodex
Practical color system for interface design. Covers color selection methods, contrast and accessibility, structural vs interactive color, primary and secondary colors, color amount and modification, gradients, mastering grays, near-whites, and dark UI. Use whenever making color decisions, choosing palettes, checking…
Skill Claude CodeCodex
Framework for exploring design breadth (structurally different approaches) and depth (pushing a chosen direction as far as possible). Use early in any design process when exploring options, brainstorming alternatives, or pushing a direction deeper. Trigger on: brainstorm, explore, alternatives, options, ideas…
Skill Claude CodeCodex
The foundational design mindset for creating exceptional interfaces. Covers the practice of noticing (seeing what others miss), uncommon care (going beyond expectations), less but better (removing the unessential), and live tuning. Use this skill ALWAYS as the baseline mindset for any design, frontend, UI, or visual…
Skill Claude CodeCodex
Structured framework for reviewing and critiquing interfaces. Provides specific, tangible observations across four lenses: visual design, interface design, interaction consistency, and user context. Use when reviewing, critiquing, auditing, giving feedback on, or self-evaluating any UI — components, pages, apps…
Skill Claude CodeCodex
Practical guide for designing common UI elements and patterns. Covers navigation, input fields, forms, profiles, settings, lists and cards, detail views, sort and filter, tables, modals, and design systems. Use when designing any standard UI element or pattern. Trigger on: navigation, nav, input field, form, login…
Skill Claude CodeCodex
Guide for using imagery in interfaces — photos (static and dynamic), icons, illustrations, and app icons. Covers photo selection, dynamic image handling, icon design and usage, creating simple illustrations, and app icon design. Use when working with images, icons, illustrations, or any visual assets in an interface.…
Skill Claude CodeCodex
Guide structural interface decisions — the bones of a design before visual polish. Covers platform defaults, separation of concerns, information architecture, visual language definition (typeface, color, radius, icons, depth), and interaction model optimization. Use when building a new interface, choosing layouts…
Skill Claude CodeCodex
Practical layout and spacing system for interface design. Covers the box model, grids and containers, implicit grids, negative space, alignment, optical vs mathematical spacing, high vs low density, scale and visual weight, affordance, and interactive layouts. Use whenever making layout decisions, spacing adjustments…
Skill Claude CodeCodex
Framework for defining, measuring, and tracking the specific attributes of quality that matter for a product. Turns vague "needs work" into precise, measurable evaluation. Use when evaluating quality, setting targets, planning improvements, deciding where to focus effort, or aligning a team on what "good" means.…
Skill Claude CodeCodex
Step-by-step process for iteratively improving an existing interface. Works through a specific sequence: remove redundancy, simplify visual treatments, tighten spacing, establish consistency, improve hierarchy, improve data visualization, refine interactions, and craft details. Use when improving, polishing, refining…
Skill Claude CodeCodex
Practical style and visual direction for interfaces. Covers design direction, subtlety, corner radius as personality, borders, depth and shadows, opacity, buttons, and the relationship between form and function. Use when establishing visual direction, choosing component styles, deciding on depth/shadow strategy…
Skill Claude CodeCodex
Practical workflow tactics for interface design projects. Covers the no-stress design process, low-fidelity design (when and how to wireframe), responsive design, platform guidelines (iOS HIG and Material), organizing design files, design reviews, developer handoff, and prototyping strategy. Use when planning a design…
Skill Claude CodeCodex
Practical typography system for interface design. Covers the rule of four (limit type sizes), font weight as meaning, typographic hierarchy, titles and body text, truncation, callouts, interactive text, combining text styles, system fonts, and alternate fonts. Use whenever making typography decisions: choosing fonts…