mirror of
https://github.com/Dvorinka/SEEN.git
synced 2026-07-29 15:03:49 +00:00
small fix, don't worry about it
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user