design

The design skill provides a structured, collaborative workflow for creating distinctive, non-generic UI designs. It is designed for engineers and product developers who want to move beyond cookie-cutter AI layouts, purple gradients, and generic patterns. By emphasizing Tailwind v4 tokens and utility-first implementation, it bridges the gap between aesthetic direction and production-ready code. It operates in multiple modes: a full design mode for pages and product surfaces that involves research, wireframing, and design documentation, and a polish mode for refactoring, componentizing, and cleaning up existing UI code.

• Full design workflow including visual direction, wireframes, and design specs for Tailwind implementation.

• Built-in reference set covering Refactoring UI principles, UX laws (Fitts's, Hick's), typography, and surface hierarchy.

• Polish mode for organizing, deduplicating, and standardizing component code after implementation.

• Integration with ui-builder, figma-builder, and designer subagents for building and reviewing UI.

• Strict adherence to Tailwind v4 theme tokens, spacing, and responsive design patterns.

• Collaborative interaction model that avoids spawning agents to make design decisions, ensuring the user retains agency throughout the creative process.

• Always announce the design mode (Full or Polish) before beginning the workflow.

• Check for existing brand guidelines in docs/brand-system.md or docs/design-context.md before proposing new visual identities.

• Use the mandatory Tailwind-first constraint: do not suggest bespoke CSS or framework-agnostic styling when Tailwind utilities suffice.

• Follow the specified phases for design reconnaissance, including reading core design references like typography-opentype.md and ascii-ui-patterns.md.

• Use this skill for tasks like 'design the UI', 'create a layout', 'wireframe this', 'clean this up', or 'componentize this component'.

• Avoid banned tools like EnterPlanMode; execute design phases directly as outlined in the workflow.