AI 프로그래밍 도구를 사용하여 멋진 프런트엔드 페이지를 생성하는 방법을 알려드립니다.

소개

어떤 이유로? AI 프로그래밍 도구 보기 좋은 프론트엔드 페이지와 그렇지 않은 페이지를 생성하는 근본적인 문제는 이러한 도구가 모든 종류의 프론트엔드 사양을 제한하는 프론트엔드 페이지 생성에 대한 전체 단서 집합을 설계했다는 것입니다. 이러한 단서 단어는 길고...

프롬프트 단어가 길 뿐만 아니라 프런트 엔드 페이지를 생성하려면 많은 토큰을 출력해야 합니다.... 그렇기 때문에 많은 토큰이 claude 완전한 프런트엔드 페이지 코드의 공식 생성은 종종 중단됩니다.

AI가 멋진 프론트엔드 페이지를 생성하기 위해서는 프론트엔드 페이지에 필요한 프롬프트 단어를 생성하는 것과 프론트엔드 페이지 코드를 완전히 생성하는 두 가지 문제를 해결해야 합니다.

실천에 옮기다

1. 프런트 엔드 페이지에 필요한 프롬프트 단어를 생성합니다.

첫 번째 방법은 매우 긴 단서 단어가 필요하지 않고 질문과 제약을 유도하는 방법을 배우는 것입니다.

첫 번째 단서 단어

作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

두 번째 단서 단어

核心群体是饲养宠物的群体，用户使用产品目标是为宠物购买玩具和视频。用户会在所有设备上使用产品。产品主要功能模块有：首页（展示不同的宠物类别、商品类别）、购物结算页面、宠物购物清单页面、用户中心。没有特别的品牌色彩要求。界面使用多语言。用户一般每周光顾一次。产品没有特殊可访问性要求。

참고: 간단한 공식 웹사이트 대화에서는 출력 코드가 완전하지 않을 수 있으므로 요구 사항을 단순화하고 먼저 일반적인 페이지 샘플 코드를 가져온 다음 전체 웹 페이지 코드를 개선해야 합니다.

두 번째 방법은 명확한 텍스트 단서나 그림을 예로 사용하는 것입니다.

예를 들어 첫 번째 팁 단어에 다음 UI 스타일 팁을 추가합니다:

또는 UI 디자인 사이트로 이동하여 원하는 페이지 스타일을 선택하세요:

이 부분에서는 생성된 프런트 엔드 페이지의 효과를 보여주지 않으며, 데모의 다음 부분에 넣습니다.

2. 프론트엔드 페이지 코드 생성 완료

에 직접 들어가지 마십시오. chatgpt 또는 Claude를 사용하여 전체 프런트엔드 코드를 생성하려고 하면 출력이 충분하지 않고 다계층 프로젝트 코드를 작성할 수 없습니다. 그렇기 때문에AI 프로그래밍 도구오점과 커서 모두 좋은 선택이지만, 이번에는 잠재적으로 덜 효과적인 트레아로 시도하여 결론이 어디인지 측정해 보겠습니다.

1. 우선, 완전한 프로젝트가 있어야하며 아름답 든 아니든 신경 쓸 필요가 없으며 완전히 기능하기 만하면됩니다.

여기서는 무작위 샘플 페이지를 생성하겠습니다.

2. AI 도구로 프런트엔드 최적화 솔루션 제공

作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

产品经理的需求：
偏好：玻璃拟态（Glassmorphism）
优化页面样式：index.html

先不要生成代码，仅给我前端样式优化建议

이 대화는 주로 AI 프로그래밍 도구 제안을 참조하며 코드 변경이 필요하지 않으므로 채팅 모드 대화로 전환됩니다.

권장 사항은 다음과 같습니다:

基于产品经理的需求和现有的二手车租赁网站，我来提供一些设计优化建议：

1. **玻璃拟态风格的应用**
- 将搜索栏和车辆卡片改用玻璃拟态效果，增加背景模糊和透明度
- 添加subtle的光效和渐变，提升高级感
- 考虑在hover状态下增加玻璃材质的光泽变化

