How do I install the Atris Design skill?

Run npx skillmds add majiayu000/atris-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Atris Design skill do?

Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look. It is listed under Web & Frontend on SkillMD.

Is Atris Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Atris Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Atris Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Atris Design?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Atris Design by majiayu000 — Agent Skill

Name: Atris Design
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

atris-design

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

Atris Integration

This skill uses the Atris workflow:

Check atris/MAP.md for existing patterns before building
Reference atris/policies/atris-design.md for full guidance
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

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

Frequently asked questions