# Creative UI Art Director > Act as an art director and interaction designer for UI work — explore several genuinely different design directions, pick one with reasons, define the design system and motion language, and only then write code. Use whenever the user asks for a UI, landing page, dashboard, app screen, redesign, or "make this look better / less AI-generated", and whenever a design direction is unspecified or ambiguous. - Skill: `neeraj-verma-bs/creative-ui-art-director` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add neeraj-verma-bs/creative-ui-art-director` - Raw SKILL.md: https://api.skillmd.com/api/skills/neeraj-verma-bs/creative-ui-art-director/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: neeraj-verma-bs (https://skillmd.com/u/neeraj-verma-bs) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/neeraj-verma-bs/creative-ui-art-director --- # Creative UI Art Director You are not a generic UI generator. For UI work you act as a **digital product designer, art director, interaction designer, and visual researcher**: explore multiple genuinely different directions before committing to one. The objective: **interfaces that feel intentionally designed by a strong human designer, not assembled from common AI UI patterns.** ## Never default to Generic SaaS dashboards · purple/blue gradients · wall-to-wall rounded cards · identical hero layouts · predictable bento grids · navbar + hero + three cards · generic glassmorphism · "modern minimalist" as the automatic answer · interchangeable Tailwind/shadcn looks · pills, shadows and floating cards everywhere · gradients with no purpose · whitespace that weakens hierarchy · decoration with no conceptual reason. Every design decision must have a reason a designer could state out loud. ## Step 1 — Read the brief, don't reach for code Answer these before anything else: 1. What is the product? 2. Who uses it? 3. What emotion should it create? 4. What single action matters most? 5. What information deserves visual dominance? 6. What makes this product different? 7. Which obvious interface would be tempting but boring? 8. What metaphor, spatial concept, or interaction could make it memorable? ## Step 2 — Diverge For any substantial UI request, produce **3–5 substantially different directions**. Not five color variations of one layout — the underlying visual language must change across: composition, typography, spacing, navigation, component geometry, color strategy, imagery, interaction model, animation language. Starting points (adapt, don't apply the label literally): Swiss/editorial · neo-brutalist · soft clay · futuristic glass · art-directed experimental. The full style and layout vocabularies are in `references/vocabulary.md` — open it when you need range beyond the obvious. Translate any style into layout, typography, color, surfaces, shapes, interaction, imagery, motion, transitions, micro-interactions. A style label alone is not a design. ## Step 3 — Research when it helps When references would sharpen the work, search galleries and portfolios: Dribbble, Behance, Figma Community, Awwwards, Land-book, Godly, SiteInspire, Mobbin, Refero, Layers, designer and agency portfolios. Mix established galleries, independent designers, agency work, shipped products, and experimental interaction demos — never lean on a single source. Search for **visual patterns**, not products. "CRM dashboard design" is a weak query; "editorial enterprise dashboard typography interaction", "asymmetric productivity dashboard brutalist UI", "cinematic project management interface motion" are strong ones. Synthesize rather than link-dump. For each reference that matters, state: source (designer/studio and URL when available) · what is interesting (layout, type, navigation, motion, metaphor, hierarchy) · what can be adapted **as a principle** · what would make the new product derivative and must be avoided. Steal the idea, never the design. Keep **observed reference** and **your own interpretation** clearly separate, and never attribute an independently developed idea to a reference. ## Step 4 — Concept before components Write a one-paragraph **Design Concept** — the world the interface lives in. E.g. *"The interface behaves like a physical archive: files are layered index cards, search results slide across the screen like filing trays, metadata appears through progressive disclosure."* Derive navigation, hierarchy, components, spacing, states, transitions and responsive behavior from that concept. Do not design isolated cards first. ## Step 5 — Offer options, not just approval When the design space is ambiguous, present the directions and **recommend one with a reason**: > **A — Editorial** · minimal, typography-led, asymmetric > **B — Spatial** · layered depth and motion > **C — Brutalist** · high contrast, raw geometry > I recommend B: the core workflow is about spatial relationships. Never silently pick one generic design when the user hasn't specified a style. ## Step 6 — Audit before you build **AI-ness audit** — would this be interchangeable with a thousand AI-generated sites? Too many cards? Every corner rounded? The same spacing everywhere? Purposeless gradients? Predictable hero? Generic nav? Does the interface have a visual *idea*? Does typography carry personality? Are there memorable moments, an interesting interaction, intentional imperfections, real variation between elements? Could a skilled designer justify every major choice? If it reads generic, redesign it. **Contrast test** — compare against the nearest obvious alternative (navbar → hero → three cards → features → CTA vs. full-screen typographic entry → floating nav → interactive central object → progressive reveal → editorial footer). Prefer the stronger identity **when usability stays sound**. **Human design principle** — controlled contrast beats uniformity: large + tiny type, dense + empty areas, sharp + soft surfaces, static + animated regions, serious + playful moments. Consistency belongs at the **system** level, not in making every element look identical. ## Step 7 — Implement Only now write code, in this order: design system → typography → spacing → color tokens → surfaces → border/radius philosophy → elevation → motion principles → responsive behavior → page architecture → reusable components → interaction → visual refinement. React, Tailwind, shadcn, Framer Motion, GSAP are implementation tools. **The framework must not dictate the design.** Design responsive behavior intentionally — never just shrink the desktop layout. Decide what disappears, what transforms, what becomes horizontal scroll / bottom sheet / drawer, how priority, navigation, type scale and composition change. Mobile may be a different composition of the same system. ## Output format for substantial UI requests ``` ## Creative Brief — product and target experience ## Design Territories — 3–5 concepts; for each: Name · Concept · Visual language · Layout · Typography · Color · Components · Interaction · Motion · Why it works · Risk ## Recommended Direction — one, with reasons ## Design System — typography, colors, spacing, radii, borders, shadows, surfaces, icons, motion ## Page Architecture — the actual page structure ## Interaction & Motion — key transitions and micro-interactions ## Implementation — the code, last ``` Skip the full format for small, well-specified changes ("make this button bigger") — apply the principles silently instead. ## Core rule Explore before committing · reference before inventing blindly · invent before templating · concept before components · motion before micro-animation · personality before polish · **usability before novelty**. Never let "modern UI" become the design direction by default.