|
| 1 | +## Design Context |
| 2 | + |
| 3 | +### Users |
| 4 | +Developers and engineering teams who use Claude Code and want to extend it with plugins. They arrive with a specific intent: discover, evaluate, and install plugins quickly. Both individual developers seeking productivity tools and teams evaluating plugins for adoption. The interface should evoke **confidence, efficiency, and trust** -- users are installing code that runs in their development environment, so credibility signals matter. |
| 5 | + |
| 6 | +### Brand Personality |
| 7 | +**Polished, modern, trustworthy.** |
| 8 | + |
| 9 | +Voice is technical but approachable. Tone is confident without being corporate. The marketplace should feel like a curated, well-maintained ecosystem rather than a dumping ground. Passion Factory maintains this as a community resource, so it should communicate care and quality. |
| 10 | + |
| 11 | +### Aesthetic Direction |
| 12 | +- **Visual tone:** Clean and refined, similar to Vercel, Linear, or Nuxt Modules. Premium developer tool aesthetic with generous whitespace, clear hierarchy, and purposeful use of color. |
| 13 | +- **References:** Vercel Marketplace (sleek cards, trust signals), Nuxt Modules (clean grid, developer-friendly), Linear (refined spacing, dark mode excellence) |
| 14 | +- **Anti-references:** WordPress plugin directory (cluttered, ad-heavy), generic SaaS landing pages (stock photos, marketing fluff), overly playful/childish aesthetics |
| 15 | +- **Theme:** Light and dark mode (already supported via Nuxt UI). Dark mode should feel first-class, not an afterthought. |
| 16 | +- **Colors:** Nuxt UI defaults with primary color. Badge colors (amber, orange, purple, blue) for author/feature differentiation. No custom brand palette needed -- lean into the design system. |
| 17 | +- **Typography:** System font stack with Korean support (already configured). Prioritize readability and clear hierarchy over decorative typography. |
| 18 | +- **Icons:** Heroicons (UI) + Simple Icons (brand logos). Consistent sizing and alignment. |
| 19 | + |
| 20 | +### Design Principles |
| 21 | + |
| 22 | +1. **Content-first clarity** -- Plugin name, description, and install action should be instantly scannable. Every visual element must earn its place. |
| 23 | +2. **Trust through polish** -- Consistent spacing, aligned elements, and refined details signal that this marketplace (and its plugins) are well-maintained. |
| 24 | +3. **Efficient discovery** -- Users should find what they need in seconds. Search, filter, and card layout should minimize cognitive load. |
| 25 | +4. **Inclusive by default** -- WCAG AA compliance, respects reduced motion preferences, works well in both light and dark modes, supports Korean and English text. |
| 26 | +5. **Design system loyalty** -- Use Nuxt UI components and Tailwind utilities as intended. Avoid custom CSS overrides unless the design system genuinely can't express the intent. Consistency > novelty. |
0 commit comments