mirror of
https://github.com/Dvorinka/SEEN.git
synced 2026-07-29 15:03:49 +00:00
60 lines
2.1 KiB
Markdown
60 lines
2.1 KiB
Markdown
# UI Product Standards
|
|
|
|
Read this file when designing screens, choosing components, or judging whether a UI is ready to ship.
|
|
|
|
## Product Bar
|
|
|
|
- Build interfaces that feel like real production software, not prototypes.
|
|
- Optimize for consistent layout, clear hierarchy, predictable UX, strong performance, and scalable composition.
|
|
- Keep the interface calm, premium, structured, and intentional.
|
|
|
|
## Design Direction
|
|
|
|
- Use generous whitespace and a steady layout rhythm.
|
|
- Keep typography clean, readable, and deliberate.
|
|
- Use refined color with restraint.
|
|
- Prefer modern minimalism over visual noise.
|
|
- Avoid cluttered layouts, inconsistent spacing, and generic AI-looking compositions.
|
|
|
|
## Component Strategy
|
|
|
|
- Use a design-system-first mindset.
|
|
- Check Magic UI MCP first when it is available.
|
|
- Check shadcn or shadcn-solid before building custom components.
|
|
- Read `/home/tdvorak/.codex/skills/frontend-design/SKILL.md` for design-heavy or blank-canvas frontend work.
|
|
- Inspect existing project components before creating something new.
|
|
- Use Tailwind utilities where practical and prefer composition over custom overrides.
|
|
|
|
## Interaction and Motion
|
|
|
|
- Use subtle transitions, clear hover states, and responsive feedback.
|
|
- Keep animation in service of clarity rather than decoration.
|
|
- Avoid heavy or distracting motion.
|
|
- Prioritize performance.
|
|
- Use `https://haptics.lochie.me/` as a motion reference when useful.
|
|
|
|
## Quality Targets
|
|
|
|
Aim for the polish level associated with products such as Linear, Vercel, Stripe Dashboard, Supabase, and Notion without copying them directly.
|
|
|
|
## UI Rules
|
|
|
|
- Make layouts mobile responsive by default.
|
|
- Support dark and light mode unless the task clearly does not need both.
|
|
- Keep components accessible.
|
|
- Use a predictable spacing scale and consistent border radii.
|
|
- Avoid emojis in the UI unless the user explicitly asks for them.
|
|
|
|
## Final Review
|
|
|
|
Before finishing, confirm that the interface has:
|
|
|
|
1. Clean whitespace
|
|
2. Consistent spacing
|
|
3. Readable typography
|
|
4. Strong visual hierarchy
|
|
5. Balanced layout
|
|
6. Responsive behavior
|
|
|
|
If the result still looks generic or autogenerated, redesign it.
|