1
2
3
4
5
6
7
8
9
10
11
I need a **task management** application with:
- **Tech Stack:** Next.js frontend, Tailwind CSS for styling, Supabase for auth and database.
- **Core Features:** 
  - Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview.

Start by building the **main dashboard page**, containing:
- A header with navigation,
- A list of projects with their status,
- and a button to create a new project.

Provide dummy data for now, and ensure the design is clean and responsive.

1
2
3
4
5
6
7
8
9
10
다음과 같은 **작업 관리** 애플리케이션이 필요합니다:
- **기술 스택:** Next.js 프론트엔드, 스타일링을 위한 Tailwind CSS, 인증 및 데이터베이스를 위한 Supabase.
- **핵심 기능:** 프로젝트 및 작업 생성, 사용자에게 작업 할당, 마감일 알림, 대시보드 개요.

다음을 포함하는 **메인 대시보드 페이지** 구축부터 시작하세요:
- 네비게이션이 있는 헤더,
- 상태가 표시된 프로젝트 목록,
- 새 프로젝트 생성 버튼.

지금은 더미 데이터를 제공하고, 디자인이 깔끔하고 반응형이 되도록 하세요.

1
2
3
4
5
6
Create a new component called [ComponentName] with these features: 

[list features]

- Make it responsive and accessible with proper keyboard navigation.
- Include proper TypeScript typings for props, and use Tailwind for styling.

1
2
3
4
5
6
7
새로운 컴포넌트 **[ComponentName]**를 다음 기능과 함께 생성하세요:

[list features]

- 반응형(Responsive) 및 접근성(Accessible)을 지원하며, 올바른 키보드 내비게이션을 포함할 것.
- Props에 대해 올바른 TypeScript 타입을 정의할 것.
- 스타일링은 Tailwind CSS를 사용할 것.

1
2
3
4
5
Explain how this function works in simple terms, highlighting its inputs, outputs, and any side effects: 

[paste function]

What edge cases does it handle or miss? How could it be improved?

1
2
3
4
5
6
아래 함수를 간단하게 설명하세요. 

[paste function]

* 특히 입력(Inputs), 출력(Outputs), 그리고 발생할 수 있는 부작용(Side Effects)을 강조합니다.  
* 또한 이 함수가 처리하는 엣지 케이스와 놓치는 경우를 분석하고, 어떻게 개선할 수 있을지 제안하세요.

1
2
3
4
5
6
7
8
9
10
The app UI should be improved, **without changing any functionality**. 

- Keep all existing logic and state management as is.
- **Visual Enhancements:** Update the styling of the dashboard page: 
   - use a modern card design for each project listing.
   - improve the color scheme for better contrast.
   - increase padding for a cleaner layout.
- Ensure these changes do **not break any functionality or data flow**.

*Goal:* purely cosmetic improvements for a more polished look, with the app behaving exactly as before.

1
2
3
4
5
6
7
8
9
10
앱 UI를 **기능 변경 없이** 개선해야 합니다.

- 모든 기존 로직과 상태 관리를 그대로 유지하세요.
- **시각적 개선:** 대시보드 페이지의 스타일링을 업데이트하세요: 
  - 각 프로젝트 목록에 모던한 카드 디자인 사용.
  - 더 나은 대비를 위한 색상 스키마 개선.
  - 더 깔끔한 레이아웃을 위한 패딩 증가.
- 이러한 변경사항이 **기능이나 데이터 흐름을 깨뜨리지 않도록** 하세요.

*목표:* 앱이 이전과 정확히 동일하게 동작하면서 더 세련된 모습을 위한 순수한 미용적 개선.

1
2
3
4
5
Enhance the visual appeal of this component: 

[paste component]. 

Add animations, improve spacing, create a polished look while maintaining accessibility standards and responsive behavior.

1
2
3
4
5
이 컴포넌트의 시각적 매력을 향상시키세요: 

[컴포넌트 붙여넣기].

애니메이션을 추가하고, 여백을 개선하며, 세련된 외관을 만들되 접근성 기준과 반응형 동작을 유지하세요.

1
2
3
4
5
Create a **comprehensive design system** for my application.

Should support color palette, typography scale, spacing system, and component variants. 

Include dark mode support and ensure all components are accessible (WCAG AA compliant).

