커서 AI 디자인 모드 핵: 꿈꿔왔던 앱 디자인, 클릭 한 번으로 현실로! (feat. Tailwind, Shadcn)

 

커서 AI 디자인 모드 핵: 꿈꿔왔던 앱 디자인, 클릭 한 번으로 현실로! (feat. Tailwind, Shadcn)

더 이상 복잡한 디자인 툴에 시간을 낭비하지 마세요! 본 글에서는 커서 AI의 숨겨진 기능, "디자인 모드"를 활용하여 웹상에서 마주치는 모든 디자인을 손쉽게 복사하고 자신만의 앱에 적용하는 방법을 소개합니다. Tailwind, Shadcn 등 인기 프레임워크와 완벽하게 호환되는 이 놀라운 기술을 통해 디자인 영감을 얻고 앱 개발 속도를 극적으로 향상시켜 보세요.

1. 커서 AI 디자인 모드란 무엇인가?

커서 AI 디자인 모드는 웹사이트, 앱, 심지어 손으로 그린 스케치까지, 모든 디자인을 커서 AI 에이전트에게 제시하고 코드로 변환하도록 지시하는 강력한 기능입니다. 기존에는 V0와 같은 별도 도구를 사용해야 했던 작업을 커서 AI 내에서 직접 처리할 수 있어 디자인 워크플로우를 획기적으로 단축시켜 줍니다.

2. 디자인 모드의 핵심 장점

• 압도적인 생산성 향상: 디자인 작업 시간을 획기적으로 단축하고, 코딩에 더 많은 시간을 투자할 수 있습니다.
• 무한한 디자인 영감: 웹상에서 마주치는 모든 디자인을 복사하여 자신만의 스타일로 재창조할 수 있습니다.
• 최신 기술 트렌드 반영: Tailwind, Shadcn 등 최신 프레임워크를 활용하여 트렌디한 디자인을 손쉽게 구현할 수 있습니다.
• 손쉬운 사용법: 복잡한 설정 없이 간단한 복사 & 붙여넣기만으로 디자인을 적용할 수 있습니다.

3. 디자인 모드 사용 방법: 30단계 가이드

다음은 커서 AI 디자인 모드를 활용하여 앱 디자인을 복사하고 적용하는 방법을 30단계로 세분화한 가이드입니다.

준비물:

• 커서(Cursor) AI 코드 편집기
• Tailwind CSS
• Shadcn UI (선택 사항)
• 디자인 영감을 얻을 웹사이트 또는 이미지 (Pinterest, Dribbble, 21st.dev 등)

단계별 설정:

