Le enseñamos a utilizar herramientas de programación de inteligencia artificial para generar hermosas páginas front-end.

introducción

¿Por qué razón? Herramientas de programación de IA El problema fundamental para generar páginas frontales que se vean bien y las tuyas que no, es que estas herramientas han diseñado todo un conjunto de claves para generar páginas frontales que limitan todo tipo de especificaciones frontales. Estas claves son largas...

No sólo las palabras de aviso son largas, sino que la generación de la página front-end requiere la salida de muchos, muchos tokens... Por eso encontrarás muchos tokens en el archivo claude A menudo se interrumpe la generación oficial del código completo de la página front-end.

Hay dos problemas que resolver para que la IA genere hermosas páginas front-end: generar las palabras de aviso necesarias para la página front-end, y generar el código de la página front-end por completo.

poner en práctica

1. Generar las palabras de aviso necesarias para la página del front-end

Introducir el primer método, que no requiere palabras clave superlargas, sino aprender a dirigir las preguntas y las limitaciones.

Primera ronda de palabras clave

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

Segunda ronda de palabras clave

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

Nota: En el diálogo de la página web oficial de claude, el código de salida puede no estar completo, tiene que simplificar los requisitos, primero obtener un código de muestra de la página típica, y luego tratar de mejorar el código completo de la página web.

El segundo método, que utiliza pistas textuales claras o imágenes como ejemplos

Por ejemplo, añada el siguiente consejo de estilo de interfaz de usuario a la primera palabra del consejo:

O vaya a un sitio de diseño de interfaz de usuario y elija un estilo de página que le guste, por ejemplo:

Esta parte no muestra el efecto de la página front-end generada, puesta en la siguiente parte de la demostración.

2. Generación completa del código de la página front-end

No entre directamente en el chatgpt o Claude para intentar generar el código completo del front-end, su salida no es lo suficientemente larga y no pueden construir código de proyecto de múltiples capas. Por eso tenemos que elegir unHerramientas de programación de IALa mancha y el Cursor Todas buenas opciones, pero esta vez lo probaremos con el potencialmente menos efectivo Trea para calibrar dónde está el fondo.

1. En primer lugar, debe haber un proyecto completo, no es necesario preocuparse por si es bonito o no, sólo tiene que ser totalmente funcional

Aquí voy a generar una página de muestra aleatoria

2. Dejar que las herramientas de IA ofrezcan soluciones de optimización front-end

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

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

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

Esta ronda de diálogo se refiere principalmente a las sugerencias de la herramienta de programación de IA y no requiere cambios en el código, por lo que pasa al diálogo en modo Chat

Las recomendaciones son las siguientes:

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

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. Optimización del estilo del front-end

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

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

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

现在开始优化前端页面

Efecto:

Falta algo...

1. el estilo no está separado (es mejor completar el primer paso en la separación de estilo tutorial, y reducir la duplicación de texto y código, y luego front-end optimización de estilo, de lo contrario la cantidad de código de página web será demasiado grande para conducir a la generación de una página incompleta, la optimización front-end de la calidad también se reducirá)

2. La instrucción "uso unsplash imagen al azar", esta frase no es eficaz, lo que resulta en la página que falta marcador de posición de imagen. (Unsplash reglas oficiales de imagen de llamada han cambiado, el gran modelo aún no ha entendido).

4. Ajuste general basado en las cuestiones anteriores

En primer lugar resolver el problema de la cantidad de código de la página, para diferentes características del proyecto de análisis específico del problema específico

Arreglar el problema del marcador de posición de la imagen, esta vez no vamos a llamar a unsplash, pero utilizar el marcador de posición de fondo en su lugar.

La pantalla de efectos (parece que sigue siendo fea...)

Tal vez este tipo de sitio web en blanco y negro estilo minimalista es mejor, subir la imagen de referencia y volver a generar el efecto

5. Generar un archivo de descripción de estilo, otro diseño de página debido al diseño del documento

Intercambio de experiencias

1. Utilice la herramienta de programación de IA basada en Claude-3.7-Sonnet.

2. Sr. en el código back-end, tras la generación del código front-end

3. Conservar el documento de nota de estilo

4. No optimice más la interfaz de usuario directamente en proyectos complejos, intente generar la solución de interfaz de usuario por separado:

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

5. Utilizar más gráficos de referencia de interfaz de usuario, proporcionar algunos ejemplos para evitar la generación de páginas demasiado feas