1
2
3
4
5
애플리케이션을 위한 **포괄적인 디자인 시스템**을 만들어주세요. 

색상 팔레트, 타이포그래피 스케일, 여백 시스템, 컴포넌트 변형을 포함하고, 다크 모드도 지원해주세요. 

모든 컴포넌트는 접근성 기준(WCAG AA)을 충족해야 합니다.

1
2
3
4
Design a responsive dashboard layout with [describe key metrics/widgets]. 

It should work well on mobile, tablet, and desktop with appropriate layout shifts. 
Include a sidebar navigation that collapses on mobile.

1
2
3
4
[핵심 지표/위젯 설명]을 포함한 반응형 대시보드 레이아웃을 설계해주세요. 

모바일, 태블릿, 데스크탑에서 모두 잘 작동하도록 적절한 레이아웃 전환이 있어야 합니다.
모바일에서는 사이드바 내비게이션이 접히도록 해주세요.

1
2
3
4
- **Sales Performance**: Bar chart comparing monthly sales.
- **Conversion Rate**: KPI widget with percentage and trend arrow.
- **Notifications Panel**: List of recent alerts/messages.
- **Task Progress**: Circular progress indicators for ongoing projects.

1
2
3
4
5
Transform this desktop-only component into a mobile-first design with responsive breakpoints: 

[paste component].

Prioritize content and interactions for small screens first, then enhance for larger screens.

1
2
3
4
5
이 데스크탑 전용 컴포넌트를 모바일 우선 디자인으로 전환하세요:

[컴포넌트 붙여넣기].

작은 화면에서 콘텐츠와 상호작용을 우선시하고, 이후 큰 화면에 맞게 확장하세요.

1
2
3
4
5
6
**Component Description**:
- A dashboard header with logo, search bar, and user profile dropdown.
- A 3-column layout showing:
  - Left: Navigation menu with icons and labels.
  - Center: Main content area with cards and charts.
  - Right: Notifications and quick actions.

1
2
3
4
5
Add subtle, performant animations to this component to enhance user experience: 

[paste component]. 

Include enter/exit animations, hover states, and micro-interactions that provide feedback without being distracting.

1
2
3
4
5
이 컴포넌트에 사용자 경험을 향상시킬 수 있는 섬세하고 성능에 영향을 주지 않는 애니메이션을 추가하세요: 

[컴포넌트 붙여넣기]. 

진입/퇴장 애니메이션, 호버 상태, 방해되지 않는 피드백용 마이크로 인터랙션을 포함하세요.

1
2
- A card-based dashboard widget showing user stats.
- Includes a header, a number counter, and an action button.

1
2
3
4
5
- **Enter/Exit Animations**: Fade-in and slide-up when the component mounts; fade-out and slide-down on unmount.
- **Hover States**: Slight scale-up and shadow on hover for cards and buttons.
- **Micro-interactions**:
  - Button click should show a ripple effect.
  - Number counter should animate from 0 to target value on load.

1
2
3
Analyze and optimize the user flow for [describe task/goal]. 

Map out each step of the journey, identify friction points, and suggest UI improvements to create a more intuitive experience with fewer steps.

1
2
3
[작업/목표 설명]에 대한 사용자 흐름을 분석하고 최적화하세요. 

여정의 각 단계를 시각화하고, 마찰 지점을 식별하며, 더 직관적이고 단계 수가 적은 경험을 위한 UI 개선점을 제안하세요.

1
2
3
4
Review these components for accessibility issues and suggest improvements: 
[paste components]. 

Check for proper keyboard navigation, screen reader support, sufficient color contrast, and appropriate ARIA attributes.

1
2
3
4
이 컴포넌트들의 접근성 문제를 검토하고 개선점을 제안하세요: 
[컴포넌트 붙여넣기]. 

키보드 내비게이션, 스크린 리더 지원, 충분한 색상 대비, 적절한 ARIA 속성 등을 확인하세요.

1
2
3
4
5
6
7
8
Our app needs to be **fully responsive** across mobile, tablet, and desktop.

- Follow a **mobile-first** strategy: prioritize the layout for small screens, then adjust for larger screens.
- Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints `sm, md, lg, xl` – no custom breakpoints unless necessary.)
- Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen.
- **Do not change the core design or functionality**, just make sure it flexibly adapts to different screen sizes.

