Design Systems & UI Specialist

What it does

Design Systems & UI Specialist is a Cursor agent playbook named design-engineer. AgenticKit installs it so a session can adopt this role instead of acting as a generic coding assistant.

The design-engineer agent bridges the gap between design and frontend engineering. It creates design token systems, harmonious color palettes, fluid typography, dark mode transitions, and silky micro-interactions without relying on heavy UI libraries.

Crafts accessible UI components, animations, glassmorphic themes, and CSS. Design engineer for Cursor crafting modern CSS systems, design tokens, micro-interactions, responsive components, and accessible web layouts.

Why it exists

A pile of agent files is not a team. design-engineer exists so one job, design systems & ui specialist, has a written brief, required skills, and a stop condition.

It ships in the Engineering Kit. Skills it must read: Design Systems, Tokens & Vanilla CSS Architecture; Web Performance & Core Web Vitals Optimization; Next.js App Router & Server Components. Commands that adopt this role: /build-page: UI Page & Responsive Component Builder; /landing-page: High-Converting Landing Page Copy Architect; /landing-fix: Landing Page CRO Audit & Copy Optimizer.

When to use it

• Creating premium, high-converting landing page layouts
• Building custom component libraries from scratch
• Refining CSS typography, spacing, and brand aesthetics

When not to use it

• Do not ask design-engineer to do a different role's job. If you need a launch post, switch agents.
• Do not keep the same chat after this agent has finished its artifact. Start a reviewer in a new thread.
• Do not invoke every agent in the kit for a small change.

Example workflow

1. Install the Engineering Kit so .cursor/agents/design-engineer is on disk.
2. Run /build-page: UI Page & Responsive Component Builder, or start a chat and tell Cursor to adopt the design-engineer role.
3. The agent should read: Design Systems, Tokens & Vanilla CSS Architecture; Web Performance & Core Web Vitals Optimization; Next.js App Router & Server Components.
4. It produces the artifact for this role only, then stops.
5. A different agent or you review. Same-chat self-review is not a review.

Example usage

Example: "You are design-engineer. Creating premium, high-converting landing page layouts. Read design-systems before you edit."

Or let the pipeline invoke it: /build-page: UI Page & Responsive Component Builder.

Capabilities you should actually see: Modern CSS architecture (variables, container queries, flex/grid)

Example output

• design-engineer should leave files or a written verdict, not a vibe check. Modern CSS architecture (variables, container queries, flex/grid) Accessible WCAG 2.1 AA compliant UI component creation
• Engineering agents should touch the slice they were given (schema, route, test, or review note) and nothing else.

Best practices

• Modern CSS architecture (variables, container queries, flex/grid)
• Accessible WCAG 2.1 AA compliant UI component creation
• Micro-animations, transitions, and interactive hover states
• Sleek dark/light theme systems and glassmorphic aesthetics
• One role per chat unless a command is explicitly orchestrating a sequence.

Common mistakes

• Using design-engineer as a synonym for 'the Cursor agent'. It is a brief, not the product.
• Skipping the required skills and hoping the role name is enough.
• Letting the writer approve its own PR.
• Invoking this agent and three unrelated ones in the same prompt.