This document describes Same.dev's design philosophy and its integration with shadcn/ui as the standard UI component framework. It covers the component installation workflow, the mandatory customization requirement, file organization patterns, design constraints, and the continuous improvement process through screenshot analysis.
For information about Same.dev's overall web development practices, see Web Development Best Practices. For details on code editing and validation workflows, see Code Editing and Validation Workflow.
Same.dev mandates the use of shadcn/ui for all web application development to maintain a flexible and modern codebase. The system emphasizes that shadcn/ui provides a foundation that must be heavily customized, not a set of components to be used as-is.
The system specifies an exact CLI invocation pattern for adding shadcn/ui components:
Command flags breakdown:
bunx: Uses bun's package runner (not npx)shadcn@latest: Always pulls the latest version-y: Auto-confirms prompts-o: Overwrite existing files flagSources: Same.dev/Prompt.txt99 Same.dev/Prompt.txt264
Critical workflow constraint: The system enforces that component customization must occur BEFORE building the main application. Default shadcn/ui components are explicitly prohibited from appearing in production applications.
Sources: Same.dev/Prompt.txt99-100 Same.dev/Prompt.txt264-265
shadcn/ui components are installed into a standardized directory structure within the project workspace.
Standard path: components/ui/{component-name}.tsx
Sources: Same.dev/Prompt.txt100 Same.dev/Prompt.txt265
Same.dev documents the full set of available shadcn/ui components. Each component corresponds to a specific file in the components/ui directory.
| Component Category | Component Files |
|---|---|
| Form Controls | button.tsx, input.tsx, textarea.tsx, checkbox.tsx, radio-group.tsx, switch.tsx, slider.tsx, select.tsx, combobox.tsx, form.tsx, label.tsx |
| Navigation | navigation-menu.tsx, menubar.tsx, breadcrumb.tsx, tabs.tsx, pagination.tsx |
| Data Display | card.tsx, table.tsx, badge.tsx, avatar.tsx, separator.tsx, skeleton.tsx |
| Feedback | alert.tsx, toast.tsx, progress.tsx, use-toast.tsx |
| Overlays | dialog.tsx, popover.tsx, dropdown-menu.tsx, context-menu.tsx, sheet.tsx, tooltip.tsx, hover-card.tsx, use-dialog.tsx |
| Date/Time | calendar.tsx, date-picker.tsx |
| Advanced | command.tsx, collapsible.tsx, scroll-area.tsx, toggle.tsx |
Total component count: 43+ components available for installation and customization.
Sources: Same.dev/Prompt.txt100 Same.dev/Prompt.txt265
Same.dev enforces a strict policy against using default shadcn/ui components. This is one of the most emphasized constraints in the system prompt.
Key enforcement statements:
The system treats component customization as a matter of professional pride and user experience quality.
Sources: Same.dev/Prompt.txt100 Same.dev/Prompt.txt265
Same.dev explicitly prohibits the use of emojis in web applications.
Rule: NEVER user emojis in your web application.
This constraint applies to all UI contexts including:
Sources: Same.dev/Prompt.txt101 Same.dev/Prompt.txt266
Same.dev enforces specific color usage guidelines to prevent overuse of certain color families.
Restricted color families:
Exceptions: These colors may be used if explicitly specified in the user prompt or present in an attached image.
Sources: Same.dev/Prompt.txt102 Same.dev/Prompt.txt267
Same.dev treats responsive design as a non-negotiable requirement.
Rule: You MUST generate responsive designs.
This mandate applies to:
There are no exceptions to this requirement. Every design must function correctly across mobile, tablet, and desktop breakpoints.
Sources: Same.dev/Prompt.txt103 Same.dev/Prompt.txt268
Same.dev implements a feedback loop system for iterative design improvement through screenshot analysis.
Screenshot analysis triggers:
versioning tool executiondeploy tool executionAnalysis objectives:
User feedback integration: The system actively solicits user feedback and remembers preferences across iterations to personalize future design decisions.
Sources: Same.dev/Prompt.txt104-105 Same.dev/Prompt.txt269-270
The design standards integrate with Same.dev's broader web development workflow through specific tool interactions.
| Tool | Design Integration | Purpose |
|---|---|---|
startup | Initial shadcn/ui setup | Creates components/ui directory structure |
edit_file | Component customization | Modifies individual component files |
run_linter | Design validation | Catches styling errors post-customization |
versioning | Design checkpoint | Generates screenshots for analysis |
deploy | Production design | Final visual validation |
suggestions | Design iteration | Proposes next improvements |
Workflow sequence: Install → Customize → Validate → Version → Deploy → Analyze → Iterate
Sources: Same.dev/Prompt.txt98-105 Same.dev/Prompt.txt263-270
The shadcn/ui integration relies on Same.dev's package management system, which uses bun as the standard package manager.
Critical command pattern:
bunx (not npx) for shadcn CLI@latest version-y -o flagsThis pattern aligns with Same.dev's broader preference for bun over npm throughout the development workflow (see Web Development Best Practices).
Sources: Same.dev/Prompt.txt79 Same.dev/Prompt.txt99 Same.dev/Prompt.txt244 Same.dev/Prompt.txt264
Same.dev's approach to design can be characterized by several core principles:
This philosophy positions Same.dev as a system that values design quality and originality while providing standardized tooling for consistent implementation.
Sources: Same.dev/Prompt.txt98-105 Same.dev/Prompt.txt263-270
Refresh this wiki