Remix

Make your own version of Atelier Workspace

Get an exact, working copy in your account, then change anything with chat.

Original by Renu Jain

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Build the foundation of a polished web app called "Atelier" — a fashion design project workspace made specifically for fashion-design students.

IMPORTANT:
- This is only Phase 1. Do NOT build the full product yet.
- Do NOT add AI features or any paid AI API.
- Do NOT add authentication yet.
- Do NOT add a backend/database yet unless required by the platform for basic persistence.
- Do NOT add color theory, fabric matching, jewelry tools, moodboards, presentation generation, technical-flat generation, or other advanced features yet. We will build those in later phases.
- Prioritize a clean, functional foundation that we can expand later without rewriting the app.

TECHNOLOGY:
- Use React + TypeScript.
- Make the application responsive for desktop, tablet, and mobile.
- Use a clean component-based architecture.
- Keep the code organized and easy to extend.

PRODUCT CONCEPT:
Atelier is not a generic task-management app. It is a structured workspace where a fashion student can keep an entire fashion project connected in one place while still using other professional tools such as Photoshop, Illustrator, Procreate, CLO, etc.

The central concept is:
Project → Concept → Designs → Materials/Colors → Development → Presentation.

PHASE 1 FEATURES:

1. DASHBOARD
Create a beautiful dashboard showing the student's projects.

Each project card should show:
- Project name
- Short description
- Last updated
- Number of designs
- A visual cover image or placeholder
- "Open project" button

Include:
- "Create new project" button
- Search projects
- Simple project sorting/filtering
- Empty state for users with no projects

2. CREATE PROJECT
Create a simple project creation flow.

Fields:
- Project name
- Description
- Cover image (optional)
- Project category/type (optional)
- Date created

After creation, open the new project workspace.

3. PROJECT WORKSPACE
This is the most important part of Phase 1.

Create a project page with a clear fashion-design workflow/navigation.

Sections should be:

- Overview
- Inspiration
- Concepts & Designs
- Colors
- Materials
- Development
- Presentation

For now, only Overview and Concepts & Designs need to be functional.

The other sections should exist as clearly marked navigation items with attractive "Coming in the next phase" states. Do NOT implement their actual functionality yet.

4. PROJECT OVERVIEW
Show:
- Project cover
- Project name
- Description
- Last updated
- Progress indicator
- Number of designs
- Recent activity

Include a short editable project description.

5. DESIGN CARDS
Create the foundation for the central design system.

A project should allow the student to create multiple designs.

Each design should be represented by a visual card containing:
- Design name/number
- Main image or placeholder
- Short description
- Status
- Last updated

Example:
"Look 01"
"Look 02"
"Look 03"

Allow:
- Create design
- Edit design
- Delete design
- Duplicate design
- Open design

6. DESIGN DETAIL PAGE
Create a basic design detail page.

Include:
- Design name
- Main image upload
- Description
- Notes
- Status
- Created date
- Last updated

Also create empty placeholder areas for:
- Colors
- Materials
- Sketches
- References

These areas should visually communicate that later phases will connect these things to each design.

7. NAVIGATION
Create a consistent navigation system.

Desktop:
- Sidebar

Mobile:
- Responsive navigation/menu

The user should always know:
- Which project they are inside
- Which section they are viewing
- How to return to the dashboard

8. VISUAL DESIGN
The UI should feel like a modern fashion-design workspace, NOT a generic corporate task manager.

Design goals:
- Editorial
- Minimal
- Sophisticated
- Visual
- Spacious
- Strong typography
- High-quality cards and image layouts
- Subtle animations/transitions
- Excellent empty states
- Professional enough for a fashion student portfolio

Avoid:
- Generic SaaS dashboard appearance
- Excessive gradients
- Excessive rounded cards
- Huge unnecessary buttons
- Emoji-heavy UI
- Clutter

Use neutral colors with an elegant fashion/editorial feel.

9. SAMPLE DATA
Include a small amount of realistic demo content so the interface doesn't look empty on first launch.

For example:
Project:
"Fluid Forms"

Description:
"Exploring movement, transparency and fluid silhouettes."

Include 3 example designs.

Make it obvious that this is demo data and allow the user to delete it.

10. DATA STRUCTURE
Structure the app so projects and designs are separate reusable entities.

Conceptually:

Project:
- id
- name
- description
- coverImage
- category
- createdAt
- updatedAt
- designs[]

Design:
- id
- projectId
- name
- image
- description
- notes
- status
- createdAt
- updatedAt

Make the architecture easy to extend later with:
- inspiration images
- palettes
- materials
- sketches
- references
- presentation pages

IMPORTANT UX PRINCIPLE:
Everything added later should be connected to a specific project and, where appropriate, to a specific design.

The goal of Phase 1 is NOT to have lots of features.

The goal is to create a beautiful, stable foundation for a fashion student's project workspace that we can build upon in later phases.

Before finishing, make sure all Phase 1 navigation, project creation, design creation, editing, duplication, deletion, image uploading, and responsive layouts work correctly.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.