skills.rest
atrislabs
atrislabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

atris-design

Apply the Atris design policy to frontend typography, color, layout, motion, and backgrounds.

67|3|Updated Oct 20, 2025
Search Tags:#typography#frontend#color#aesthetics#motion#design-policy
One-click install
npx skills add https://github.com/atrislabs/atris --skill atris-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: atris-design
Source: https://github.com/atrislabs/atris/tree/main/.claude/skills/atris-design
Command: npx skills add https://github.com/atrislabs/atris --skill atris-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend AI outputs can look generic. This policy enforces distinctive typography, color palettes, layouts, and motion to create unique, polished interfaces that align with brand.

Core Features & Use Cases

  • Typography: avoid default system fonts; select a distinctive font and use weight extremes.
  • Color & Layout: commit to a palette; use dramatic whitespace and asymmetry.
  • Motion: one purposeful animation to add depth.
  • Use Case: building a landing page or dashboard that stands out.

Quick Start

Example: After starting a UI task, run atris plan, then atris do, and finish with atris review to apply this policy.

Frequently Asked Questions about atris-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make frontend designs look less generic and more distinctive?▼

Apply a design policy that enforces distinctive typography, cohesive color palettes, deliberate layouts, and purposeful motion. This Skill applies the Atris design policy to typography, color, layout, motion, and backgrounds across UI components, landing pages, and dashboards to create polished, brand-aligned interfaces instead of default AI-generated aesthetics.

What's the best way to choose typography and colors for a frontend UI?▼

Commit to a distinctive font with weight extremes and a deliberate color palette, then apply them consistently across your interface. This Skill guides you through selecting typography and color strategies, using dramatic whitespace and asymmetry to create cohesive visual systems rather than relying on system defaults.

How do I add motion and depth to frontend components without overdoing it?▼

Incorporate one purposeful animation that adds depth to your interface. This Skill helps you design well-timed motion that enhances user experience and visual polish while maintaining focus on layout and typography as primary design drivers.

Can I use this design approach for landing pages and dashboards?▼

Yes. This Skill applies its design policy to landing pages, dashboards, UI components, and design briefs. It covers typography, color, layout, motion, and backgrounds, enabling you to create distinctive, polished interfaces across different frontend contexts.

How do I validate that my frontend design follows a consistent policy?▼

Run a design review process to ensure your work satisfies requirements for distinctive typography, cohesive color palettes, deliberate layouts, well-timed motion, and depth-rich backgrounds. This Skill includes review validation to confirm your design adheres to the Atris design policy.

What's the workflow for applying a design policy to an existing UI project?▼

Start with plan to outline your design strategy, execute with do to apply the policy across typography, color, layout, and motion, then finish with review to validate the results. This three-step workflow ensures comprehensive, policy-aligned design implementation.

Related Skills

Explore More Design & Creative Skills→
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
danielctcdanielctc

frontend-design

Convert design briefs and screenshots into React, Vue, or vanilla frontend code.

Community
Advanced
JochenYangJochenYang
21

frontend-design

Create production-grade frontend interfaces with typography, color, motion, and accessibility.

Community
Advanced
sanand0sanand0
11

design

Create front-end designs with CSS typography, color variables, motion, and layered backgrounds.

Community
Basic