Wensity

Design director skill.

The core of the pack and the answer to AI slop UI. Your agent reads the project, writes a short design plan, checks it for generic choices, builds it and critiques what it made before handing it back.

Most AI-made pages look alike because no one made a call: the defaults stay, and every section comes out the same shape. This skill gives your agent a design lead's habits. It settles the direction, picks the single bold move the page is remembered for and writes down real type, color, spacing, surface and motion values before touching code, then builds with your focused skills and critiques the rendered page on a phone and a desktop screen. Anything you specify, a style, a font or a reference, overrides its own taste.

Skill
wensity-design-director
Plan
Included with Wensity Pro
Loads when
Designing, building or restyling a page, screen or app, or when the UI looks generic
Works in
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
Format
Agent Skills (SKILL.md), plain files in your project
Pack
One of the Wensity design skills for AI coding agents

Install

1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.

terminal
pnpm dlx wensity@latest login

2. Add the skill. It goes into every agent the CLI finds in your project.

terminal
pnpm dlx wensity@latest skills add wensity-design-director

Design director comes with Wensity Pro, together with every Pro skill, component, block and template.

Get Pro

When it loads

You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:

  • Build a landing page for my invoicing app. It should look custom, not like a template.
  • Redesign this dashboard. It looks bland.
  • This page looks AI-made. Make it look designed.

What it covers

Read
What the product is, who lands on the page, and whether the page sells, gets used, gets read or shows work. It reads the existing tokens, fonts and components first.
Plan
A short written plan with a direction sentence that rules things out, one signature move, and real values for type, color, space, surfaces and motion.
Review
The plan is checked against a list of generic choices in structure, type, color, motion and copy, and each one is changed or justified.
Build
Routes each part of the work to the matching focused skill, with a one-line fallback rule when that skill is not installed.
Critique
A squint test, a check against the plan, the edges (long names, empty lists, 320px, keyboard) and removing one decoration before hand-off.

What are you building?

Pick a kind of page to see which skills the director loads for it, in the order the work needs them. Each one links to its own page.

What are you building?

design-directorMode Sell6 of 12 skills loaded

With the skill: It reads the job, names the mode, and loads only the skills that job needs. Each one brings the values and rules for its part; the rest stay out of the way.

Replay a run

One brief taken through all five steps. Watch Review strike out the generic choices in the first plan and say what replaced each one.

Brief: A landing page for Tidepool, a booking app for surf schools.

Subject and visitor

    Press Play the run to watch all five phases, or open any one.

    With the skill: It learns the subject first, writes the choices down, strikes out the generic ones, builds from the plan and checks the result.

    Key rules

    The brief wins
    Whatever you ask for is built, even a choice the skill would normally steer away from.
    One signature
    Boldness goes into one memorable element. Everything else stays quiet so it can stand out.
    Values, not adjectives
    The plan says sizes, weights and colors, never just "large" or "modern".
    No eyebrow labels
    No tiny all-caps kicker text over headings, not even inside drawn product mockups.
    No invented proof
    Fake logos, numbers and testimonials are replaced by clearly marked placeholders.
    Earlier decisions stay
    Rules in your DESIGN.md beat the skill's defaults, and a choice you rejected does not come back.

    Plan first

    The same brief built twice: once straight into code, once after a short written plan. Flip the switch to compare the two pages.

    Brief: a landing page for Tidepool, a booking app for surf schools.

    Book smarter

    Book surf lessons seamlessly

    The all-in-one platform for modern surf schools.

    Fast

    Secure

    Simple

    plan.mdNot written

    No plan. The agent opened page.tsx and started writing the hero.

    Without the skill: With no plan every choice falls back to the default, so the page comes out like the last thousand: a label chip, a gradient word, three icon cards and a purple glow.

    Files

    Everything installs as plain files in your project, in a folder named after the skill.

    SKILL.md
    The five-step workflow, the plan format and the generic-UI list.

    Works well with

    • UI review and polish

      Pro

      A tag-aware code scanner and a rendered review across 12 categories, ranked P0 to P2, with a full checklist.

    • Landing page

      Pro

      Message first, page structure, hero, real proof, features, pricing, FAQ, motion and performance.

    • DESIGN.md generator

      Pro

      Pulls a project's real design system into DESIGN.md, or starts from four contrast-checked starter systems.