home / skills / atrislabs / atris / design

design skill

safe

This skill enforces distinctive frontend aesthetics for UI, components, and pages by applying Atris design policies to avoid generic AI layouts.

npx playbooks add skill atrislabs/atris --skill design

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.7 KB

---
name: design
description: Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look.
version: 1.0.0
allowed-tools: Read, Write, Edit, Bash, Glob
tags:
  - design
  - frontend
---

# atris-design

Part of the Atris policy system. Prevents ai-generated frontend from looking generic.

## Atris Integration

This skill uses the Atris workflow:
1. Check `atris/MAP.md` for existing patterns before building
2. Reference `atris/policies/atris-design.md` for full guidance
3. After building, run `atris review` to validate against this policy

## Quick Reference

**Typography:** avoid inter/roboto/system fonts. pick one distinctive font, use weight extremes (200 vs 800).

**Color:** commit to a palette. dark backgrounds easier to make good. steal from linear.app, vercel.com, raycast.com.

**Layout:** break the hero + 3 cards + footer template. asymmetry is interesting. dramatic whitespace.

**Motion:** one well-timed animation beats ten scattered ones. 200-300ms ease-out.

**Backgrounds:** add depth. gradients, patterns, mesh effects. flat = boring.

## Before Shipping Checklist

Run through `atris/policies/atris-design.md` "before shipping" section:
- can you name the aesthetic in 2-3 words?
- distinctive font, not default?
- at least one intentional animation?
- background has depth?
- would a designer clock this as ai-generated?

## Atris Commands

```bash
atris            # load workspace context
atris plan       # break down frontend task
atris do         # build with step-by-step validation
atris review     # validate against this policy
```

## Learn More

- Full policy: `atris/policies/atris-design.md`
- Navigation: `atris/MAP.md`
- Workflow: `atris/PERSONA.md`

Overview

This skill enforces a frontend aesthetics policy to prevent AI-generated interfaces from looking generic. It guides font choice, color palettes, layout decisions, motion, and backgrounds so UIs feel deliberate and distinctive. Use it as a lightweight guardrail during design and implementation to raise visual quality quickly.

How this skill works

The skill inspects planned UI patterns and implementation choices against a compact design checklist. It recommends a distinctive font, a committed color palette, purposeful layout variations, and restrained motion. After implementation, run a validation step to flag default patterns and suggest concrete fixes to add depth and personality.

When to use it

Building landing pages, marketing sites, or product heroes
Designing dashboards, admin panels, or data-heavy interfaces
Creating UI components or theming systems for apps
Authoring prototypes where visual identity must feel intentional
Before final QA to catch generic AI-style visuals

Best practices

Choose one distinctive typeface (avoid Inter/Roboto/system fonts) and use weight contrasts for hierarchy
Commit to a small, cohesive palette; prefer darker backgrounds when appropriate
Break common templates: favor asymmetry and dramatic whitespace over strict grids
Use one well-timed animation (200–300ms ease-out) rather than many competing motions
Add background depth with gradients, patterns, or mesh effects instead of flat fills
Name the aesthetic in 2–3 words to keep decisions focused and consistent

Example use cases

Turn a default hero + three-cards layout into an asymmetric hero with layered background depth
Audit a dashboard UI and swap the default system font for a distinctive typeface with high contrast weights
Replace scattered micro-animations with a single, purposeful transition for state changes
Design a landing page palette inspired by established products (e.g., linear/vercel/raycast) while keeping originality
Run a pre-shipping checklist to confirm the UI won't read as generic AI output

FAQ

Does this skill replace a designer?

No. It provides focused rules and checks to raise visual quality and reduce generic results, but a designer is still recommended for nuanced brand work.

What animation timing should I use?

Prefer one primary animation at 200–300ms with an ease-out curve; keep other motions minimal and purposeful.

Which fonts are acceptable?

Avoid system defaults and common AI-recommended fonts; pick a single distinctive typeface with clear weight extremes (e.g., 200 vs 800).