After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width.

1
2
3
4
5
6
7
8
우리 앱은 모바일, 태블릿, 데스크톱에서 **완전히 반응형**이어야 합니다.

- **모바일 우선** 전략을 따르세요: 작은 화면을 위한 레이아웃을 우선시하고, 그 다음 큰 화면에 맞게 조정하세요.
- 반응형 디자인을 위한 현대적인 UI/UX 모범 사례를 사용하세요. (Tailwind CSS의 경우, 표준 breakpoint `sm, md, lg, xl`을 사용하세요 – 필요하지 않다면 커스텀 breakpoint는 사용하지 마세요.)
- 모든 페이지(특히 대시보드와 프로젝트 상세 페이지)가 작은 화면에서 적절히 재배치되도록 하세요: 필요에 따라 요소들이 쌓이거나 크기가 조정되어야 하고, 텍스트는 읽기 가능하게 유지되어야 하며, 콘텐츠가 화면 밖으로 넘치지 않아야 합니다.
- **핵심 디자인이나 기능을 변경하지 마세요**, 단지 다양한 화면 크기에 유연하게 적응하도록 하세요.

변경 후, iPhone 12 크기와 일반적인 데스크톱 너비에서 레이아웃을 다시 확인해주세요.

1
2
3
4
5
6
7
8
Refactor the **ProjectList component file**, but **keep its behavior and UI exactly the same**. 

Goals:
- Improve the code structure and readability (simplify complex functions, break into smaller ones if needed).
- Remove any unused variables or imports.
- Ensure the file follows best practices and is well-documented.

Do **not** introduce any new features or change how the component works for the user – this is purely a code cleanup for maintainability. If any part of the code is unclear, add a brief comment for clarification.

1
2
3
4
5
6
7
8
**ProjectList 컴포넌트 파일**을 리팩토링하되, **동작과 UI를 정확히 동일하게 유지**하세요.

목표:
- 코드 구조와 가독성 개선 (복잡한 함수 단순화, 필요시 더 작은 함수로 분할).
- 사용하지 않는 변수나 import 제거.
- 파일이 모범 사례를 따르고 잘 문서화되도록 보장.

새로운 기능을 도입하거나 사용자에게 컴포넌트가 작동하는 방식을 변경하지 **마세요** – 이는 유지보수성을 위한 순수한 코드 정리입니다. 코드의 어떤 부분이 불분명하다면, 명확성을 위한 간단한 주석을 추가하세요.

1
2
3
4
5
6
7
8
Please **focus only on the Dashboard page** for this change. 

- Do **not modify** the `LoginPage.tsx` or `AuthProvider.tsx` files at all (authentication is working well, and we want to keep it intact).
- Concentrate your code edits on `Dashboard.tsx` and related dashboard components **only**.

Task: Add a new section to the Dashboard that shows "Tasks due this week". Make sure to fetch the relevant tasks from the database. 

*(Again, no changes to login or auth files – those are off-limits.)*

1
2
3
4
5
6
7
8
이 변경사항에 대해서는 **대시보드 페이지에만 집중**해주세요.

- `LoginPage.tsx` 또는 `AuthProvider.tsx` 파일을 전혀 **수정하지 마세요** (인증이 잘 작동하고 있어서 그대로 유지하고 싶습니다).
- `Dashboard.tsx`와 관련된 대시보드 컴포넌트에**만** 코드 편집을 집중하세요.

작업: 대시보드에 "이번 주 마감 작업"을 보여주는 새로운 섹션을 추가하세요. 데이터베이스에서 관련 작업을 가져오도록 하세요.

*(다시 말하지만, 로그인이나 인증 파일은 변경하지 마세요 – 그것들은 금지구역입니다.)*

1
2
3
4
5
6
7
8
Before writing any code, **plan out the implementation** of the new Notifications feature.

- List each step required to add email notifications when a task is overdue.
- Consider both frontend (UI changes, if any) and backend (creating scheduled checks or triggers) aspects.
- Ensure the plan keeps the current functionality stable – we can't break anything existing.
- Provide the plan as an ordered list (1, 2, 3, ...), with a brief explanation of each step.