2. **配色方案优化**
- 当前的深蓝色(#1e3a8a)略显沉重，建议改用更现代的渐变色
- 可以考虑使用紫蓝色渐变，如 `from-indigo-500 to-purple-500`
- 背景可以添加柔和的渐变和动态效果

3. **布局优化**
- 将搜索栏固定在顶部，实现毛玻璃效果
- 车辆卡片采用网格布局，但增加不规则间距，提升视觉趣味性
- 考虑使用 Masonry 布局，让卡片高度自适应

4. **交互体验提升**
- 为卡片添加平滑的悬浮动画
- 点击时添加ripple效果
- 搜索按钮添加微动效

5. **视觉细节优化**
- 使用 unsplash 的高质量汽车图片，可以考虑固定风格
- 添加subtle的背景图案或几何形状
- 增加适当的阴影层次
- 字体可以考虑更现代的无衬线字体

6. **响应式设计建议**
- 使用 Tailwind 的响应式类
- 在移动端保持玻璃拟态效果但降低模糊度
- 优化触摸区域大小

7. **性能优化建议**
- 使用 Tailwind 的 JIT 模式
- 图片使用 lazy loading
- 考虑使用 webp 格式图片

8. **无障碍性考虑**
- 确保足够的颜色对比度
- 添加适当的 ARIA 标签
- 支持键盘导航

3. 프론트엔드 스타일 최적화 수행

我给出以下问题
作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

产品经理的需求：
偏好：玻璃拟态（Glassmorphism）
优化页面样式：index.html

前端设计师给出以下建议：
{引用AI编程工具给出的建议}

现在开始优化前端页面

효과:

뭔가 빠졌어요...

스타일이 분리되지 않음 (튜토리얼 스타일 분리의 첫 번째 단계를 완료하고 텍스트와 코드의 중복을 줄인 다음 프런트 엔드 스타일 최적화를 수행하는 것이 가장 좋습니다. 그렇지 않으면 웹 페이지 코드의 양이 너무 많아서 불완전한 페이지가 생성되고 품질의 프런트 엔드 최적화도 감소합니다).

2."언스플래시 임의 사진 사용"이라는 프롬프트 지침은 이 문장이 효과적이지 않아 페이지에 사진 자리 표시자가 누락됩니다. (언스플래시 공식 통화 이미지 규칙이 변경되어 큰 모델은 아직 이해하지 못했습니다.)

4. 위의 문제를 기반으로 한 전반적인 튜닝

먼저 프로젝트별 문제별 분석의 다양한 특성에 따라 페이지 코드의 양에 대한 문제를 해결합니다.

이미지 플레이스홀더 문제를 수정하여 이번에는 언스플래시를 호출하는 대신 배경 플레이스홀더를 사용하겠습니다.

효과 표시(아직 못생긴 듯...)

이런 종류의 웹 사이트 흑백 미니멀리스트 스타일이 더 좋을 수도 있습니다. 참조 사진을 업로드하고 효과를 다시 생성하십시오.

5. 문서 디자인에 따른 스타일 설명 파일, 기타 페이지 디자인을 생성합니다.

경험 공유

1. Claude-3.7-Sonnet 기반의 AI 프로그래밍 도구를 사용합니다.

프론트엔드 코드를 생성한 후 백엔드 코드를 입력합니다.

3. 스타일 노트 문서를 보관합니다.

4. 더 이상 복잡한 프로젝트에서 UI를 직접 최적화하지 말고, UI 솔루션을 별도로 생성해 보세요:

你是一位全栈工程师，同时精通产品规划和UI设计。
我现在想要开发一个“冥想”iOS App，需要输出一套完整的APP原型图，请按照下面的要求执行：
- 模拟真实用户使用冥想类APP的真实场景和需求；
- 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互；
- 结合产品规划，以设计师的视角去输出完整的UI/UX；
- 以上全部页面都在同一个html文件中展示。

5. 더 많은 UI 참조 차트를 사용하고, 너무 보기 흉한 페이지 생성을 방지하기 위해 몇 가지 예제를 제공합니다.