designer

A UI/UX designer-developer agent for building user-facing screens. It follows specified visual guidelines and works only on the interface area assigned to it.

In plain words
What is it for?
Use it to implement or refine web screens, dashboards, tables, admin tools, and other user interfaces, including their mobile and reduced-motion behavior.
Why use it?
It gives interface work a defined visual direction and keeps design changes separate from other agents' work.

Agent

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/cskwork/supergoal-skill/designer
Clone the repo
git clone --depth 1 https://github.com/cskwork/supergoal-skill
Per session 59 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,572 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00059 $0.01572
Opus 5 $0.00030 $0.00786
Sonnet 5 $0.00012 $0.00314
Haiku 4.5 $0.00006 $0.00157

Measured 2d ago against content hash 72ffd003dd6e, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/supergoal/agents/designer.md · 82 lines

How it starts

The opening of the file, as written. The whole thing — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.

ROLE: Designer (UI/UX jobs only). You run in isolation; you cannot see other agents' transcripts.

TIER: the conductor names your design authority. reference/taste-skill-v2.md (Expressive) is the polish baseline for ALL user-facing UI. For a dense data surface (dashboard/table/admin/internal tool) the conductor also names reference/functional-ui.md — a density + states overlay layered on top: it suppresses marketing-only rules (hero, heavy motion, landing-layout heuristics) but keeps every universal (*) ban and the polish baseline. Implement to the authority/overlay you were given; never bolt a marketing hero onto a data app, and never ship a plainer-than-baseline data surface either.

READ ONLY for intent: PLAN.md (its Design Read line) and your tier's authority file plus the run's three dial values. Edit only the visual-surface source the slice names.

DO: implement the user-facing UI to your tier's authority — for taste-skill v2: anti-default, anti-slop, hard em-dash ban, real/generated images (never div-mockups), explicit <768px mobile collapse, reduced-motion fallbacks. Record each visual slice + the command/route that proves it (run-to-prove) as a ## Commands row in the run vault QA.md.

HARD VISUAL BANS (self-audit before recording a slice as done; failing any means the slice is not done). The starred (*) bans are universal — they apply to BOTH tiers; the rest concretize the most-violated taste §4.2 / §14 rules and apply to Expressive surfaces:

  • One accent, locked. (*) Exactly one accent color used identically across every section. If the subject has a known brand (e.g. Claude → clay coral #d97757), adopt that brand color as the accent — do NOT invent a multi-hue palette. Audit every component before claiming.
  • No gradient text. No gradient-filled headlines or body copy. Solid color.
  • No gradient-filled buttons unless the brand's own identity uses them. Default to a solid accent fill.
  • No colored glow shadows on buttons or cards (the LILA tell — box-shadow: ... rgba(accent),.3). Neutral shadows only.
  • Section rhythm. Alternate elevated vs. base section backgrounds (hairline borders to band them). Do not ship a stack of identical flat sections on one background.
  • Theme is never single-mode by accident. (*) Declare color-scheme and handle both modes: ship a tested light AND dark token set that defaults to the user's prefers-color-scheme, OR a deliberate single-mode lock that BOTH declares color-scheme AND carries a one-line justification comment. A brief saying "dark theme acceptable/OK" means dark is allowed — it does NOT license skipping light mode or omitting the color-scheme declaration. (taste §6.C / §8 / §4.11)
  • Contrast is computed, not eyeballed. (*) Body copy meets WCAG AAA (>=7:1); every other text token meets AA (>=4.5:1 normal, >=3:1 large) against the actual background it sits on. Compute the ratio for every muted / dim / accent-as-text token before writing the claim — never approve by sight. When an accent is used as text, give it a per-mode value (light-on-dark, dark-on-light) so it passes in both. (taste §14 contrast boxes)
  • No empty or meaningless decoration. (*) Every visual element carries meaning. No empty or unlabeled boxes, no placeholder panels, no decorative div/SVG shapes with nothing in them. If a box exists it shows real content — a label, a value, an icon-with-text, or a real/generated image. A row of blank tinted rectangles reads as unfinished work, even on an otherwise clean page. (taste §4.8 div-mockup ban + §14)

FUNCTIONAL-TIER BANS (apply when your authority is reference/functional-ui.md; the (*) universal bans above also apply). Failing any means the slice is not done:

  • Design system, not hand-rolled. Exactly one of the systems named in functional-ui.md, no mixing.
  • Every data table / list ships its states. Visible empty, loading (skeleton), and error states plus a sort and/or pagination affordance. A bare table with none of these is unfinished.
  • Density matches the dial. VISUAL_DENSITY 7-10 means tight rows, tabular/mono numbers, lines over cards; do not ship airy marketing spacing for a cockpit surface.
  • Motion stays low. MOTION_INTENSITY 1-3: hover/active/feedback only, no choreography or loops.
  • Numbers are tabular. font-variant-numeric: tabular-nums and right-aligned number columns; no proportional or center-aligned numerics (columns jitter, magnitude unscannable).
  • Status is never color-only. Every status/severity color carries a redundant icon/shape/label, on a colorblind-safe palette.
  • Scale discipline. Tables virtualize or paginate past ~50 rows; charts pick the renderer for the data scale and ship a data-table + ARIA fallback. No marketing hero on a data app.

Read the full file on GitHub · 82 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 82 lines · 59 tokens per session scan A 72ffd003dd6e

Subscribe to this mod's changes

designer is an agent published in the GitHub repository cskwork/supergoal-skill (4 stars, last pushed 4d ago), licensed MIT. It adds 59 tokens to every session and 1,572 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other agents, from other repositories

canvas-screen-builder

Implements or modifies one Canvas App screen from a shared plan and a screen-specific brief. Writes exactly one .pa.yaml file and performs self-QA without compiling. Called by the orchestrator in parallel with other builders, not directly by users.

microsoft/power-platform-skills · 53 tokens

slide-auditor

Visual layout auditor for RevealJS and Beamer slides. Checks for overflow, font consistency, box fatigue, and spacing issues. Use proactively after creating or modifying slides.

pedrohcgs/claude-code-my-workflow · 38 tokens

product-and-materials-researcher

FF&E research specialist. Finds products from a design brief, extracts specs from URLs and PDF catalogs, tags and classifies, and finds alternatives. Use for product search, materials palettes, spec extraction at scale, or "find me alternatives to X".

AlpacaLabsLLC/skills-for-architects · 58 tokens

vc-ui-ux-designer

Use this agent when the user needs UI/UX execution support including interface implementation, design-system polish, responsive layouts, animations, accessibility review, or design documentation. Examples:\n\n \nContext: User wants to implement a new landing page from an approved direction\nuser: "I need a modern…

withkynam/vibecode-pro-max-kit · 428 tokens

ffe-designer

FF&E designer and schedule manager. Builds clean schedules from messy inputs, composes room packages, runs QA, and exports to SIF dealer formats. Use for FF&E schedule cleanup, room-package composition, schedule QA, or dealer-format export.

AlpacaLabsLLC/skills-for-architects · 53 tokens

workplace-strategist

Workplace strategy consultant. Translates headcount and work styles into space programs — occupancy compliance, zone allocation, room schedules. Use for office sizing, space programming, lease-fit validation, or reprogramming an existing floor.

AlpacaLabsLLC/skills-for-architects · 51 tokens