atris-design
- Repo stars 330
- License MIT
- Author repo claude-skill-registry
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.mdfor existing patterns before building - Reference
atris/policies/atris-design.mdfor full guidance - After building, run
atris reviewto 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
- Fluxly category
- Data
- Author-declared agents
- No explicit declaration found; this is not inferred or tested compatibility
- Static check
- 94 / 100 · heuristic scan, not runtime safety proof
- Author / version / license
- @majiayu000 · MIT
- Fluxly token estimate
- Lean
- Fluxly setup estimate
- Plug-and-play
- External API key
- No requirement detected
- Detected OS requirements
- Unspecified
- Runtime requirements
- Unspecified
- Detected file/system behavior
-
- Read-only
- Detected network behavior
- Local-only
- Install commands
- None (reference only)
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
The current SKILL.md does not define a fixed output example. This skill uses the Atris workflow: Check atris/MAP.md for existing patterns before building Reference atris/policies/atris-design.md for full guidance
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 +…
Run through atris/policies/atris-design.md "before shipping" section: can you name the aesthetic in 2-3 words? distinctive font, not default?
Atris Commands
Full policy: atris/policies/atris-design.md Navigation: atris/MAP.md Workflow: atris/PERSONA.md
# 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` Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.
sections -> Atris Integration → Quick Reference → Before Shipping Checklist → Atris Commands → Learn More
terms -> Typography · Color · Layout · Motion · Backgrounds
files/cmd -> atris/MAP.md · atris/policies/atris-design.md · atris review · atris/PERSONA.md
body sha256 -> 91557c7b92a4
Decide Fit First
Design Intent
How To Use It
Boundaries And Review