← ClaudeAtlas

awesome-dslisted

Apply the AwesomeDesignSystem to build or refine sophisticated, modern (2026), human-feeling frontend UI that avoids generic "AI slop". Use when building or improving ANY web UI, component, landing page, dashboard, or app screen; when choosing color, typography, spacing, motion, or layout; or when the user asks to make something "modern", "polished", "sophisticated", "high-end", or "less AI-generated", or references Apple, Linear, Stripe, Vercel, Nothing, or Goodpatch. Loads the design system's taste layer first, then routes to ONLY the needed modules.
Yu-aimaker/AwesomeDesignSystem · ★ 1 · Web & Frontend · score 67
Install: claude install-skill Yu-aimaker/AwesomeDesignSystem
# AwesomeDS — the design taste layer This skill makes you design like a principal designer with taste, not like an average autocomplete. It is the **hub** of the AwesomeDesignSystem knowledge base. Work by **progressive disclosure**: read the small taste layer, then open only the 1–3 modules your task needs. Never dump the whole system into context. ## 0. Locate the knowledge base The canonical knowledge base is the `design-system/` directory at the repository root — **two levels up from this file**: `../../design-system/`. (This resolves correctly whether the repo is cloned or the skill is symlinked into your skills dir.) Its router is `../../design-system/INDEX.md`. If that path doesn't resolve, search the AwesomeDesignSystem repo for `design-system/INDEX.md`. ## 1. ALWAYS read the taste layer first (cheap, ~2 files) Before generating or judging any UI, read: - `../../design-system/00-philosophy/human-not-ai.md` — the AI-slop tells + human-feel principles + Pre-Flight checklist - `../../design-system/00-philosophy/principles.md` — the non-negotiable core principles For "what is modern" questions, also read `00-philosophy/modern-2026.md`. ## 2. Route to the modules you need (read INDEX first) Open `../../design-system/INDEX.md` and pull **only** the relevant module(s): color → `foundations/color.md`; type/日本語 → `foundations/typography.md`; spacing/grid → `foundations/spacing-layout.md`; the token contract → `foundations/tokens.md`; motion → `motion/principles.md` + `