A collection of UI design skills for premium digital products.

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/<skill-name>/ to your repo
2. Register it in README.md or AGENTS.md:
   • editorial-designer: ... (file: skills/editorial-designer/SKILL.md)
   • apple-ui-designer: ... (file: skills/apple-ui-designer/SKILL.md)
3. Use: $editorial-designer <request> or $apple-ui-designer <request>

Codex (global):

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

Atelier UI provides multiple design skills for different aesthetics:

Brings the refined aesthetic of fashion editorials and magazine layouts to digital product design. Interfaces feel curated, confident, and intentional.

Applies iOS Human Interface Guidelines and modern Apple design language. Interfaces feel native, calm, and inevitable — like first-party Apple apps.

Applies iOS material system with tasteful glass effects (translucency, blur, depth). Glass is used as a tool for hierarchy and focus — not as decoration. Perfect for modern iOS interfaces that need layered depth without overdoing glassmorphism.

This example showcases a fashion e-commerce app designed with editorial 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

This Apple Music "Now Playing" UX case study demonstrates Apple-native design principles:

• Translucency & Depth — Frosted glass dock and sheets create layered visual hierarchy
• Progressive Disclosure — Information reveals contextually through swipe-up dock interaction
• System-like Components — Native bottom sheets, standard iOS control layouts
• Touch Target Clarity — Large, comfortable hit areas for playback controls
• Color Restraint — Accent color (pink) used sparingly, letting content breathe
• Gesture-first Design — Swipe-up dock, drag-to-dismiss sheets feel native to iOS

This iOS home screen demonstrates the glass material system in action:

• Material Hierarchy — Different blur/opacity levels based on content needs (weather vs reminders vs controls)
• Background Adaptation — Glass intensity scales with background complexity
• Legibility First — Text remains clear despite translucency
• Restraint — Glass only where it aids hierarchy, not everywhere
• Depth Without Borders — Separation achieved through material, not outlines
• System Consistency — All glass surfaces feel unified and native

• 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.

• Fashion, lifestyle, and premium brand experiences
• Landing pages with bold typography
• 20s-30s urban audience targeting

• iOS-native mobile apps
• Apps following Human Interface Guidelines
• Native-feeling system UI components

• iOS apps with layered UI (sheets, overlays, floating controls)
• Interfaces needing depth and material hierarchy
• Modern iOS aesthetic with restrained glassmorphism

editorial-designer 스킬을 사용해서 App.css를 수정해줘

Use editorial-designer to redesign my landing page with fashion magazine aesthetics

apple-ui-designer 스킬로 설정 화면을 iOS 네이티브 스타일로 바꿔줘

Use apple-ui-designer to make my app feel like a native iOS application

ios-glass-ui-designer 스킬로 바텀시트에 글래스 효과 적용해줘

Use ios-glass-ui-designer to add tasteful glass materials to my navigation overlay

We welcome contributions! Here's how to submit a PR:

1. Fork this repository
2. Add your image to images/ directory
3. Update documentation:
   • Add example section in main README.md under "Design Examples"
   • If skill-specific, update the skill's README.md (e.g., skills/apple-ui-designer/README.md)
4. Submit PR with:
   • Clear title describing the addition
   • Screenshot/image in PR description
   • Brief explanation of design principles demonstrated

1. Fork this repository
2. Edit the relevant SKILL.md file:
   • skills/editorial-designer/SKILL.md
   • skills/apple-ui-designer/SKILL.md
   • skills/ios-glass-ui-designer/SKILL.md
3. Submit PR with:
   • Rationale for the change
   • Examples demonstrating the updated guideline

## Summary
Brief description of changes

## Type
- [ ] New design example
- [ ] Design guideline update
- [ ] Documentation fix
- [ ] New skill

## Checklist
- [ ] Images optimized (< 1MB recommended)
- [ ] Documentation updated
- [ ] Follows existing style conventions

• Keep PRs focused and atomic
• Provide visual examples when adding design guidelines
• Respect the existing design philosophy of each skill

MIT