Atelier UI

Editorial-driven UI design skill for premium digital products.

Installation

Via Marketplace:

claude /plugin marketplace add heyman333/atelier-ui
claude /plugin install heyman333@atelier-ui

To update:

claude /plugin marketplace update atelier-ui

Codex (project-scoped):

1. Add skills/editorial-designer/ to your repo
2. Register it in README.md or AGENTS.md:
   • editorial-designer: ... (file: skills/editorial-designer/SKILL.md)
3. Use: $editorial-designer <request>

Codex (global):

1. Copy the folder to $CODEX_HOME/skills/editorial-designer (usually ~/.codex/skills/)
2. Use: $editorial-designer <request>

Overview

Atelier UI brings the refined aesthetic of fashion editorials and magazine layouts to digital product design. When activated, Claude designs interfaces that feel curated, confident, and intentional.

Design Example

This example showcases a fashion e-commerce app designed with Atelier UI principles:

• Bold Typography — "GET READY TO SLAY IN STYLE" demonstrates confident, editorial-style headlines
• Dark & Light Contrast — Strategic use of dark cards against light backgrounds creates visual depth
• Accent Color Strategy — Yellow serves as a cohesive accent throughout, from clothing imagery to UI elements
• Minimal UI Chrome — Clean buttons, subtle icons, and text-based navigation reduce visual noise
• Card-Based Layout — Rounded corners and generous padding create a premium, tactile feel
• Whitespace as Design — Intentional breathing room guides the eye and elevates content

Design Principles

• Typography-first — Large, expressive headlines with strong visual hierarchy
• Monochrome foundation — White, off-white, black, charcoal, beige
• Editorial tension — Intentional asymmetry, broken grids, generous whitespace
• Minimal affordances — Flat buttons, text-based actions, trust user intuition
• Subtle motion — Opacity, translate, scale ≤ 1.05. No bounce or spring.

When This Skill Activates

Claude automatically uses this skill when you ask to:

• Build web components or pages
• Create landing pages or dashboards
• Design React/Vue/HTML components
• Style or beautify any web UI

Target Context

• 20s–30s urban users
• iOS-first mobile apps
• Fashion, lifestyle, and premium brand experiences

License

MIT