Once you outline the plan, pause for review. **Do not make any code changes yet.**

1
2
3
4
5
6
7
8
코드를 작성하기 전에, 새로운 알림 기능의 **구현을 계획**하세요.

- 작업이 지연될 때 이메일 알림을 추가하는 데 필요한 각 단계를 나열하세요.
- 프론트엔드(UI 변경사항이 있다면)와 백엔드(예약된 확인이나 트리거 생성) 측면을 모두 고려하세요.
- 계획이 현재 기능을 안정적으로 유지하도록 하세요 – 기존의 것을 깨뜨릴 수 없습니다.
- 각 단계에 대한 간단한 설명과 함께 순서가 있는 목록(1, 2, 3, ...)으로 계획을 제공하세요.

계획을 개요화한 후, 검토를 위해 잠시 멈추세요. **아직 코드 변경사항을 만들지 마세요.**

1
2
3
4
5
6
7
8
9
10
11
12
13
I want to **add Stripe payments** to the app.

- Use **Stripe in test mode** for now.
- We have a product in Stripe with ID `prod_12345` and a price ID `price_67890` (one-time purchase).
- Implement a checkout button on the **Pricing page** that starts a Stripe checkout for that product.
- After successful payment, redirect the user to `/payment-success`. If the payment is canceled, redirect to `/payment-cancelled`.

Important:
- Assume API keys and webhook secrets are configured securely (do **not** hard-code them).
- Do **not** modify any other pages or features unrelated to payments.

Once done, provide any webhook endpoint setup instructions I need 
(e.g., URL to add in Stripe dashboard for post-payment events).

1
2
3
4
5
6
7
8
9
10
11
12
13
앱에 **Stripe 결제를 추가**하고 싶습니다.

- 지금은 **테스트 모드에서 Stripe**를 사용하세요.
- Stripe에 ID가 `prod_12345`인 제품과 가격 ID `price_67890`(일회성 구매)이 있습니다.
- **가격 페이지**에 해당 제품에 대한 Stripe 체크아웃을 시작하는 체크아웃 버튼을 구현하세요.
- 결제 성공 후, 사용자를 `/payment-success`로 리디렉션하세요. 결제가 취소된 경우, `/payment-cancelled`로 리디렉션하세요.

중요사항:
- API 키와 웹훅 시크릿이 안전하게 구성되어 있다고 가정하세요 (하드코딩하지 **마세요**).
- 결제와 관련 없는 다른 페이지나 기능을 **수정하지 마세요**.

완료되면, 필요한 웹훅 엔드포인트 설정 지침을 제공하세요 
(예: 결제 후 이벤트를 위해 Stripe 대시보드에 추가할 URL).

1
2
3
STRIPE_SECRET_KEY=sk_test_***
STRIPE_PUBLISHABLE_KEY=pk_test_***
STRIPE_WEBHOOK_SECRET=whsec_***

1
2
3
4
Design a database schema for [describe your application] with these entity relationships: 
[describe relationships].

Include foreign key constraints, indexes for performance, and proper data types with considerations for scalability.

1
2
3
4
다음 엔티티 관계를 가진 [애플리케이션 설명]을 위한 데이터베이스 스키마를 설계하세요: 
[관계 설명]. 

성능을 위한 인덱스, 외래 키 제약조건, 확장성을 고려한 적절한 데이터 타입을 포함하세요.

1
2
3
4
Enhance the visual appeal of this component: 
[paste component]. 

Add animations, improve spacing, create a polished look while maintaining accessibility standards and responsive behavior.

1
2
3
4
Design a database schema for [describe your application] with these entity relationships: 
[describe relationships]. 

Include foreign key constraints, indexes for performance, and proper data types with considerations for scalability.

1
2
3
Create a service to fetch data from [API name] and implement caching, error retry logic, and request throttling. 

Set up proper TypeScript interfaces for the response data and handle API versioning gracefully.

1
2
3
4
Create Row Level Security policies for a multi-tenant application with these tables: 
[list tables]. 

Implement proper user isolation, role-based access, and handle hierarchical data access with considerations for performance.

1
2
3
Create a Supabase Edge Function to handle [describe functionality] with proper error handling, input validation, and security checks. 

Include rate limiting and proper environment variable usage.

