# Design System

> Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.

- **Type:** Skill
- **Install:** `agentstack add skill-archive228-loopkit-design-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Archive228](https://agentstack.voostack.com/s/archive228)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Archive228](https://github.com/Archive228)
- **Source:** https://github.com/Archive228/loopkit/tree/main/skills/design-system

## Install

```sh
agentstack add skill-archive228-loopkit-design-system
```

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

## About

# Design System
Default AI UI is gray, centered, and timid. Don't ship that.
- **Type** — one distinctive display face + one clean body face. Real scale (e.g. 12/14/16/20/28/40), not everything 16px.
- **Color** — one strong accent, a real neutral ramp, intentional contrast. No 5 competing brand colors.
- **Space** — a spacing scale (4/8/12/16/24/32...). Generous whitespace. Align to a grid.
- **Motion** — purposeful only: feedback on action, transitions on state. No decorative bounce.
- **Hierarchy** — one clear focal point per screen. Size, weight, and space do the work, not borders everywhere.
Before done: would a senior designer ship this, or does it look like a default Tailwind template? If the latter, push the contrast and the type.

## Source & license

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

- **Author:** [Archive228](https://github.com/Archive228)
- **Source:** [Archive228/loopkit](https://github.com/Archive228/loopkit)
- **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-archive228-loopkit-design-system
- Seller: https://agentstack.voostack.com/s/archive228
- 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%.