The taste layer for screens. Interface aesthetics, visual polish, and the micro-craft that separates interfaces people tolerate from interfaces people love.
1502 skills. 84 commands. 14 domains. Modern aesthetics, landing page patterns, SaaS UI, component craft, typography, color, spacing, motion, hero sections, page patterns, responsive design, iconography, conversion design, and visual refinement — built for designers and builders who believe the details are the product.
⚠️ Disclaimer: For informational and educational purposes only. Not professional design or business advice. See DISCLAIMER.md.
There are products that work and products that feel right. The difference is in the visual layer — the shadows, the spacing, the type choices, the color calibration, the motion, the micro-details that nobody can name but everybody feels.
Most products stop at "it works." The navigation functions. The buttons click. The forms submit. But the interface feels generic, assembled from defaults, like a house built from standard parts with no architectural intent. The visual craft layer is what transforms a functional interface into one that communicates quality, builds trust, and creates preference.
That's what this repo is. The visual taste layer — every aesthetic style, every landing page pattern, every component detail, every polish technique that turns competent interfaces into beautiful ones. Where ux-101 covers how interfaces work, pixel-os covers how they look and feel.
The hierarchy is:
- Aesthetics — What visual style and personality does this interface have?
- Landing — Does the first page convert strangers into believers?
- SaaS — Do the product patterns feel intentional and premium?
- Components — Does every button, card, and input feel crafted?
- Typography — Is the type system professional and readable?
- Color — Does color serve function, brand, and delight?
- Spacing — Does the spatial system feel organized or assembled?
- Motion — Does animation add meaning or just movement?
- Hero — Does the first impression earn the scroll?
- Pages — Does every page type feel designed, not templated?
- Responsive — Does it feel native at every screen size?
- Icons — Does the icon system feel cohesive and intentional?
- Conversion — Do the visual patterns guide users to act?
- Polish — Is the last 10% of craft there?
Get the hierarchy right and people trust the product before they use it. Skip the details and they feel something's off — even if they can't say what.
Choosing an aesthetic? → /aesthetic or /mood-to-ui
Building a landing page? → /landing or /hero
Designing SaaS UI? → /dashboard or /settings
Crafting components? → /button or /card
Setting typography? → /type-scale or /font-pair
Choosing colors? → /palette or /semantic-color
Fixing spacing? → /spacing-system or /density
Adding motion? → /motion-system or /microinteraction
Polishing details? → /polish or /shadow-system
Designing full pages? → /page or /login-page
Optimizing conversion? → /convert or /cta-design
Building icons? → /icon-system or /icon-style
claude plugin add --marketplace Dragoon0x/pixel-os- Open Customize (bottom-left)
- Go to Browse plugins → Personal → +
- Select Add marketplace from GitHub
- Enter:
Dragoon0x/pixel-os
Contemporary design styles, visual movements, and the aesthetic vocabulary that defines how modern interfaces feel.
Glassmorphism. Neobrutalism. Minimalism. Soft UI. Dark aesthetics. Every visual style, when to use it, and how to execute it with craft.
Commands: /aesthetic · /style-audit · /trend-apply · /aesthetic-mix · /style-guide-visual · /mood-to-ui
Landing page patterns, hero sections, conversion design, and the page architecture that converts visitors into users.
The landing page is the handshake. 3 seconds to communicate value, 8 seconds to earn a scroll, one page to convert a stranger.
Commands: /landing · /hero · /pricing-page · /cta · /above-fold · /page-flow
Component-level visual design — buttons, cards, inputs, tables, modals, and the micro-details that make every element feel polished.
The taste is in the details. Every border radius, every shadow value, every padding choice either adds to or subtracts from overall quality.
Commands: /button · /card · /input · /component-audit · /table · /modal
SaaS interface patterns — dashboards, settings, onboarding, admin panels, and the patterns that define the SaaS experience.
SaaS has its own visual language. Every pattern has been optimized by thousands of products. Learn from all of them.
Commands: /dashboard · /settings · /onboarding-flow · /admin · /billing · /saas-audit
Typography craft for screens — type scales, font pairing, readability, and the invisible skill that makes interfaces feel professional.
90% of the interface is text. If the typography isn't right, nothing is right.
Commands: /type-scale · /font-pair · /type-hierarchy · /type-audit · /heading-design · /body-readability
Color systems, palette architecture, semantic color, dark mode color, and the science of color in interfaces.
Color is information. It creates hierarchy, signals state, communicates brand, and determines accessibility.
Commands: /palette · /semantic-color · /dark-palette · /color-contrast · /color-mood · /color-scale
Spatial systems, grid architecture, padding ratios, and the invisible structure that makes interfaces feel organized.
Spacing is the most undervalued visual design tool. Get it right and the interface feels designed. Get it wrong and nothing else fixes it.
Commands: /spacing-system · /grid · /density · /spacing-audit · /responsive-spacing · /component-spacing
Interface animation, transitions, micro-interactions, and the motion design that makes interfaces feel alive.
Motion is meaning. A button that responds. A card that lifts. A page that flows. These aren't decorations — they're communication.
Commands: /motion-system · /transition · /microinteraction · /loading-animation · /page-transition · /scroll-animation
Hero sections, above-the-fold design, first impressions, and the critical first 3 seconds of every interface encounter.
Three seconds. That's how long you have. The hero is the most important design real estate that exists.
Commands: /hero-design · /above-fold · /splash · /first-impression · /hero-animation · /hero-responsive
Complete page patterns — about, contact, 404, login, changelog, and every page type a product needs.
Every product needs the same 20+ page types. The patterns are proven. The craft is in the execution.
Commands: /page · /about-page · /login-page · /error-page · /changelog-page · /page-template
Visual adaptation across breakpoints — not just layout shifts but the visual decisions that make interfaces feel native at every size.
Responsive design is not just layout. It's visual adaptation. Font sizes, spacing, interactions — they all change.
Commands: /responsive · /mobile-visual · /breakpoint · /fluid-design · /responsive-audit · /adaptive-visual
Icon systems, illustration integration, visual assets, and the supporting elements that complete an interface.
An icon set tells you more about design quality than almost any other element. Consistency is the tell.
Commands: /icon-system · /icon-style · /icon-audit · /illustration-system · /asset-optimization · /visual-asset-library
Visual design for conversion — CTAs, pricing, trust signals, and the design that turns visitors into users without dark patterns.
Conversion design is persuasion through clarity. Not tricks — clear communication that makes the right action obvious.
Commands: /convert · /cta-design · /trust-design · /form-conversion · /pricing-visual · /onboarding-convert
The last 10% — shadows, borders, micro-details, optical adjustments, and the refinements that separate amateur from professional.
Polish is the difference between a $10K website and a $100K website. Same content, different craft.
Commands: /polish · /shadow-system · /border-system · /detail-pass · /optical-fix · /premium-finish
Part of the skill ecosystem for founders and builders:
- ux-101 — UX research, strategy, IA, interaction, accessibility
- craft-os — Creative direction, AI prompting, brand, design, taste
- build-sharp — AI product thinking and PM craft
- founder-os — Decisions, fundraising, hiring, mindset
- founder-office — CEO rhythm, systems, meetings, ops
- gtm-sharp — GTM strategy, ICP, sales motion, revenue architecture
- growth-os — PLG, distribution, viral, retention, analytics
- content-sharp — Public thinking, writing, newsletters, thought leadership
Built by Dragoon0x.
MIT License — see LICENSE. Full disclaimer — see DISCLAIMER.md. Usage terms — see TERMS.md.
The details are the product.