1
2
3
Implement real-time data synchronization for [describe feature] using Supabase subscriptions. 

Handle connection management, graceful degradation when offline, and conflict resolution.

1
Implement a robust search feature for [describe content type] with filtering, sorting, and highlighting of matched terms. Include typeahead suggestions, recent searches, and proper handling of no-results scenarios.

1
2
3
Create a data table/grid for [describe data] with sorting, filtering, pagination, column resizing, and row selection. 

Include features for exporting data and customizing visible columns.

1
2
3
Build a system for importing and exporting [describe data] in various formats (CSV, JSON, etc.). 

Include validation, progress indicators, error handling, and the ability to map fields during import.

1
2
3
Create a set of interactive charts for [describe data/metrics] using Recharts. 

Include different visualization types (bar, line, pie), time period selection, drill-down capabilities, and responsive behavior.

1
2
3
Implement a strategy for synchronizing offline data changes with a backend when connectivity is restored. 

Handle conflict resolution, optimistic UI updates, and provide visual indicators for sync status.

1
2
3
Create a multi-step form wizard for collecting [describe data] with validation, progress tracking, the ability to save drafts, and a summary review before submission. 

Handle conditional form fields based on previous answers.

1
2
3
Connect this Lovable project to GitHub and set up a good workflow for contributions. 

Include branch protection rules, PR templates, and CI/CD workflow configuration with automatic preview deployments.

1
2
3
이 Lovable 프로젝트를 GitHub에 연결하고 기여를 위한 좋은 워크플로우를 설정하세요.

브랜치 보호 규칙, PR 템플릿, 자동 미리보기 배포가 포함된 CI/CD 워크플로우 구성을 포함하세요.

1
2
3
4
Refactor this large component into smaller, more manageable components: 
[paste component]. 

Extract reusable parts, implement proper prop passing, maintain state management, and ensure the refactoring doesn't break existing functionality.

1
2
3
Suggest a testing strategy for [component/feature] including what to test and how. 

Include unit tests for business logic, integration tests for data flow, and UI tests for critical user flows with best practices for mocking dependencies.

1
2
3
4
Implement comprehensive error handling for this async function: 
[paste function]. 

Include retry logic, fallback mechanisms, proper error reporting, user-friendly error messages, and logging for debugging purposes.

1
Set up a deployment pipeline for this application that includes staging and production environments, automatic database migrations, environment-specific configurations, and rollback capabilities.

1
2
3
Analyze and optimize this user flow: [describe flow]. 

Suggest improvements for user experience, reduce friction points, implement progressive enhancement, and ensure accessibility throughout.

1
2
3
4
5
User: 
Before you write any code, please review the Knowledge Base and share your understanding of my project.

AI (likely response): 
"Sure. Based on the Knowledge Base: You're building a task management app for teams. The app flow is Users sign up -> see a dashboard -> create projects and tasks. The tech stack is Next.js for frontend, Supabase for backend (authentication and database). Core features include project creation, task assignments, and a reporting dashboard. In-scope features: task CRUD, user roles, email notifications; Out-of-scope: real-time collaboration. The design should follow a clean corporate style with Tailwind CSS, and it needs to be responsive. Backend uses Supabase with row-level security for multi-tenant data separation..."

1
2
3
4
5
사용자:
코드를 작성하기 전에, 지식 베이스를 검토하고 내 프로젝트에 대한 이해를 공유해주세요.

AI (예상 응답): 
"물론입니다. 지식 베이스에 따르면: 팀을 위한 작업 관리 앱을 구축하고 있습니다. 앱 플로우는 사용자 가입 -> 대시보드 보기 -> 프로젝트 및 작업 생성입니다. 기술 스택은 프론트엔드용 Next.js, 백엔드용 Supabase(인증 및 데이터베이스)입니다. 핵심 기능은 프로젝트 생성, 작업 할당, 보고 대시보드를 포함합니다. 범위 내 기능: 작업 CRUD, 사용자 역할, 이메일 알림; 범위 외: 실시간 협업. 디자인은 Tailwind CSS로 깔끔한 기업 스타일을 따라야 하며, 반응형이어야 합니다. 백엔드는 다중 테넌트 데이터 분리를 위한 행 수준 보안과 함께 Supabase를 사용합니다..."