1. 커서 AI 다운로드 및 설치: 커서 AI 웹사이트 (cursor.sh)에서 커서를 다운로드하여 설치합니다.
2. 새 프로젝트 생성: 커서를 실행하고 새로운 프로젝트 폴더를 생성합니다.
3. 터미널 열기: 커서에서 터미널을 열어 다음 명령어를 실행하여 Next.js 프로젝트를 초기화합니다.
4. npx create-next-app@latest
5. Tailwind CSS 설정 확인: Tailwind CSS가 Next.js 프로젝트에 기본적으로 설치되어 있는지 확인합니다.
6. Shadcn UI 설치 (선택 사항): Shadcn UI 컴포넌트 라이브러리를 사용하려면 다음 명령어를 실행하여 설치합니다.
7. npx shadcn-ui@latest init
8. 커서 규칙 파일 생성: 프로젝트 폴더에 cursor_rules.txt 파일을 생성합니다.
9. 커서 규칙 설정: cursor_rules.txt 파일에 다음과 같은 규칙을 추가합니다.
10. Start all chats with 🤖 React Nextjs
11. 이모지 추가 (선택 사항): 규칙 파일에 이모지를 추가하여 AI가 규칙을 인식하고 있는지 확인합니다. (예: "Start all chats with 🤖")
12. 노트패드 생성: 커서 하단의 "새로운 노트패드"를 클릭하여 새로운 노트패드를 생성합니다.
13. 디자인 모드 활성화 프롬프트 작성: 노트패드에 디자인 모드 활성화를 위한 프롬프트를 작성합니다.
14. We are in design mode. We are not going to be building any backend functionality. We're just going to use dummy JSON in order to mock up prototyping of our application.
15. 디자인 모드 활성화: 작성한 프롬프트를 복사하여 커서 에이전트에게 전달합니다.
16. 디자인 영감 얻기: Pinterest, Dribbble, 21st.dev 등 다양한 웹사이트에서 앱 디자인 영감을 얻습니다.
17. 디자인 복사: 마음에 드는 디자인 요소를 캡처하거나, 코드를 복사합니다.
18. AI 창 열기: 커서 우측 상단의 AI 창을 열고, "작성자 모드" (Composer Mode)를 선택합니다.
19. 컨텍스트 추가: AI 창 하단의 컨텍스트 설정에서 cursor_rules.txt 파일과 디자인 모드 프롬프트를 추가합니다.
20. 복사한 디자인 붙여넣기: 복사한 디자인 요소 (이미지, 코드 등)를 AI 창에 붙여넣습니다.
21. 디자인 적용 요청: 커서 에이전트에게 복사한 디자인을 기반으로 대시보드를 생성하도록 요청합니다.
    • (프롬프트 #1): "Let's set up a dashboard on our Next JS web app and have it look exactly like this screenshot that I've attached here."
22. AI 응답 확인: 커서 에이전트가 디자인을 분석하고 코드를 생성하는 과정을 확인합니다.
23. 코드 변경 사항 확인: 커서가 생성한 코드 변경 사항을 확인하고, 필요한 경우 수정합니다.
24. 테마 변경 요청: 커서 에이전트에게 테마 색상 변경 등 디자인 변경을 요청합니다.
    • (프롬프트 #2): "Let's change the theme to dark mode and I want accents of yellow and also change the name of the site to Build with AI."
25. 하단 공백 문제 해결: 하단에 흰색 공백이 발생하는 경우, 커서 에이전트에게 배경색을 변경하도록 요청합니다.
    • (프롬프트 #3): "The bottom of the page is white so I think we need to make the background of the entire page match with the background of the container, let's make it black."
26. 코드 검토 및 적용: 커서 에이전트가 제시한 코드 변경 사항을 검토하고 적용합니다.
27. 21st Dev 활용 (선택 사항): 21st.dev와 같은 웹사이트에서 제공하는 컴포넌트를 활용하여 앱 디자인을 더욱 풍성하게 만듭니다.
28. 컴포넌트 통합 프롬프트 복사: 21st.dev에서 컴포넌트 통합을 위한 확장된 프롬프트를 복사합니다.
29. 커서에 프롬프트 붙여넣기: 복사한 프롬프트를 커서 에이전트에게 전달합니다.
    • (프롬프트 #4): (21st.dev에서 복사한 프롬프트 붙여넣기)
30. 프롬프트 수정 (선택 사항): 필요한 경우 프롬프트를 수정하여 원하는 디자인을 구현합니다.
31. 코드 오류 수정: 코드 오류가 발생하는 경우, 오류 메시지를 복사하여 커서 에이전트에게 전달하고 수정을 요청합니다.
    • (프롬프트 #5): (오류 메시지 붙여넣기) "Okay so now it's listening use MPX Shad SPN never use the command Shad CN UI and then let's run this command"
32. 개선 및 테스트: 디자인을 개선하고 다양한 해상도에서 테스트하여 반응형 디자인을 확인합니다.
33. 애니메이션 속도 조절: 애니메이션 속도가 너무 느린 경우, 커서 에이전트에게 속도 조절을 요청합니다.
    • (프롬프트 #6): "It's not moving, can we change the speed to fast and see if that helps?"
    • (프롬프트 #7): "That's better but can you multiply the speed by three?"
34. 결과 확인 및 코드 저장: 완성된 디자인을 확인하고, 코드를 저장합니다.

4. 추가 팁: 생산성을 극대화하는 디자인 팁

• 피그마(Figma) 활용: 28:00 기존 디자인 툴인 피그마(Figma)를 활용하여 SVG 파일 내보내기 등을 사용하면 퀄리티를 더욱 높일 수 있습니다.
• 릴롬(Reloom) 활용: 04:12 Reloom 을 사용하여 빠른 프로토타입을 만들 수 있습니다.
• Dribbble & Pinterest 활용: 05:27 Dribbble과 Pinterest에서 디자인 영감을 얻고, 다양한 스타일을 조합하여 자신만의 개성을 표현합니다.
• Shadcn UI 적극 활용: Shadcn UI 컴포넌트 라이브러리를 활용하여 UI 개발 속도를 향상시키고 코드 퀄리티를 높입니다.
• 21st Dev 활용: 32:03 21st Dev를 활용하여 다양한 컴포넌트 라이브러리에서 확인하고 사용합니다.
• 꾸준한 학습과 탐구: 커서 AI, Tailwind, Shadcn 등 관련 기술을 꾸준히 학습하고 탐구하여 활용 능력을 향상시킵니다.

5. 결론: 커서 AI 디자인 모드, AI 시대 프론트엔드 개발의 새로운 패러다임

커서 AI 디자인 모드는 AI 시대를 맞아 프론트엔드 개발 방식을 혁신적으로 변화시키는 강력한 도구입니다. 본 가이드를 통해 커서 AI 디자인 모드를 마스터하고, 꿈꿔왔던 앱 디자인을 손쉽게 현실로 만들어 보세요!

프롬프트 예시 요약:

1. "Let's set up a dashboard on our Next JS web app and have it look exactly like this screenshot that I've attached here."
2. "Let's change the theme to dark mode and I want accents of yellow and also change the name of the site to Build with AI."
3. "The bottom of the page is white so I think we need to make the background of the entire page match with the background of the container, let's make it black."
4. (21st.dev에서 복사한 컴포넌트 통합 프롬프트)
5. (오류 메시지 붙여넣기) "Okay so now it's listening use MPX Shad SPN never use the command Shad CN UI and then let's run this command"
6. "It's not moving, can we change the speed to fast and see if that helps?"
7. "That's better but can you multiply the speed by three?"

 

Number of Distinct Prompts (Explicit and Implied): 14

 

Here's the breakdown, presented in a clear and orderly fashion:

1. (To Cursor Agent - Initial Project Setup): "I want to install nextjs into this folder how do I do that" [To make sure user did nextjs correctly]
2. (To Cursor Agent - Tailwind Assistance):"I want to install Shad CN please" [Making sure user did tailwind correctly]
3. (To Cursor Agent - Design setup):"You are going to create a separate landing page for our website it's for a company called switch Dimension that uh does AI training around AI development and building out web apps and agents and there is also an associated Community with that so let's create all that into the landing page and add some kind of a sign up link and give us a big hero at the top um that says uh build with AI and sorry the color scheme will remain the same we're going to have a uh dark mode website with um yellow accents" [Create a goodlooking design]
4. (To Cursor Agent - Create a goodlooking design):"Let's set up a dashboard on our next GS web app and have it look exactly like this uh screenshot that I've attached here" [Have the code follow a design]
5. (To Cursor Agent - Color Palette of dashboard):"let's change the theme to dark mode and I want accents of yellow and also change the name of the site to uh build with AI" [Change the color]
6. (To Cursor Agent - Background issues):"the bottom of the page is white so I think we need to make the background of the entire page match with the background of the container let's make it black" [There is no Background Color]
7. (To Cursor Agent - Run the files):"I can't see the website how do I um how do I run this so I can see the website is there some kind of a command " [How to run the files]
8. (To Cursor Agent - Install Reacharts): "do I want to install recharts so I'm going to run that command" [How to run the files]
9. (To Cursor Agent - Add Aeternity UI components): (Pasting copied prompt from 21st Dev including structure like “Given a task to integrate react component Co component should have this space and then it's basically got snippets from each one of the files that need to be created it and it dictates you know which file goes where so it's basically copying everything in in one big prompt" ) [Pulling components from 21st Dev]
10. (To Cursor Agent - Problem of use): " okay so now it's listening use MPX Shad SPN never use the command Shad CN UI and then let's run this command" [Use and run command]
11. (To Cursor Agent - Set Main Hero): "oh I didn't mean to do that let's add this to the main Hero on the landing page in the background" [Add Hero for front cover]
12. (To Cursor Agent - Speed issues):"it's not moving can we change the speed to fast and see if that helps" [Speed issues]
13. (To Cursor Agent - Speed times three): "That's better but can you multiply the speed by three" [Adjust the Speed]
14. (To Cursor Agent - Fix speed settings): So I want you to find all the places where the get speed function exists throughout the code and then I want you to set that to 30000"

Key Points and Nuances:

• The Importance of Scaffolding: The user emphasizes setting up the project with Next.js, Tailwind, and Shadcn first to provide a solid foundation for the AI. This reduces ambiguity and improves the quality of the generated code.
• Leveraging Existing Resources: The user actively seeks out pre-built components and designs from sources like Tailwind Awesome, Dribbble, and 21st Dev, then uses the AI to adapt and integrate these elements into their project.
• Iterative Refinement as a Key Strategy: The user rarely provides a single, perfect prompt. Instead, they use a cycle of: prompting, evaluating, identifying issues, and then providing follow-up prompts to address those issues.
• Explicit Technology Choices: The user consistently specifies the technologies to use (React, Next.js, Tailwind, Shadcn), ensuring the AI stays within the desired tech stack.
• Using Specific language and giving context to what code should be edited.

 more accurate and nuanced understanding of the prompts and the strategies employed in the YouTube video. It highlights the importance of project setup, resource utilization, iterative refinement, and clear communication with the AI to achieve desired results.