# Design Ui

> Build or redesign frontend UI that doesn't look templated or AI-generated. Use when creating components, pages, landing pages, or restyling existing UI — before writing CSS/markup, and before shipping any visual work.

- **Type:** Skill
- **Install:** `agentstack add skill-vasu-devs-forge-design-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [vasu-devs](https://agentstack.voostack.com/s/vasu-devs)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [vasu-devs](https://github.com/vasu-devs)
- **Source:** https://github.com/vasu-devs/Forge/tree/main/skills/design-ui

## Install

```sh
agentstack add skill-vasu-devs-forge-design-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

```
██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗      ██╗   ██╗██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║      ██║   ██║██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║█████╗██║   ██║██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║╚════╝██║   ██║██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║      ╚██████╔╝██║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝       ╚═════╝ ╚═╝
```

# Design UI with taste (anti-slop)

Default AI design fails because it reaches for statistical clichés. This skill replaces "looks fine" with deliberate, checkable taste. The premise: bad AI UI is *predictable*, so the fixes can be mechanical.

## Start with a Design Read + dials
Before any markup, state one line: *"Reading this as a `` for ``, vibe ``, leaning ``."* Then set three dials (1-10) and let them drive choices:
- **DESIGN_VARIANCE** — low = clean/centered; high = asymmetric/editorial
- **MOTION_INTENSITY** — low = hover/focus transitions only; mid = entrance + scroll reveals; high = scroll-scrub/parallax/magnetic
- **VISUAL_DENSITY** — low = spacious; high = dense dashboard

The dials are **constraints, not decoration** — let the value gate the technique: `MOTION_INTENSITY ≤ 3` → no scroll-jacking/parallax, hover/focus only; `VISUAL_DENSITY ≤ 3` → generous whitespace, one primary action per view. If a choice violates its dial, change the choice.

## Commit to one direction
Pick a single aesthetic and execute it fully — minimalist editorial (Notion/Linear), high-end agency, brutalist/industrial, etc. Averaging directions produces mush. If the user hasn't chosen, propose one with rationale.

## Mechanically-checkable anti-slop bans
These are the AI tells; treat them as hard checks, not suggestions:
- **No em-dash in UI copy.** Binary ban — not "use sparingly." (Em-dashes are the #1 AI-text tell.)
- **No Inter/Roboto as the default font**, and no system-font-stack-by-default. Use ≥2 deliberate weights/sizes from a stated type scale (name the ratio, e.g. 1.25).
- **No AI-purple / generic gradient-on-white hero.** No `#8B5CF6`-family default gradients.
- **No three-equal-cards row** as the default content layout.
- **Eyebrow restraint:** at most ~1 uppercase-tracked "eyebrow" label per 3 sections. Count them; if more, cut.
- **Kill the cheap defaults — by rendered property, not framework class:** no hairline neutral-gray 1px border on every surface; no single uniform low-opacity drop shadow on everything (`shadow-md`-equivalent); no default `linear`/`ease-in-out` timing. Use intentional borders, layered/soft shadows, and ≥1 custom easing or spring. (Tailwind names are just examples — the rule is the *rendered property*, so it applies equally on vanilla CSS, styled-components, SwiftUI, etc.)

## Verify visually — never ship CSS blind
Render the real view (dev-preview harness + headless browser / Playwright with system Chrome), then **re-read the screenshots** — don't infer from CSS. Make it a mechanical gate: capture at **390 / 768 / 1280 px** widths, save to a scratch dir, and forbid "done" unless those files exist *and you've inspected them* for spacing, hierarchy, contrast, overflow, and small-screen fit. A screenshot you never open is not verification. (This is `forge:verify` applied to pixels.)

## Pre-flight gate
Before "done," tick: direction committed · type deliberate · spacing rhythm consistent · hierarchy clear · states (hover/focus/empty/error) handled · responsive checked · **text contrast ≥ 4.5:1 (WCAG AA) on the rendered output** · **visible focus ring on every interactive element** · **all motion gated behind `prefers-reduced-motion: no-preference`** · all bans above honestly clear · rendered-and-eyeballed. If any box can't be honestly ticked, it isn't finished.

## Note
For *reference-image-first* workflows (generate comps, then build to match), the `tasteskill:imagegen-*` and `tasteskill:image-to-code` skills complement this — this skill is the code-side taste enforcer.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [vasu-devs](https://github.com/vasu-devs)
- **Source:** [vasu-devs/Forge](https://github.com/vasu-devs/Forge)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-vasu-devs-forge-design-ui
- Seller: https://agentstack.voostack.com/s/vasu-devs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.